@dropins/tools 0.21.1 → 0.21.2-alpha1

package/components/ActionButton/ActionButton.stories.jsx

@@ -0,0 +1,119 @@
+import { ActionButton as component, } from '@adobe/elsie/components/ActionButton';
+import { Add } from '@adobe/elsie/icons';
+import { Icon } from '@adobe/elsie/components/Icon';
+import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+/**
+ * Use Action Buttons to let users complete actions or select items in a workflow.
+ */
+const meta = {
+    title: 'Components/ActionButton',
+    component,
+    argTypes: {
+        icon: {
+            options: Object.keys(IconsList),
+            mapping: IconsList,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    name: 'Action Button',
+    args: {
+        children: 'Action',
+        active: false,
+        disabled: false,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(await canvas.findByRole('button')).toBeVisible();
+        await expect(await canvas.findByRole('button')).toHaveClass('dropin-action-button');
+    },
+};
+export const IconOnly = {
+    name: 'Icon Action Button',
+    args: {
+        ...Default.args,
+        children: '',
+        'aria-label': 'Action Button',
+        icon: (<Icon source={Add} size="32" className="storybook_icon" stroke="1" viewBox="0 0 24 24"/>),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const buttonIcon = document.querySelector('.dropin-action-button-icon');
+        const addIcon = document.querySelector('g[data-name="Add icon"]');
+        await expect(await canvas.findByRole('button')).toBeVisible();
+        await expect(await buttonIcon).toBeVisible();
+        await expect(await addIcon).toBeVisible();
+    },
+};
+export const WithIcon = {
+    name: 'Action Button With Icon',
+    args: {
+        ...Default.args,
+        icon: (<Icon source={Add} size="32" className="storybook_icon" stroke="1" viewBox="0 0 24 24"/>),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const buttonIcon = document.querySelector('.dropin-action-button-icon');
+        const addIcon = document.querySelector('g[data-name="Add icon"]');
+        await expect(await canvas.findByRole('button')).toBeVisible();
+        await expect(await buttonIcon).toBeVisible();
+        await expect(await addIcon).toBeVisible();
+        await expect(await canvas.getByText('Action')).toBeVisible();
+    },
+};
+export const Disabled = {
+    name: 'Disabled Action Button',
+    parameters: {
+        a11y: {
+            config: {
+                rules: [{ id: 'color-contrast', enabled: false }],
+            },
+        },
+    },
+    args: {
+        ...Default.args,
+        disabled: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(await canvas.findByRole('button')).toBeDisabled();
+    },
+};
+export const Active = {
+    name: 'Active Action Button',
+    args: {
+        ...Default.args,
+        active: true,
+    },
+};
+export const DisabledIcon = {
+    name: 'Disabled Action Button With Icon',
+    parameters: {
+        a11y: {
+            config: {
+                rules: [{ id: 'color-contrast', enabled: false }],
+            },
+        },
+    },
+    args: {
+        ...WithIcon.args,
+        disabled: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(await canvas.findByRole('button')).toBeDisabled();
+    },
+};
+export const ActiveIcon = {
+    name: 'Active Action Button With Icon',
+    args: {
+        ...WithIcon.args,
+        active: true,
+    },
+};

package/components/ActionButton/ActionButton.test.d.ts

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

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

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

package/components/ActionButton/ActionButton.test.jsx

@@ -0,0 +1,47 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render } from '@adobe/elsie/lib/tests';
+import { ActionButton } from '@adobe/elsie/components/ActionButton';
+describe('Base/Components/ActionButton', () => {
+    test('renders', () => {
+        const { container } = render(<ActionButton />);
+        const elem = container.querySelector('.dropin-action-button');
+        expect(!!elem).toEqual(true);
+    });
+    // test rendering of button with text
+    test('renders with text', () => {
+        const { container } = render(<ActionButton children="test"/>);
+        const elem = container.querySelector('.dropin-action-button');
+        expect(elem.classList.contains('dropin-action-button')).toEqual(true);
+    });
+    // test rendering of button with children components
+    test('renders with children', () => {
+        const { container } = render(<ActionButton children={<span>test</span>}/>);
+        const elem = container.querySelector('.dropin-action-button');
+        expect(elem.classList.contains('dropin-action-button')).toEqual(true);
+    });
+    // test rendering of button with icon only
+    test('renders with icon only', () => {
+        const { container } = render(<ActionButton icon={<div>icon</div>} children=""/>);
+        const elem2 = container.querySelector('.dropin-action-button-icon');
+        expect(elem2.classList.contains('dropin-action-button-icon')).toEqual(true);
+    });
+    // test rendering of button with text and icon
+    test('renders with text and icon', () => {
+        const { container } = render(<ActionButton icon={<div>icon</div>} children="test"/>);
+        const elem = container.querySelector('.dropin-action-button-icon');
+        expect(elem.classList.contains('dropin-action-button-icon')).toEqual(true);
+        const elem2 = container.querySelector('.dropin-action-button');
+        expect(elem2.classList.contains('dropin-action-button')).toEqual(true);
+    });
+    test('renders disabled', () => {
+        const { container } = render(<ActionButton disabled={true}/>);
+        const elem = container.querySelector('.dropin-action-button');
+        expect(elem.disabled).toEqual(true);
+        expect(elem.classList.contains('dropin-action-button--disabled')).toEqual(true);
+    });
+    test('renders active', () => {
+        const { container } = render(<ActionButton active={true}/>);
+        const elem = container.querySelector('.dropin-action-button');
+        expect(elem.classList.contains('dropin-action-button--active')).toEqual(true);
+    });
+});

package/components/ActionButton/index.d.ts

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

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

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

package/components/ActionButton/index.js

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

package/components/ActionButtonGroup/ActionButtonGroup.d.ts

@@ -0,0 +1,20 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/ActionButtonGroup/ActionButtonGroup.css';
+import { ActionButtonProps } from '@adobe/elsie/components/ActionButton';
+export interface ActionButtonGroupOption {
+    value: string | null;
+    text: string;
+    icon?: VNode<SVGElement>;
+    disabled?: boolean;
+}
+export interface ActionButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'primary' | 'secondary';
+    activeOption?: string;
+    disabled?: boolean;
+    dividers?: boolean;
+    children: VNode<ActionButtonProps>[] | VNode<ActionButtonProps>;
+    handleSelect?(value: string): void;
+}
+export declare const ActionButtonGroup: FunctionComponent<ActionButtonGroupProps>;
+//# sourceMappingURL=ActionButtonGroup.d.ts.map

