@dropins/tools 0.21.1 → 0.21.2-alpha2

package/components/Accordion/Accordion.d.ts

@@ -0,0 +1,25 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/Accordion/Accordion.css';
+export interface AccordionSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'icon'> {
+    actionIconPosition?: 'left' | 'right';
+    iconOpen?: VNode<HTMLAttributes<SVGSVGElement>>;
+    iconClose?: VNode<HTMLAttributes<SVGSVGElement>>;
+    iconLeft?: VNode<HTMLAttributes<SVGSVGElement>>;
+    showIconLeft?: boolean;
+    secondaryText?: string | VNode<HTMLAttributes<HTMLSpanElement>>;
+    renderContentWhenClosed?: boolean;
+    onStateChange?: (open: boolean) => void;
+}
+export declare const AccordionSection: FunctionComponent<AccordionSectionProps>;
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'icon'> {
+    actionIconPosition?: 'left' | 'right';
+    iconOpen?: VNode<HTMLAttributes<SVGSVGElement>>;
+    iconClose?: VNode<HTMLAttributes<SVGSVGElement>>;
+    iconLeft?: VNode<HTMLAttributes<SVGSVGElement>>;
+    showIconLeft?: boolean;
+    secondaryText?: string | VNode<HTMLAttributes<HTMLSpanElement>>;
+    children: VNode<AccordionSectionProps>[] | VNode<AccordionSectionProps>;
+}
+export declare const Accordion: FunctionComponent<AccordionProps>;
+//# sourceMappingURL=Accordion.d.ts.map

package/components/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,cAAc,EAAY,MAAM,eAAe,CAAC;AAKzD,OAAO,iDAAiD,CAAC;AACzD,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACpD,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAChE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CA2FrE,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACpD,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAChE,QAAQ,EAAE,KAAK,CAAC,qBAAqB,CAAC,EAAE,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC;CACzE;AAED,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAkCvD,CAAC"}

package/components/Accordion/Accordion.jsx

@@ -0,0 +1,59 @@
+import { useState } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import { Divider, Icon } from '@adobe/elsie/components';
+import { Add, Minus } from '@adobe/elsie/icons';
+import { useText } from '@adobe/elsie/i18n';
+import '@adobe/elsie/components/Accordion/Accordion.css';
+export const AccordionSection = ({ className, children, title, secondaryText, actionIconPosition = 'left', iconOpen = Add, iconClose = Minus, iconLeft = Add, showIconLeft = false, renderContentWhenClosed = true, onStateChange, ...props }) => {
+    const [open, setOpen] = useState(false);
+    const onClickHandler = (e) => {
+        e.stopImmediatePropagation();
+        const next = !open;
+        setOpen(next);
+        onStateChange?.(next);
+    };
+    const buttonLabel = useText(`Dropin.Accordion.${open ? 'close' : 'open'}.label`).label;
+    const openIcon = (<Icon source={iconOpen} size="24" onClick={onClickHandler} onKeyPress={onClickHandler} className={'dropin-accordion-section__open-icon'}/>);
+    const closeIcon = (<Icon source={iconClose} size="24" onClick={onClickHandler} onKeyPress={onClickHandler} className={'dropin-accordion-section__close-icon'}/>);
+    const leftIcon = <Icon source={iconLeft} size="24"/>;
+    return (<div {...props} className={classes(['dropin-accordion-section', className])}>
+      <div className={'dropin-accordion-section__heading'}>
+        <div className={'dropin-accordion-section__flex'} onClick={onClickHandler} onKeyPress={onClickHandler} role="button" aria-label={`${buttonLabel} ${title}`} tabIndex={0}>
+          <div className={'dropin-accordion-section__title-container'}>
+            {actionIconPosition === 'left' && (open ? closeIcon : openIcon)}
+
+            {showIconLeft && leftIcon}
+
+            <h3 className={'dropin-accordion-section__title'}>{title}</h3>
+          </div>
+        </div>
+
+        <div className={'dropin-accordion-section__secondary-text-container'}>
+          {secondaryText && (<h4 className={'dropin-accordion-section__secondary-text'}>
+              {secondaryText}
+            </h4>)}
+
+          {actionIconPosition === 'right' && (open ? closeIcon : openIcon)}
+        </div>
+      </div>
+
+      <div className={'dropin-accordion-section__content-container'} style={{ display: open ? 'grid' : 'none' }}>
+        {(open || (renderContentWhenClosed && !open)) && children}
+      </div>
+    </div>);
+};
+export const Accordion = ({ className, children, actionIconPosition = 'left', iconOpen = Add, iconClose = Minus, ...props }) => {
+    const divider = <Divider variant="secondary"/>;
+    const renderAccordionSection = (child) => (<>
+      <AccordionSection {...child.props} actionIconPosition={actionIconPosition} iconOpen={iconOpen} iconClose={iconClose}/>
+      {divider}
+    </>);
+    return (<div {...props} className={classes(['dropin-accordion', className])}>
+      {[
+            divider,
+            ...(Array.isArray(children)
+                ? children
+                : [children]).map(renderAccordionSection),
+        ]}
+    </div>);
+};

