@dropins/tools 0.21.1 → 0.21.2-alpha1

package/components/ImageSwatch/ImageSwatch.stories.jsx

@@ -0,0 +1,206 @@
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { action } from '@storybook/addon-actions';
+import { ImageSwatch, } from '@adobe/elsie/components/ImageSwatch';
+const defaultWidth = 200;
+const defaultHeight = 200;
+/**
+ * Use Image Swatches to display thumbnails of photos or illustrations.
+ */
+const meta = {
+    title: 'Components/ImageSwatch',
+    component: ImageSwatch,
+    argTypes: {
+        name: {
+            description: 'Field name (used for mapping the value in a form)',
+            type: {
+                required: false,
+                name: 'string',
+            },
+        },
+        label: {
+            description: 'Field label',
+            type: {
+                required: true,
+                name: 'string',
+            },
+            groupAriaLabel: {
+                description: 'Label name for the swatch group',
+                type: {
+                    required: true,
+                    name: 'string',
+                },
+            },
+        },
+        id: {
+            description: 'Field id',
+            type: {
+                required: false,
+                name: 'string',
+            },
+        },
+        alt: {
+            description: 'Alt Text',
+            type: {
+                required: false,
+                name: 'string',
+            },
+        },
+        value: {
+            description: 'Field value',
+            type: {
+                required: false,
+                name: 'string',
+            },
+        },
+        disabled: {
+            description: 'ImageSwatch disabled',
+            type: {
+                required: false,
+                name: 'boolean',
+            },
+        },
+        selected: {
+            description: 'ImageSwatch active',
+            type: {
+                required: false,
+                name: 'boolean',
+            },
+        },
+        multi: {
+            description: 'ImageSwatch multi',
+            type: {
+                required: false,
+                name: 'boolean',
+            },
+        },
+        src: {
+            description: 'Image path',
+            type: {
+                required: true,
+                name: 'string',
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * ```ts
+ * import { ImageSwatch } from '@adobe/elsie/components/ImageSwatch';
+ * ```
+ */
+export const DefaultImageSwatch = {
+    args: {
+        name: 'imageSwatchField',
+        id: 'imageSwatch1',
+        label: 'imageSwatch1Example',
+        groupAriaLabel: 'Image Swatches',
+        value: 'imageSwatchExample',
+        src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`,
+        alt: 'Some alternative text',
+        selected: false,
+        disabled: false,
+        outOfStock: false,
+        onValue: action('onValue'),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const imageSwatch = await canvas.findByRole('radio');
+        const spanElement = document.querySelector('.dropin-image-swatch__span');
+        expect(spanElement).toBeVisible();
+        await expect(imageSwatch).not.toBeChecked();
+    },
+};
+export const ImageSwatchSelected = {
+    args: {
+        name: 'imageSwatchField',
+        id: 'imageSwatch1',
+        label: 'imageSwatch1Example',
+        groupAriaLabel: 'Image Swatches',
+        value: 'imageSwatchExample',
+        src: `https://picsum.photos/400/400`,
+        alt: 'imageSwatch1Example',
+        selected: true,
+        disabled: false,
+        outOfStock: false,
+        onValue: action('onValue'),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const imageSwatch = await canvas.findByRole('radio');
+        const spanElement = document.querySelector('.dropin-image-swatch__span');
+        expect(spanElement).toBeVisible();
+        await expect(imageSwatch).toBeChecked();
+        await expect(canvas.getByLabelText('Image Swatches: imageSwatch1Example swatch selected')).toBeChecked();
+    },
+};
+export const ImageSwatchDisabled = {
+    args: {
+        name: 'imageSwatchField',
+        id: 'imageSwatch1',
+        label: 'imageSwatch1Example',
+        groupAriaLabel: 'Image Swatches',
+        value: 'imageSwatchExample',
+        src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`,
+        alt: 'Some alternative text',
+        selected: false,
+        disabled: true,
+        outOfStock: false,
+        onValue: action('onValue'),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(await canvas.findByRole('radio')).toBeDisabled();
+    },
+};
+export const OutOfStockImageSwatch = {
+    args: {
+        name: 'imageSwatchField',
+        id: 'imageSwatch1',
+        label: 'imageSwatch1Example',
+        groupAriaLabel: 'Image Swatches',
+        value: 'imageSwatchExample',
+        src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`,
+        alt: 'Some alternative text',
+        selected: false,
+        disabled: false,
+        outOfStock: true,
+        onValue: action('onValue'),
+    },
+};
+export const SelectedOutOfStockImageSwatch = {
+    args: {
+        name: 'imageSwatchField',
+        id: 'imageSwatch1',
+        label: 'imageSwatch1Example',
+        groupAriaLabel: 'Image Swatches',
+        value: 'imageSwatchExample',
+        src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`,
+        alt: 'Some alternative text',
+        selected: true,
+        disabled: false,
+        outOfStock: true,
+        onValue: action('onValue'),
+        'aria-label': 'image swatch example',
+    },
+};
+export const MultiImageSwatch = {
+    args: {
+        name: 'imageSwatchField',
+        id: 'imageSwatch1',
+        value: 'imageSwatchExample',
+        src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`,
+        alt: 'Some alternative text',
+        selected: false,
+        disabled: false,
+        outOfStock: false,
+        multi: true,
+        onValue: action('onValue'),
+        'aria-label': 'image swatch example',
+    },
+    render: (args) => (<div style="display: flex; flex-wrap:wrap; gap: 25px">
+      <ImageSwatch {...args} id={'imageSwatch1'} value={'image1'}/>
+      <ImageSwatch {...args} id={'imageSwatch2'} value={'image2'}/>
+      <ImageSwatch {...args} id={'imageSwatch3'} value={'image1'}/>
+    </div>),
+};

package/components/ImageSwatch/ImageSwatch.test.d.ts

@@ -0,0 +1,3 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import '@testing-library/jest-dom';
+//# sourceMappingURL=ImageSwatch.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSwatch.test.d.ts","sourceRoot":"","sources":["../../../src/components/ImageSwatch/ImageSwatch.test.tsx"],"names":[],"mappings":"AAAA,6DAA6D;AAM7D,OAAO,2BAA2B,CAAC"}

package/components/ImageSwatch/ImageSwatch.test.jsx

@@ -0,0 +1,64 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render, fireEvent, waitFor, screen } from '@adobe/elsie/lib/tests';
+import { ImageSwatch } from '@adobe/elsie/components/ImageSwatch';
+import { Image } from '@adobe/elsie/components/Image';
+import '@testing-library/jest-dom';
+describe('Base/Components/ImageSwatch', () => {
+    test('renders', () => {
+        const { container } = render(<ImageSwatch name="imageSwatchField" id="imageSwatchExample" src="https://picsum.photos/20/20" value="imageExample"/>);
+        expect(!!container).toEqual(true);
+    });
+});
+test('Does not break when onValue() is not provided', () => {
+    const { container } = render(<ImageSwatch name="imageSwatchField" id="imageSwatchExample" src="https://picsum.photos/20/20" value="imageExample"/>);
+    const imageSwatch = container.querySelector('.dropin-image-swatch');
+    fireEvent.click(imageSwatch);
+    expect(!!container).toEqual(true);
+});
+test('Calls onUpdateError() when onValue() returns a rejected promise', async () => {
+    const mockFn = jest.fn(() => {
+        throw new Error('Mock error!');
+    });
+    const { container } = render(<ImageSwatch name="imageSwatchField" id="imageSwatchExample" src="https://picsum.photos/20/20" value="imageExample" onValue={mockFn}/>);
+    const imageSwatch = container.querySelector('.dropin-image-swatch');
+    fireEvent.click(imageSwatch);
+    await waitFor(() => expect(mockFn).toHaveBeenCalled());
+});
+test('Calls onUpdateError() when onValue() throws an error', async () => {
+    const mockFn = jest.fn();
+    const mockError = new Error('onValue() error');
+    const { container } = render(<ImageSwatch name="imageSwatchField" id="imageSwatchExample" src="https://picsum.photos/20/20" value="imageExample" onValue={() => {
+            throw mockError;
+        }} onUpdateError={mockFn}/>);
+    const imageSwatch = container.querySelector('.dropin-image-swatch');
+    fireEvent.click(imageSwatch);
+    await waitFor(() => expect(mockFn).toHaveBeenCalled());
+    await waitFor(() => expect(mockFn).toHaveBeenCalledWith(mockError));
+});
+test('Calls onError() when src throws an error', () => {
+    const onError = jest.fn();
+    render(<Image alt="test" src="crap.junk" onError={onError}/>);
+    fireEvent.error(screen.getByAltText('test'));
+    expect(onError).toHaveBeenCalled();
+});
+test('Hides the image when src throws an error', () => {
+    const { getByRole } = render(<ImageSwatch src="broken-url.jpg"/>);
+    const img = getByRole('img');
+    img.dispatchEvent(new Event('error'));
+    expect(img).toHaveStyle('display: none');
+});
+test('Renders out of stock swatch when outOfStock is true', () => {
+    const { container } = render(<ImageSwatch name="imageSwatchField" id="imageSwatchExample" src="https://picsum.photos/20/20" label="imageExample" value="imageExample" outOfStock/>);
+    const imageSwatch = container.querySelector('.dropin-image-swatch__span');
+    expect(imageSwatch).toHaveClass('dropin-image-swatch__span--out-of-stock');
+});
+test('Renders selected swatch when selected is true', () => {
+    const { container } = render(<ImageSwatch name="imageSwatchField" id="imageSwatchExample" src="https://picsum.photos/20/20" label="imageExample" value="imageExample" selected/>);
+    const imageSwatch = container.querySelector('.dropin-image-swatch');
+    expect(imageSwatch).toHaveClass('dropin-image-swatch--selected');
+});
+test('Renders swatch when multi prop is true', () => {
+    const { container } = render(<ImageSwatch name="imageSwatchField" id="imageSwatchExample" src="https://picsum.photos/20/20" value="imageExample" multi={true}/>);
+    const imageSwatch = container.querySelector('.dropin-image-swatch');
+    expect(imageSwatch.type === 'checkbox').toEqual(true);
+});

package/components/ImageSwatch/index.d.ts

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

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

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

package/components/ImageSwatch/index.js

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

package/components/InLineAlert/InLineAlert.d.ts

@@ -0,0 +1,16 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/InLineAlert/InLineAlert.css';
+export interface InLineAlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'icon'> {
+    heading: string;
+    description?: string;
+    type?: 'error' | 'warning' | 'success';
+    icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+    additionalActions?: Array<{
+        label: string;
+        onClick: (event: Event) => void;
+    }>;
+    onDismiss?: (event: Event) => void;
+}
+export declare const InLineAlert: FunctionComponent<InLineAlertProps>;
+//# sourceMappingURL=InLineAlert.d.ts.map

package/components/InLineAlert/InLineAlert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InLineAlert.d.ts","sourceRoot":"","sources":["../../../src/components/InLineAlert/InLineAlert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,qDAAqD,CAAC;AAC7D,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACvC,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,KAAK,CAAC;QACxB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;KACjC,CAAC,CAAC;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA2E3D,CAAC"}

package/components/InLineAlert/InLineAlert.jsx

@@ -0,0 +1,38 @@
+import { Button, Icon } from '@adobe/elsie/components';
+import { useText } from '@adobe/elsie/i18n';
+import { Close } from '@adobe/elsie/icons';
+import { VComponent, classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/InLineAlert/InLineAlert.css';
+export const InLineAlert = ({ className, type = 'warning', additionalActions, onDismiss, heading, description, icon, ...props }) => {
+    const translations = useText({
+        dismiss: 'Dropin.InlineAlert.dismissLabel',
+    });
+    return (<div {...props} className={classes([
+            'dropin-in-line-alert',
+            `dropin-in-line-alert--${type}`,
+            className,
+        ])}>
+      <div className={'dropin-in-line-alert__heading'}>
+        <div className={'dropin-in-line-alert__title-container'}>
+          {icon && (<VComponent node={icon} className={'dropin-in-line-alert__icon'}/>)}
+
+          <span className={'dropin-in-line-alert__title'}>{heading}</span>
+        </div>
+
+        <div className={'dropin-in-line-alert__actions-container'}>
+          {additionalActions?.length == 1 && (<Button variant="tertiary" className={'dropin-in-line-alert__additional-action'} onClick={additionalActions[0]?.onClick} aria-label={additionalActions[0]?.label}>
+              {additionalActions[0]?.label}
+            </Button>)}
+          {onDismiss && (<Button icon={<Icon source={Close} size="24" stroke="2"/>} className={'dropin-in-line-alert__dismiss-button'} variant="tertiary" onClick={onDismiss} aria-label={translations.dismiss}/>)}
+        </div>
+      </div>
+
+      {description && (<p className={'dropin-in-line-alert__description'}>{description}</p>)}
+
+      {additionalActions && additionalActions?.length > 1 && (<div className={'dropin-in-line-alert__additional-actions-container'}>
+          {additionalActions.map((action) => (<Button key={action.label} variant="tertiary" className={'dropin-in-line-alert__additional-action'} onClick={action.onClick}>
+              {action.label}
+            </Button>))}
+        </div>)}
+    </div>);
+};

package/components/InLineAlert/InLineAlert.stories.d.ts

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { InLineAlertProps } from '@adobe/elsie/components/InLineAlert';
+/**
+ * Use Inline Alerts to display messages or warnings to the user.
+ */
+declare const meta: Meta<InLineAlertProps>;
+export default meta;
+type Story = StoryObj<InLineAlertProps>;
+/**
+ * ```ts
+ * import { InLineAlert } from '@adobe/elsie/components/InLineAlert';
+ * ```
+ * ```tsx
+ * <InLineAlert
+ *  heading="In Line Alert heading"
+ *  description="Description of the In Line Alert"
+ *  variant="warning"
+ *  additionalActions={[
+ *   {
+ *    label: 'Action 1',
+ *    onClick: ()=>{},
+ *   },
+ *  ]}
+ * />
+ * ```
+ */
+export declare const InLineAlert: Story;
+/**
+ * You can create the small variant by skipping the description prop.
+ *
+ * ```tsx
+ * <InLineAlert
+ *  heading="In Line Alert heading"
+ *  variant="success"
+ *  additionalActions={[
+ *   {
+ *     label: 'Action',
+ *     onClick: ()=>{},
+ *   },
+ *  ]}
+ * />
+ * ```
+ */
+export declare const InLineAlertSmall: Story;
+/**
+ * You can create the medium variant by including the description prop.
+ *
+ * ```tsx
+ * <InLineAlert
+ *  heading="In Line Alert heading"
+ *  description="Description of the In Line Alert"
+ *  variant="error"
+ *  additionalActions={[
+ *   {
+ *     label: 'Action',
+ *     onClick: ()=>{},
+ *   },
+ *  ]}
+ * />
+ * ```
+ */
+export declare const InLineAlertMedium: Story;
+/**
+ * You can create the large variant by including more than one additional actions.
+ *
+ * ```tsx
+ * <InLineAlert
+ *  heading="In Line Alert heading"
+ *  description="Description of the In Line Alert"
+ *  variant="warning"
+ *  additionalActions={[
+ *   {
+ *     label: 'Action 1',
+ *     onClick: ()=>{},
+ *   },
+ *   {
+ *     label: 'Action 2',
+ *     onClick: ()=>{},
+ *   },
+ *  ]}
+ * />
+ * ```
+ */
+export declare const InLineAlertLarge: Story;
+export declare const NoDismiss: Story;
+//# sourceMappingURL=InLineAlert.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InLineAlert.stories.d.ts","sourceRoot":"","sources":["../../../src/components/InLineAlert/InLineAlert.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAEL,gBAAgB,EACjB,MAAM,qCAAqC,CAAC;AAI7C;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAuChC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAExC;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAa9B,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAkB9B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC"}

package/components/InLineAlert/InLineAlert.stories.jsx

@@ -0,0 +1,193 @@
+import { InLineAlert as component, } from '@adobe/elsie/components/InLineAlert';
+import { action } from '@storybook/addon-actions';
+import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
+/**
+ * Use Inline Alerts to display messages or warnings to the user.
+ */
+const meta = {
+    title: 'Components/InLineAlert',
+    component,
+    argTypes: {
+        heading: {
+            description: 'Heading message',
+            type: { name: 'string', required: true },
+        },
+        description: {
+            description: 'Alert description',
+            type: { name: 'string', required: false },
+        },
+        type: {
+            description: 'Alert variant type (determines the border color).<br/>`"error"` | `"warning"` | `"success"`',
+            defaultValue: { summary: 'warning' },
+            type: { name: 'string', required: false },
+            options: ['error', 'warning', 'success'],
+            control: 'radio',
+        },
+        onDismiss: {
+            description: 'When set, the component renders a dismiss button and calls this function when clicked',
+            type: { name: 'function', required: false },
+            control: { disable: true },
+            action: 'Dismiss clicked',
+        },
+        additionalActions: {
+            description: 'An array of additional action objects that must contain `label` and `onClick()` properties',
+        },
+        icon: {
+            description: 'Icon `(FunctionComponent)`',
+            type: { name: 'symbol' },
+            options: Object.keys(IconsList),
+            mapping: IconsList,
+            control: 'select',
+        },
+    },
+};
+export default meta;
+/**
+ * ```ts
+ * import { InLineAlert } from '@adobe/elsie/components/InLineAlert';
+ * ```
+ * ```tsx
+ * <InLineAlert
+ *  heading="In Line Alert heading"
+ *  description="Description of the In Line Alert"
+ *  variant="warning"
+ *  additionalActions={[
+ *   {
+ *    label: 'Action 1',
+ *    onClick: ()=>{},
+ *   },
+ *  ]}
+ * />
+ * ```
+ */
+export const InLineAlert = {
+    args: {
+        heading: 'In Line Alert heading',
+        description: 'Description of the In Line Alert',
+        type: 'warning',
+        //@ts-ignore
+        icon: IconsList.WarningFilled,
+        additionalActions: [
+            {
+                label: 'Action',
+                onClick: action('Action clicked'),
+            },
+        ],
+    },
+};
+/**
+ * You can create the small variant by skipping the description prop.
+ *
+ * ```tsx
+ * <InLineAlert
+ *  heading="In Line Alert heading"
+ *  variant="success"
+ *  additionalActions={[
+ *   {
+ *     label: 'Action',
+ *     onClick: ()=>{},
+ *   },
+ *  ]}
+ * />
+ * ```
+ */
+export const InLineAlertSmall = {
+    args: {
+        heading: 'In Line Alert heading',
+        type: 'success',
+        //@ts-ignore
+        icon: IconsList.CheckWithCircle,
+        additionalActions: [
+            {
+                label: 'Action',
+                onClick: action('Action clicked'),
+            },
+        ],
+    },
+};
+/**
+ * You can create the medium variant by including the description prop.
+ *
+ * ```tsx
+ * <InLineAlert
+ *  heading="In Line Alert heading"
+ *  description="Description of the In Line Alert"
+ *  variant="error"
+ *  additionalActions={[
+ *   {
+ *     label: 'Action',
+ *     onClick: ()=>{},
+ *   },
+ *  ]}
+ * />
+ * ```
+ */
+export const InLineAlertMedium = {
+    args: {
+        heading: 'In Line Alert heading',
+        description: 'Description of the In Line Alert',
+        type: 'error',
+        //@ts-ignore
+        icon: IconsList.WarningFilled,
+        additionalActions: [
+            {
+                label: 'Action',
+                onClick: action('Action clicked'),
+            },
+        ],
+    },
+};
+/**
+ * You can create the large variant by including more than one additional actions.
+ *
+ * ```tsx
+ * <InLineAlert
+ *  heading="In Line Alert heading"
+ *  description="Description of the In Line Alert"
+ *  variant="warning"
+ *  additionalActions={[
+ *   {
+ *     label: 'Action 1',
+ *     onClick: ()=>{},
+ *   },
+ *   {
+ *     label: 'Action 2',
+ *     onClick: ()=>{},
+ *   },
+ *  ]}
+ * />
+ * ```
+ */
+export const InLineAlertLarge = {
+    args: {
+        heading: 'In Line Alert heading',
+        description: 'Description of the In Line Alert',
+        type: 'warning',
+        //@ts-ignore
+        icon: IconsList.WarningFilled,
+        additionalActions: [
+            {
+                label: 'Action 1',
+                onClick: action('Action 1 clicked'),
+            },
+            {
+                label: 'Action 2',
+                onClick: action('Action 2 clicked'),
+            },
+        ],
+    },
+};
+export const NoDismiss = {
+    args: {
+        heading: 'In Line Alert heading',
+        description: 'Description of the In Line Alert',
+        type: 'warning',
+        additionalActions: [
+            {
+                label: 'Action 1',
+                onClick: action('Action 1 clicked'),
+            },
+        ],
+        onDismiss: undefined,
+    },
+};

package/components/InLineAlert/InLineAlert.test.d.ts

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

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

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