@dropins/tools 0.21.1 → 0.21.2-alpha2

package/components/RadioButton/RadioButton.jsx

@@ -0,0 +1,31 @@
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/RadioButton/RadioButton.css';
+export const RadioButton = ({ name, label, value, size = 'medium', checked = false, disabled = false, error = false, description = '', className, children, ...props }) => {
+    return (<label className={classes([
+            className,
+            'dropin-radio-button',
+            ['dropin-radio-button--error', error],
+            ['dropin-radio-button--disabled', disabled],
+        ])}>
+      <input name={name} value={value} checked={checked} disabled={disabled} type="radio" className={classes([
+            'dropin-radio-button__input',
+            ['dropin-radio-button__input--error', error],
+            ['dropin-radio-button__input--disabled', disabled],
+        ])} {...props}/>
+      <span className={classes([
+            'dropin-radio-button__label',
+            `dropin-radio-button__label--${size}`,
+            ['dropin-radio-button__label--error', error],
+            ['dropin-radio-button__label--disabled', disabled],
+        ])}>
+        {label}
+      </span>
+      <span className={classes([
+            'dropin-radio-button__description',
+            `dropin-radio-button__description--${size}`,
+            ['dropin-radio-button__description--disabled', disabled],
+        ])}>
+        {description}
+      </span>
+    </label>);
+};

package/components/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { RadioButtonProps } from '@adobe/elsie/components/RadioButton';
+/**
+ * Use Radio Buttons to let users select one option from a set of mutually exclusive choices.
+ */
+declare const meta: Meta<RadioButtonProps>;
+export default meta;
+type Story = StoryObj<RadioButtonProps>;
+/**
+ * ```ts
+ * import { RadioButton } from '@adobe/elsie/components/RadioButton';
+ * ```
+ */
+export declare const RadioButtonStory: Story;
+//# sourceMappingURL=RadioButton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAc,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAIlF;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CA4DhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAExC;;;;GAIG;AAEH,eAAO,MAAM,gBAAgB,EAAE,KAmB9B,CAAC"}

package/components/RadioButton/RadioButton.stories.jsx

@@ -0,0 +1,92 @@
+import { RadioButton } from '@adobe/elsie/components/RadioButton';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+/**
+ * Use Radio Buttons to let users select one option from a set of mutually exclusive choices.
+ */
+const meta = {
+    title: 'Components/RadioButton',
+    component: RadioButton,
+    argTypes: {
+        label: {
+            description: 'Label to be shown beside of the radio button',
+            type: {
+                required: true,
+                name: 'string',
+            },
+        },
+        name: {
+            description: 'Field name (used for mapping the value in a form)',
+            type: {
+                required: true,
+                name: 'string',
+            }
+        },
+        value: {
+            description: 'Field value',
+            type: {
+                required: true,
+                name: 'string',
+            }
+        },
+        description: {
+            description: 'Additional secondary description if needed',
+            type: {
+                required: false,
+                name: 'string',
+            },
+        },
+        disabled: {
+            description: 'Whether or not the radio button is disabled',
+            type: {
+                required: false,
+                name: 'boolean',
+            },
+        },
+        error: {
+            description: 'Whether or not the radio button is in error state',
+            type: {
+                required: false,
+                name: 'boolean',
+            },
+        },
+        size: {
+            description: 'Available sizes for the checkbox label and description texts',
+            type: 'string',
+            options: ['medium', 'large'],
+            defaultValue: {
+                summary: 'medium',
+            },
+            control: {
+                type: 'radio',
+                default: 'medium',
+            },
+        }
+    },
+};
+export default meta;
+/**
+ * ```ts
+ * import { RadioButton } from '@adobe/elsie/components/RadioButton';
+ * ```
+ */
+export const RadioButtonStory = {
+    name: "Radio button",
+    args: {
+        name: 'standard',
+        label: 'Standard',
+        value: 'standard',
+        description: 'Description',
+        size: 'medium',
+        disabled: false,
+        error: false,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const radioButton = await canvas.findByRole('radio');
+        const radioButtonText = await canvas.findByText('Standard');
+        await expect(radioButton).not.toBeChecked();
+        await userEvent.click(radioButtonText);
+        await expect(radioButton).toBeChecked();
+    },
+};