package/components/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { AccordionProps, AccordionSectionProps } from '@adobe/elsie/components/Accordion';
+declare const meta: Meta<AccordionProps & AccordionSectionProps>;
+export default meta;
+type Story = StoryObj<AccordionProps>;
+/**
+ * ```ts
+ * import { Accordion, AccordionSection } from '@adobe/elsie/components/Accordion';
+ *
+ * <Accordion>
+ *    <AccordionSection title={"Title"}><p>Short product details should be kept to 6 lines maximum.</p></AccordionSection>
+ * </Accordion>
+ *
+ * ```
+ */
+export declare const SingleSection: Story;
+export declare const SingleSectionWithLeftIcon: Story;
+export declare const SingleSectionWithOptionalText: Story;
+export declare const SingleSectionWithPrice: Story;
+export declare const SingleSectionWithLinkAndCartItem: Story;
+export declare const MultipleSection: Story;
+//# sourceMappingURL=Accordion.stories.d.ts.map

package/components/Accordion/Accordion.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAEL,cAAc,EAEd,qBAAqB,EACtB,MAAM,mCAAmC,CAAC;AAM3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAmDtD,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAEtC;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,KAmD3B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAsDvC,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KA8D3C,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA8CpC,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,KA+E9C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8G7B,CAAC"}

package/components/Accordion/Accordion.stories.jsx