package/components/ActionButtonGroup/ActionButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButtonGroup/ActionButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAgB,MAAM,QAAQ,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,iEAAiE,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAEzE,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC5E,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,EAAE,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAChE,YAAY,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,CAyDvE,CAAC"}

package/components/ActionButtonGroup/ActionButtonGroup.jsx

@@ -0,0 +1,39 @@
+import { cloneElement } from 'preact';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/ActionButtonGroup/ActionButtonGroup.css';
+import { useCallback, useState } from 'preact/hooks';
+import { Children } from 'react';
+export const ActionButtonGroup = ({ className, variant = 'primary', activeOption, disabled = false, dividers = true, children, handleSelect, ...props }) => {
+    const [activeOptionState, setActiveOptionState] = useState(activeOption);
+    const handleClick = useCallback((option) => {
+        const isOptionDisabled = disabled || option.props.disabled;
+        if (!isOptionDisabled) {
+            setActiveOptionState(option.props.value);
+            if (handleSelect) {
+                handleSelect(option.props.value);
+            }
+        }
+    }, [handleSelect, setActiveOptionState, disabled]);
+    const buttonGroupOptions = Children.map(children, (child) => {
+        const isOptionDisabled = disabled || child.props.disabled;
+        const isOptionActive = child.props.value === activeOptionState;
+        return cloneElement(child, {
+            disabled: isOptionDisabled,
+            active: isOptionActive,
+            onClick: () => handleClick(child),
+            className: classes([
+                'dropin-action-button-group__option',
+                `dropin-action-button-group__option--${variant}`,
+                ['dropin-action-button-group__option--active', isOptionActive],
+                ['dropin-action-button-group__option--with-dividers', dividers],
+            ]),
+        });
+    });
+    return (<div role="group" {...props} className={classes([
+            'dropin-action-button-group',
+            `dropin-action-button-group--${variant}`,
+            className,
+        ])}>
+      {buttonGroupOptions}
+    </div>);
+};

