@dropins/tools 0.21.1 → 0.21.2-alpha1

package/components/ColorSwatch/ColorSwatch.jsx

@@ -0,0 +1,57 @@
+import { useCallback } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/ColorSwatch/ColorSwatch.css';
+import { useText } from '@adobe/elsie/i18n';
+export const ColorSwatch = ({ className, name, value, id, label, groupAriaLabel, size = 'medium', color, disabled = false, selected = false, outOfStock = false, multi = false, onValue, onUpdateError, ...props }) => {
+    // i18n
+    const outOfStockLabel = useText('Dropin.Swatches.outOfStock.label').label;
+    const selectedLabel = useText('Dropin.Swatches.selected.label').label;
+    const swatchLabel = useText('Dropin.Swatches.swatch.label').label;
+    const onValueHandler = useCallback(async (newValue) => {
+        if (onValue) {
+            try {
+                await onValue(newValue);
+            }
+            catch (e) {
+                if (onUpdateError) {
+                    onUpdateError(e);
+                }
+            }
+        }
+    }, [onValue, onUpdateError]);
+    const handleOnValue = (e) => {
+        const input = e.target;
+        onValueHandler(input.value);
+    };
+    const isValidColor = (color) => {
+        const colorStyle = new Option().style;
+        colorStyle.color = color;
+        return colorStyle.color !== ''; // Returns true if the browser accepts this as a valid color
+    };
+    const defaultColor = 'var(--color-gray-300);';
+    const validColor = color && isValidColor(color) ? color : defaultColor;
+    const handleAriaLabel = () => {
+        if (outOfStock)
+            return `${groupAriaLabel}: ${label} ${outOfStockLabel}`;
+        if (selected)
+            return `${groupAriaLabel}: ${label} ${selectedLabel}`;
+        return `${groupAriaLabel}: ${label} ${swatchLabel}`;
+    };
+    return (<label className={classes([
+            'dropin-color-swatch__container',
+            `dropin-color-swatch__container--${size}`,
+            className,
+        ])}>
+      <input type={multi ? 'checkbox' : 'radio'} name={name} id={id} value={value} aria-label={handleAriaLabel()} checked={selected} disabled={disabled} onChange={handleOnValue} {...props} className={classes([
+            'dropin-color-swatch',
+            ['dropin-color-swatch--selected', selected],
+            ['dropin-color-swatch--disabled', disabled],
+            className,
+        ])}/>
+      <span style={{ '--bg-color': validColor }} className={classes([
+            'dropin-color-swatch__span',
+            ['dropin-color-swatch__span--out-of-stock', outOfStock],
+            className,
+        ])}/>
+    </label>);
+};

package/components/ColorSwatch/ColorSwatch.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { ColorSwatchProps } from '@adobe/elsie/components/ColorSwatch';
+/**
+ * Use Color Swatches to display fills — such as colors, gradients, and textures — that can be applied to an object.
+ */
+declare const meta: Meta<ColorSwatchProps>;
+export default meta;
+type Story = StoryObj<ColorSwatchProps>;
+/**
+ * ```ts
+ * import { ColorSwatch } from '@adobe/elsie/components/ColorSwatch';
+ * ```
+ */
+export declare const DefaultColorSwatch: Story;
+export declare const SelectedColorSwatch: Story;
+export declare const DisabledColorSwatch: Story;
+export declare const OutOfStockColorSwatch: Story;
+export declare const SelectedOutOfStockColorSwatch: Story;
+export declare const MultiColorSwatch: Story;
+//# sourceMappingURL=ColorSwatch.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ColorSwatch/ColorSwatch.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAIxD,OAAO,EAEL,gBAAgB,EACjB,MAAM,qCAAqC,CAAC;AAE7C;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CA8EhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAExC;;;;GAIG;AAEH,eAAO,MAAM,kBAAkB,EAAE,KAuBhC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA0BjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAkBjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAcnC,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KAc3C,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC"}

package/components/ColorSwatch/ColorSwatch.stories.jsx

