@dropins/tools 0.21.1 → 0.21.2-alpha2

package/components/PriceSummary/PriceSummary.test.jsx

@@ -0,0 +1,275 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { screen, render, fireEvent } from '@adobe/elsie/lib/tests';
+import { PriceSummary, } from '@adobe/elsie/components/PriceSummary';
+import { Picker, Price } from '..';
+import { act } from 'preact/test-utils';
+const baseProps = {
+    heading: 'Order Summary',
+    loading: false,
+    total: {
+        price: <Price amount={100} currency="USD"/>,
+    },
+    subTotal: {
+        price: <Price amount={90} currency="USD"/>,
+    },
+    shipping: {
+        price: <Price amount={10} currency="USD"/>,
+    },
+    taxTotal: {
+        price: <Price amount={10} currency="USD"/>,
+    },
+};
+describe('Base/Components/PriceSummary', () => {
+    test('renders base props content correctly', () => {
+        const { container } = render(<PriceSummary {...baseProps}/>);
+        const loadingSkeleton = screen.queryByTestId('loading-skeleton');
+        expect(loadingSkeleton).toBeFalsy();
+        expect(!!container).toEqual(true);
+        const taxBreakdown = screen.queryByTestId('tax-breakdown');
+        expect(taxBreakdown).toBeFalsy();
+        const taxOnly = screen.queryByTestId('tax-total-only');
+        expect(taxOnly).toBeTruthy();
+        const totalWithoutTax = screen.queryByTestId('total-without-tax');
+        expect(totalWithoutTax).toBeFalsy();
+        const subTotalTaxCaption = screen.queryByTestId('sub-total-tax-caption');
+        expect(subTotalTaxCaption).toBeFalsy();
+    });
+    test('renders with loading state', () => {
+        render(<PriceSummary heading="Test" loading/>);
+        const loadingSkeleton = screen.queryByTestId('loading-skeleton');
+        expect(loadingSkeleton).toBeTruthy();
+    });
+    test('renders loading state if loading is not defined', () => {
+        render(<PriceSummary heading="Test" loading={undefined}/>);
+        const loadingSkeleton = screen.queryByTestId('loading-skeleton');
+        expect(loadingSkeleton).toBeTruthy();
+    });
+    test('renders with primary action', () => {
+        render(<PriceSummary {...baseProps} primaryAction={<button>Primary Action</button>}/>);
+        const primaryAction = screen.queryByText('Primary Action');
+        expect(primaryAction).toBeTruthy();
+    });
+    describe('Tax breakdown', () => {
+        const taxesApplied = [
+            {
+                label: 'VAT standard',
+                price: <Price amount={5} currency="USD"/>,
+            },
+            {
+                label: 'VAT reduced',
+                price: <Price amount={5} currency="USD"/>,
+            },
+        ];
+        test('renders tax breakdown but not entries on initial render', () => {
+            render(<PriceSummary {...baseProps} taxesApplied={taxesApplied}/>);
+            const taxBreakdown = screen.queryByTestId('tax-breakdown');
+            expect(taxBreakdown).toBeTruthy();
+            const taxEntries = screen.queryAllByText('VAT', { exact: false });
+            expect(taxEntries.length).toEqual(0);
+        });
+        test('reveal/hide tax breakdown entries when toggle button is pressed', () => {
+            render(<PriceSummary {...baseProps} taxesApplied={taxesApplied}/>);
+            const taxEntries = screen.queryAllByText('VAT', { exact: false });
+            expect(taxEntries.length).toEqual(0);
+            const toggleTaxBreakdown = screen.queryByRole('button');
+            expect(toggleTaxBreakdown).toBeTruthy();
+            act(() => {
+                toggleTaxBreakdown?.click();
+            });
+            const taxEntriesAfterClick = screen.queryAllByText('VAT', {
+                exact: false,
+            });
+            expect(taxEntriesAfterClick.length).toEqual(2);
+        });
+        test('renders estimated total tax', () => {
+            render(<PriceSummary {...baseProps} taxTotal={{
+                    price: <Price amount={10} currency="USD"/>,
+                    estimated: true,
+                }}/>);
+            const taxTotalOnly = screen.queryByTestId('tax-total-only');
+            expect(taxTotalOnly).toBeTruthy();
+            expect(taxTotalOnly?.classList).toContain('dropin-price-summary__taxTotal');
+            const label = taxTotalOnly?.getElementsByTagName('span')[0];
+            expect(label?.textContent).toMatchInlineSnapshot(`"Estimated Tax"`);
+        });
+    });
+    describe('Shipping', () => {
+        const shipping = {
+            price: <Price amount={10} currency="USD"/>,
+            country: <Picker value="US"/>,
+            estimated: true,
+            destinationText: '12345',
+        };
+        test('renders entry with clickable zip if provided', () => {
+            render(<PriceSummary {...baseProps} shipping={shipping}/>);
+            const shippingZip = screen.queryByText('12345', { exact: false });
+            expect(shippingZip).toBeTruthy();
+            expect(shippingZip?.getAttribute('role')).toEqual('button');
+            // Simulate click events
+            act(() => {
+                shippingZip?.click();
+                shippingZip?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+                shippingZip?.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
+                shippingZip?.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' }));
+            });
+        });
+        test('renders entry without clickable zip if not provided', () => {
+            render(<PriceSummary {...baseProps} shipping={{
+                    price: <Price amount={1} currency="USD"/>,
+                    estimated: true,
+                    taxIncluded: true,
+                }}/>);
+            const shippingZip = screen.queryByText('12345', { exact: false });
+            expect(shippingZip).toBeFalsy();
+            const shippingContent = screen.queryByTestId('shipping-content');
+            expect(shippingContent).toMatchSnapshot();
+        });
+        describe('estimate form', () => {
+            const mockOnEstimate = jest.fn();
+            const shippingProps = {
+                price: <Price amount={10} currency="USD"/>,
+                countryField: (<select name="country" data-testid="country-field">
+            <option value="US">United States</option>
+            <option value="UK">United Kingdom</option>
+          </select>),
+                stateField: (<select name="state" data-testid="state-field">
+            <option value="CA">California</option>
+            <option value="NY">New York</option>
+          </select>),
+                zipField: <input name="zip" data-testid="zip-field"/>,
+                estimated: true,
+                destinationText: '12345',
+                onEstimate: mockOnEstimate,
+                estimateButton: <button>Estimate</button>,
+            };
+            test('renders estimate form when fields are provided', () => {
+                render(<PriceSummary {...baseProps} shipping={shippingProps}/>);
+                const countryField = screen.queryByTestId('country-field');
+                expect(countryField).toBeTruthy();
+                const zipField = screen.queryByTestId('zip-field');
+                expect(zipField).toBeTruthy();
+                // State field should not be rendered on default render
+                const stateField = screen.queryByTestId('state-field');
+                expect(stateField).not.toBeTruthy();
+                const estimateButton = screen.queryByText('Estimate');
+                expect(estimateButton).toBeTruthy();
+            });
+            test('toggles between fields when alternate field link is clicked', () => {
+                render(<PriceSummary {...baseProps} shipping={shippingProps}/>);
+                const link = screen.queryByTestId('shipping-alternate-field-link');
+                expect(link).toBeTruthy();
+                act(() => {
+                    link?.click();
+                });
+                // Zip field should no longer be rendered
+                let zipField = screen.queryByTestId('zip-field');
+                expect(zipField).not.toBeTruthy();
+                let stateField = screen.queryByTestId('state-field');
+                expect(stateField).toBeTruthy();
+                // Toggle again
+                act(() => {
+                    link?.click();
+                });
+                zipField = screen.queryByTestId('zip-field');
+                expect(zipField).toBeTruthy();
+                stateField = screen.queryByTestId('state-field');
+                expect(stateField).not.toBeTruthy();
+            });
+            test('hides estimate form when destination link is clicked', () => {
+                render(<PriceSummary {...baseProps} shipping={shippingProps}/>);
+                const destinationLink = screen.queryByTestId('shipping-destination-link');
+                expect(destinationLink).toBeTruthy();
+                act(() => {
+                    destinationLink?.click();
+                });
+                const estimateForm = screen.queryByTestId('shipping-estimate-form');
+                expect(estimateForm?.classList).toContain('dropin-price-summary__shipping--hide');
+            });
+            test('calls onEstimate when estimate button is clicked', () => {
+                render(<PriceSummary {...baseProps} shipping={shippingProps}/>);
+                const estimateButton = screen.queryByText('Estimate');
+                expect(estimateButton).toBeTruthy();
+                const countryField = screen.queryByTestId('country-field');
+                const zipField = screen.queryByTestId('zip-field');
+                act(() => {
+                    fireEvent.select(countryField, {
+                        target: { value: 'UK' },
+                    });
+                    fireEvent.input(zipField, {
+                        target: { value: '54321' },
+                    });
+                    estimateButton?.click();
+                });
+                expect(countryField?.value).toEqual('UK');
+                expect(zipField?.value).toEqual('54321');
+                expect(mockOnEstimate).toHaveBeenCalledTimes(1);
+                expect(mockOnEstimate.mock.calls[0][0]).toMatchInlineSnapshot(`
+          Object {
+            "country": "UK",
+            "zip": "54321",
+          }
+        `);
+            });
+        });
+    });
+    describe('Total', () => {
+        test('renders padded estimate if isEstimated is true', () => {
+            const total = {
+                price: <Price amount={100} currency="USD"/>,
+                estimated: true,
+            };
+            render(<PriceSummary {...baseProps} total={total}/>);
+            const divider = screen.queryByTestId('total-divider');
+            expect(divider).toBeFalsy();
+            const totalContent = screen.queryByTestId('total-content');
+            expect(totalContent?.classList).toContain('dropin-price-summary__total--padded');
+            const label = totalContent?.getElementsByTagName('span')[0];
+            expect(label?.textContent).toMatchInlineSnapshot(`"Estimated Total"`);
+        });
+        test('render total without tax if data is provided', () => {
+            const total = {
+                price: <Price amount={100} currency="USD"/>,
+                priceWithoutTax: <Price amount={90} currency="USD"/>,
+            };
+            render(<PriceSummary {...baseProps} total={total}/>);
+            const totalWithoutTax = screen.queryByTestId('total-without-tax');
+            expect(totalWithoutTax).toBeTruthy();
+        });
+    });
+    describe('Subtotal', () => {
+        test('renders subtotal with tax if isTaxIncluded is true', () => {
+            const subTotal = {
+                price: <Price amount={90} currency="USD"/>,
+                taxIncluded: true,
+            };
+            render(<PriceSummary {...baseProps} subTotal={subTotal}/>);
+            const subTotalTaxCaption = screen.queryByTestId('sub-total-tax-caption');
+            expect(subTotalTaxCaption).toBeTruthy();
+        });
+    });
+    describe('Discounts', () => {
+        test('renders discounts if provided', () => {
+            const discounts = [
+                {
+                    label: 'Discount-1',
+                    price: <Price amount={-10} currency="USD"/>,
+                    caption: <span>Discount Caption</span>,
+                },
+                {
+                    label: 'Discount-2',
+                    price: <Price amount={-10} currency="USD"/>,
+                },
+                {
+                    label: 'Discount-3',
+                    price: <Price amount={-10} currency="USD"/>,
+                    caption: <span>Discount Caption</span>,
+                },
+            ];
+            render(<PriceSummary {...baseProps} discounts={discounts}/>);
+            const discountLabel = screen.queryAllByText('Discount-', {
+                exact: false,
+            });
+            expect(discountLabel).toHaveLength(3);
+        });
+    });
+});