package/components/ActionButtonGroup/ActionButtonGroup.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { ActionButtonGroupProps } from '@adobe/elsie/components/ActionButtonGroup';
+/**
+ * Use Action Button Groups to group related actions.
+ */
+declare const meta: Meta<ActionButtonGroupProps>;
+export default meta;
+type Story = StoryObj<ActionButtonGroupProps>;
+/**
+ * ```ts
+ * import { ActionButtonGroup } from '@adobe/elsie/components/ActionButtonGroup';
+ * ```
+ */
+export declare const Primary: Story;
+export declare const Secondary: Story;
+//# sourceMappingURL=ActionButtonGroup.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButtonGroup/ActionButtonGroup.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAEL,sBAAsB,EACvB,MAAM,2CAA2C,CAAC;AAInD;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,sBAAsB,CA4BtC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,sBAAsB,CAAC,CAAC;AAE9C;;;;GAIG;AAEH,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAoBvB,CAAC"}

package/components/ActionButtonGroup/ActionButtonGroup.stories.jsx

@@ -0,0 +1,72 @@
+import { ActionButton } from '..';
+import { ActionButtonGroup as component, } from '@adobe/elsie/components/ActionButtonGroup';
+import { Cart, Heart, Star } from '@adobe/elsie/icons';
+import { Icon } from '../Icon';
+/**
+ * Use Action Button Groups to group related actions.
+ */
+const meta = {
+    title: 'Components/ActionButtonGroup',
+    component,
+    argTypes: {
+        variant: {
+            description: 'Action Button Group variant',
+            options: ['primary', 'secondary'],
+            control: { type: 'radio' },
+        },
+        disabled: {
+            description: 'Whether or not the field is disabled',
+            type: { name: 'boolean', required: false },
+            defaultValue: false,
+        },
+        dividers: {
+            description: 'Whether or not to show dividers between options',
+            type: { name: 'boolean', required: false },
+            defaultValue: true,
+        },
+        handleSelect: {
+            description: 'Callback function for when an option is selected',
+            type: 'function',
+            defaultValue: {
+                summary: '() => {}',
+            },
+            action: 'Value Selected',
+        },
+    },
+};
+export default meta;
+/**
+ * ```ts
+ * import { ActionButtonGroup } from '@adobe/elsie/components/ActionButtonGroup';
+ * ```
+ */
+export const Primary = {
+    args: {
+        variant: 'primary',
+        children: [
+            <ActionButton key="option1" value="option1">
+        Option1
+      </ActionButton>,
+            <ActionButton key="option2" value="option2">
+        Option2
+      </ActionButton>,
+        ],
+    },
+};
+export const Secondary = {
+    args: {
+        variant: 'secondary',
+        activeOption: 'option2',
+        children: [
+            <ActionButton key="option1" value="option1" icon={<Icon source={Heart}/>}>
+        Option1
+      </ActionButton>,
+            <ActionButton key="option2" value="option2" icon={<Icon source={Star}/>}>
+        Option2
+      </ActionButton>,
+            <ActionButton key="option3" value="option3" icon={<Icon source={Cart}/>}>
+        Option3
+      </ActionButton>,
+        ],
+    },
+};

package/components/ActionButtonGroup/ActionButtonGroup.test.d.ts

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

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

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