@@ -0,0 +1,206 @@
+import { action } from '@storybook/addon-actions';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { ColorSwatch, } from '@adobe/elsie/components/ColorSwatch';
+/**
+ * Use Color Swatches to display fills — such as colors, gradients, and textures — that can be applied to an object.
+ */
+const meta = {
+    title: 'Components/ColorSwatch',
+    component: ColorSwatch,
+    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',
+            },
+        },
+        size: {
+            description: 'Size of the color swatch',
+            type: {
+                required: false,
+                name: 'string',
+            },
+            defaultValue: { summary: 'medium' },
+            options: ['medium', 'large'],
+            control: { type: 'radio' },
+        },
+        color: {
+            description: 'Color of the swatch',
+            type: {
+                required: false,
+                name: 'string',
+            },
+        },
+        value: {
+            description: 'Field value',
+            type: {
+                required: false,
+                name: 'string',
+            },
+        },
+        disabled: {
+            description: 'Whether or not the color swatch is disabled',
+            type: {
+                required: false,
+                name: 'boolean',
+            },
+        },
+        selected: {
+            description: 'Whether or not the color swatch is active',
+            type: {
+                required: false,
+                name: 'boolean',
+            },
+        },
+        multi: {
+            description: 'Whether or not the color swatch allows multiple selection',
+            type: {
+                required: false,
+                name: 'boolean',
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * ```ts
+ * import { ColorSwatch } from '@adobe/elsie/components/ColorSwatch';
+ * ```
+ */
+export const DefaultColorSwatch = {
+    args: {
+        name: 'colorSwatchField',
+        id: 'graySwatch',
+        label: 'gray',
+        groupAriaLabel: 'Color Swatch',
+        value: 'gray',
+        size: 'medium',
+        color: '#E8E8E8',
+        selected: false,
+        disabled: false,
+        outOfStock: false,
+        onValue: action('onValue'),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const textSwatch = await canvas.findByRole('radio');
+        const spanElement = document.querySelector('.dropin-color-swatch__span');
+        expect(spanElement).toBeVisible();
+        await expect(textSwatch).not.toBeChecked();
+    },
+};
+export const SelectedColorSwatch = {
+    args: {
+        name: 'colorSwatchField',
+        id: 'graySwatch',
+        value: 'gray',
+        label: 'gray',
+        groupAriaLabel: 'Color Swatch',
+        size: 'medium',
+        color: '#E8E8E8',
+        selected: true,
+        disabled: false,
+        outOfStock: false,
+        onValue: action('onValue'),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const textSwatch = await canvas.findByRole('radio');
+        const spanElement = document.querySelector('.dropin-color-swatch__span');
+        expect(spanElement).toBeVisible();
+        await expect(textSwatch).toBeChecked();
+        await expect(canvas.getByLabelText('Color Swatch: gray swatch selected')).toBeChecked();
+    },
+};
+export const DisabledColorSwatch = {
+    args: {
+        name: 'colorSwatchField',
+        id: 'graySwatch',
+        value: 'gray',
+        label: 'gray',
+        groupAriaLabel: 'Color Swatch',
+        size: 'medium',
+        color: '#E8E8E8',
+        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 OutOfStockColorSwatch = {
+    args: {
+        name: 'colorSwatchField',
+        id: 'graySwatch',
+        label: 'gray',
+        groupAriaLabel: 'Color Swatch',
+        value: 'gray',
+        size: 'medium',
+        color: '#E8E8E8',
+        selected: false,
+        disabled: false,
+        outOfStock: true,
+        onValue: action('onValue'),
+    },
+};
+export const SelectedOutOfStockColorSwatch = {
+    args: {
+        name: 'colorSwatch_Field',
+        id: 'graySwatch',
+        value: 'gray',
+        label: 'gray',
+        groupAriaLabel: 'Color Swatch',
+        size: 'medium',
+        color: '#E8E8E8',
+        selected: true,
+        disabled: false,
+        outOfStock: true,
+        onValue: action('onValue'),
+    },
+};
+export const MultiColorSwatch = {
+    args: {
+        name: 'colorSwatchField',
+        id: 'graySwatch',
+        value: 'gray',
+        size: 'medium',
+        color: '#E8E8E8',
+        selected: false,
+        disabled: false,
+        outOfStock: false,
+        multi: true,
+        onValue: action('onValue'),
+        'aria-label': 'Grey Color Swatch',
+    },
+    render: (args) => (<div style="display: flex; flex-wrap:wrap; gap: 25px">
+      <ColorSwatch {...args} id={'colorSwatch1'} value={'green'} color={'green'}/>
+      <ColorSwatch {...args} id={'colorSwatch2'} value={'blue'} color={'blue'}/>
+      <ColorSwatch {...args} id={'colorSwatch3'} value={'yellow'} color={'yellow'}/>
+    </div>),
+};

package/components/ColorSwatch/ColorSwatch.test.d.ts

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

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

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

package/components/ColorSwatch/ColorSwatch.test.jsx

@@ -0,0 +1,87 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render, fireEvent, waitFor } from '@adobe/elsie/lib/tests';
+import { ColorSwatch } from '@adobe/elsie/components/ColorSwatch';
+describe('Base/Components/ColorSwatch', () => {
+    test('renders', () => {
+        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="Gray" value="gray" size="medium" color="#E8E8E8"/>);
+        expect(!!container).toEqual(true);
+    });
+    test('Renders the correct shape for default props', () => {
+        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8"/>);
+        // Ensure the component with default properties matches the snapshot
+        const elem = container.querySelector('.dropin-color-swatch');
+        expect(elem).toMatchSnapshot();
+    });
+    test('Renders the colorSwatch in selected state', () => {
+        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8" selected={true}/>);
+        // Ensure the colorSwatch is selected
+        const selected = container.querySelector('.dropin-color-swatch');
+        expect(selected.classList.contains('dropin-color-swatch--selected')).toEqual(true);
+    });
+    test('Renders the colorSwatch in disabled state', () => {
+        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8" disabled={true}/>);
+        // Ensure the colorSwatch is disabled
+        const disabled = container.querySelector('.dropin-color-swatch');
+        expect(disabled.classList.contains('dropin-color-swatch--disabled')).toEqual(true);
+    });
+    test('colorSwatch default size is medium', () => {
+        const { container } = render(<ColorSwatch name="colorSwatchField" label="gray" id="graySwatch" value="gray" color="#E8E8E8"/>);
+        // Ensure the colorSwatch is medium
+        const medium = container.querySelector('.dropin-color-swatch__container');
+        expect(medium.classList.contains('dropin-color-swatch__container--medium')).toEqual(true);
+    });
+    test('Renders the colorSwatch in large size', () => {
+        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="large" color="#E8E8E8"/>);
+        // Ensure the colorSwatch is large
+        const large = container.querySelector('.dropin-color-swatch__container');
+        expect(large.classList.contains('dropin-color-swatch__container--large')).toEqual(true);
+    });
+    test('Does not break when onValue() is not provided', () => {
+        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8"/>);
+        const colorSwatch = container.querySelector('.dropin-color-swatch');
+        fireEvent.click(colorSwatch);
+        expect(!!container).toEqual(true);
+    });
+    test('Triggers onValue()', async () => {
+        const mockFn = jest.fn();
+        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8" onValue={mockFn}/>);
+        const colorSwatch = container.querySelector('.dropin-color-swatch');
+        fireEvent.click(colorSwatch);
+        await waitFor(() => expect(mockFn).toHaveBeenCalledWith('gray'));
+    });
+    test('Calls onUpdateError() when onValue() throws an error', async () => {
+        const mockFn = jest.fn();
+        const mockError = new Error('onValue() error');
+        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8" onValue={() => {
+                throw mockError;
+            }} onUpdateError={mockFn}/>);
+        const colorSwatch = container.querySelector('.dropin-color-swatch');
+        fireEvent.click(colorSwatch);
+        await waitFor(() => expect(mockFn).toHaveBeenCalled());
+        await waitFor(() => expect(mockFn).toHaveBeenCalledWith(mockError));
+    });
+    test('Calls onUpdateError() when onValue() returns a rejected promise', async () => {
+        const mockFn = jest.fn(() => {
+            throw new Error('Mock error!');
+        });
+        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8" onValue={mockFn}/>);
+        const colorSwatch = container.querySelector('.dropin-color-swatch');
+        fireEvent.click(colorSwatch);
+        await waitFor(() => expect(mockFn).toHaveBeenCalled());
+    });
+    test('Renders default color when color prop is not valid string', () => {
+        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="not a valid color"/>);
+        const colorSwatch = container.querySelector('.dropin-color-swatch__span');
+        expect(colorSwatch.style.getPropertyValue('--bg-color')).toEqual('var(--color-gray-300);');
+    });
+    test('Renders out of stock color when outOfStock prop is true', () => {
+        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8" outOfStock={true}/>);
+        const colorSwatch = container.querySelector('.dropin-color-swatch__span');
+        expect(colorSwatch.classList.contains('dropin-color-swatch__span--out-of-stock')).toEqual(true);
+    });
+    test('Renders when multi prop is true', () => {
+        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" value="gray" size="medium" color="#E8E8E8" multi={true}/>);
+        const colorSwatch = container.querySelector('.dropin-color-swatch');
+        expect(colorSwatch.type === 'checkbox').toEqual(true);
+    });
+});