package/components/RadioButton/RadioButton.test.d.ts

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

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

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

package/components/RadioButton/RadioButton.test.jsx

@@ -0,0 +1,62 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render } from '@adobe/elsie/lib/tests';
+import { RadioButton, } from '@adobe/elsie/components/RadioButton';
+describe('Base/Components/RadioButton', () => {
+    const DEFAULT_PROPS = {
+        name: 'name',
+        label: 'label',
+        value: 'value',
+    };
+    test('renders', () => {
+        const { container } = render(<RadioButton {...DEFAULT_PROPS}/>);
+        expect(!!container).toEqual(true);
+    });
+    test('Renders the correct shape for default props', () => {
+        const { container } = render(<RadioButton {...DEFAULT_PROPS}/>);
+        // Ensure the component with default properties matches the snapshot
+        const elem = container.querySelector('.dropin-radio-button');
+        expect(elem).toMatchSnapshot();
+    });
+    test('Renders the radioButton enabled by default, checked and size large', () => {
+        const { container } = render(<RadioButton {...DEFAULT_PROPS} checked={true} size={'large'}/>);
+        // Ensure the radioButton is not disabled
+        const elem = container.querySelector('.dropin-radio-button');
+        expect(elem.classList.contains('dropin-radio-button--disabled')).toEqual(false);
+        // Ensure the radioButton is checked
+        const checked = container.querySelector('.dropin-radio-button__input');
+        expect(checked?.checked).toEqual(true);
+        // Ensure the radioButton size is large
+        const elemTextMedium = container.querySelector('.dropin-radio-button__label');
+        expect(elemTextMedium.classList.contains('dropin-radio-button__label--large')).toEqual(true);
+    });
+    test('Renders the radioButton enabled by default, not checked and size medium', () => {
+        const { container } = render(<RadioButton {...DEFAULT_PROPS} checked={false}/>);
+        // Ensure the radioButton is not disabled
+        const elem = container.querySelector('.dropin-radio-button');
+        expect(elem.classList.contains('dropin-radio-button--disabled')).toEqual(false);
+        // Ensure the radioButton is not checked
+        const checked = container.querySelector('.dropin-radio-button__input');
+        expect(checked?.checked).toEqual(false);
+        // Ensure the radioButton size is medium
+        const elemTextMedium = container.querySelector('.dropin-radio-button__label');
+        expect(elemTextMedium.classList.contains('dropin-radio-button__label--medium')).toEqual(true);
+    });
+    test('Renders the radioButton in disabled state and not checked', () => {
+        const { container } = render(<RadioButton {...DEFAULT_PROPS} disabled={true}/>);
+        // Ensure the radioButton is disabled
+        const elem = container.querySelector('.dropin-radio-button');
+        expect(elem.classList.contains('dropin-radio-button--disabled')).toEqual(true);
+        // Ensure the radioButton is not checked
+        const checked = container.querySelector('.dropin-radio-button__input');
+        expect(checked?.checked).toEqual(false);
+    });
+    test('Renders the radioButton in error state and not checked', () => {
+        const { container } = render(<RadioButton {...DEFAULT_PROPS} error={true}/>);
+        // Ensure the radioButton is not disabled
+        const elem = container.querySelector('.dropin-radio-button');
+        expect(elem.classList.contains('dropin-radio-button--error')).toEqual(true);
+        // Ensure the radioButton is not checked
+        const checked = container.querySelector('.dropin-radio-button__input');
+        expect(checked?.checked).toEqual(false);
+    });
+});

package/components/RadioButton/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,iDAAiD,CAAC;AAChE,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,MAAM,iDAAiD,CAAC"}

package/components/RadioButton/index.js

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