package/components/PriceSummary/index.d.ts

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

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

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

package/components/PriceSummary/index.js

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

package/components/ProgressSpinner/ProgressSpinner.d.ts

@@ -0,0 +1,14 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/ProgressSpinner/ProgressSpinner.css';
+/**
+ * @param size this is the size of the spinner ranging in [12px, 24px, 36px, 48px]
+ * @param stroke this is the stroke of the spinner ranging in [1px, 2px, 3px, 4px]
+ */
+export interface ProgressSpinnerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
+    ariaLabel?: string;
+    size?: 'small' | 'medium' | 'big' | 'large';
+    stroke?: '1' | '2' | '3' | '4';
+}
+export declare const ProgressSpinner: FunctionComponent<ProgressSpinnerProps>;
+//# sourceMappingURL=ProgressSpinner.d.ts.map

package/components/ProgressSpinner/ProgressSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressSpinner/ProgressSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C,OAAO,6DAA6D,CAAC;AAErE;;;GAGG;AACH,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;IAC5C,MAAM,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAChC;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CA0DnE,CAAC"}

package/components/ProgressSpinner/ProgressSpinner.jsx

@@ -0,0 +1,31 @@
+import { useText } from '@adobe/elsie/i18n';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/ProgressSpinner/ProgressSpinner.css';
+export const ProgressSpinner = ({ ariaLabel, size = 'small', stroke = '4', children, className, style, ...props }) => {
+    const commonClasses = [
+        'dropin-progress-spinner',
+        `dropin-progress-spinner--shape-size-${size}`,
+        `dropin-progress-spinner--shape-stroke-${stroke}`,
+    ];
+    const translations = useText({
+        updating: 'Dropin.ProgressSpinner.updating.label',
+        updatingChildren: 'Dropin.ProgressSpinner.updatingChildren.label',
+    });
+    const handleAriaLabel = () => {
+        if (ariaLabel)
+            return ariaLabel;
+        return children ? translations.updatingChildren : translations.updating;
+    };
+    return children ? (
+    // if we provide children to this component, it should act as a provider in order to add background with low opacity
+    <div {...props} className={classes(['dropin-progress-spinner-provider'])} aria-live="polite" role="status">
+      <div aria-hidden={true}>{children}</div>
+      <div aria-label={handleAriaLabel()} role="status" className={classes(['dropin-progress-spinner-background', className])} style={style}/>
+      <div className={classes([
+            'dropin-progress-spinner-with-provider',
+            ...commonClasses,
+        ])} aria-hidden={true}/>
+    </div>) : (
+    // if there are no children, it should be able to be standalone and have no background
+    <div {...props} className={classes([className, ...commonClasses])} aria-live="polite" role="status" aria-label={handleAriaLabel()}/>);
+};