package/components/ActionButtonGroup/ActionButtonGroup.test.jsx

@@ -0,0 +1,78 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render, fireEvent } from '@adobe/elsie/lib/tests';
+import { ActionButtonGroup } from '@adobe/elsie/components/ActionButtonGroup';
+import { ActionButton } from '..';
+describe('Buttons/ActionButtonGroup', () => {
+    test('renders', () => {
+        const { container } = render(<ActionButtonGroup>
+        <ActionButton value={'option1'}>option1</ActionButton>
+      </ActionButtonGroup>);
+        const elem = container.querySelector('.dropin-action-button-group');
+        expect(!!elem).toEqual(true);
+    });
+    test('renders correct variants', () => {
+        const { container, rerender } = render(<ActionButtonGroup variant="primary">
+        <ActionButton value={'option1'}>option1</ActionButton>
+      </ActionButtonGroup>);
+        const primary = container.querySelector('.dropin-action-button-group');
+        expect(primary.classList.contains('dropin-action-button-group--primary')).toEqual(true);
+        rerender(<ActionButtonGroup variant="secondary">
+        <ActionButton value={'option1'}>option1</ActionButton>
+      </ActionButtonGroup>);
+        const secondary = container.querySelector('.dropin-action-button-group');
+        expect(secondary.classList.contains('dropin-action-button-group--secondary')).toEqual(true);
+    });
+    test('renders options', () => {
+        const { container } = render(<ActionButtonGroup activeOption="option2">
+        <ActionButton value={'option1'}>option1</ActionButton>
+        <ActionButton value={'option2'}>option2</ActionButton>
+        <ActionButton value={'option3'}>option3</ActionButton>
+      </ActionButtonGroup>);
+        const options = container.querySelectorAll('.dropin-action-button-group__option');
+        expect(options?.length).toEqual(3);
+        const activeOption = container.querySelector('.dropin-action-button-group__option--active');
+        expect(activeOption?.textContent).toEqual('option2');
+    });
+    test('renders dividers', () => {
+        const { container, rerender } = render(<ActionButtonGroup dividers={true}>
+        <ActionButton value={'option1'}>option1</ActionButton>
+        <ActionButton value={'option2'}>option2</ActionButton>
+      </ActionButtonGroup>);
+        const elemWithDividers = container.querySelectorAll('.dropin-action-button-group__button');
+        elemWithDividers.forEach((elem) => {
+            expect(elem.classList.contains('dropin-action-button-group__button--with-dividers')).toEqual(true);
+        });
+        rerender(<ActionButtonGroup dividers={false}>
+        <ActionButton value={'option1'}>option1</ActionButton>
+        <ActionButton value={'option2'}>option2</ActionButton>
+      </ActionButtonGroup>);
+        const elemWithoutDividers = container.querySelector('.dropin-action-button-group');
+        expect(elemWithoutDividers.classList.contains('dropin-action-button-group--with-dividers')).toEqual(false);
+    });
+    test('calls onClick callback', () => {
+        const mockFn = jest.fn();
+        const { container, rerender } = render(<ActionButtonGroup handleSelect={mockFn} activeOption="option1">
+        <ActionButton value={'option1'}>option1</ActionButton>
+      </ActionButtonGroup>);
+        const elem = container.querySelector('.dropin-action-button-group__option');
+        fireEvent.click(elem);
+        expect(mockFn).toBeCalledWith(expect.stringContaining('option1'));
+        expect(elem.classList.contains('dropin-action-button-group__option--active')).toEqual(true);
+        rerender(<ActionButtonGroup>
+        <ActionButton value={'option1'}>option1</ActionButton>
+      </ActionButtonGroup>);
+        const elemOption = container.querySelector('.dropin-action-button-group__option');
+        fireEvent.click(elemOption);
+        expect(elemOption.classList.contains('dropin-action-button-group__option--active')).toEqual(true);
+    });
+    test('disabled', () => {
+        const mockFn = jest.fn();
+        const { container } = render(<ActionButtonGroup handleSelect={mockFn} disabled={true}>
+        <ActionButton value={'option1'}>option1</ActionButton>
+      </ActionButtonGroup>);
+        const elem = container.querySelector('.dropin-action-button-group__option');
+        expect(elem.disabled).toEqual(true);
+        fireEvent.click(elem);
+        expect(mockFn).not.toHaveBeenCalled();
+    });
+});