package/components/ColorSwatch/index.d.ts

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

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

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

package/components/ColorSwatch/index.js

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

package/components/Divider/Divider.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/Divider/Divider.css';
+export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+    variant?: 'primary' | 'secondary';
+}
+export declare const Divider: FunctionComponent<DividerProps>;
+//# sourceMappingURL=Divider.d.ts.map

package/components/Divider/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,6CAA6C,CAAC;AAErD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,aAAa,CAAC;IACjE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC;AAED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAcnD,CAAC"}

package/components/Divider/Divider.jsx

@@ -0,0 +1,9 @@
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/Divider/Divider.css';
+export const Divider = ({ variant = 'primary', className, }) => {
+    return (<hr role="separator" className={classes([
+            'dropin-divider',
+            `dropin-divider--${variant}`,
+            className,
+        ])}/>);
+};

package/components/Divider/Divider.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { DividerProps } from '@adobe/elsie/components/Divider';
+/**
+ * Use Dividers to separate and group content or build rhythm and structure.
+ */
+declare const meta: Meta<DividerProps>;
+export default meta;
+type Story = StoryObj<DividerProps>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+//# sourceMappingURL=Divider.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAW,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAIxE;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAW5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC"}

package/components/Divider/Divider.stories.jsx

@@ -0,0 +1,43 @@
+import { Divider } from '@adobe/elsie/components/Divider';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+/**
+ * Use Dividers to separate and group content or build rhythm and structure.
+ */
+const meta = {
+    title: 'Components/Divider',
+    component: Divider,
+    argTypes: {
+        variant: {
+            description: 'Divider variant: `primary` or `secondary`',
+            defaultValue: { summary: 'primary' },
+            options: ['primary', 'secondary'],
+            control: { type: 'radio' },
+        },
+    },
+};
+export default meta;
+export const Primary = {
+    args: {
+        variant: 'primary',
+    },
+    render: ({ variant }) => (<div style="width: 400px">
+      <Divider variant={variant}/>
+    </div>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(await canvas.findByRole('separator')).toBeVisible();
+    },
+};
+export const Secondary = {
+    args: {
+        variant: 'secondary',
+    },
+    render: ({ variant }) => (<div style="width: 400px">
+      <Divider variant={variant}/>
+    </div>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(await canvas.findByRole('separator')).toBeVisible();
+    },
+};

