feat(Accordion): add new filled variant (#2065)

* feat: add new accordion props

* feat: update Accordion API

* feat: add alternate api

* feat: add bordered variant

* feat: add baseheader to accordion

* feat: allow multiple items

* fix: remove border gap

* feat: add size in context

* feat: add new API

* feat: update for new changes

* feat: add open question

* feat: replace JSX with ReactNode

* feat: add size prop on BaseHeader

* feat: adjust centerbox for baseheader size

* feat: keep old description API working

* feat: add size to deprecated icon

* feat: add jsdoc for accordion

* fix: showNumberPrefix prop

* fix: react-native-reanimated bug

* fix: Accordion for React Native

* feat: update docs example

* fix: example api

* tests: update snapshots

* fix: weird ts error

* feat: add stopPropagation to link

* fix: baseheader test

* feat: align chevron correctly

* fix: icon alignment in react native

* fix: snapshots

* revert rn sb change

* feat: update to solid | transparent variant naming

* feat: rename variant values

* fix: ts

* fix: remove isExpanded from header

* fix: add disabled prop to BaseHeader

* fix: add disabled item

* feat: add disabled to accordionitem

* feat: handle cursor on web

* resolve anurag's comments

* docs: add real world examples

* feat: add validation

* feat: add metaAttributes

* feat: update variant value names

* Create late-planes-destroy.md

* docs: reword migration list

* remove code tag

.changeset/late-planes-destroy.md

@@ -0,0 +1,46 @@
+---
+'@razorpay/blade': minor
+---
+
+feat(Accordion): add new `filled` variant
+
+New variant can be used to build individual filled Accordions like these
+
+<img width="400" alt="image" src="https://github.com/razorpay/blade/assets/30949385/7f3d737f-149a-42b0-be1b-1c86d5a0fd83">
+
+> [!Warning]
+>
+> Accordion has a new API and the current API will be deprecated and removed in next major version
+
+#### Migration from existing API
+
+We have added `AccordionItemHeader` and `AccordionItemBody` components.
+
+Props like `icon`, `title`, `description` from AccordionItem are deprecated.
+
+- `icon` on AccordionItem can be replicated with `leading` on AccordionItemHeader
+- `title` moves from AccordionItem to AccordionItemHeader
+- `description` from AccordionItem can be passed to AccordionItemBody as children
+
+##### Diff
+
+```diff
+<Accordion>
+  <AccordionItem
+-    icon={StarIcon}
+-    title="This is title"
+-    description="Body content of Accordion"
+  />
+</Accordion>
+```
+
+```diff
+<Accordion>
+  <AccordionItem>
++    <AccordionItemHeader leading={<StarIcon size="large" />} title="This is title" />
++    <AccordionItemBody>Body content of Accordion</AccordionItemBody>
+  </AccordionItem>
+</Accordion>
+```
+
+Checkout full documentation at https://blade.razorpay.com/?path=/docs/components-accordion--docs

packages/blade/.storybook/react-native/storybook.requires.js

@@ -52,6 +52,7 @@ const getStories = () => {
     './src/components/Box/BaseBox/BaseBox.internal.stories.tsx': require('../../src/components/Box/BaseBox/BaseBox.internal.stories.tsx'),
     './src/components/Box/Box.stories.tsx': require('../../src/components/Box/Box.stories.tsx'),
     './src/components/Box/styledProps/StyledProps.stories.tsx': require('../../src/components/Box/styledProps/StyledProps.stories.tsx'),
+    './src/components/Breadcrumb/Breadcrumb.stories.tsx': require('../../src/components/Breadcrumb/Breadcrumb.stories.tsx'),
     './src/components/Button/BaseButton/BaseButton.internal.stories.tsx': require('../../src/components/Button/BaseButton/BaseButton.internal.stories.tsx'),
     './src/components/Button/Button/Button.stories.tsx': require('../../src/components/Button/Button/Button.stories.tsx'),
     './src/components/Button/IconButton/IconButton.stories.tsx': require('../../src/components/Button/IconButton/IconButton.stories.tsx'),
@@ -65,9 +66,13 @@ const getStories = () => {
     './src/components/Collapsible/Collapsible.stories.tsx': require('../../src/components/Collapsible/Collapsible.stories.tsx'),
     './src/components/Counter/Counter.stories.tsx': require('../../src/components/Counter/Counter.stories.tsx'),
     './src/components/Divider/Divider.stories.tsx': require('../../src/components/Divider/Divider.stories.tsx'),
+    './src/components/Drawer/docs/Drawer.stories.tsx': require('../../src/components/Drawer/docs/Drawer.stories.tsx'),
+    './src/components/Drawer/docs/DrawerExamples.stories.tsx': require('../../src/components/Drawer/docs/DrawerExamples.stories.tsx'),
     './src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx'),
     './src/components/Dropdown/docs/DropdownWithButton.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithButton.stories.tsx'),
     './src/components/Dropdown/docs/DropdownWithSelect.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithSelect.stories.tsx'),
+    './src/components/FileUpload/docs/FileUpload.stories.tsx': require('../../src/components/FileUpload/docs/FileUpload.stories.tsx'),
+    './src/components/FileUpload/docs/FileUploadExamples.stories.tsx': require('../../src/components/FileUpload/docs/FileUploadExamples.stories.tsx'),
     './src/components/Icons/Icons.stories.tsx': require('../../src/components/Icons/Icons.stories.tsx'),
     './src/components/Indicator/Indicator.stories.tsx': require('../../src/components/Indicator/Indicator.stories.tsx'),
     './src/components/Input/BaseInput/BaseInput.stories.tsx': require('../../src/components/Input/BaseInput/BaseInput.stories.tsx'),
@@ -106,8 +111,10 @@ const getStories = () => {
     './src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx'),
     './src/components/Table/docs/BasicTable.stories.tsx': require('../../src/components/Table/docs/BasicTable.stories.tsx'),
     './src/components/Table/docs/TableExamples.stories.tsx': require('../../src/components/Table/docs/TableExamples.stories.tsx'),
+    './src/components/Table/docs/TablePaginationExamples.stories.tsx': require('../../src/components/Table/docs/TablePaginationExamples.stories.tsx'),
     './src/components/Tabs/Tabs.stories.tsx': require('../../src/components/Tabs/Tabs.stories.tsx'),
     './src/components/Tag/Tag.stories.tsx': require('../../src/components/Tag/Tag.stories.tsx'),
+    './src/components/Toast/Toast.stories.tsx': require('../../src/components/Toast/Toast.stories.tsx'),
     './src/components/Tooltip/Tooltip.stories.tsx': require('../../src/components/Tooltip/Tooltip.stories.tsx'),
     './src/components/Typography/BaseText/BaseText.stories.tsx': require('../../src/components/Typography/BaseText/BaseText.stories.tsx'),
     './src/components/Typography/Code/Code.stories.tsx': require('../../src/components/Typography/Code/Code.stories.tsx'),

packages/blade/package.json

@@ -249,7 +249,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.72.3",
     "react-native-gesture-handler": "2.9.0",
-    "react-native-reanimated": "3.4.1",
+    "react-native-reanimated": "3.4.2",
     "react-native-svg": "12.3.0",
     "react-scripts": "5.0.1",
     "react-test-renderer": "18.2.0",