package/components/ActionButtonGroup/index.d.ts

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

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

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

package/components/ActionButtonGroup/index.js

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

package/components/AlertBanner/AlertBanner.d.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/AlertBanner/AlertBanner.css';
+export interface AlertBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'icon' | 'action'> {
+    variant: 'brand' | 'neutral' | 'success' | 'warning';
+    icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+    message: VNode;
+    onDismiss: () => void;
+    action?: {
+        label: string;
+        onClick: (event: Event) => void;
+    };
+}
+export declare const AlertBanner: FunctionComponent<AlertBannerProps>;
+//# sourceMappingURL=AlertBanner.d.ts.map

package/components/AlertBanner/AlertBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertBanner.d.ts","sourceRoot":"","sources":["../../../src/components/AlertBanner/AlertBanner.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;AAK7D,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/D,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACrD,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,OAAO,EAAE,KAAK,CAAC;IACf,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;KACjC,CAAC;CACH;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA4D3D,CAAC"}

package/components/AlertBanner/AlertBanner.jsx

@@ -0,0 +1,30 @@
+import { classes, VComponent } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/AlertBanner/AlertBanner.css';
+import { Button, Icon } from '@adobe/elsie/components';
+import { Close } from '@adobe/elsie/icons';
+import { useText } from '@adobe/elsie/i18n';
+export const AlertBanner = ({ className, variant, icon, message, onDismiss, action, ...props }) => {
+    const translations = useText({
+        dismiss: 'Dropin.InlineAlert.dismissLabel',
+    });
+    return (<div {...props} className={classes([
+            className,
+            'dropin-alert-banner',
+            `dropin-alert-banner--${variant}`,
+        ])}>
+      <div className={'dropin-alert-banner__content'}>
+        {icon && (<VComponent node={icon} aria-hidden="true" className={'dropin-alert-banner__icon'}/>)}
+
+        {/* Message */}
+        <VComponent node={message} className={classes(['dropin-alert-banner__message'])}/>
+      </div>
+
+      <div className={'dropin-alert-banner__actions'}>
+        {action && (<Button variant="tertiary" className={'dropin-alert-banner__action'} onClick={action.onClick} aria-label={action.label}>
+            {action.label}
+          </Button>)}
+
+        <Button icon={<Icon source={Close} size="24" stroke="2"/>} className="dropin-alert-banner__dismiss-button" variant="primary" onClick={onDismiss} aria-label={translations.dismiss}/>
+      </div>
+    </div>);
+};

package/components/AlertBanner/AlertBanner.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { AlertBannerProps } from '@adobe/elsie/components/AlertBanner';
+/**
+ * Use AlertBanners to notify and prompt users to take action.
+ */
+declare const meta: Meta<AlertBannerProps>;
+export default meta;
+type Story = StoryObj<AlertBannerProps>;
+/**
+ * <AlertBanner>👋 Hello from your new AlertBanner story!</AlertBanner>
+ */
+export declare const Neutral: Story;
+export declare const Brand: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Action: Story;
+//# sourceMappingURL=AlertBanner.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlertBanner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/AlertBanner/AlertBanner.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAEL,gBAAgB,EACjB,MAAM,qCAAqC,CAAC;AAK7C;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAkDhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAExC;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAwBpB,CAAC"}

package/components/AlertBanner/AlertBanner.stories.jsx

