feat: add Accordion and Collapsible components (#1364)

- Stable release
- Update imports from PRE_RELEASE to stable
- Conducted final sanity testing, see screen recordings below

.changeset/fuzzy-squids-burn.md

@@ -0,0 +1,9 @@
+---
+'@razorpay/blade': minor
+---
+
+feat: add `Accordion` and `Collapsible` components
+
+> **Note**
+>
+> If you're upgrading from earlier PRE_RELEASE, there are no breaking changes in the API, however there are some changes in the rendered markup which may require updating any snapshots (if any) at your end

packages/blade/src/components/Accordion/Accordion.stories.tsx

@@ -19,7 +19,7 @@ const Page = (): ReactElement => {
   return (
     <StoryPageWrapper
       componentName="Accordion"
-      componentDescription="[Only available for web PRE RELEASE currently]: An accordion is used to allow users to toggle between different content sections in a compact vertical stack."
+      componentDescription="An accordion is used to allow users to toggle between different content sections in a compact vertical stack."
       figmaURL={{
         paymentTheme:
           'https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=79-629874&t=sVxH3DOnx3L3F9rO-0',
@@ -30,7 +30,7 @@ const Page = (): ReactElement => {
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
         {`
-        import { Accordion_PRE_RELEASE as Accordion, AccordionItem } from '@razorpay/blade/components';
+        import { Accordion, AccordionItem } from '@razorpay/blade/components';
 
         function App() {
           return (
@@ -59,7 +59,7 @@ const Page = (): ReactElement => {
 };
 
 const meta: Meta<AccordionProps> = {
-  title: 'Components/Accordion (PRE RELEASE)',
+  title: 'Components/Accordion',
   component: AccordionComponent,
   args: {},
   argTypes: {

packages/blade/src/components/Accordion/index.ts

@@ -1,4 +1,4 @@
-export { Accordion as Accordion_PRE_RELEASE } from './Accordion';
+export { Accordion } from './Accordion';
 export type { AccordionProps } from './Accordion';
 
 export * from './AccordionItem';

packages/blade/src/components/Collapsible/Collapsible.stories.tsx

@@ -18,7 +18,7 @@ const Page = (): ReactElement => {
   return (
     <StoryPageWrapper
       componentName="Collapsible"
-      componentDescription="[Only available for web PRE RELEASE currently]: Collapsible is used to allow users to toggle the visibility of hidden content within a container."
+      componentDescription="Collapsible is used to allow users to toggle the visibility of hidden content within a container."
       figmaURL={{
         paymentTheme:
           'https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=79-629874&t=sVxH3DOnx3L3F9rO-0',
@@ -29,7 +29,7 @@ const Page = (): ReactElement => {
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
         {`
-        import { Collapsible_PRE_RELEASE as Collapsible, CollapsibleButton, CollapsibleBody, Text, Amount, Box } from '@razorpay/blade/components';
+        import { Collapsible, CollapsibleButton, CollapsibleBody, Text, Amount, Box } from '@razorpay/blade/components';
 
         function App() {
           return (
@@ -78,7 +78,7 @@ const Page = (): ReactElement => {
 };
 
 const meta: Meta<CollapsibleProps> = {
-  title: 'Components/Collapsible (PRE RELEASE)',
+  title: 'Components/Collapsible',
   component: CollapsibleComponent,
   args: {},
   argTypes: {

packages/blade/src/components/Collapsible/index.ts

@@ -1,4 +1,4 @@
-export { Collapsible as Collapsible_PRE_RELEASE } from './Collapsible';
+export { Collapsible } from './Collapsible';
 export type { CollapsibleProps } from './Collapsible';
 
 export * from './CollapsibleLink';