@@ -0,0 +1,320 @@
+import { Accordion, AccordionSection, } from '@adobe/elsie/components/Accordion';
+import { Price, Card, Image, CartItem } from '..';
+import { expect } from '@storybook/jest';
+import { within, userEvent } from '@storybook/testing-library';
+import * as Icons from '@adobe/elsie/icons';
+const meta = {
+    title: 'Components/Accordion',
+    component: Accordion,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered', // centered | fullscreen
+    },
+    argTypes: {
+        actionIconPosition: {
+            description: 'Position of the action icon',
+            options: ['left', 'right'],
+            control: {
+                type: 'select',
+            },
+            defaultValue: 'left',
+        },
+        iconOpen: {
+            description: 'Icon for open button (svg)',
+            options: Object.keys(Icons),
+            mapping: Icons,
+            control: {
+                type: 'select',
+            },
+            defaultValue: 'Minus',
+        },
+        iconClose: {
+            description: 'Icon for close button (svg)',
+            options: Object.keys(Icons),
+            mapping: Icons,
+            control: {
+                type: 'select',
+            },
+            defaultValue: 'Minus',
+        },
+        iconLeft: {
+            description: 'Optional icon on left side (svg)',
+            options: Object.keys(Icons),
+            mapping: Icons,
+            control: {
+                type: 'select',
+            },
+            defaultValue: 'Minus',
+        },
+        showIconLeft: {
+            description: 'Whether or not the display the leftIcon',
+            type: 'boolean',
+            defaultValue: {
+                summary: false,
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * ```ts
+ * import { Accordion, AccordionSection } from '@adobe/elsie/components/Accordion';
+ *
+ * <Accordion>
+ *    <AccordionSection title={"Title"}><p>Short product details should be kept to 6 lines maximum.</p></AccordionSection>
+ * </Accordion>
+ *
+ * ```
+ */
+export const SingleSection = {
+    args: {
+        actionIconPosition: 'right',
+        iconOpen: Icons.Add,
+        iconClose: Icons.Minus,
+    },
+    render: ({ actionIconPosition, iconOpen, iconClose }) => (<div>
+      <h2 style={{
+            font: 'var(--type-body-1-strong-font)',
+            color: 'var(--color-neutral-800)',
+            letterSpacing: 'var(--type-body-1-strong-letter-spacing)',
+        }}>
+        This is the Accordion Component, this title will be longer in order to
+        increase width of the story
+      </h2>
+
+      <Accordion actionIconPosition={actionIconPosition} iconOpen={iconOpen} iconClose={iconClose}>
+        <AccordionSection title={'Title'}>
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+      </Accordion>
+    </div>),
+    play: async () => {
+        const canvasElement = document.querySelector('#storybook-root');
+        const canvas = within(canvasElement);
+        const loaderIcon = document.querySelector('div[class*="dropin-accordion"]');
+        await expect(loaderIcon).toBeVisible();
+        const header = document.querySelector('.dropin-accordion-section__heading');
+        await expect(header).toHaveTextContent('Title');
+        await userEvent.click(canvas.getByRole('button'));
+        const content = document.querySelector('.dropin-accordion-section__content-container');
+        await expect(content).toBeVisible();
+    },
+};
+export const SingleSectionWithLeftIcon = {
+    args: {
+        actionIconPosition: 'right',
+        iconOpen: Icons.Add,
+        iconClose: Icons.Minus,
+        iconLeft: Icons.Card,
+        showIconLeft: true,
+    },
+    render: ({ actionIconPosition, iconOpen, iconClose, iconLeft, showIconLeft, }) => (<div>
+      <h2 style={{
+            font: 'var(--type-body-1-strong-font)',
+            color: 'var(--color-neutral-800)',
+            letterSpacing: 'var(--type-body-1-strong-letter-spacing)',
+        }}>
+        This is the Accordion Component, this title will be longer in order to
+        increase width of the story
+      </h2>
+
+      <Accordion actionIconPosition={actionIconPosition} iconOpen={iconOpen} iconClose={iconClose}>
+        <AccordionSection title={'Title'} secondaryText={'Optional Text'} iconLeft={iconLeft} showIconLeft={showIconLeft}>
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+      </Accordion>
+    </div>),
+    play: async () => {
+        const loaderIcon = document.querySelector('div[class*="dropin-accordion"]');
+        await expect(loaderIcon).toBeVisible();
+        const leftHeader = document.querySelector('.dropin-accordion-section__title-container');
+        await expect(leftHeader).toBeVisible();
+        await expect(leftHeader).toContainHTML('<svg');
+    },
+};
+export const SingleSectionWithOptionalText = {
+    args: {
+        actionIconPosition: 'right',
+        iconOpen: Icons.Add,
+        iconClose: Icons.Minus,
+        iconLeft: Icons.Card,
+        secondaryText: 'Optional Text',
+    },
+    argTypes: {
+        secondaryText: {
+            description: 'Add text to the button.',
+            table: {
+                type: { summary: 'ComponentChildren' },
+            },
+            control: 'text',
+        },
+    },
+    render: ({ actionIconPosition, iconOpen, iconClose, iconLeft, secondaryText, }) => (<div>
+      <h2 style={{
+            font: 'var(--type-body-1-strong-font)',
+            color: 'var(--color-neutral-800)',
+            letterSpacing: 'var(--type-body-1-strong-letter-spacing)',
+        }}>
+        This is the Accordion Component, this title will be longer in order to
+        increase width of the story
+      </h2>
+
+      <Accordion actionIconPosition={actionIconPosition} iconOpen={iconOpen} iconClose={iconClose}>
+        <AccordionSection title={'Title'} secondaryText={secondaryText} iconLeft={iconLeft}>
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+      </Accordion>
+    </div>),
+    play: async () => {
+        const loaderIcon = document.querySelector('div[class*="dropin-accordion"]');
+        await expect(loaderIcon).toBeVisible();
+        const secondaryText = document.querySelector('.dropin-accordion-section__secondary-text');
+        await expect(secondaryText).toBeVisible();
+        await expect(secondaryText).toHaveTextContent('Optional Text');
+    },
+};
+export const SingleSectionWithPrice = {
+    args: {
+        actionIconPosition: 'right',
+        iconOpen: Icons.Add,
+        iconClose: Icons.Minus,
+        iconLeft: Icons.Card,
+    },
+    render: ({ actionIconPosition, iconOpen, iconClose, iconLeft }) => (<div>
+      <h2 style={{
+            font: 'var(--type-body-1-strong-font)',
+            color: 'var(--color-neutral-800)',
+            letterSpacing: 'var(--type-body-1-strong-letter-spacing)',
+        }}>
+        This is the Accordion Component, this title will be longer in order to
+        increase width of the story
+      </h2>
+
+      <Accordion actionIconPosition={actionIconPosition} iconOpen={iconOpen} iconClose={iconClose}>
+        <AccordionSection title={'Title'} iconLeft={iconLeft} secondaryText={<Price amount={9.99}/>}>
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+      </Accordion>
+    </div>),
+    play: async () => {
+        const loaderIcon = document.querySelector('div[class*="dropin-accordion"]');
+        await expect(loaderIcon).toBeVisible();
+        const secondaryText = document.querySelector('.dropin-accordion-section__secondary-text');
+        await expect(secondaryText).toBeVisible();
+        await expect(secondaryText).toHaveTextContent('$9.99');
+    },
+};
+export const SingleSectionWithLinkAndCartItem = {
+    args: {
+        actionIconPosition: 'left',
+        iconOpen: Icons.ChevronDown,
+        iconClose: Icons.ChevronUp,
+    },
+    render: ({ actionIconPosition, iconOpen, iconClose }) => (<div>
+      <h2 style={{
+            font: 'var(--type-body-1-strong-font)',
+            color: 'var(--color-neutral-800)',
+            letterSpacing: 'var(--type-body-1-strong-letter-spacing)',
+        }}>
+        This is the Accordion Component, this title will be longer in order to
+        increase width of the story
+      </h2>
+
+      <Accordion actionIconPosition={actionIconPosition} iconOpen={iconOpen} iconClose={iconClose}>
+        <AccordionSection title={'Title'} secondaryText={<a rel="noreferrer" href="/cart">
+              Edit
+            </a>}>
+          <CartItem key={'uuid'} title={<div>Short Name</div>} description={<div>
+                Secondary product information such as brand name, description,
+                etc.
+              </div>} sku={<div>SKU: 59YK7</div>} quantity={1} image={<Image src="https://picsum.photos/132/184" width="132" height="184" alt="Some alternative text" loading="lazy"/>} price={<Price amount={53.99} style={{ fontWeight: 'inherit', color: 'inherit' }}/>} total={<>
+                <Price amount={59.98} variant="strikethrough"/>
+                <Price amount={55.95} sale/>
+              </>}/>
+        </AccordionSection>
+      </Accordion>
+    </div>),
+    play: async () => {
+        const accordionElement = document.querySelector('.dropin-accordion');
+        const link = accordionElement.querySelector('.dropin-accordion a');
+        await expect(accordionElement).toBeVisible();
+        await expect(link).toHaveTextContent('Edit');
+        await expect(link).toHaveAttribute('href', '/cart');
+    },
+};
+export const MultipleSection = {
+    args: {
+        actionIconPosition: 'right',
+        iconOpen: Icons.ChevronDown,
+        iconClose: Icons.ChevronUp,
+        iconLeft: Icons.Card,
+        showIconLeft: false,
+    },
+    argTypes: {
+        showIconLeft: {
+            table: {
+                disable: true,
+            },
+        },
+        iconLeft: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    render: ({ actionIconPosition, iconOpen, iconClose }) => (<div>
+      <h2 style={{
+            font: 'var(--type-body-1-strong-font)',
+            color: 'var(--color-neutral-800)',
+            letterSpacing: 'var(--type-body-1-strong-letter-spacing)',
+        }}>
+        This is the Accordion Component, this title will be longer in order to
+        increase width of the story
+      </h2>
+
+      <Accordion actionIconPosition={actionIconPosition} iconOpen={iconOpen} iconClose={iconClose}>
+        <AccordionSection title={'Cart summary'} iconLeft={Icons.Cart} showIconLeft={true} renderContentWhenClosed={false}>
+          <Card>
+            <h2 style={{ font: 'var(--type-headline-2-strong-font)' }}>
+              Title
+            </h2>
+            <p style={{ font: 'var(--type-body-2-default-font)' }}>
+              This is a short description of the item and should be kept to two
+              or three lines as maximum.
+            </p>
+          </Card>
+        </AccordionSection>
+        <AccordionSection title={'Card info'} iconLeft={Icons.Card} showIconLeft={true} secondaryText={'Optional Text'} renderContentWhenClosed={false}>
+          <p>
+            Short product details should be kept to 6 lines maximum.
+            <br />
+            Short product details should be kept to 6 lines maximum.
+            <br />
+            Short product details should be kept to 6 lines maximum.
+            <br />
+            Short product details should be kept to 6 lines maximum.
+            <br />
+            Short product details should be kept to 6 lines maximum.
+            <br />
+          </p>
+        </AccordionSection>
+        <AccordionSection title={'Wallet'} iconLeft={Icons.Wallet} showIconLeft={true}>
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+        <AccordionSection title={'Shipping'} iconLeft={Icons.Delivery} showIconLeft={true}>
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+        <AccordionSection title={'Notes'} iconLeft={Icons.Delivery} showIconLeft={false}>
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+      </Accordion>
+    </div>),
+    play: async () => {
+        const loaderIcon = document.querySelector('div[class*="dropin-accordion"]');
+        await expect(loaderIcon).toBeVisible();
+        const section = document.querySelector('.dropin-accordion-section');
+        await expect(section).toBeVisible();
+        const divider = document.querySelector('.dropin-divider');
+        await expect(divider).toBeVisible();
+    },
+};

package/components/Accordion/Accordion.test.d.ts

@@ -0,0 +1,3 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+export {};
+//# sourceMappingURL=Accordion.test.d.ts.map

package/components/Accordion/Accordion.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.test.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.test.tsx"],"names":[],"mappings":"AAAA,6DAA6D"}

package/components/Accordion/Accordion.test.jsx

@@ -0,0 +1,79 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render, fireEvent, act } from '@adobe/elsie/lib/tests';
+import { Accordion, AccordionSection } from '@adobe/elsie/components/Accordion';
+describe('Base/Components/Accordion', () => {
+    test('renders', () => {
+        const { container } = render(<Accordion>
+        <AccordionSection title={'Title'}>
+          <span>Content goes here</span>
+        </AccordionSection>
+      </Accordion>);
+        const element = container.querySelector('.dropin-accordion');
+        expect(element).toMatchSnapshot();
+    });
+    test('renders and open', () => {
+        const mockOnStateChange = jest.fn();
+        const { container } = render(<Accordion>
+        <AccordionSection showIconLeft={true} title={'Title'} onStateChange={mockOnStateChange}>
+          <span>Content goes here</span>
+        </AccordionSection>
+        <AccordionSection showIconLeft={true} title={'Title2'} secondaryText={'Optional Text'}>
+          <span>Content goes here2</span>
+        </AccordionSection>
+      </Accordion>);
+        const button = container.querySelector('.dropin-accordion-section__flex');
+        expect(button).not.toBeNull();
+        act(() => {
+            fireEvent.click(button);
+        });
+        expect(mockOnStateChange).toHaveBeenCalledTimes(1);
+        const element_new = container.querySelector('.dropin-accordion');
+        expect(element_new).toMatchSnapshot();
+    });
+    test('renders different sections with action icon on different positions', () => {
+        const mockOnStateChange = jest.fn();
+        const { container } = render(<>
+        <AccordionSection showIconLeft={true} title={'Title1'} onStateChange={mockOnStateChange} actionIconPosition={'right'}>
+          <span>Content goes here1</span>
+        </AccordionSection>
+        <AccordionSection showIconLeft={true} title={'Title2'} onStateChange={mockOnStateChange} actionIconPosition={'left'}>
+          <span>Content goes here2</span>
+        </AccordionSection>
+        <AccordionSection showIconLeft={true} title={'Title3'} onStateChange={mockOnStateChange}>
+          <span>Content goes here3</span>
+        </AccordionSection>
+      </>);
+        const element = container.querySelector('.dropin-accordion-section');
+        expect(!!container).toEqual(true);
+        expect(container).toMatchSnapshot();
+        expect(element).not.toBeNull();
+        const actionButton = container.querySelector('.dropin-accordion-section__open-icon');
+        expect(actionButton).not.toBeNull();
+        act(() => {
+            fireEvent.click(actionButton);
+        });
+        expect(mockOnStateChange).toHaveBeenCalledTimes(1);
+    });
+    test('should render content when section is closed and renderContentWhenClosed is true', () => {
+        const { container } = render(<Accordion>
+        <AccordionSection title={'Title'} renderContentWhenClosed={true}>
+          <span id="content">Content goes here</span>
+        </AccordionSection>
+      </Accordion>);
+        const element = container.querySelector('.dropin-accordion');
+        expect(element).toMatchSnapshot();
+        const content = container.querySelector('#content');
+        expect(content).not.toBeNull();
+    });
+    test('should not render content when section is closed and renderContentWhenClosed is false', () => {
+        const { container } = render(<Accordion>
+        <AccordionSection title={'Title'} renderContentWhenClosed={false}>
+          <span id="content">Content goes here</span>
+        </AccordionSection>
+      </Accordion>);
+        const element = container.querySelector('.dropin-accordion');
+        expect(element).toMatchSnapshot();
+        const content = container.querySelector('#content');
+        expect(content).toBeNull();
+    });
+});

package/components/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@adobe/elsie/components/Accordion/Accordion';
+export { Accordion as default } from '@adobe/elsie/components/Accordion/Accordion';
+//# sourceMappingURL=index.d.ts.map

package/components/Accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,SAAS,IAAI,OAAO,EAAE,MAAM,6CAA6C,CAAC"}

package/components/Accordion/index.js

@@ -0,0 +1,2 @@
+export * from '@adobe/elsie/components/Accordion/Accordion';
+export { Accordion as default } from '@adobe/elsie/components/Accordion/Accordion';

package/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,11 @@
+import { ComponentChildren, FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/ActionButton/ActionButton.css';
+export interface ActionButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'icon'> {
+    children?: ComponentChildren;
+    icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+    active?: boolean;
+    disabled?: boolean;
+}
+export declare const ActionButton: FunctionComponent<ActionButtonProps>;
+//# sourceMappingURL=ActionButton.d.ts.map

package/components/ActionButton/ActionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,uDAAuD,CAAC;AAE/D,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACvD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA8B7D,CAAC"}

package/components/ActionButton/ActionButton.jsx

@@ -0,0 +1,14 @@
+import { VComponent, classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/ActionButton/ActionButton.css';
+export const ActionButton = ({ icon, className, children, active = false, disabled = false, ...props }) => {
+    return (<button role="button" disabled={disabled} {...props} className={classes([
+            'dropin-action-button',
+            ['dropin-action-button--active', active],
+            ['dropin-action-button--disabled', disabled],
+            className,
+        ])}>
+      {icon && (<VComponent node={icon} className={classes(['dropin-action-button-icon'])}/>)}
+      {children &&
+            (typeof children === 'string' ? <span>{children}</span> : children)}
+    </button>);
+};

package/components/ActionButton/ActionButton.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { ActionButtonProps } from '@adobe/elsie/components/ActionButton';
+/**
+ * Use Action Buttons to let users complete actions or select items in a workflow.
+ */
+declare const meta: Meta<ActionButtonProps>;
+export default meta;
+type Story = StoryObj<ActionButtonProps>;
+export declare const Default: Story;
+export declare const IconOnly: Story;
+export declare const WithIcon: Story;
+export declare const Disabled: Story;
+export declare const Active: Story;
+export declare const DisabledIcon: Story;
+export declare const ActiveIcon: Story;
+//# sourceMappingURL=ActionButton.stories.d.ts.map

package/components/ActionButton/ActionButton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/ActionButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAEL,iBAAiB,EAClB,MAAM,sCAAsC,CAAC;AAO9C;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAYjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA4BtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA2BtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC"}