@@ -0,0 +1,128 @@
+import { AlertBanner as component, } from '@adobe/elsie/components/AlertBanner';
+import { action } from '@storybook/addon-actions';
+import { expect } from '@storybook/jest';
+import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
+/**
+ * Use AlertBanners to notify and prompt users to take action.
+ */
+const meta = {
+    title: 'Components/AlertBanner',
+    component,
+    argTypes: {
+        variant: {
+            description: 'The AlertBanner variant.',
+            table: {
+                type: { summary: 'string' },
+            },
+            options: ['brand', 'neutral', 'success', 'warning'],
+            control: 'radio',
+        },
+        icon: {
+            description: 'The AlertBanner icon.',
+            table: {
+                type: { summary: 'FunctionComponent' },
+            },
+            options: Object.keys(IconsList),
+            mapping: IconsList,
+            control: {
+                type: 'select',
+            },
+        },
+        message: {
+            control: {
+                type: 'select',
+                labels: {
+                    Short: 'Short message',
+                    Long: 'Long message',
+                },
+            },
+            description: 'The AlertBanner message.',
+            options: ['Short', 'Long'],
+            mapping: {
+                Short: <div>Short message</div>,
+                Long: <div>Alert banner with an extremely extremely long message</div>,
+            },
+        },
+        onDismiss: {
+            description: 'The AlertBanner dismiss handler.',
+            table: {
+                type: { summary: 'function' },
+            },
+            action: 'onDismiss',
+        },
+        action: {
+            description: 'Optional action that must contain `label` and `onClick()` properties',
+        },
+    },
+};
+export default meta;
+/**
+ * <AlertBanner>👋 Hello from your new AlertBanner story!</AlertBanner>
+ */
+export const Neutral = {
+    args: {
+        variant: 'neutral',
+        //@ts-ignore
+        icon: IconsList.InfoFilled,
+        message: <span>Hello from your new AlertBanner!</span>,
+        onDismiss: action('Dismiss clicked'),
+        action: {
+            label: 'Action',
+            onClick: action('Action clicked'),
+        },
+    },
+    play: async () => {
+        const alertBanner = document.querySelector('div[class*="dropin-alert-banner"]');
+        await expect(alertBanner).toBeVisible();
+        const link = alertBanner.querySelector('.dropin-alert-banner__dismiss-button');
+        await expect(link).toBeVisible();
+        await expect(link?.ariaLabel).toBe('Dismiss Alert');
+        const icon = alertBanner.querySelector('.dropin-alert-banner__icon');
+        await expect(icon).toBeVisible();
+    },
+};
+export const Brand = {
+    args: {
+        variant: 'brand',
+        message: <span>Hello from your new AlertBanner!</span>,
+        onDismiss: action('Dismiss clicked'),
+    },
+};
+export const Success = {
+    args: {
+        variant: 'success',
+        //@ts-ignore
+        icon: IconsList.CheckWithCircle,
+        message: <span>Hello from your new AlertBanner!</span>,
+        onDismiss: action('Dismiss clicked'),
+    },
+};
+export const Warning = {
+    args: {
+        variant: 'warning',
+        //@ts-ignore
+        icon: IconsList.WarningFilled,
+        message: <span>Hello from your new AlertBanner!</span>,
+        onDismiss: action('Dismiss clicked'),
+    },
+};
+export const Action = {
+    args: {
+        variant: 'warning',
+        //@ts-ignore
+        icon: IconsList.WarningFilled,
+        message: <span>Hello from your new AlertBanner!</span>,
+        onDismiss: action('Dismiss clicked'),
+        action: {
+            label: 'Action',
+            onClick: action('Action clicked'),
+        },
+    },
+    play: async () => {
+        const alertBanner = document.querySelector('div[class*="dropin-alert-banner"]');
+        await expect(alertBanner).toBeVisible();
+        const action = alertBanner.querySelector('.dropin-alert-banner__action');
+        await expect(action).toBeVisible();
+        await expect(action).toHaveTextContent('Action');
+    },
+};

package/components/AlertBanner/AlertBanner.test.d.ts

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

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

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