From 461870c34c957eed67f84f24a22267a1c643237a Mon Sep 17 00:00:00 2001 From: Iacopo Leardini Date: Tue, 17 Dec 2024 16:13:06 +0100 Subject: [PATCH 1/6] feat: add new Accordion component with Header and Section subcomponents --- src/stories/accordion-new/AccordionHeader.tsx | 45 ++++++++++ .../accordion-new/AccordionSection.tsx | 21 +++++ src/stories/accordion-new/index.stories.tsx | 85 +++++++++++++++++++ src/stories/accordion-new/index.tsx | 33 +++++++ 4 files changed, 184 insertions(+) create mode 100644 src/stories/accordion-new/AccordionHeader.tsx create mode 100644 src/stories/accordion-new/AccordionSection.tsx create mode 100644 src/stories/accordion-new/index.stories.tsx create mode 100644 src/stories/accordion-new/index.tsx diff --git a/src/stories/accordion-new/AccordionHeader.tsx b/src/stories/accordion-new/AccordionHeader.tsx new file mode 100644 index 00000000..de15aea1 --- /dev/null +++ b/src/stories/accordion-new/AccordionHeader.tsx @@ -0,0 +1,45 @@ +import { Accordion as ZendeskAccordion } from "@zendeskgarden/react-accordions"; +import { Checkbox, Field, Label } from "@zendeskgarden/react-forms"; +import { forwardRef, useEffect, useState } from "react"; +import styled from "styled-components"; +import { theme } from "../theme"; + +interface AccordionHeaderArgs extends React.HTMLAttributes { + hasCheckbox?: boolean; + checkboxProps?: React.ComponentProps; + isSelected?: boolean; +} + +export const AccordionHeader = forwardRef(({ + children, + isSelected, + hasCheckbox, + checkboxProps, + ...rest +}, ref) => { + const handleCheckboxChange = (e: React.ChangeEvent) => { + e.stopPropagation(); + if (typeof checkboxProps?.onChange === "function") { + checkboxProps.onChange(e); + } + return false; + } + + return ( + + {hasCheckbox && + + + {checkboxProps?.["aria-label"]} + + + } + {children} + + ) +}); \ No newline at end of file diff --git a/src/stories/accordion-new/AccordionSection.tsx b/src/stories/accordion-new/AccordionSection.tsx new file mode 100644 index 00000000..12742c3d --- /dev/null +++ b/src/stories/accordion-new/AccordionSection.tsx @@ -0,0 +1,21 @@ +import { Accordion as ZendeskAccordion } from "@zendeskgarden/react-accordions"; +import { Checkbox, Field, Label } from "@zendeskgarden/react-forms"; +import { forwardRef } from "react"; +import styled from "styled-components"; + +interface AccordionSectionArgs extends React.HTMLAttributes { + hasCheckbox?: boolean; + checkboxProps?: React.ComponentProps; + isSelected?: boolean; +} + +export const AccordionSection = forwardRef(({ + children, + isSelected, + className, + ...rest +}, ref) => ( + + {children} + +)); \ No newline at end of file diff --git a/src/stories/accordion-new/index.stories.tsx b/src/stories/accordion-new/index.stories.tsx new file mode 100644 index 00000000..082f2399 --- /dev/null +++ b/src/stories/accordion-new/index.stories.tsx @@ -0,0 +1,85 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { Accordion, AccordionArgs } from "."; +import { Col } from "../grid/col"; +import { Row } from "../grid/row"; +import { Checkbox } from "../forms/checkbox"; +import { useState } from "react"; +import styled from "styled-components"; + +const accordionContent = { + headerTitle: "Equum cibum est optimum prandium est", + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", +}; + +const items = [ + { + ...accordionContent, + headerTitle: "(1) " + accordionContent.headerTitle, + }, + { + ...accordionContent, + headerTitle: "(2) " + accordionContent.headerTitle, + }, + { + ...accordionContent, + headerTitle: "(3) " + accordionContent.headerTitle, + }, +]; + +type StoryArgs = AccordionArgs & { + hasCheckbox?: boolean; + checkboxProps?: React.ComponentProps; +}; + +const StyledAccordionSection = styled(Accordion.Section)` + &.isSelected { + border: 1px solid ${({ theme }) => theme.palette.grey[200]}; + } +`; + +const meta = { + title: "Molecules/New Accordion", + component: Accordion, + + render: ({ ...args }) => { + return ( + + + + {items.map((item) => { + const [selected, setIsSelected] = useState(false); + return ( + + setIsSelected(!selected)}}> + {item.headerTitle} + + {item.content} + + )})} + + + + ); + }, + args: { + level: 4, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + level: 4 + }, +}; + +export const Selectable: Story = { + args: { + level: 4, + hasCheckbox: true, + isBare: true, + }, +}; \ No newline at end of file diff --git a/src/stories/accordion-new/index.tsx b/src/stories/accordion-new/index.tsx new file mode 100644 index 00000000..695fc77a --- /dev/null +++ b/src/stories/accordion-new/index.tsx @@ -0,0 +1,33 @@ +import { Accordion as ZendeskAccordion } from "@zendeskgarden/react-accordions"; +import { forwardRef } from "react"; +import { IAccordionProps } from "@zendeskgarden/react-accordions"; +import { AccordionHeader } from "./AccordionHeader"; +import { AccordionSection } from "./AccordionSection"; + +export interface AccordionArgs extends IAccordionProps { +} + +/** + * Accordions are headers that can be expanded to reveal content or collapsed to hide it. + *
+ * Used for this: + - To organize related information into sections + - To surface information through progressive disclosure + */ +const AccordionComponent = forwardRef((props, ref) => ( + +)); + + + +export const Accordion = AccordionComponent as typeof AccordionComponent & { + Section: typeof AccordionSection; + Header: typeof AccordionHeader; + Label: typeof ZendeskAccordion.Label; + Panel: typeof ZendeskAccordion.Panel; + }; + +Accordion.Section = AccordionSection; +Accordion.Header = AccordionHeader; +Accordion.Label = ZendeskAccordion.Label; +Accordion.Panel = ZendeskAccordion.Panel; From d4446ce5f9257be61d818fa97de9ef0e7a9a75b3 Mon Sep 17 00:00:00 2001 From: Iacopo Leardini Date: Tue, 17 Dec 2024 18:05:57 +0100 Subject: [PATCH 2/6] feat: enhance Accordion component with new Label and Meta subcomponents, and improve Header styling --- src/stories/accordion-new/AccordionHeader.tsx | 29 +++- src/stories/accordion-new/AccordionLabel.tsx | 40 ++++++ src/stories/accordion-new/AccordionMeta.tsx | 16 +++ src/stories/accordion-new/index.stories.tsx | 132 ++++++++++++++---- src/stories/accordion-new/index.tsx | 8 +- 5 files changed, 191 insertions(+), 34 deletions(-) create mode 100644 src/stories/accordion-new/AccordionLabel.tsx create mode 100644 src/stories/accordion-new/AccordionMeta.tsx diff --git a/src/stories/accordion-new/AccordionHeader.tsx b/src/stories/accordion-new/AccordionHeader.tsx index de15aea1..d6188bd0 100644 --- a/src/stories/accordion-new/AccordionHeader.tsx +++ b/src/stories/accordion-new/AccordionHeader.tsx @@ -8,13 +8,33 @@ interface AccordionHeaderArgs extends React.HTMLAttributes { hasCheckbox?: boolean; checkboxProps?: React.ComponentProps; isSelected?: boolean; + isLarge?: boolean; + icon?: React.ReactNode; } +const StyledAccordionHeader = styled(ZendeskAccordion.Header)` + padding: ${theme.space.md}; + display: flex; + gap: ${theme.space.xs}; + align-items: flex-start; + [data-garden-id="accordions.rotate_icon"] { + padding: 0; + } + .accordion-header-inner-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: ${theme.space.xs}; + width: 100%; + } +`; + export const AccordionHeader = forwardRef(({ children, isSelected, hasCheckbox, checkboxProps, + icon, ...rest }, ref) => { const handleCheckboxChange = (e: React.ChangeEvent) => { @@ -26,9 +46,9 @@ export const AccordionHeader = forwardRef(( } return ( - + {hasCheckbox && - + (( } + {icon} +
{children} - +
+ ) }); \ No newline at end of file diff --git a/src/stories/accordion-new/AccordionLabel.tsx b/src/stories/accordion-new/AccordionLabel.tsx new file mode 100644 index 00000000..68a828bf --- /dev/null +++ b/src/stories/accordion-new/AccordionLabel.tsx @@ -0,0 +1,40 @@ +import { Accordion as ZendeskAccordion } from "@zendeskgarden/react-accordions"; +import { forwardRef} from "react"; +import { theme } from "../theme"; +import styled from "styled-components"; +import { LG, MD, SM } from "../typography/typescale"; + +interface AccordionLabelArgs extends React.HTMLAttributes { + isLarge?: boolean; + label?: string; + subtitle?: string; + supertitle?: string; + meta?: React.ReactNode; +} +const StyledAccordionLabel = styled(ZendeskAccordion.Label)` + padding: 0; + width: auto; + flex-grow: 1; +`; + +export const AccordionLabel = forwardRef(({ + label, + supertitle, + subtitle, + isLarge, + ...rest +}, ref) => ( + + {supertitle && {supertitle}} + {label && + isLarge + ? {label} + : {label} + } + {subtitle && + isLarge + ? {subtitle} + : {subtitle} + } + +)); diff --git a/src/stories/accordion-new/AccordionMeta.tsx b/src/stories/accordion-new/AccordionMeta.tsx new file mode 100644 index 00000000..f99621af --- /dev/null +++ b/src/stories/accordion-new/AccordionMeta.tsx @@ -0,0 +1,16 @@ +import { forwardRef} from "react"; +import styled from "styled-components"; + +interface AccordionMetaArgs extends React.HTMLAttributes { +} +const StyledAccordionMeta = styled.div` +`; + +export const AccordionMeta = forwardRef(({ + children, + ...rest +}, ref) => ( + + {children} + +)); diff --git a/src/stories/accordion-new/index.stories.tsx b/src/stories/accordion-new/index.stories.tsx index 082f2399..1c9b0593 100644 --- a/src/stories/accordion-new/index.stories.tsx +++ b/src/stories/accordion-new/index.stories.tsx @@ -3,41 +3,40 @@ import { Accordion, AccordionArgs } from "."; import { Col } from "../grid/col"; import { Row } from "../grid/row"; import { Checkbox } from "../forms/checkbox"; -import { useState } from "react"; -import styled from "styled-components"; +import React, { useState } from "react"; +import { ReactComponent as FolderIcon } from "@zendeskgarden/svg-icons/src/16/folder-open-stroke.svg"; +import { ReactComponent as LeafIcon } from "../../assets/icons/leaf-stroke.svg"; +import { Tag } from "../tags"; +import { theme } from "../theme"; +import { StatusCompletedIcon } from "../icons"; -const accordionContent = { - headerTitle: "Equum cibum est optimum prandium est", - content: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", -}; +const accordionContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."; const items = [ { - ...accordionContent, - headerTitle: "(1) " + accordionContent.headerTitle, + accordionContent, + headerTitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, Equum cibum est optimum prandium est", }, { - ...accordionContent, - headerTitle: "(2) " + accordionContent.headerTitle, + accordionContent, + headerTitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit", }, { - ...accordionContent, - headerTitle: "(3) " + accordionContent.headerTitle, + accordionContent, + headerTitle: "Lorem ipsum dolor sit amet", }, ]; type StoryArgs = AccordionArgs & { hasCheckbox?: boolean; checkboxProps?: React.ComponentProps; + icon?: React.ReactNode; + isLarge?: boolean; + subtitles?: string; + supertitles?: string; + meta?: React.ReactNode; }; -const StyledAccordionSection = styled(Accordion.Section)` - &.isSelected { - border: 1px solid ${({ theme }) => theme.palette.grey[200]}; - } -`; - const meta = { title: "Molecules/New Accordion", component: Accordion, @@ -50,13 +49,24 @@ const meta = { {items.map((item) => { const [selected, setIsSelected] = useState(false); return ( - - setIsSelected(!selected)}}> - {item.headerTitle} - - {item.content} - - )})} + + setIsSelected(!selected) }} + icon={args.icon} + > + + {args.meta && {args.meta}} + + {item.accordionContent} + + ) + })} @@ -70,16 +80,80 @@ const meta = { export default meta; type Story = StoryObj; +const defaultArgs: StoryArgs = { + level: 3, + hasCheckbox: false, + isLarge: false, +}; + export const Default: Story = { args: { - level: 4 + ...defaultArgs, + }, +}; + +export const Large: Story = { + args: { + ...defaultArgs, + isLarge: true, }, }; export const Selectable: Story = { args: { - level: 4, + ...defaultArgs, + hasCheckbox: true, + }, +}; + +export const Icon: Story = { + args: { + ...defaultArgs, + icon: , + }, +}; + +export const FullLabel: Story = { + args: { + ...defaultArgs, + icon: , hasCheckbox: true, - isBare: true, + subtitles: "Some more info on the item", + supertitles: "00:00:23 - 00:00:27" + }, +}; + +export const WithMeta: Story = { + args: { + ...defaultArgs, + meta: <> + Tag 1 + Tag 2 + + + + + Completed + + 1 + + + + + + + Counter + + 2 + + + }, }; \ No newline at end of file diff --git a/src/stories/accordion-new/index.tsx b/src/stories/accordion-new/index.tsx index 695fc77a..848ae6d7 100644 --- a/src/stories/accordion-new/index.tsx +++ b/src/stories/accordion-new/index.tsx @@ -3,6 +3,8 @@ import { forwardRef } from "react"; import { IAccordionProps } from "@zendeskgarden/react-accordions"; import { AccordionHeader } from "./AccordionHeader"; import { AccordionSection } from "./AccordionSection"; +import { AccordionLabel } from "./AccordionLabel"; +import { AccordionMeta } from "./AccordionMeta"; export interface AccordionArgs extends IAccordionProps { } @@ -23,11 +25,13 @@ const AccordionComponent = forwardRef((props, ref export const Accordion = AccordionComponent as typeof AccordionComponent & { Section: typeof AccordionSection; Header: typeof AccordionHeader; - Label: typeof ZendeskAccordion.Label; + Label: typeof AccordionLabel; + Meta: typeof AccordionMeta; Panel: typeof ZendeskAccordion.Panel; }; Accordion.Section = AccordionSection; Accordion.Header = AccordionHeader; -Accordion.Label = ZendeskAccordion.Label; +Accordion.Label = AccordionLabel; +Accordion.Meta = AccordionMeta; Accordion.Panel = ZendeskAccordion.Panel; From 384ccbb46154b5eb6cc8be0a878219564bf496b2 Mon Sep 17 00:00:00 2001 From: Iacopo Leardini Date: Tue, 17 Dec 2024 18:17:00 +0100 Subject: [PATCH 3/6] feat: update Accordion stories to use hasMeta prop and enhance WithMeta example --- src/stories/accordion-new/index.stories.tsx | 81 +++++++++++---------- 1 file changed, 41 insertions(+), 40 deletions(-) diff --git a/src/stories/accordion-new/index.stories.tsx b/src/stories/accordion-new/index.stories.tsx index 1c9b0593..6e4c95e4 100644 --- a/src/stories/accordion-new/index.stories.tsx +++ b/src/stories/accordion-new/index.stories.tsx @@ -34,7 +34,7 @@ type StoryArgs = AccordionArgs & { isLarge?: boolean; subtitles?: string; supertitles?: string; - meta?: React.ReactNode; + hasMeta?: boolean; }; const meta = { @@ -61,7 +61,35 @@ const meta = { supertitle={args.supertitles} meta /> - {args.meta && {args.meta}} + {args.hasMeta && + Tag 1 + Tag 2 + + + + + Completed + + 1 + + + + + + + Counter + + 2 + + + } {item.accordionContent} @@ -72,9 +100,6 @@ const meta = { ); }, - args: { - level: 4, - }, } satisfies Meta; export default meta; @@ -84,6 +109,9 @@ const defaultArgs: StoryArgs = { level: 3, hasCheckbox: false, isLarge: false, + subtitles: "", + supertitles: "", + hasMeta: false, }; export const Default: Story = { @@ -113,47 +141,20 @@ export const Icon: Story = { }, }; -export const FullLabel: Story = { +export const WithMeta: Story = { args: { ...defaultArgs, - icon: , - hasCheckbox: true, - subtitles: "Some more info on the item", - supertitles: "00:00:23 - 00:00:27" + hasMeta: true, }, }; -export const WithMeta: Story = { +export const Full: Story = { args: { ...defaultArgs, - meta: <> - Tag 1 - Tag 2 - - - - - Completed - - 1 - - - - - - - Counter - - 2 - - - + icon: , + hasCheckbox: true, + subtitles: "Some more info on the item", + supertitles: "00:00:23 - 00:00:27", + hasMeta: true, }, }; \ No newline at end of file From 86757dac5bf60a0442b2d60611897330feba0f9a Mon Sep 17 00:00:00 2001 From: Iacopo Leardini Date: Wed, 18 Dec 2024 12:05:48 +0100 Subject: [PATCH 4/6] refactor: let's use AccordionNew for the time being --- src/index.tsx | 1 + src/stories/accordion-new/index.stories.tsx | 24 ++++++++++----------- src/stories/accordion-new/index.tsx | 24 ++++++++++----------- 3 files changed, 25 insertions(+), 24 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 097adef1..99af9fdb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,6 +4,7 @@ import { GlobalStyle } from "./stories/shared/globalStyle"; // --- Accordions --- export * from "./stories/accordions"; +export * from "./stories/accordion-new"; // --- Alerts --- export * from "./stories/notifications/alerts"; diff --git a/src/stories/accordion-new/index.stories.tsx b/src/stories/accordion-new/index.stories.tsx index 6e4c95e4..0e346906 100644 --- a/src/stories/accordion-new/index.stories.tsx +++ b/src/stories/accordion-new/index.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from "@storybook/react"; -import { Accordion, AccordionArgs } from "."; +import { AccordionNew, AccordionArgs } from "."; import { Col } from "../grid/col"; import { Row } from "../grid/row"; import { Checkbox } from "../forms/checkbox"; @@ -39,29 +39,29 @@ type StoryArgs = AccordionArgs & { const meta = { title: "Molecules/New Accordion", - component: Accordion, + component: AccordionNew, render: ({ ...args }) => { return ( - + {items.map((item) => { const [selected, setIsSelected] = useState(false); return ( - - + setIsSelected(!selected) }} icon={args.icon} > - - {args.hasMeta && + {args.hasMeta && Tag 1 Tag 2 - } - - {item.accordionContent} - + } + + {item.accordionContent} + ) })} - + ); diff --git a/src/stories/accordion-new/index.tsx b/src/stories/accordion-new/index.tsx index 848ae6d7..fae9a7f1 100644 --- a/src/stories/accordion-new/index.tsx +++ b/src/stories/accordion-new/index.tsx @@ -22,16 +22,16 @@ const AccordionComponent = forwardRef((props, ref -export const Accordion = AccordionComponent as typeof AccordionComponent & { - Section: typeof AccordionSection; - Header: typeof AccordionHeader; - Label: typeof AccordionLabel; - Meta: typeof AccordionMeta; - Panel: typeof ZendeskAccordion.Panel; - }; +export const AccordionNew = AccordionComponent as typeof AccordionComponent & { + Section: typeof AccordionSection; + Header: typeof AccordionHeader; + Label: typeof AccordionLabel; + Meta: typeof AccordionMeta; + Panel: typeof ZendeskAccordion.Panel; +}; -Accordion.Section = AccordionSection; -Accordion.Header = AccordionHeader; -Accordion.Label = AccordionLabel; -Accordion.Meta = AccordionMeta; -Accordion.Panel = ZendeskAccordion.Panel; +AccordionNew.Section = AccordionSection; +AccordionNew.Header = AccordionHeader; +AccordionNew.Label = AccordionLabel; +AccordionNew.Meta = AccordionMeta; +AccordionNew.Panel = ZendeskAccordion.Panel; From e23c426e535681360f3225e1d33f06d8516cd091 Mon Sep 17 00:00:00 2001 From: Iacopo Leardini Date: Wed, 18 Dec 2024 12:06:43 +0100 Subject: [PATCH 5/6] rework: remove unnecessary Row and Col wrappers from AccordionNew story --- src/stories/accordion-new/index.stories.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/stories/accordion-new/index.stories.tsx b/src/stories/accordion-new/index.stories.tsx index 0e346906..81e60fc8 100644 --- a/src/stories/accordion-new/index.stories.tsx +++ b/src/stories/accordion-new/index.stories.tsx @@ -43,8 +43,7 @@ const meta = { render: ({ ...args }) => { return ( - - + {items.map((item) => { const [selected, setIsSelected] = useState(false); @@ -96,8 +95,6 @@ const meta = { ) })} - - ); }, } satisfies Meta; From 90ce9513a269027a5df55da8da122372acf48a78 Mon Sep 17 00:00:00 2001 From: Iacopo Leardini Date: Wed, 18 Dec 2024 12:57:50 +0100 Subject: [PATCH 6/6] feat: use Section Story for better export --- src/stories/accordion-new/AccordionHeader.tsx | 2 +- .../accordion-new/AccordionSection.tsx | 4 +- src/stories/accordion-new/index.stories.tsx | 127 +++--------------- src/stories/accordion-new/section.stories.tsx | 112 +++++++++++++++ 4 files changed, 132 insertions(+), 113 deletions(-) create mode 100644 src/stories/accordion-new/section.stories.tsx diff --git a/src/stories/accordion-new/AccordionHeader.tsx b/src/stories/accordion-new/AccordionHeader.tsx index d6188bd0..6f34d15a 100644 --- a/src/stories/accordion-new/AccordionHeader.tsx +++ b/src/stories/accordion-new/AccordionHeader.tsx @@ -4,7 +4,7 @@ import { forwardRef, useEffect, useState } from "react"; import styled from "styled-components"; import { theme } from "../theme"; -interface AccordionHeaderArgs extends React.HTMLAttributes { +export interface AccordionHeaderArgs extends React.HTMLAttributes { hasCheckbox?: boolean; checkboxProps?: React.ComponentProps; isSelected?: boolean; diff --git a/src/stories/accordion-new/AccordionSection.tsx b/src/stories/accordion-new/AccordionSection.tsx index 12742c3d..2f9f5722 100644 --- a/src/stories/accordion-new/AccordionSection.tsx +++ b/src/stories/accordion-new/AccordionSection.tsx @@ -3,9 +3,7 @@ import { Checkbox, Field, Label } from "@zendeskgarden/react-forms"; import { forwardRef } from "react"; import styled from "styled-components"; -interface AccordionSectionArgs extends React.HTMLAttributes { - hasCheckbox?: boolean; - checkboxProps?: React.ComponentProps; +export interface AccordionSectionArgs extends React.HTMLAttributes { isSelected?: boolean; } diff --git a/src/stories/accordion-new/index.stories.tsx b/src/stories/accordion-new/index.stories.tsx index 81e60fc8..8f8607c4 100644 --- a/src/stories/accordion-new/index.stories.tsx +++ b/src/stories/accordion-new/index.stories.tsx @@ -1,14 +1,6 @@ import { Meta, StoryObj } from "@storybook/react"; -import { AccordionNew, AccordionArgs } from "."; -import { Col } from "../grid/col"; -import { Row } from "../grid/row"; -import { Checkbox } from "../forms/checkbox"; -import React, { useState } from "react"; -import { ReactComponent as FolderIcon } from "@zendeskgarden/svg-icons/src/16/folder-open-stroke.svg"; -import { ReactComponent as LeafIcon } from "../../assets/icons/leaf-stroke.svg"; -import { Tag } from "../tags"; -import { theme } from "../theme"; -import { StatusCompletedIcon } from "../icons"; +import { AccordionArgs, AccordionNew } from "."; +import { Placeholder } from "../placeholder"; const accordionContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."; @@ -27,15 +19,7 @@ const items = [ }, ]; -type StoryArgs = AccordionArgs & { - hasCheckbox?: boolean; - checkboxProps?: React.ComponentProps; - icon?: React.ReactNode; - isLarge?: boolean; - subtitles?: string; - supertitles?: string; - hasMeta?: boolean; -}; +type StoryArgs = AccordionArgs & {}; const meta = { title: "Molecules/New Accordion", @@ -44,57 +28,18 @@ const meta = { render: ({ ...args }) => { return ( - - {items.map((item) => { - const [selected, setIsSelected] = useState(false); - return ( - - setIsSelected(!selected) }} - icon={args.icon} - > - - {args.hasMeta && - Tag 1 - Tag 2 - - - - - Completed - - 1 - - - - - - - Counter - - 2 - - - } - - {item.accordionContent} - - ) - })} - + + {items.map((item) => { + return ( + + + + + + + ) + })} + ); }, } satisfies Meta; @@ -104,11 +49,7 @@ type Story = StoryObj; const defaultArgs: StoryArgs = { level: 3, - hasCheckbox: false, - isLarge: false, - subtitles: "", - supertitles: "", - hasMeta: false, + isBare: false }; export const Default: Story = { @@ -117,41 +58,9 @@ export const Default: Story = { }, }; -export const Large: Story = { - args: { - ...defaultArgs, - isLarge: true, - }, -}; - -export const Selectable: Story = { - args: { - ...defaultArgs, - hasCheckbox: true, - }, -}; - -export const Icon: Story = { - args: { - ...defaultArgs, - icon: , - }, -}; - -export const WithMeta: Story = { +export const Bare: Story = { args: { ...defaultArgs, - hasMeta: true, + isBare: true, }, }; - -export const Full: Story = { - args: { - ...defaultArgs, - icon: , - hasCheckbox: true, - subtitles: "Some more info on the item", - supertitles: "00:00:23 - 00:00:27", - hasMeta: true, - }, -}; \ No newline at end of file diff --git a/src/stories/accordion-new/section.stories.tsx b/src/stories/accordion-new/section.stories.tsx new file mode 100644 index 00000000..e89408fd --- /dev/null +++ b/src/stories/accordion-new/section.stories.tsx @@ -0,0 +1,112 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { AccordionNew } from "."; +import { Checkbox } from "../forms/checkbox"; +import React from "react"; +import { ReactComponent as FolderIcon } from "@zendeskgarden/svg-icons/src/16/folder-open-stroke.svg"; +import { Placeholder } from "../placeholder"; +import { AccordionSectionArgs } from "./AccordionSection"; + + +type StoryArgs = AccordionSectionArgs & { + hasCheckbox?: boolean; + selected?: boolean; + checkboxProps?: React.ComponentProps; + icon?: React.ReactNode; + isLarge?: boolean; + hasSubtitles?: boolean; + hasSupertitles?: boolean; + hasMeta?: boolean; + isOpen?: boolean; +}; + +const meta = { + title: "Molecules/New Accordion/Section", + component: AccordionNew.Section, + decorators: [ + (Story: React.ComponentType, context) => { + return( + + + + )}, + ], + render: ({ ...args }) => { + return ( + + + + {args.hasMeta && + + } + + + + + ); + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +const defaultArgs: StoryArgs = { + hasCheckbox: false, + isLarge: false, + hasSubtitles: false, + hasSupertitles: false, + hasMeta: false, + isOpen: false, +}; + +export const Default: Story = { + args: { + ...defaultArgs, + }, +}; + +export const Large: Story = { + args: { + ...defaultArgs, + isLarge: true, + }, +}; + +export const Selectable: Story = { + args: { + ...defaultArgs, + hasCheckbox: true, + }, +}; + +export const Icon: Story = { + args: { + ...defaultArgs, + icon: , + }, +}; + +export const WithMeta: Story = { + args: { + ...defaultArgs, + hasMeta: true, + }, +}; + +export const Full: Story = { + args: { + ...defaultArgs, + icon: , + hasCheckbox: true, + hasSubtitles: true, + hasSupertitles: true, + hasMeta: true, + }, +}; \ No newline at end of file