package/components/ProgressSpinner/ProgressSpinner.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { ProgressSpinnerProps } from '@adobe/elsie/components/ProgressSpinner';
+/**
+ * Use Progress Spinners to display ongoing activity or loading status.
+ */
+declare const meta: Meta<ProgressSpinnerProps>;
+export default meta;
+type Story = StoryObj<ProgressSpinnerProps>;
+/**
+ * ```ts
+ * import { ProgressSpinner } from '@adobe/elsie/components/ProgressSpinner';
+ * ```
+ */
+export declare const SmallSpinner: Story;
+export declare const LargeSpinnerWithCard: Story;
+export declare const MediumSpinnerWithRadio: Story;
+export declare const SmallSpinnerReplaceButton: Story;
+export declare const SpinnerForBoxShadow: Story;
+//# sourceMappingURL=ProgressSpinner.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressSpinner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressSpinner/ProgressSpinner.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAwB,EAEtB,oBAAoB,EACrB,MAAM,yCAAyC,CAAC;AAIjD;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAsDpC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AAE5C;;;;GAIG;AAEH,eAAO,MAAM,YAAY,EAAE,KAe1B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAwClC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoDpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA4DvC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAgDjC,CAAC"}

package/components/ProgressSpinner/ProgressSpinner.stories.jsx