package/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/Skeleton/Skeleton.css';
+export interface SkeletonRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
+    fullWidth?: boolean;
+    lines?: number;
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    variant?: 'heading' | 'row' | 'empty';
+    multilineGap?: 'xsmall' | 'small' | 'medium' | 'big' | 'xbig';
+    children?: string;
+}
+export declare const SkeletonRow: FunctionComponent<SkeletonRowProps>;
+export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
+    rowGap?: 'xsmall' | 'small' | 'medium' | 'big' | 'xbig';
+}
+export declare const Skeleton: FunctionComponent<SkeletonProps>;
+//# sourceMappingURL=Skeleton.d.ts.map

package/components/Skeleton/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,+CAA+C,CAAC;AAEvD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC1D,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;IACtC,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAkF3D,CAAC;AAEF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACpD,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;CACzD;AAED,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAiBrD,CAAC"}

package/components/Skeleton/Skeleton.jsx

@@ -0,0 +1,52 @@
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/Skeleton/Skeleton.css';
+const SINGLELINE = 1;
+export const SkeletonRow = ({ className, fullWidth = false, lines = SINGLELINE, size = 'small', variant = 'row', children = null, multilineGap = 'medium', ...props }) => {
+    const sharedClasses = [
+        [`dropin-skeleton-row__${variant}`, variant],
+        [`dropin-skeleton-row__${variant}-${size}`, variant && size],
+    ];
+    if (!children && variant === 'empty') {
+        return (<div className={classes([
+                'dropin-skeleton-row dropin-skeleton-row__empty',
+                className,
+            ])}/>);
+    }
+    if (children) {
+        const svg = children.trim();
+        return (<div {...props} class={classes([
+                'dropin-skeleton-row',
+                [`dropin-skeleton-row--full`, fullWidth],
+                className,
+            ])} 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: svg }}/>);
+    }
+    const isMultiline = lines > SINGLELINE;
+    if (isMultiline === false) {
+        return (<div {...props} class={classes([
+                'dropin-skeleton-row',
+                [`dropin-skeleton-row--full`, fullWidth],
+                'dropin-skeleton--row__content',
+                ...sharedClasses,
+                className,
+            ])}/>);
+    }
+    return (<div {...props} style={{ '--multiline-gap-spacing': `var(--spacing-${multilineGap})` }} class={classes([
+            'dropin-skeleton-row--multiline',
+            [`dropin-skeleton-row--full`, fullWidth],
+            className,
+        ])}>
+      {Array.from({ length: lines }).map((_, index) => (<div key={index} class={classes([
+                'dropin-skeleton-row',
+                [`dropin-skeleton-row--full`, fullWidth],
+                'dropin-skeleton--row__content',
+                ...sharedClasses,
+            ])}/>))}
+    </div>);
+};
+export const Skeleton = ({ className, children, rowGap = 'medium', ...props }) => {
+    return (<div style={{ '--row-gap-spacing': `var(--spacing-${rowGap})` }} {...props} className={classes(['dropin-skeleton', className])} role="status" aria-label="Loading...">
+      {children}
+    </div>);
+};

