From aff51e4d61b110bab5e079629a3048f20626cbce Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez Date: Wed, 21 May 2025 10:30:11 +0200 Subject: [PATCH 1/3] Added accordion stories --- .../lib/src/accordion/Accordion.stories.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/lib/src/accordion/Accordion.stories.tsx b/packages/lib/src/accordion/Accordion.stories.tsx index f05781c8f..6df9cfcda 100644 --- a/packages/lib/src/accordion/Accordion.stories.tsx +++ b/packages/lib/src/accordion/Accordion.stories.tsx @@ -550,6 +550,27 @@ const Accordion = () => ( + + <ExampleContainer> + <DxcInset space="1rem"> + <DxcAccordion> + <DxcAccordion.AccordionItem + label="Avg, actions per session" + subLabel="Tue, May 20, 10:11 AM" + badge={{ position: "after", element: <DxcBadge label="Resolved" icon="check_circle" color="green" /> }} + > + <DxcInset space="1rem">To edit your profile you need to go to Settings and click on Profile.</DxcInset> + </DxcAccordion.AccordionItem> + <DxcAccordion.AccordionItem + label="Bounce Rate" + subLabel="Mon, May 19, 3:17 PM" + badge={{ position: "after", element: <DxcBadge label="Resolved" icon="check_circle" color="green" /> }} + > + <DxcInset space="1rem">To edit your profile you need to go to Settings and click on Profile.</DxcInset> + </DxcAccordion.AccordionItem> + </DxcAccordion> + </DxcInset> + </ExampleContainer> </> ); From 57ed240614af8dbfc706cccdb53e64e0785c208e Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Wed, 21 May 2025 10:36:57 +0200 Subject: [PATCH 2/3] Accordion stories --- .../lib/src/accordion/Accordion.stories.tsx | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/lib/src/accordion/Accordion.stories.tsx b/packages/lib/src/accordion/Accordion.stories.tsx index 6df9cfcda..fe46c6b60 100644 --- a/packages/lib/src/accordion/Accordion.stories.tsx +++ b/packages/lib/src/accordion/Accordion.stories.tsx @@ -331,6 +331,27 @@ const Accordion = () => ( </DxcAccordion.AccordionItem> </DxcAccordion> </ExampleContainer> + <ExampleContainer> + <Title title="Sublabel longer than label" theme="light" level={4} /> + <DxcAccordion> + <DxcAccordion.AccordionItem + label="Avg, actions per session" + subLabel="Tue, May 20, 10:11 AM" + badge={{ position: "after", element: <DxcBadge label="Resolved" icon="check_circle" color="green" /> }} + > + <DxcInset space="var(--spacing-padding-l)"> + To edit your profile you need to go to Settings and click on Profile. + </DxcInset> + </DxcAccordion.AccordionItem> + <DxcAccordion.AccordionItem + label="Bounce Rate" + subLabel="Mon, May 19, 3:17 PM" + badge={{ position: "after", element: <DxcBadge label="Resolved" icon="check_circle" color="green" /> }} + > + <DxcInset space="1rem">To edit your profile you need to go to Settings and click on Profile.</DxcInset> + </DxcAccordion.AccordionItem> + </DxcAccordion> + </ExampleContainer> <ExampleContainer> <Title title="Short label, long sublabel and long assistive text" theme="light" level={4} /> <DxcAccordion> @@ -550,27 +571,6 @@ const Accordion = () => ( </DxcAccordion.AccordionItem> </DxcAccordion> </ExampleContainer> - <Title title="Several accordions" theme="light" level={2} /> - <ExampleContainer> - <DxcInset space="1rem"> - <DxcAccordion> - <DxcAccordion.AccordionItem - label="Avg, actions per session" - subLabel="Tue, May 20, 10:11 AM" - badge={{ position: "after", element: <DxcBadge label="Resolved" icon="check_circle" color="green" /> }} - > - <DxcInset space="1rem">To edit your profile you need to go to Settings and click on Profile.</DxcInset> - </DxcAccordion.AccordionItem> - <DxcAccordion.AccordionItem - label="Bounce Rate" - subLabel="Mon, May 19, 3:17 PM" - badge={{ position: "after", element: <DxcBadge label="Resolved" icon="check_circle" color="green" /> }} - > - <DxcInset space="1rem">To edit your profile you need to go to Settings and click on Profile.</DxcInset> - </DxcAccordion.AccordionItem> - </DxcAccordion> - </DxcInset> - </ExampleContainer> </> ); From c4e72302b32227b03144d6b3b9b2d00e4e166c88 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Wed, 28 May 2025 08:48:24 +0200 Subject: [PATCH 3/3] Changes in Accordion stories based on feedback --- packages/lib/src/accordion/Accordion.stories.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/lib/src/accordion/Accordion.stories.tsx b/packages/lib/src/accordion/Accordion.stories.tsx index fe46c6b60..9ef4ff3d9 100644 --- a/packages/lib/src/accordion/Accordion.stories.tsx +++ b/packages/lib/src/accordion/Accordion.stories.tsx @@ -335,21 +335,14 @@ const Accordion = () => ( <Title title="Sublabel longer than label" theme="light" level={4} /> <DxcAccordion> <DxcAccordion.AccordionItem - label="Avg, actions per session" - subLabel="Tue, May 20, 10:11 AM" + label="Bounce Rate" + subLabel="Mon, May 19, 3:17 PM" badge={{ position: "after", element: <DxcBadge label="Resolved" icon="check_circle" color="green" /> }} > <DxcInset space="var(--spacing-padding-l)"> To edit your profile you need to go to Settings and click on Profile. </DxcInset> </DxcAccordion.AccordionItem> - <DxcAccordion.AccordionItem - label="Bounce Rate" - subLabel="Mon, May 19, 3:17 PM" - badge={{ position: "after", element: <DxcBadge label="Resolved" icon="check_circle" color="green" /> }} - > - <DxcInset space="1rem">To edit your profile you need to go to Settings and click on Profile.</DxcInset> - </DxcAccordion.AccordionItem> </DxcAccordion> </ExampleContainer> <ExampleContainer>