@dropins/tools 0.21.1 → 0.21.2-alpha1

package/components/Field/Field.stories.jsx

@@ -0,0 +1,174 @@
+import { Field, Picker, Input, Incrementer, Checkbox, } from '@adobe/elsie/components';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+/**
+ * Use Field Labels to wrap form inputs with titles and help text.
+ */
+const meta = {
+    title: 'Components/Field',
+    component: Field,
+    argTypes: {
+        label: {
+            description: 'Label',
+            control: 'text',
+        },
+        hint: {
+            description: 'Helper Text',
+            control: 'text',
+        },
+        error: {
+            description: 'Error Text',
+            control: 'text',
+        },
+        success: {
+            description: 'Success Text',
+            control: 'text',
+        },
+        size: {
+            description: '',
+            options: ['medium', 'large'],
+            control: { type: 'radio' },
+            defaultValue: {
+                summary: 'medium',
+            },
+        },
+        disabled: {
+            description: 'Whether or not the field is disabled',
+            control: 'boolean',
+            defaultValue: {
+                summary: false,
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * ```ts
+ * import { Field } from '@adobe/elsie/components/Field';
+ * import { Input } from '@adobe/elsie/components/Input';
+ * ```
+ */
+export const InputField = {
+    render: (args) => (<Field {...args}>
+      <Input name="inputField" placeholder="Input"/>
+    </Field>),
+    args: {
+        label: 'Label',
+        hint: 'Helper Text',
+        error: '',
+        success: '',
+        size: 'medium',
+        disabled: false,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.type(canvas.getByPlaceholderText('Input'), 'Test Content');
+        await expect(await canvas.findByDisplayValue('Test Content')).toBeVisible();
+        await expect(canvas.getByText('Label')).toBeVisible();
+        await expect(canvas.getByText('Helper Text')).toBeVisible();
+    },
+};
+/**
+ * ```ts
+ * import { Field } from '@adobe/elsie/components/Field';
+ * import { Incrementer } from '@adobe/elsie/components/Incrementer';
+ * ```
+ */
+export const IncrementerField = {
+    render: (args) => (<Field {...args}>
+      <Incrementer name="incrementerField" value="0" min={0} max={100}/>
+    </Field>),
+    args: {
+        label: 'Label',
+        hint: 'Helper Text',
+        error: '',
+        success: '',
+        size: 'medium',
+        disabled: false,
+    },
+    play: async () => {
+        const canvasElement = document.querySelector('#storybook-root');
+        const canvas = within(canvasElement);
+        const decreaseButton = document.querySelector('button[aria-label="Decrease Quantity"]');
+        const inputField = document.querySelector('input');
+        const increaseButton = document.querySelector('button[aria-label="Increase Quantity"]');
+        // Without this wait test failing intermittently as click event is triggerning before even element fully loaded
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        await userEvent.click(increaseButton);
+        await expect(await canvas.findByDisplayValue('1')).toBeTruthy();
+        await userEvent.click(decreaseButton);
+        await expect(await canvas.findByDisplayValue('0')).toBeTruthy();
+        await userEvent.type(inputField, '99');
+        await expect(await canvas.findByDisplayValue('99')).toBeTruthy();
+        await userEvent.click(increaseButton);
+        await expect(await canvas.findByDisplayValue('100')).toBeTruthy();
+        await userEvent.click(increaseButton);
+        await expect(await canvas.findByDisplayValue('100')).toBeTruthy();
+        await userEvent.click(decreaseButton);
+        await expect(await canvas.findByDisplayValue('99')).toBeTruthy();
+        await userEvent.clear(inputField);
+        await userEvent.type(inputField, '0');
+        await expect(await canvas.findByDisplayValue('0')).toBeTruthy();
+    },
+};
+/**
+ * ```ts
+ * import { Field } from '@adobe/elsie/components/Field';
+ * import { Picker } from '@adobe/elsie/components/Picker';
+ * ```
+ */
+export const PickerField = {
+    render: (args) => (<Field {...args}>
+      <Picker name="pickerField" placeholder="Select an option" options={[
+            {
+                value: 'option1',
+                text: 'Option 1',
+            },
+            {
+                value: 'option2',
+                text: 'Option 2',
+                disabled: true,
+            },
+            {
+                value: 'option3',
+                text: 'Option 3',
+            },
+        ]} disabled={false}/>
+    </Field>),
+    args: {
+        label: 'Label',
+        hint: 'Helper Text',
+        error: '',
+        success: '',
+        size: 'medium',
+        disabled: false,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByText('Select an option'));
+        await expect(canvas.getByText('Option 1')).toBeVisible();
+        await expect(canvas.getByText('Option 2')).toBeVisible();
+        const select = document.querySelector('.dropin-picker__select');
+        await userEvent.selectOptions(select, 'option3');
+        await expect(select.textContent).toContain('Option 3');
+    },
+};
+export const CheckboxField = {
+    render: (args) => (<Field {...args}>
+      <Checkbox name="checkboxField" label="Option" description="Optional description text goes here"/>
+    </Field>),
+    args: {
+        label: 'Label',
+        hint: 'Helper Text',
+        error: '',
+        success: '',
+        size: 'medium',
+        disabled: false,
+    },
+};
+/**
+ * ```ts
+ * import { Field } from '@adobe/elsie/components/Field';
+ * import { TextSwatch } from '@adobe/elsie/components/TextSwatch';
+ * ```
+ */

package/components/Field/Field.test.d.ts

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

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

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

package/components/Field/Field.test.jsx

@@ -0,0 +1,91 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render } from '@adobe/elsie/lib/tests';
+import { Field } from '@adobe/elsie/components/Field';
+import { Input } from '@adobe/elsie/components/Input';
+describe('Base/Components/Field', () => {
+    test('renders', () => {
+        const { container } = render(<Field label="Label">
+        <Input name="foo"/>
+      </Field>);
+        const elem = container.querySelector('.dropin-field');
+        expect(!!elem).toEqual(true);
+    });
+    test('uses generated id as label "for" attribute value, if no id provided', () => {
+        const { container } = render(<Field label="Label">
+        <Input name="foo"/>
+      </Field>);
+        const input = container.querySelector('input');
+        const label = container.querySelector('.dropin-field__label');
+        expect(label?.getAttribute('for')).toEqual(input?.id);
+    });
+    test('uses child id as label "for" attribute value', () => {
+        const { container } = render(<Field label="Label">
+        <Input id="foo" name="foo"/>
+      </Field>);
+        const label = container.querySelector('.dropin-field__label');
+        expect(label?.getAttribute('for')).toEqual('foo');
+    });
+    test('shows error', () => {
+        const { container } = render(<Field label="Label" error="Oops!">
+        <Input name="foo"/>
+      </Field>);
+        const footer = container.querySelector('.dropin-field__hint');
+        expect(footer?.classList.contains('dropin-field__hint--error')).toEqual(true);
+        expect(footer?.textContent).toEqual('Oops!');
+    });
+    test('shows success', () => {
+        const { container } = render(<Field label="Label" success="Yay!">
+        <Input name="foo"/>
+      </Field>);
+        const footer = container.querySelector('.dropin-field__hint');
+        expect(footer?.classList.contains('dropin-field__hint--success')).toEqual(true);
+        expect(footer?.textContent).toEqual('Yay!');
+    });
+    test('shows hint', () => {
+        const { container } = render(<Field label="Label" hint="Howdy!">
+        <Input name="foo"/>
+      </Field>);
+        const hint = container.querySelector('.dropin-field__hint');
+        expect(hint?.classList.contains('dropin-field__hint')).toEqual(true);
+        expect(hint?.textContent).toEqual('Howdy!');
+    });
+    test('shows error over hint', () => {
+        const { container } = render(<Field label="Label" hint="Howdy!" error="Nope!">
+        <Input name="foo"/>
+      </Field>);
+        const footer = container.querySelector('.dropin-field__hint');
+        expect(footer?.classList.contains('dropin-field__hint--error')).toEqual(true);
+        expect(footer?.textContent).toEqual('Nope!');
+    });
+    test('shows success over hint', () => {
+        const { container } = render(<Field label="Label" hint="Howdy!" success="Yay!">
+        <Input name="foo"/>
+      </Field>);
+        const footer = container.querySelector('.dropin-field__hint');
+        expect(footer?.classList.contains('dropin-field__hint--success')).toEqual(true);
+        expect(footer?.textContent).toEqual('Yay!');
+    });
+    test('shows error over success', () => {
+        const { container } = render(<Field label="Label" success="Yay!" error="Nope!">
+        <Input name="foo"/>
+      </Field>);
+        const footer = container.querySelector('.dropin-field__hint');
+        expect(footer?.classList.contains('dropin-field__hint--error')).toEqual(true);
+        expect(footer?.textContent).toEqual('Nope!');
+        const input = container.querySelector('.dropin-input');
+        expect(input?.classList).toContain('dropin-input--error');
+        expect(input?.classList).not.toContain('dropin-input--success');
+    });
+    test('children as string returns empty', () => {
+        // @ts-ignore
+        const { container } = render(<Field label="Label">Howdy!</Field>);
+        const elem = container.querySelector('.dropin-field');
+        expect(elem?.querySelector('.dropin-field__content')?.innerHTML).toEqual('');
+    });
+    test('returns children', () => {
+        const { container } = render(<Field label="Label">
+        <Input name="foo"/>
+      </Field>);
+        expect(container?.querySelector('input')?.getAttribute('name')).toEqual(`foo`);
+    });
+});

package/components/Field/index.d.ts

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

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

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

package/components/Field/index.js

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

package/components/Icon/Icon.d.ts

@@ -0,0 +1,11 @@
+import { JSX, FunctionComponent } from 'preact';
+import '@adobe/elsie/components/Icon/Icon.css';
+export type IconType = keyof typeof import('@adobe/elsie/icons');
+export interface IconProps extends Omit<JSX.SVGAttributes, 'size'> {
+    source: FunctionComponent<JSX.SVGAttributes<SVGElement>> | IconType;
+    size?: '12' | '16' | '24' | '32' | '64' | '80';
+    stroke?: '1' | '2' | '3' | '4';
+    className?: string;
+}
+export declare function Icon({ source: Source, size, stroke, viewBox, className, ...props }: IconProps): JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map

package/components/Icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAIhD,OAAO,uCAAuC,CAAC;AAE/C,MAAM,MAAM,QAAQ,GAAG,MAAM,cAAc,oBAAoB,CAAC,CAAC;AAuCjE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,MAAM,CAAC;IAChE,MAAM,EAAE,iBAAiB,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,GAAG,QAAQ,CAAC;IACpE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,IAAI,CAAC,EACnB,MAAM,EAAE,MAAM,EACd,IAAW,EACX,MAAY,EACZ,OAAqB,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,eAyBX"}

package/components/Icon/Icon.jsx

@@ -0,0 +1,57 @@
+import { classes } from '@adobe/elsie/lib/classes';
+import { lazy, Suspense } from 'preact/compat';
+import '@adobe/elsie/components/Icon/Icon.css';
+const lazyIcons = {
+    Add: lazy(() => import('@adobe/elsie/icons/Add.svg')),
+    Bulk: lazy(() => import('@adobe/elsie/icons/Bulk.svg')),
+    Burger: lazy(() => import('@adobe/elsie/icons/Burger.svg')),
+    Cart: lazy(() => import('@adobe/elsie/icons/Cart.svg')),
+    Check: lazy(() => import('@adobe/elsie/icons/Check.svg')),
+    ChevronDown: lazy(() => import('@adobe/elsie/icons/ChevronDown.svg')),
+    ChevronUp: lazy(() => import('@adobe/elsie/icons/ChevronUp.svg')),
+    ChevronRight: lazy(() => import('@adobe/elsie/icons/ChevronRight.svg')),
+    Close: lazy(() => import('@adobe/elsie/icons/Close.svg')),
+    Heart: lazy(() => import('@adobe/elsie/icons/Heart.svg')),
+    Minus: lazy(() => import('@adobe/elsie/icons/Minus.svg')),
+    Placeholder: lazy(() => import('@adobe/elsie/icons/Placeholder.svg')),
+    PlaceholderFilled: lazy(() => import('@adobe/elsie/icons/PlaceholderFilled.svg')),
+    Search: lazy(() => import('@adobe/elsie/icons/Search.svg')),
+    SearchFilled: lazy(() => import('@adobe/elsie/icons/SearchFilled.svg')),
+    Sort: lazy(() => import('@adobe/elsie/icons/Sort.svg')),
+    Star: lazy(() => import('@adobe/elsie/icons/Star.svg')),
+    View: lazy(() => import('@adobe/elsie/icons/View.svg')),
+    User: lazy(() => import('@adobe/elsie/icons/User.svg')),
+    Warning: lazy(() => import('@adobe/elsie/icons/Warning.svg')),
+    Locker: lazy(() => import('@adobe/elsie/icons/Locker.svg')),
+    Wallet: lazy(() => import('@adobe/elsie/icons/Wallet.svg')),
+    Card: lazy(() => import('@adobe/elsie/icons/Card.svg')),
+    Order: lazy(() => import('@adobe/elsie/icons/Order.svg')),
+    Delivery: lazy(() => import('@adobe/elsie/icons/Delivery.svg')),
+    OrderError: lazy(() => import('@adobe/elsie/icons/OrderError.svg')),
+    OrderSuccess: lazy(() => import('@adobe/elsie/icons/OrderSuccess.svg')),
+    PaymentError: lazy(() => import('@adobe/elsie/icons/PaymentError.svg')),
+    CheckWithCircle: lazy(() => import('@adobe/elsie/icons/CheckWithCircle.svg')),
+    WarningWithCircle: lazy(() => import('@adobe/elsie/icons/WarningWithCircle.svg')),
+    WarningFilled: lazy(() => import('@adobe/elsie/icons/WarningFilled.svg')),
+    InfoFilled: lazy(() => import('@adobe/elsie/icons/InfoFilled.svg')),
+    HeartFilled: lazy(() => import('@adobe/elsie/icons/HeartFilled.svg')),
+    Trash: lazy(() => import('@adobe/elsie/icons/Trash.svg')),
+};
+export function Icon({ source: Source, size = '24', stroke = '2', viewBox = '0 0 24 24', className, ...props }) {
+    const LazyIcon = typeof Source === 'string' ? lazyIcons[Source] : null;
+    const defaultProps = {
+        className: classes([
+            'dropin-icon',
+            `dropin-icon--shape-stroke-${stroke}`,
+            className,
+        ]),
+        width: size,
+        height: size,
+        viewBox,
+    };
+    return (<Suspense fallback={null}>
+      {LazyIcon ? (<LazyIcon {...props} {...defaultProps}/>) : (
+        // @ts-ignore
+        <Source {...props} {...defaultProps}/>)}
+    </Suspense>);
+}

package/components/Icon/Icon.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { IconProps } from '@adobe/elsie/components/Icon';
+/**
+ * Use Icons as symbols or metaphors to communicate and enhance the user experience.
+ */
+declare const meta: Meta<IconProps>;
+export default meta;
+type Story = StoryObj<IconProps>;
+/**
+ * ```ts
+ * import { Icon } from '@adobe/elsie/components/Icon';
+ * ```
+ */
+export declare const Primary: Story;
+export declare const Lazy: Story;
+//# sourceMappingURL=Icon.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAQ,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAI/D;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,SAAS,CAoBzB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;AAEjC;;;;GAIG;AAEH,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KASlB,CAAC"}

package/components/Icon/Icon.stories.helpers.d.ts

@@ -0,0 +1,4 @@
+export namespace IconsList {
+    const none: null;
+}
+//# sourceMappingURL=Icon.stories.helpers.d.ts.map

package/components/Icon/Icon.stories.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.stories.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.stories.helpers.jsx"],"names":[],"mappings":""}

package/components/Icon/Icon.stories.helpers.jsx

@@ -0,0 +1,7 @@
+import * as Icons from '@adobe/elsie/icons';
+import { Icon } from './Icon';
+const iconNames = Object.keys(Icons);
+export const IconsList = iconNames.reduce((acc, name) => {
+    acc[name] = <Icon source={Icons[name]} size="24" stroke="1"/>;
+    return acc;
+}, { none: null });

package/components/Icon/Icon.stories.jsx

@@ -0,0 +1,48 @@
+import { Icon } from '@adobe/elsie/components/Icon';
+import { Cart } from '@adobe/elsie/icons/index';
+import * as Icons from '@adobe/elsie/icons';
+/**
+ * Use Icons as symbols or metaphors to communicate and enhance the user experience.
+ */
+const meta = {
+    title: 'Components/Icon',
+    component: Icon,
+    argTypes: {
+        source: {
+            options: Object.keys(Icons),
+            mapping: Icons,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            control: 'select',
+            options: ['12', '16', '24', '32', '64', '80'],
+        },
+        stroke: {
+            control: 'select',
+            options: ['1', '2', '3', '4'],
+        },
+    },
+};
+export default meta;
+/**
+ * ```ts
+ * import { Icon } from '@adobe/elsie/components/Icon';
+ * ```
+ */
+export const Primary = {
+    args: {
+        source: Cart,
+    },
+};
+export const Lazy = {
+    argTypes: {
+        source: {
+            mapping: Object.keys(Icons),
+        },
+    },
+    args: {
+        source: 'Cart',
+    },
+};

package/components/Icon/Icon.test.d.ts

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

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

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

package/components/Icon/Icon.test.jsx

@@ -0,0 +1,67 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render } from '@adobe/elsie/lib/tests';
+import { Icon } from '@adobe/elsie/components/Icon';
+// @ts-ignore
+import Burger from '@adobe/elsie/icons/Burger.svg';
+import * as icons from '@adobe/elsie/icons';
+jest.mock('@adobe/elsie/icons/Icon.svg', () => {
+    return function TestIcon(props) {
+        return (<svg {...props} data-testid="icon">
+        Icon
+      </svg>);
+    };
+});
+describe('Foundations/Assets/Icon', () => {
+    test('renders', async () => {
+        const { findByTestId } = render(<Icon source={Burger}/>);
+        const icon = await findByTestId('icon');
+        expect(icon).toMatchInlineSnapshot(`
+      <svg
+        class="dropin-icon dropin-icon--shape-stroke-2"
+        data-testid="icon"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+      >
+        Icon
+      </svg>
+    `);
+    });
+    test('renders Icons with different size', async () => {
+        const size = '32';
+        const { findByTestId } = render(<Icon source={Burger} size={size}/>);
+        const icon = await findByTestId('icon');
+        expect(icon.getAttribute('width')).toEqual(size);
+        expect(icon.getAttribute('height')).toEqual(size);
+    });
+    test('renders Icons with stroke', async () => {
+        const stroke = '2';
+        const { findByTestId } = render(<Icon source={Burger} stroke={stroke}/>);
+        const icon = await findByTestId('icon');
+        expect(icon.classList).toMatchInlineSnapshot(`
+      DOMTokenList {
+        "0": "dropin-icon",
+        "1": "dropin-icon--shape-stroke-2",
+      }
+    `);
+    });
+    // Test lazy icons
+    for (const iconName of Object.keys(icons)) {
+        test(`renders ${iconName} Icon`, async () => {
+            // @ts-ignore
+            const { findByTestId } = render(<Icon source={iconName}/>);
+            const icon = await findByTestId('icon');
+            expect(icon).toMatchInlineSnapshot(`
+        <svg
+          class="dropin-icon dropin-icon--shape-stroke-2"
+          data-testid="icon"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+        >
+          Icon
+        </svg>
+      `);
+        });
+    }
+});

package/components/Icon/index.d.ts

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

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

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

package/components/Icon/index.js

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

package/components/IllustratedMessage/IllustratedMessage.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/IllustratedMessage/IllustratedMessage.css';
+export interface IllustratedMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'icon' | 'action'> {
+    icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+    heading?: string;
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    message?: VNode<HTMLAttributes<HTMLElement>>;
+    action?: VNode;
+    variant?: 'primary' | 'secondary';
+}
+export declare const IllustratedMessage: FunctionComponent<IllustratedMessageProps>;
+//# sourceMappingURL=IllustratedMessage.d.ts.map

package/components/IllustratedMessage/IllustratedMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IllustratedMessage.d.ts","sourceRoot":"","sources":["../../../src/components/IllustratedMessage/IllustratedMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,cAAc,EAAO,MAAM,eAAe,CAAC;AAEpD,OAAO,mEAAmE,CAAC;AAG3E,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,CAoDzE,CAAC"}

package/components/IllustratedMessage/IllustratedMessage.jsx

@@ -0,0 +1,21 @@
+import { classes, VComponent } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/IllustratedMessage/IllustratedMessage.css';
+import { Card } from '@adobe/elsie/components';
+export const IllustratedMessage = ({ className, icon, heading, headingLevel = 2, message, action, variant = 'secondary', ...props }) => {
+    const Heading = headingLevel >= 1 && headingLevel <= 6
+        ? `h${headingLevel}`
+        : 'h2';
+    return (<div {...props} className={classes(['dropin-illustrated-message', className])}>
+      <Card variant={variant}>
+        {icon && (<VComponent node={icon} aria-hidden="true" size="80" className="dropin-illustrated-message__icon"/>)}
+
+        {heading && (<Heading className="dropin-illustrated-message__heading">
+            {heading}
+          </Heading>)}
+
+        {message && (<VComponent node={message} className="dropin-illustrated-message__message"/>)}
+
+        {action && (<VComponent node={action} className="dropin-illustrated-message__action"/>)}
+      </Card>
+    </div>);
+};

package/components/IllustratedMessage/IllustratedMessage.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { IllustratedMessageProps } from '@adobe/elsie/components/IllustratedMessage';
+/**
+ * Use IllustratedMessages to display an illustration and a message, usually for an empty state or an error page.
+ */
+declare const meta: Meta<IllustratedMessageProps>;
+export default meta;
+type Story = StoryObj<IllustratedMessageProps>;
+export declare const IllustratedMessage: Story;
+//# sourceMappingURL=IllustratedMessage.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IllustratedMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/components/IllustratedMessage/IllustratedMessage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAEL,uBAAuB,EACxB,MAAM,4CAA4C,CAAC;AAMpD;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,uBAAuB,CA4DvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,uBAAuB,CAAC,CAAC;AAE/C,eAAO,MAAM,kBAAkB,EAAE,KAoChC,CAAC"}