package/components/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SkeletonProps, SkeletonRowProps } from './Skeleton';
+/**
+ * Use Skeletons to display content placeholders while content is loading.
+ */
+declare const meta: Meta<SkeletonRowProps & SkeletonProps>;
+export default meta;
+type Story = StoryObj<SkeletonRowProps & SkeletonProps>;
+/**
+ * Import the component to use in your components:
+ *
+ * ```ts
+ * import { Skeleton, SkeletonRow } from '@adobe/elsie/components';
+ * ```
+ */
+/**
+ * Pass in an SVG element as a child to render a shimmering skeleton version of it.
+ *
+ * ```tsx
+ * <Skeleton>
+ *    <SkeletonRow>
+ *     `<svg width="450" height="400">
+ *        <rect x="43" y="304" rx="4" ry="4" width="271" height="9" />
+ *        <rect x="44" y="323" rx="3" ry="3" width="119" height="6" />
+ *        <rect x="42" y="77" rx="10" ry="10" width="388" height="217" />
+ *     </svg>`
+ *    </SkeletonRow>
+ * </Skeleton>
+ * ```
+ */
+export declare const SVG: Story;
+/**
+ * Use a Row HTML element
+ *
+ * ```tsx
+ * <Skeleton>
+ *  <SkeletonRow variant="row" size="medium" />
+ *  <SkeletonRow variant="row" size="medium" />
+ *  <SkeletonRow variant="row" size="medium" />
+ * </Skeleton>
+ * ```
+ */
+export declare const Rows: Story;
+/**
+ * Use a Heading HTML element
+ *
+ * ```tsx
+ * <Skeleton>
+ *  <SkeletonRow variant="heading" size="medium" />
+ * </Skeleton>
+ * ```
+ */
+export declare const Headings: Story;
+/**
+ * HTML Example
+ *
+ * ```tsx
+ * <Skeleton>
+ *  <SkeletonRow variant="heading" size="medium" />
+ *  <SkeletonRow variant="empty" size="medium" />
+ *  <SkeletonRow size="medium" fullWidth={true} />
+ *  <SkeletonRow size="medium" fullWidth={true} lines={3} />
+ * </Skeleton>
+ * ```
+ */
+export declare const HTMLExample: Story;
+//# sourceMappingURL=Skeleton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAEL,aAAa,EAEb,gBAAgB,EACjB,MAAM,YAAY,CAAC;AAGpB;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,GAAG,aAAa,CA0DhD,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,GAAG,aAAa,CAAC,CAAC;AAExD;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AAEH,eAAO,MAAM,GAAG,EAAE,KAyBjB,CAAC;AAEF;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,IAAI,EAAE,KAkClB,CAAC;AAEF;;;;;;;;GAQG;AAEH,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC;AAEF;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,WAAW,EAAE,KAmCzB,CAAC"}

package/components/Skeleton/Skeleton.stories.jsx