@@ -0,0 +1,195 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import { expect } from '@storybook/jest';
+import ProgressSpinner, { ProgressSpinner as component, } from '@adobe/elsie/components/ProgressSpinner';
+import { Search } from '@adobe/elsie/icons';
+import { ActionButton, Button, Card, Icon, RadioButton, ImageSwatch } from '..';
+/**
+ * Use Progress Spinners to display ongoing activity or loading status.
+ */
+const meta = {
+    title: 'Components/ProgressSpinner',
+    component,
+    argTypes: {
+        size: {
+            control: {
+                type: 'select',
+            },
+            table: {
+                defaultValue: {
+                    summary: 'small',
+                },
+            },
+            options: ['small', 'medium', 'big', 'large'],
+            description: 'Size of the spinner',
+        },
+        stroke: {
+            control: {
+                type: 'select',
+            },
+            table: {
+                defaultValue: {
+                    summary: '4',
+                },
+            },
+            options: ['1', '2', '3', '4'],
+            description: 'Stroke of the spinner',
+        },
+        // added @ts-ignore because it is not a prop
+        //@ts-ignore
+        active: {
+            type: 'boolean',
+            table: {
+                defaultValue: {
+                    summary: 'true',
+                },
+            },
+            options: [true, false],
+            description: 'Whether the spinner is active or not (not a prop, just for story).',
+        },
+        ariaLabel: {
+            type: {
+                required: false,
+                name: 'string',
+            },
+            table: {
+                defaultValue: {
+                    summary: 'Updating',
+                },
+            },
+            description: 'Aria label for the spinner',
+        },
+    },
+};
+export default meta;
+/**
+ * ```ts
+ * import { ProgressSpinner } from '@adobe/elsie/components/ProgressSpinner';
+ * ```
+ */
+export const SmallSpinner = {
+    args: {
+        ariaLabel: 'Updating',
+        size: 'small',
+        stroke: '4',
+    },
+    render: ({ ariaLabel, size, stroke }) => (<ProgressSpinner aria-label={ariaLabel} size={size} stroke={stroke}/>),
+    play: async () => {
+        const loaderIcon = document.querySelector('div[class*="dropin-progress-spinner"]');
+        await expect(loaderIcon).toBeVisible();
+    },
+};
+export const LargeSpinnerWithCard = {
+    args: {
+        ariaLabel: 'Updating',
+        size: 'large',
+        stroke: '4',
+        //@ts-ignore
+        active: true,
+    },
+    //@ts-ignore
+    render: ({ ariaLabel, size, stroke, active }) => {
+        const components = (<Card variant={'secondary'}>
+        <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>
+        <ActionButton disabled={active} children={'Action'}/>
+      </Card>);
+        return active ? (<ProgressSpinner aria-label={ariaLabel} size={size} stroke={stroke} style={{ backgroundColor: 'var(--color-neutral-200);' }}>
+        {components}
+      </ProgressSpinner>) : (components);
+    },
+    play: async () => {
+        const loaderIcon = document.querySelector('div[class*="dropin-progress-spinner"]');
+        await expect(loaderIcon).toBeVisible();
+    },
+};
+export const MediumSpinnerWithRadio = {
+    args: {
+        ariaLabel: 'Updating',
+        size: 'medium',
+        stroke: '4',
+        //@ts-ignore
+        active: true,
+    },
+    //@ts-ignore
+    render: ({ ariaLabel, size, stroke, active }) => {
+        const components = (<div>
+        <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>
+        <RadioButton label={'Option 1'} value={'1'} name={'radio'} description={'first option'} disabled={active}/>
+        <RadioButton label={'Option 2'} value={'2'} name={'radio'} description={'second option'} disabled={active}/>
+      </div>);
+        return (<Card variant={'secondary'}>
+        <h2 style={{ font: 'var(--type-headline-2-strong-font)' }}>Title</h2>
+        {active ? (<ProgressSpinner aria-label={ariaLabel} size={size} stroke={stroke}>
+            {components}
+          </ProgressSpinner>) : (components)}
+      </Card>);
+    },
+    play: async () => {
+        const loaderIcon = document.querySelector('div[class*="dropin-progress-spinner"]');
+        await expect(loaderIcon).toBeVisible();
+    },
+};
+export const SmallSpinnerReplaceButton = {
+    args: {
+        ariaLabel: 'Updating',
+        size: 'small',
+        stroke: '2',
+        //@ts-ignore
+        active: true,
+    },
+    //@ts-ignore
+    render: ({ ariaLabel, size, stroke, active }) => (<Card variant={'secondary'}>
+      <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>
+      <div>
+        <Button size="medium" style={{
+            width: '100%',
+            background: 'var(--color-brand-500) 0 0% no-repeat padding-box',
+        }} aria-hidden={active} aria-label={active ? 'loading' : 'Action'} disabled={active} children={active
+            ? [
+                <ProgressSpinner aria-label={ariaLabel} tabIndex={-1} size={size} stroke={stroke} key="spinner"/>,
+            ]
+            : [
+                'Action!',
+                <Icon source={Search} size="24" className="storybook_icon" stroke="1" viewBox="0 0 24 24" aria-label="Search" key={'4'}/>,
+            ]}/>
+      </div>
+    </Card>),
+    play: async () => {
+        const loaderIcon = document.querySelector('div[class*="dropin-progress-spinner"]');
+        await expect(loaderIcon).toBeVisible();
+    },
+};
+export const SpinnerForBoxShadow = {
+    args: {
+        ariaLabel: 'Updating',
+        size: 'small',
+        stroke: '2',
+    },
+    render: ({ ariaLabel, size, stroke }) => {
+        return (<ProgressSpinner aria-label={ariaLabel} size={size} stroke={stroke}>
+        <div style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                gap: '20px',
+            }}>
+          <ImageSwatch name="imageSwatchField" id="imageSwatchExample1" src="https://picsum.photos/20/20" value="imageExample" disabled={true}/>
+          <ImageSwatch name="imageSwatchField" id="imageSwatchExample2" src="https://picsum.photos/20/20" value="imageExample" disabled={true}/>
+          <ImageSwatch name="imageSwatchField" id="imageSwatchExample3" src="https://picsum.photos/20/20" value="imageExample" selected={true} disabled={true}/>
+        </div>
+      </ProgressSpinner>);
+    },
+    play: async () => {
+        const loaderIcon = document.querySelector('div[class*="dropin-progress-spinner"]');
+        await expect(loaderIcon).toBeVisible();
+    },
+};

