@webiny/admin-ui 0.0.0-unstable.e53eceafb5

package/Accordion/Accordion.d.ts

@@ -0,0 +1,110 @@
+import React from "react";
+import { type VariantProps } from "../utils";
+import type { AccordionRoot } from "./components/AccordionRoot";
+import { type AccordionItemProps } from "./components/AccordionItem";
+declare const accordionVariants: (props?: ({
+    variant?: "container" | "underline" | null | undefined;
+    background?: "base" | "transparent" | "light" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> & VariantProps<typeof accordionVariants> & {
+    children: React.ReactNode;
+};
+declare const Accordion: (({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element) & {
+    original: ({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element) & {
+        original: ({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element) & {
+        original: ({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+} & {
+    Item: ((props: AccordionItemProps) => React.JSX.Element) & {
+        original: (props: AccordionItemProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: AccordionItemProps) => React.JSX.Element) & {
+            original: (props: AccordionItemProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: AccordionItemProps) => React.JSX.Element) & {
+            original: (props: AccordionItemProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        Icon: ((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
+            original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: ((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
+                original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
+                original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        Action: (({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
+            original: ({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
+                original: ({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
+                original: ({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        } & {
+            Separator: ((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
+                original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
+                    original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
+                    original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+        };
+    };
+};
+export { Accordion, type AccordionProps, type AccordionItemProps };

package/Accordion/Accordion.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { makeDecoratable, withStaticProps, cva, cn } from "../utils";
+import { AccordionItem } from "./components/AccordionItem";
+const accordionVariants = cva("wby-group wby-w-full", {
+  variants: {
+    variant: {
+      container: "wby-accordion-variant-container wby-gap-xs wby-flex wby-flex-col",
+      underline: "wby-accordion-variant-underline "
+    },
+    background: {
+      base: "wby-accordion-background-base",
+      light: "wby-accordion-background-light",
+      transparent: "wby-accordion-background-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "underline",
+    background: "base"
+  }
+});
+const AccordionBase = ({
+  children,
+  variant,
+  background,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: cn(accordionVariants({
+      variant,
+      background
+    }), className)
+  }), children);
+};
+const DecoratableAccordion = makeDecoratable("Accordion", AccordionBase);
+const Accordion = withStaticProps(DecoratableAccordion, {
+  Item: AccordionItem
+});
+export { Accordion };
+
+//# sourceMappingURL=Accordion.js.map

package/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","withStaticProps","cva","cn","AccordionItem","accordionVariants","variants","variant","container","underline","background","base","light","transparent","defaultVariants","AccordionBase","children","className","props","createElement","Object","assign","DecoratableAccordion","Accordion","Item"],"sources":["Accordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, withStaticProps, cva, type VariantProps, cn } from \"~/utils\";\nimport type { AccordionRoot } from \"./components/AccordionRoot\";\nimport { AccordionItem, type AccordionItemProps } from \"./components/AccordionItem\";\n\nconst accordionVariants = cva(\"wby-group wby-w-full\", {\n    variants: {\n        variant: {\n            container: \"wby-accordion-variant-container wby-gap-xs wby-flex wby-flex-col\",\n            underline: \"wby-accordion-variant-underline \"\n        },\n        background: {\n            base: \"wby-accordion-background-base\",\n            light: \"wby-accordion-background-light\",\n            transparent: \"wby-accordion-background-transparent\"\n        }\n    },\n    defaultVariants: {\n        variant: \"underline\",\n        background: \"base\"\n    }\n});\n\ntype AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> &\n    VariantProps<typeof accordionVariants> & {\n        children: React.ReactNode;\n    };\n\nconst AccordionBase = ({ children, variant, background, className, ...props }: AccordionProps) => {\n    return (\n        <div {...props} className={cn(accordionVariants({ variant, background }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst DecoratableAccordion = makeDecoratable(\"Accordion\", AccordionBase);\n\nconst Accordion = withStaticProps(DecoratableAccordion, {\n    Item: AccordionItem\n});\n\nexport { Accordion, type AccordionProps, type AccordionItemProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,EAAEC,eAAe,EAAEC,GAAG,EAAqBC,EAAE;AAErE,SAASC,aAAa;AAEtB,MAAMC,iBAAiB,GAAGH,GAAG,CAAC,sBAAsB,EAAE;EAClDI,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,SAAS,EAAE,kEAAkE;MAC7EC,SAAS,EAAE;IACf,CAAC;IACDC,UAAU,EAAE;MACRC,IAAI,EAAE,+BAA+B;MACrCC,KAAK,EAAE,gCAAgC;MACvCC,WAAW,EAAE;IACjB;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,OAAO,EAAE,WAAW;IACpBG,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC;AAOF,MAAMK,aAAa,GAAGA,CAAC;EAAEC,QAAQ;EAAET,OAAO;EAAEG,UAAU;EAAEO,SAAS;EAAE,GAAGC;AAAsB,CAAC,KAAK;EAC9F,oBACInB,KAAA,CAAAoB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEd,EAAE,CAACE,iBAAiB,CAAC;MAAEE,OAAO;MAAEG;IAAW,CAAC,CAAC,EAAEO,SAAS;EAAE,IAChFD,QACA,CAAC;AAEd,CAAC;AAED,MAAMM,oBAAoB,GAAGtB,eAAe,CAAC,WAAW,EAAEe,aAAa,CAAC;AAExE,MAAMQ,SAAS,GAAGtB,eAAe,CAACqB,oBAAoB,EAAE;EACpDE,IAAI,EAAEpB;AACV,CAAC,CAAC;AAEF,SAASmB,SAAS","ignoreList":[]}

package/Accordion/Accordion.mdx

@@ -0,0 +1,516 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as AccordionStories from './Accordion.stories';
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+The Accordion component is a vertically stacked set of interactive headings that each reveal an associated section of content. It allows users to show and hide sections of related content on a page, helping to reduce page length and organize complex content.
+
+## Usage
+
+<Canvas of={AccordionStories.Documentation} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+
+const AccordionExample = () => {
+    return (
+        <Accordion variant="underline" background="base">
+            <Accordion.Item
+                title="Accordion Item 1"
+                description="This is a description for the first item"
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                actions={
+                    <>
+                        <Accordion.Item.Action icon={<EditIcon />} />
+                        <Accordion.Item.Action icon={<TrashIcon />} />
+                    </>
+                }
+            >
+                This is the content for the first accordion item. It can contain any React elements.
+            </Accordion.Item>
+
+            <Accordion.Item
+                title="Accordion Item 2"
+                description="This is a description for the second item"
+                defaultOpen={true}
+            >
+                This is the content for the second accordion item. It&apos;s open by default.
+            </Accordion.Item>
+
+            <Accordion.Item
+                title="Disabled Item"
+                description="This item cannot be interacted with"
+                disabled={true}
+            >
+                This content won&apos;t be visible because the item is disabled.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default AccordionExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Accordion/Accordion.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={AccordionStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+
+const AccordionExample = () => {
+    return (
+        <Accordion variant="underline" background="base">
+            <Accordion.Item
+                title="Accordion Item 1"
+                description="This is a description for the first item"
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                actions={
+                    <>
+                        <Accordion.Item.Action icon={<EditIcon />} />
+                        <Accordion.Item.Action icon={<TrashIcon />} />
+                    </>
+                }
+            >
+                This is the content for the first accordion item. It can contain any React elements.
+            </Accordion.Item>
+
+            <Accordion.Item
+                title="Accordion Item 2"
+                description="This is a description for the second item"
+                defaultOpen={true}
+            >
+                This is the content for the second accordion item. It&apos;s open by default.
+            </Accordion.Item>
+
+            <Accordion.Item
+                title="Disabled Item"
+                description="This item cannot be interacted with"
+                disabled={true}
+            >
+                This content won&apos;t be visible because the item is disabled.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default AccordionExample;
+```
+
+## Examples
+
+### Default
+
+<Canvas of={AccordionStories.Default} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+
+const DefaultAccordionExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item title="Accordion item 1">
+                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.
+            </Accordion.Item>
+            <Accordion.Item title="Accordion item 2">
+                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.
+            </Accordion.Item>
+            <Accordion.Item title="Accordion item 3">
+                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.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default DefaultAccordionExample;
+` } } />
+
+### With Descriptions
+
+<Canvas of={AccordionStories.WithDescriptions} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+
+const WithDescriptionsExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Accordion item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 3"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default WithDescriptionsExample;
+` } } />
+
+### With Icon
+
+<Canvas of={AccordionStories.WithIcon} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+
+const WithIconExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Accordion item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default WithIconExample;
+` } } />
+
+### With Actions
+
+<Canvas of={AccordionStories.WithActionsIcon} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_upward.svg";
+import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_downward.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+
+const WithActionsExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Accordion item 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 />} />
+                    </>
+                }
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 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 />} />
+                    </>
+                }
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default WithActionsExample;
+` } } />
+
+### With Draggable Item
+
+<Canvas of={AccordionStories.WithDraggableItem} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+
+const WithHandleExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Accordion item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                 draggable={true}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                 draggable={true}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+             <Accordion.Item
+                title="Accordion item 3"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default WithHandleExample;
+` } } />
+
+### Non-Interactive Item
+
+<Canvas of={AccordionStories.WithNotInteractiveItem} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+
+const NonInteractiveExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Non-interactive item"
+                description="This item cannot be expanded or collapsed."
+                interactive={false}
+            >
+                This content won&apos;t be accessible because the item is not interactive.
+            </Accordion.Item>
+            <Accordion.Item title="Regular item">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item title="Another regular item">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default NonInteractiveExample;
+` } } />
+
+### Default Open Item
+
+<Canvas of={AccordionStories.WithDefaultOpenedItem} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+
+const DefaultOpenExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Regular item"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Default open item"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                defaultOpen={true}
+            >
+                This item is open by default. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Sed elit sem, pretium sit amet convallis nec, consequat non nulla.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default DefaultOpenExample;
+` } } />
+
+### Disabled Item
+
+<Canvas of={AccordionStories.WithDisabledItem} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+
+const DisabledItemExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Regular item"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Disabled item"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                disabled={true}
+            >
+                This content won&apos;t be accessible because the item is disabled.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Disabled but open item"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                defaultOpen={true}
+                disabled={true}
+            >
+                This item is disabled but open by default. Users cannot toggle it.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default DisabledItemExample;
+` } } />
+
+### Container Variant
+
+<Canvas of={AccordionStories.ContainerVariant} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+
+const ContainerVariantExample = () => {
+    return (
+        <Accordion variant="container">
+            <Accordion.Item
+                title="Accordion item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default ContainerVariantExample;
+` } } />
+
+### Light Background
+
+<Canvas of={AccordionStories.LightBackground} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+
+const LightBackgroundExample = () => {
+    return (
+        <Accordion background="light">
+            <Accordion.Item
+                title="Accordion item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default LightBackgroundExample;
+` } } />
+
+### Container Variant with Light Background
+
+<Canvas of={AccordionStories.ContainerVariantWithLightBackground} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+
+const ContainerLightExample = () => {
+    return (
+        <Accordion variant="container" background="light">
+            <Accordion.Item
+                title="Accordion item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default ContainerLightExample;
+` } } />