@@ -0,0 +1,184 @@
+import { Skeleton, SkeletonRow, } from './Skeleton';
+import { expect } from '@storybook/jest';
+/**
+ * Use Skeletons to display content placeholders while content is loading.
+ */
+const meta = {
+    title: 'Components/Skeleton',
+    component: Skeleton,
+    argTypes: {
+        size: {
+            type: 'string',
+            options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
+            control: {
+                type: 'radio',
+            },
+            defaultValue: {
+                summary: 'small',
+            },
+            description: 'Size of the skeleton',
+        },
+        variant: {
+            type: 'string',
+            options: ['row', 'heading', 'empty'],
+            control: { type: 'radio' },
+            defaultValue: {
+                summary: 'row',
+            },
+            description: 'Variant of the skeleton',
+        },
+        fullWidth: {
+            type: 'boolean',
+            defaultValue: {
+                summary: 'false',
+            },
+            description: 'Stretch the skeleton to full width',
+        },
+        lines: {
+            type: 'number',
+            defaultValue: {
+                summary: '1',
+            },
+            description: 'No. of times to repeat the row',
+        },
+        multilineGap: {
+            type: 'string',
+            options: ['xsmall', 'small', 'medium', 'big', 'xbig'],
+            control: { type: 'radio' },
+            defaultValue: {
+                summary: 'medium',
+            },
+            description: 'Vertical gap between multiline items',
+        },
+        rowGap: {
+            type: 'string',
+            options: ['xsmall', 'small', 'medium', 'big', 'xbig'],
+            control: { type: 'radio' },
+            defaultValue: {
+                summary: 'medium',
+            },
+            description: 'Horizontal and vertical gap between SkeletonRows',
+        },
+    },
+    decorators: [(Story) => <div style={{ width: '400px' }}>{Story()}</div>],
+};
+export default meta;
+/**
+ * Import the component to use in your components:
+ *
+ * ```ts
+ * import { Skeleton, SkeletonRow } from '@adobe/elsie/components';
+ * ```
+ */
+/**
+ * Pass in an SVG element as a child to render a shimmering skeleton version of it.
+ *
+ * ```tsx
+ * <Skeleton>
+ *    <SkeletonRow>
+ *     `<svg width="450" height="400">
+ *        <rect x="43" y="304" rx="4" ry="4" width="271" height="9" />
+ *        <rect x="44" y="323" rx="3" ry="3" width="119" height="6" />
+ *        <rect x="42" y="77" rx="10" ry="10" width="388" height="217" />
+ *     </svg>`
+ *    </SkeletonRow>
+ * </Skeleton>
+ * ```
+ */
+export const SVG = {
+    args: {
+        children: `<svg width="450" height="400">
+        <rect x="43" y="304" rx="4" ry="4" width="271" height="9" />
+        <rect x="44" y="323" rx="3" ry="3" width="119" height="6" />
+        <rect x="42" y="77" rx="10" ry="10" width="388" height="217" />
+      </svg>`,
+    },
+    render: (args) => {
+        return (<Skeleton>
+        <SkeletonRow>{args.children}</SkeletonRow>
+      </Skeleton>);
+    },
+    play: async () => {
+        const skeleton = document.querySelector('.dropin-skeleton');
+        const skeletonRow = document.querySelector('.dropin-skeleton-row');
+        await expect(skeleton).toBeVisible();
+        await expect(skeletonRow).toBeVisible();
+    },
+};
+/**
+ * Use a Row HTML element
+ *
+ * ```tsx
+ * <Skeleton>
+ *  <SkeletonRow variant="row" size="medium" />
+ *  <SkeletonRow variant="row" size="medium" />
+ *  <SkeletonRow variant="row" size="medium" />
+ * </Skeleton>
+ * ```
+ */
+export const Rows = {
+    args: {
+        size: 'medium',
+        variant: 'row',
+        multilineGap: 'medium',
+        rowGap: 'medium',
+    },
+    render: (args) => {
+        return (<Skeleton rowGap={args.rowGap}>
+        <SkeletonRow variant={args.variant} size={args.size} fullWidth={args.fullWidth} lines={args.lines} multilineGap={args.multilineGap}/>
+        <SkeletonRow variant={args.variant} size={args.size} fullWidth={args.fullWidth} lines={args.lines} multilineGap={args.multilineGap}/>
+        <SkeletonRow variant={args.variant} size={args.size} fullWidth={args.fullWidth} lines={args.lines} multilineGap={args.multilineGap}/>
+      </Skeleton>);
+    },
+};
+/**
+ * Use a Heading HTML element
+ *
+ * ```tsx
+ * <Skeleton>
+ *  <SkeletonRow variant="heading" size="medium" />
+ * </Skeleton>
+ * ```
+ */
+export const Headings = {
+    args: {
+        size: 'medium',
+        variant: 'heading',
+        multilineGap: 'medium',
+        rowGap: 'medium',
+    },
+    render: (args) => {
+        return (<Skeleton rowGap={args.rowGap}>
+        <SkeletonRow variant={args.variant} size={args.size} fullWidth={args.fullWidth} lines={args.lines} multilineGap={args.multilineGap}/>
+      </Skeleton>);
+    },
+};
+/**
+ * HTML Example
+ *
+ * ```tsx
+ * <Skeleton>
+ *  <SkeletonRow variant="heading" size="medium" />
+ *  <SkeletonRow variant="empty" size="medium" />
+ *  <SkeletonRow size="medium" fullWidth={true} />
+ *  <SkeletonRow size="medium" fullWidth={true} lines={3} />
+ * </Skeleton>
+ * ```
+ */
+export const HTMLExample = {
+    args: {
+        size: 'medium',
+        multilineGap: 'medium',
+        rowGap: 'medium',
+    },
+    render: (args) => {
+        return (<Skeleton rowGap={args.rowGap}>
+        <SkeletonRow variant={'heading'} size={args.size} multilineGap={args.multilineGap}/>
+        <SkeletonRow variant={'empty'} size={args.size} multilineGap={args.multilineGap}/>
+        <SkeletonRow size={args.size} fullWidth={true} multilineGap={args.multilineGap}/>
+        <SkeletonRow size={args.size} fullWidth={true} lines={3} multilineGap={args.multilineGap}/>
+        <SkeletonRow size={args.size} multilineGap={args.multilineGap}/>
+        <SkeletonRow size={args.size} multilineGap={args.multilineGap}/>
+      </Skeleton>);
+    },
+};

