@dropins/tools 0.21.2-alpha2 → 0.21.2-alpha389

package/components/RadioButton/RadioButton.jsx

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

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

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

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

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

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

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

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

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

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

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

package/components/Skeleton/Skeleton.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

package/components/Skeleton/index.js

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

package/components/TextSwatch/TextSwatch.d.ts

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