@dropins/tools 0.21.2-alpha2 → 0.21.2-alpha389

package/components/Accordion/Accordion.stories.jsx

@@ -1,320 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,79 +0,0 @@
-/** 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

@@ -1,3 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

package/components/ActionButton/ActionButton.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,14 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}

package/components/ActionButton/ActionButton.stories.jsx

@@ -1,119 +0,0 @@
-import { ActionButton as component, } from '@adobe/elsie/components/ActionButton';
-import { Add } from '@adobe/elsie/icons';
-import { Icon } from '@adobe/elsie/components/Icon';
-import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-/**
- * Use Action Buttons to let users complete actions or select items in a workflow.
- */
-const meta = {
-    title: 'Components/ActionButton',
-    component,
-    argTypes: {
-        icon: {
-            options: Object.keys(IconsList),
-            mapping: IconsList,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-export default meta;
-export const Default = {
-    name: 'Action Button',
-    args: {
-        children: 'Action',
-        active: false,
-        disabled: false,
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        await expect(await canvas.findByRole('button')).toBeVisible();
-        await expect(await canvas.findByRole('button')).toHaveClass('dropin-action-button');
-    },
-};
-export const IconOnly = {
-    name: 'Icon Action Button',
-    args: {
-        ...Default.args,
-        children: '',
-        'aria-label': 'Action Button',
-        icon: (<Icon source={Add} size="32" className="storybook_icon" stroke="1" viewBox="0 0 24 24"/>),
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const buttonIcon = document.querySelector('.dropin-action-button-icon');
-        const addIcon = document.querySelector('g[data-name="Add icon"]');
-        await expect(await canvas.findByRole('button')).toBeVisible();
-        await expect(await buttonIcon).toBeVisible();
-        await expect(await addIcon).toBeVisible();
-    },
-};
-export const WithIcon = {
-    name: 'Action Button With Icon',
-    args: {
-        ...Default.args,
-        icon: (<Icon source={Add} size="32" className="storybook_icon" stroke="1" viewBox="0 0 24 24"/>),
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const buttonIcon = document.querySelector('.dropin-action-button-icon');
-        const addIcon = document.querySelector('g[data-name="Add icon"]');
-        await expect(await canvas.findByRole('button')).toBeVisible();
-        await expect(await buttonIcon).toBeVisible();
-        await expect(await addIcon).toBeVisible();
-        await expect(await canvas.getByText('Action')).toBeVisible();
-    },
-};
-export const Disabled = {
-    name: 'Disabled Action Button',
-    parameters: {
-        a11y: {
-            config: {
-                rules: [{ id: 'color-contrast', enabled: false }],
-            },
-        },
-    },
-    args: {
-        ...Default.args,
-        disabled: true,
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        await expect(await canvas.findByRole('button')).toBeDisabled();
-    },
-};
-export const Active = {
-    name: 'Active Action Button',
-    args: {
-        ...Default.args,
-        active: true,
-    },
-};
-export const DisabledIcon = {
-    name: 'Disabled Action Button With Icon',
-    parameters: {
-        a11y: {
-            config: {
-                rules: [{ id: 'color-contrast', enabled: false }],
-            },
-        },
-    },
-    args: {
-        ...WithIcon.args,
-        disabled: true,
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        await expect(await canvas.findByRole('button')).toBeDisabled();
-    },
-};
-export const ActiveIcon = {
-    name: 'Active Action Button With Icon',
-    args: {
-        ...WithIcon.args,
-        active: true,
-    },
-};

package/components/ActionButton/ActionButton.test.d.ts

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

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

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

package/components/ActionButton/ActionButton.test.jsx

@@ -1,47 +0,0 @@
-/** https://preactjs.com/guide/v10/preact-testing-library/ */
-import { render } from '@adobe/elsie/lib/tests';
-import { ActionButton } from '@adobe/elsie/components/ActionButton';
-describe('Base/Components/ActionButton', () => {
-    test('renders', () => {
-        const { container } = render(<ActionButton />);
-        const elem = container.querySelector('.dropin-action-button');
-        expect(!!elem).toEqual(true);
-    });
-    // test rendering of button with text
-    test('renders with text', () => {
-        const { container } = render(<ActionButton children="test"/>);
-        const elem = container.querySelector('.dropin-action-button');
-        expect(elem.classList.contains('dropin-action-button')).toEqual(true);
-    });
-    // test rendering of button with children components
-    test('renders with children', () => {
-        const { container } = render(<ActionButton children={<span>test</span>}/>);
-        const elem = container.querySelector('.dropin-action-button');
-        expect(elem.classList.contains('dropin-action-button')).toEqual(true);
-    });
-    // test rendering of button with icon only
-    test('renders with icon only', () => {
-        const { container } = render(<ActionButton icon={<div>icon</div>} children=""/>);
-        const elem2 = container.querySelector('.dropin-action-button-icon');
-        expect(elem2.classList.contains('dropin-action-button-icon')).toEqual(true);
-    });
-    // test rendering of button with text and icon
-    test('renders with text and icon', () => {
-        const { container } = render(<ActionButton icon={<div>icon</div>} children="test"/>);
-        const elem = container.querySelector('.dropin-action-button-icon');
-        expect(elem.classList.contains('dropin-action-button-icon')).toEqual(true);
-        const elem2 = container.querySelector('.dropin-action-button');
-        expect(elem2.classList.contains('dropin-action-button')).toEqual(true);
-    });
-    test('renders disabled', () => {
-        const { container } = render(<ActionButton disabled={true}/>);
-        const elem = container.querySelector('.dropin-action-button');
-        expect(elem.disabled).toEqual(true);
-        expect(elem.classList.contains('dropin-action-button--disabled')).toEqual(true);
-    });
-    test('renders active', () => {
-        const { container } = render(<ActionButton active={true}/>);
-        const elem = container.querySelector('.dropin-action-button');
-        expect(elem.classList.contains('dropin-action-button--active')).toEqual(true);
-    });
-});

package/components/ActionButton/index.d.ts

@@ -1,2 +0,0 @@
-export * from '@adobe/elsie/components/ActionButton/ActionButton';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,mDAAmD,CAAC"}

package/components/ActionButton/index.js

@@ -1 +0,0 @@
-export * from '@adobe/elsie/components/ActionButton/ActionButton';