New Admin UI - Accordion Component #4505
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,257 @@ | ||
| import React from "react"; | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { Accordion, type AccordionItemProps as BaseAccordionItemProps } from "./Accordion"; | ||
|
|
||
| import { ReactComponent as WarningIcon } from "@material-design-icons/svg/outlined/insert_chart.svg"; | ||
| import { ReactComponent as ArrowUp } from "@material-design-icons/svg/outlined/arrow_upward.svg"; | ||
| import { ReactComponent as ArrowDown } from "@material-design-icons/svg/outlined/arrow_downward.svg"; | ||
| import { ReactComponent as EditIcon } from "@material-design-icons/svg/outlined/edit.svg"; | ||
| import { ReactComponent as TrashIcon } from "@material-design-icons/svg/outlined/delete.svg"; | ||
|
|
||
| const meta: Meta<typeof Accordion> = { | ||
| title: "Components/Accordion", | ||
| component: Accordion, | ||
| tags: ["autodocs"], | ||
| argTypes: {} | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof Accordion>; | ||
|
|
||
| interface AccordionItemProps extends Omit<BaseAccordionItemProps, "value" | "title" | "children"> { | ||
| index: number; | ||
| } | ||
|
|
||
| const AccordionItem = (props: AccordionItemProps) => { | ||
| return ( | ||
| <Accordion.Item | ||
| value={`Accordion item ${props.index}`} | ||
| title={`Accordion item ${props.index}`} | ||
| {...props} | ||
| > | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet | ||
| convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio | ||
| sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor. | ||
| Praesent ac neque rutrum, elementum turpis et, vulputate enim. In ex lorem, | ||
| </Accordion.Item> | ||
| ); | ||
| }; | ||
|
|
||
| export const Default: Story = { | ||
| decorators: [ | ||
| Story => ( | ||
| <div className="wby-w-[600px] wby-p-[50px] wby-min-h-[500px] wby-bg-[#f6f7f8]"> | ||
| <Story /> | ||
| </div> | ||
| ) | ||
| ], | ||
| args: { | ||
| children: ( | ||
| <> | ||
| <AccordionItem index={1} /> | ||
| <AccordionItem index={2} /> | ||
| <AccordionItem index={3} /> | ||
| </> | ||
| ) | ||
| } | ||
| }; | ||
|
|
||
| export const WithDescriptions: Story = { | ||
| ...Default, | ||
| args: { | ||
| children: ( | ||
| <> | ||
| <AccordionItem | ||
| index={1} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| /> | ||
| <AccordionItem | ||
| index={2} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| /> | ||
| <AccordionItem | ||
| index={3} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| /> | ||
| </> | ||
| ) | ||
| }, | ||
| argTypes: {} | ||
| }; | ||
|
|
||
| export const WithIcon: Story = { | ||
| ...Default, | ||
| args: { | ||
| children: ( | ||
| <> | ||
| <AccordionItem | ||
| index={1} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />} | ||
| /> | ||
| <AccordionItem | ||
| index={2} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />} | ||
| /> | ||
| </> | ||
| ) | ||
| } | ||
| }; | ||
|
|
||
| export const WithActionsIcon: Story = { | ||
| ...Default, | ||
| args: { | ||
| children: ( | ||
| <> | ||
| <AccordionItem | ||
| index={1} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />} | ||
| actions={ | ||
| <> | ||
| <Accordion.Item.Action icon={<ArrowUp />} /> | ||
| <Accordion.Item.Action icon={<ArrowDown />} /> | ||
| <Accordion.Item.Action.Separator /> | ||
| <Accordion.Item.Action icon={<EditIcon />} /> | ||
| <Accordion.Item.Action icon={<TrashIcon />} /> | ||
| </> | ||
| } | ||
| /> | ||
| <AccordionItem | ||
| index={2} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />} | ||
| actions={ | ||
| <> | ||
| <Accordion.Item.Action icon={<ArrowUp />} /> | ||
| <Accordion.Item.Action icon={<ArrowDown />} /> | ||
| <Accordion.Item.Action.Separator /> | ||
| <Accordion.Item.Action icon={<EditIcon />} /> | ||
| <Accordion.Item.Action icon={<TrashIcon />} /> | ||
| </> | ||
| } | ||
| /> | ||
| </> | ||
| ) | ||
| } | ||
| }; | ||
|
|
||
| export const WithHandleIcon: Story = { | ||
| ...Default, | ||
| args: { | ||
| children: ( | ||
| <> | ||
| <AccordionItem | ||
| index={1} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />} | ||
| handle={<Accordion.Item.Handle />} | ||
| /> | ||
| <AccordionItem | ||
| index={2} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| handle={<Accordion.Item.Handle />} | ||
| /> | ||
| </> | ||
| ) | ||
| } | ||
| }; | ||
|
|
||
| export const WithMultipleOpenedItems: Story = { | ||
| ...Default, | ||
| args: { | ||
| type: "multiple", | ||
| children: ( | ||
| <> | ||
| <AccordionItem | ||
| index={1} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| /> | ||
| <AccordionItem | ||
| index={2} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| /> | ||
| </> | ||
| ) | ||
| } | ||
| }; | ||
|
|
||
| export const ContainerVariant: Story = { | ||
| ...Default, | ||
| args: { | ||
| variant: "container", | ||
| children: ( | ||
| <> | ||
| <AccordionItem | ||
| index={1} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />} | ||
| /> | ||
| <AccordionItem | ||
| index={2} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />} | ||
| /> | ||
| </> | ||
| ) | ||
| } | ||
| }; | ||
|
|
||
| export const LightBackground: Story = { | ||
| ...Default, | ||
| decorators: [ | ||
| Story => ( | ||
| <div className="wby-w-[600px] wby-p-[50px] wby-min-h-[500px]"> | ||
| <Story /> | ||
| </div> | ||
| ) | ||
| ], | ||
| args: { | ||
| background: "light", | ||
| children: ( | ||
| <> | ||
| <AccordionItem | ||
| index={1} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />} | ||
| /> | ||
| <AccordionItem | ||
| index={2} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />} | ||
| /> | ||
| </> | ||
| ) | ||
| } | ||
| }; | ||
|
|
||
| export const ContainerVariantWithLightBackground: Story = { | ||
| ...Default, | ||
| decorators: [ | ||
| Story => ( | ||
| <div className="wby-w-[600px] wby-p-[50px] wby-min-h-[500px]"> | ||
| <Story /> | ||
| </div> | ||
| ) | ||
| ], | ||
| args: { | ||
| variant: "container", | ||
| background: "light", | ||
| children: ( | ||
| <> | ||
| <AccordionItem | ||
| index={1} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />} | ||
| /> | ||
| <AccordionItem | ||
| index={2} | ||
| description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." | ||
| icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />} | ||
| /> | ||
| </> | ||
| ) | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React, { useMemo } from "react"; | ||
| import { cn, makeDecoratable, withStaticProps } from "~/utils"; | ||
| import { AccordionRoot } from "./components/AccordionRoot"; | ||
| import { AccordionContext, useAccordion } from "./components/AccordionContext"; | ||
| import { AccordionItem, type AccordionItemProps } from "./components/AccordionItem"; | ||
|
|
||
| type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> & { | ||
| children: React.ReactNode; | ||
| variant?: "underline" | "container"; | ||
| background?: "transparent" | "base" | "light"; | ||
| }; | ||
|
|
||
| const AccordionBase = ({ | ||
| children, | ||
| variant, | ||
| background = "base", | ||
| ...baseRootProps | ||
| }: AccordionProps) => { | ||
| const rootProps = useMemo(() => { | ||
| const rootProps = { ...baseRootProps }; | ||
| if (rootProps.type !== "multiple") { | ||
| // For single accordion, make it collapsible by default. | ||
| rootProps.collapsible = rootProps.collapsible !== false; | ||
| } | ||
| return rootProps; | ||
| }, [baseRootProps]); | ||
|
|
||
| return ( | ||
| <AccordionRoot | ||
| {...rootProps} | ||
| className={cn( | ||
| "w-full", | ||
| { "wby-gap-xs wby-flex wby-flex-col": variant === "container" }, | ||
|
There was a problem hiding this comment. Why not use the |
||
| rootProps.className | ||
| )} | ||
| > | ||
| <AccordionContext.Provider value={{ variant, background }}> | ||
| {children} | ||
| </AccordionContext.Provider> | ||
| </AccordionRoot> | ||
| ); | ||
| }; | ||
|
|
||
| AccordionBase.displayName = "Accordion"; | ||
|
There was a problem hiding this comment. Do we need this? Maybe not, since we are not using |
||
|
|
||
| const DecoratableAccordion = makeDecoratable("Accordion", AccordionBase); | ||
|
|
||
| const Accordion = withStaticProps(DecoratableAccordion, { | ||
| Item: AccordionItem | ||
| }); | ||
|
|
||
| export { Accordion, type AccordionProps, type AccordionItemProps, useAccordion }; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shall we stick to a camelCase or kebab-case naming convention? The kebab-case looks good, but I would change
skeletonPulse🙏There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.