package/components/Divider/Divider.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Divider.test.d.ts.map

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

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

package/components/Divider/Divider.test.jsx

@@ -0,0 +1,19 @@
+import { render } from '@adobe/elsie/lib/tests';
+import { Divider } from '@adobe/elsie/components';
+//test rendering of divider
+describe('Base/Divider', () => {
+    test('renders', () => {
+        const { container } = render(<Divider />);
+        const elem = container.querySelector('.dropin-divider');
+        expect(elem.classList.contains('dropin-divider')).toEqual(true);
+    });
+    //test rendering of divider with variant
+    test('renders with variant', () => {
+        const { container } = render(<Divider variant="primary"/>);
+        const elem = container.querySelector('.dropin-divider');
+        expect(elem.classList.contains('dropin-divider--primary')).toEqual(true);
+        const { container: container2 } = render(<Divider variant="secondary"/>);
+        const elem2 = container2.querySelector('.dropin-divider');
+        expect(elem2.classList.contains('dropin-divider--secondary')).toEqual(true);
+    });
+});

package/components/Divider/index.d.ts

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

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

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

package/components/Divider/index.js

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

package/components/Field/Field.d.ts

@@ -0,0 +1,14 @@
+import '@adobe/elsie/components/Field/Field.css';
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+export interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
+    label?: string;
+    error?: string;
+    hint?: string;
+    success?: string;
+    disabled?: boolean;
+    children?: VNode;
+    size?: 'medium' | 'large';
+}
+export declare const Field: FunctionComponent<FieldProps>;
+//# sourceMappingURL=Field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CA0D/C,CAAC"}