package/components/ProgressSpinner/ProgressSpinner.test.d.ts

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

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

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

package/components/ProgressSpinner/ProgressSpinner.test.jsx

@@ -0,0 +1,40 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render } from '@adobe/elsie/lib/tests';
+import { ProgressSpinner } from '@adobe/elsie/components/ProgressSpinner';
+import { ActionButton, Button } from '..';
+describe('Base/Components/ProgressSpinner', () => {
+    test('renders standalone', () => {
+        const { container } = render(<ProgressSpinner />);
+        const elem = container.querySelector('.dropin-progress-spinner');
+        expect(!!elem).toEqual(true);
+        expect(container).toMatchSnapshot();
+    });
+    test('renders with children', () => {
+        const { container } = render(<ProgressSpinner size={'medium'}>
+        <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>
+        <ActionButton children={'Action'}/>
+      </ProgressSpinner>);
+        const elem = container.querySelector('.dropin-progress-spinner');
+        expect(!!elem).toEqual(true);
+        expect(container).toMatchSnapshot();
+    });
+    test('renders inside a button', () => {
+        const { container } = render(<Button size="medium" style={{ width: '100%' }} children={[
+                [
+                    <ProgressSpinner tabIndex={-1} size={'small'} stroke={'2'} key="2"/>,
+                ],
+            ]}/>);
+        const elem = container.querySelector('.dropin-progress-spinner');
+        expect(!!elem).toEqual(true);
+        expect(container).toMatchSnapshot();
+    });
+    test('renders with aria-label', () => {
+        const { container } = render(<ProgressSpinner ariaLabel="Updating"/>);
+        const elem = container.querySelector('.dropin-progress-spinner');
+        expect(!!elem).toEqual(true);
+        expect(container).toMatchSnapshot();
+    });
+});

package/components/ProgressSpinner/index.d.ts

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

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

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

package/components/ProgressSpinner/index.js

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

package/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/RadioButton/RadioButton.css';
+export interface RadioButtonProps extends Omit<HTMLAttributes<HTMLInputElement>, 'size' | 'label'> {
+    label: string | VNode<HTMLAttributes<HTMLElement>>;
+    name: string;
+    value: string;
+    size?: 'medium' | 'large';
+    checked?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    description?: string;
+}
+export declare const RadioButton: FunctionComponent<RadioButtonProps>;
+//# sourceMappingURL=RadioButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,qDAAqD,CAAC;AAE7D,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChE,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;IACnD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAwD3D,CAAC"}