package/components/Skeleton/Skeleton.test.d.ts

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

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

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

package/components/Skeleton/Skeleton.test.jsx

@@ -0,0 +1,62 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render } from '@adobe/elsie/lib/tests';
+import { Skeleton, SkeletonRow } from '@adobe/elsie/components';
+describe('Foundations/Assets/Skeleton', () => {
+    test('renders if it has children', () => {
+        const { container } = render(<Skeleton>
+        <SkeletonRow>{`<svg />`}</SkeletonRow>
+      </Skeleton>);
+        const elem = container.querySelector('.dropin-skeleton-row');
+        expect(!!elem).toEqual(true);
+    });
+    test('renders empty if missing children && params', () => {
+        // @ts-ignore
+        const { container } = render(<Skeleton>
+        <SkeletonRow />
+      </Skeleton>);
+        const elem = container.querySelector('.dropin-skeleton-row__empty');
+        expect(!!elem).toEqual(false);
+    });
+    test('render with row html element', () => {
+        const { container } = render(<Skeleton>
+        <SkeletonRow variant="row" size="small"/>
+      </Skeleton>);
+        const elem = container.querySelector('.dropin-skeleton'), row = container.querySelector('.dropin-skeleton-row__row');
+        expect(!!elem && !!row).toEqual(true);
+    });
+    test('render with heading html element', () => {
+        const { container } = render(<Skeleton>
+        <SkeletonRow variant="heading" size="small"/>
+      </Skeleton>);
+        const elem = container.querySelector('.dropin-skeleton'), row = container.querySelector('.dropin-skeleton-row__heading');
+        expect(!!elem && !!row).toEqual(true);
+    });
+    test('render multiline skeleton row', () => {
+        const { container } = render(<Skeleton>
+        <SkeletonRow variant="row" size="medium" lines={5}/>
+      </Skeleton>);
+        const elem = container.querySelector('.dropin-skeleton'), rows = container.querySelectorAll('.dropin-skeleton-row__row-medium');
+        expect(!!elem && !!(rows.length === 5)).toEqual(true);
+    });
+    test('render full width skeleton row', () => {
+        const { container } = render(<Skeleton>
+        <SkeletonRow variant="row" size="small" fullWidth/>
+      </Skeleton>);
+        const elem = container.querySelector('.dropin-skeleton'), row = container.querySelector('.dropin-skeleton-row--full');
+        expect(!!elem && !!row).toEqual(true);
+    });
+    test('render empty skeleton row', () => {
+        const { container } = render(<Skeleton>
+        <SkeletonRow variant="empty"/>
+      </Skeleton>);
+        const elem = container.querySelector('.dropin-skeleton'), row = container.querySelector('.dropin-skeleton-row__empty');
+        expect(!!elem && !!row).toEqual(true);
+    });
+    test('render skeleton with gaps', () => {
+        const { container } = render(<Skeleton rowGap={'big'}>
+        <SkeletonRow variant="row" size="medium" lines={5} multilineGap={'big'}/>
+      </Skeleton>);
+        const elem = container.querySelector('.dropin-skeleton'), rows = container.querySelectorAll('.dropin-skeleton-row__row-medium');
+        expect(!!elem && !!rows && !!(rows.length === 5)).toEqual(true);
+    });
+});

package/components/Skeleton/index.d.ts

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

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

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

package/components/Skeleton/index.js

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

package/components/TextSwatch/TextSwatch.d.ts

@@ -0,0 +1,18 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/TextSwatch/TextSwatch.css';
+export interface TextSwatchProps extends Omit<HTMLAttributes<HTMLInputElement>, 'label'> {
+    name?: string;
+    label: string;
+    groupAriaLabel?: string;
+    value?: string;
+    id: string;
+    disabled?: boolean;
+    selected?: boolean;
+    outOfStock?: boolean;
+    multi?: boolean;
+    onValue?: (value: any) => void;
+    onUpdateError?: (error: Error) => void;
+}
+export declare const TextSwatch: FunctionComponent<TextSwatchProps>;
+//# sourceMappingURL=TextSwatch.d.ts.map