package/components/Field/Field.jsx

@@ -0,0 +1,29 @@
+import '@adobe/elsie/components/Field/Field.css';
+import { classes } from '@adobe/elsie/lib';
+export const Field = ({ className, label, error, hint, success, size = 'medium', disabled = false, children, ...props }) => {
+    const id = children?.props?.id ?? `dropin-field-${Math.random().toString(36)}`;
+    const ChildComponent = children && typeof children.type !== 'string' ? children.type : null;
+    return (<div {...props} className={classes(['dropin-field', className])}>
+      {label && (<label className={classes([
+                'dropin-field__label',
+                ['dropin-field__label--disabled', disabled],
+                `dropin-field__label--${size}`,
+            ])} htmlFor={id}>
+          {label}
+        </label>)}
+
+      <div className={classes(['dropin-field__content'])}>
+        {ChildComponent && children && (<ChildComponent {...children.props} id={id} key={children.key} disabled={disabled} size={size} error={!!error} success={!!success && !error}/>)}
+      </div>
+
+      <div className={classes([
+            'dropin-field__hint',
+            [`dropin-field__hint--${size}`, size],
+            ['dropin-field__hint--error', !!error],
+            ['dropin-field__hint--success', !!success && !error],
+            ['dropin-field__hint--disabled', !!disabled],
+        ])}>
+        {error || success || hint}
+      </div>
+    </div>);
+};

package/components/Field/Field.stories.d.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { FieldProps } from '@adobe/elsie/components';
+/**
+ * Use Field Labels to wrap form inputs with titles and help text.
+ */
+declare const meta: Meta<FieldProps>;
+export default meta;
+type Story = StoryObj<FieldProps>;
+/**
+ * ```ts
+ * import { Field } from '@adobe/elsie/components/Field';
+ * import { Input } from '@adobe/elsie/components/Input';
+ * ```
+ */
+export declare const InputField: Story;
+/**
+ * ```ts
+ * import { Field } from '@adobe/elsie/components/Field';
+ * import { Incrementer } from '@adobe/elsie/components/Incrementer';
+ * ```
+ */
+export declare const IncrementerField: Story;
+/**
+ * ```ts
+ * import { Field } from '@adobe/elsie/components/Field';
+ * import { Picker } from '@adobe/elsie/components/Picker';
+ * ```
+ */
+export declare const PickerField: Story;
+export declare const CheckboxField: Story;
+/**
+ * ```ts
+ * import { Field } from '@adobe/elsie/components/Field';
+ * import { TextSwatch } from '@adobe/elsie/components/TextSwatch';
+ * ```
+ */
+//# sourceMappingURL=Field.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Field/Field.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAEL,UAAU,EAKX,MAAM,yBAAyB,CAAC;AAIjC;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAoC1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,KAqBxB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAmD9B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,KAiDzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC;AAEF;;;;;GAKG"}