@dropins/tools 0.21.1 → 0.21.2-alpha2

package/components/Button/Button.stories.jsx

@@ -0,0 +1,354 @@
+import { Button as component, } from '@adobe/elsie/components/Button';
+import { Cart, Check, Search, SearchFilled } 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';
+import { action } from '@storybook/addon-actions';
+/**
+ * Use Buttons to highlight or guide user actions.
+ */
+const meta = {
+    title: 'Components/Button',
+    component,
+    argTypes: {
+        value: {
+            description: 'Add string to pass to the clickHandler.',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        children: {
+            description: 'Add text to the button.',
+            table: {
+                type: { summary: 'ComponentChildren' },
+            },
+            control: 'text',
+        },
+        variant: {
+            description: 'Change the button style.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'primary' },
+            },
+            options: ['primary', 'secondary', 'tertiary'],
+            control: 'radio',
+        },
+        size: {
+            description: 'Change the button size.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'medium' },
+            },
+            options: ['medium', 'large'],
+            control: 'radio',
+        },
+        icon: {
+            description: 'Add Icon component to the button.',
+            table: {
+                type: { summary: 'FunctionComponent' },
+            },
+            options: Object.keys(IconsList),
+            mapping: IconsList,
+            control: 'select',
+        },
+        disabled: {
+            description: 'Disable the button.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+            control: { type: 'boolean' },
+        },
+        active: {
+            description: 'Activate the button.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+            control: { type: 'boolean' },
+        },
+        activeChildren: {
+            description: 'Replace value of children prop when button is active.',
+            table: {
+                type: { summary: 'ComponentChildren' },
+            },
+            control: 'text',
+        },
+        activeIcon: {
+            description: 'Replace value of icon prop when when button is active.',
+            table: {
+                type: { summary: 'FunctionComponent' },
+            },
+            options: Object.keys(IconsList),
+            mapping: IconsList,
+            control: 'select',
+        },
+        onClick: {
+            description: 'Add a click handler.',
+            table: {
+                type: { summary: 'function' },
+            },
+            action: 'onClick',
+        },
+        href: {
+            description: 'Set this value to render the component as a link',
+            table: {
+                type: { summary: 'string' },
+            },
+            control: 'text',
+        },
+    },
+};
+export default meta;
+/**
+ * ```tsx
+ * <Button
+ *  active={false}
+ *  activeChildren="Active"
+ *  activeIcon={<Icon source={Check} size="24" />}
+ *  children="Button"
+ *  disabled={false}
+ *  icon={<Icon source={Cart} size="24" />}
+ *  onClick={handleAddToCart}
+ *  size="medium"
+ *  value={undefined}
+ *  variant="primary"
+ * />
+ * ```
+ */
+export const Button = {
+    tags: ['isHidden'],
+    args: {
+        active: false,
+        activeChildren: 'Active',
+        activeIcon: <Icon source={Check} size="24"/>,
+        children: 'Button',
+        disabled: false,
+        icon: <Icon source={Cart} size="24"/>,
+        onClick: action('onClick'),
+        size: 'medium',
+        value: undefined,
+        variant: 'primary',
+    },
+};
+/**
+ * ```tsx
+ * <Button>Button</Button>
+ * ```
+ * ```tsx
+ * <Button children="Button" />
+ * ```
+ */
+export const Children = {
+    tags: ['isHidden'],
+    args: {
+        children: 'Button',
+    },
+};
+/**
+ * ```tsx
+ * <Button variant="primary">Primary</Button>
+ * ```
+ */
+export const Primary = {
+    args: {
+        ...Button.args,
+        activeIcon: undefined,
+        icon: undefined,
+        children: 'Primary',
+        variant: 'primary',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(await canvas.findByRole('button')).toBeVisible();
+    },
+};
+/**
+ * ```tsx
+ * <Button variant='secondary'>Secondary</Button>
+ * ```
+ */
+export const Secondary = {
+    args: {
+        ...Primary.args,
+        children: 'Secondary',
+        variant: 'secondary',
+    },
+};
+/**
+ * ```tsx
+ * <Button variant='tertiary'>Tertiary</Button>
+ * ```
+ */
+export const Tertiary = {
+    args: {
+        ...Primary.args,
+        children: 'Tertiary',
+        variant: 'tertiary',
+    },
+};
+/**
+ * ```tsx
+ * <Button size='large'>Large</Button>
+ * ```
+ */
+export const LargeSize = {
+    args: {
+        ...Primary.args,
+        children: 'Large',
+        size: 'large',
+        value: '123',
+    },
+};
+/**
+ * ```tsx
+ * <Button size='medium'>Medium</Button>
+ * ```
+ */
+export const MediumSize = {
+    args: {
+        ...Primary.args,
+        children: 'Medium',
+        size: 'medium',
+    },
+};
+/**
+ * ```tsx
+ * <Button
+ *  icon={<Icon
+ *    source={Cart}
+ *    size="24"
+ *    stroke="2"
+ *    viewBox="0 0 24 24"
+ *    aria-label="Search" />}
+ * />
+ * ```
+ */
+export const IconOnly = {
+    args: {
+        ...Primary.args,
+        children: undefined,
+        icon: (<Icon source={Search} size="24" stroke="2" viewBox="0 0 24 24" aria-label="Search"/>),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const searchIcon = document.querySelector('g[data-name="Search icon"]');
+        await expect(await canvas.findByRole('button')).toBeVisible();
+        await expect(searchIcon).toBeVisible();
+    },
+};
+/**
+ * ```tsx
+ * <Button
+ *  icon={<Icon
+ *    source={Cart}
+ *    size="24"
+ *    stroke="2"
+ *    viewBox="0 0 24 24"
+ *    aria-label="Search" />}
+ * >
+ *  Search
+ * </Button>
+ * ```
+ */
+export const TextAndIcon = {
+    args: {
+        ...IconOnly.args,
+        children: 'Search',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const searchIcon = document.querySelector('g[data-name="Search icon"]');
+        await expect(await canvas.findByRole('button')).toBeVisible();
+        await expect(searchIcon).toBeVisible();
+        await expect(canvas.getByText('Search')).toBeVisible();
+    },
+};
+/**
+ * ```tsx
+ * <Button disabled>Button</Button>
+ * ```
+ * ```tsx
+ * <Button disabled={true}>Button</Button>
+ * ```
+ * ```tsx
+ * <Button disabled={loop ? false : current < 1}>Button</Button>
+ * ```
+ */
+export const Disabled = {
+    args: {
+        ...Primary.args,
+        children: 'Button',
+        disabled: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(await canvas.findByRole('button')).toBeDisabled();
+        await expect(canvas.getByText('Button')).toBeVisible();
+    },
+};
+/**
+ * ```tsx
+ * <Button
+ *  active={true}
+ *  activeChildren="Active"
+ *  activeIcon={<Icon source={SearchFilled} />}
+ *  children="Not Active"
+ *  icon={<Icon source={Search} />}
+ * />
+ * ```
+ */
+export const Active = {
+    args: {
+        ...Primary.args,
+        active: true,
+        activeChildren: 'Active',
+        activeIcon: (<Icon source={SearchFilled} size="24" stroke="2" viewBox="0 0 24 24"/>),
+        children: 'Not Active',
+        icon: <Icon source={Search} size="24" stroke="2" viewBox="0 0 24 24"/>,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const searchIcon = document.querySelector('[data-name="Search icon filled"]');
+        await expect(await canvas.findByRole('button')).toBeVisible();
+        await expect(canvas.getByText('Active')).toBeVisible();
+        await expect(searchIcon).toBeVisible();
+    },
+};
+/**
+ * ```tsx
+ * <Button
+ *  active={false}
+ *  activeChildren="Active"
+ *  activeIcon={<Icon source={SearchFilled} />}
+ *  children="Not Active"
+ *  icon={<Icon source={Search} />}
+ * />
+ * ```
+ */
+export const NotActive = {
+    args: {
+        ...Active.args,
+        active: false,
+    },
+};
+/**
+ * ```tsx
+ * <Button href="https://google.com">Link</Button>
+ * ```
+ */
+export const AsLink = {
+    args: {
+        ...Primary.args,
+        href: 'https://google.com',
+        children: 'Link',
+        icon: undefined,
+        onClick: undefined,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(await canvas.findByRole('link')).toBeVisible();
+        await expect(canvas.getByText('Link')).toBeVisible();
+    },
+};

package/components/Button/Button.test.d.ts

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

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

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

package/components/Button/Button.test.jsx

@@ -0,0 +1,134 @@
+import { render } from '@adobe/elsie/lib/tests';
+import { Button } from '@adobe/elsie/components';
+//test rendering of button
+describe('Base Components/Button', () => {
+    //test rendering of button
+    test('renders', () => {
+        const { container } = render(<Button icon={<div>icon</div>} children="test"/>);
+        const elem = container.querySelector('.dropin-button, .dropin-icon, .dropin-iconButton');
+        expect(!!elem).toEqual(true);
+        expect(elem.tagName).toEqual('BUTTON');
+    });
+    test('renders as link', () => {
+        const { container } = render(<Button href="https://google.com" icon={<div>icon</div>} children="test"/>);
+        const elem = container.querySelector('.dropin-button, .dropin-icon, .dropin-iconButton');
+        expect(!!elem).toEqual(true);
+        expect(elem.tagName).toEqual('A');
+        expect(elem.getAttribute('href')).toEqual('https://google.com');
+    });
+    //test rendering of button with text
+    test('renders with text', () => {
+        const { container } = render(<Button children="test"/>);
+        const elem = container.querySelector('.dropin-button');
+        expect(elem.classList.contains('dropin-button')).toEqual(true);
+    });
+    //test rendering of button with children
+    test('renders with children', () => {
+        const { container } = render(<Button children={<span>test</span>}/>);
+        const elem = container.querySelector('.dropin-button');
+        expect(elem.classList.contains('dropin-button')).toEqual(true);
+    });
+    //test rendering of button with icon only
+    test('renders with icon only', () => {
+        const { container } = render(<Button icon={<div>icon</div>} children=""/>);
+        const elem2 = container.querySelector('.dropin-iconButton');
+        expect(elem2.classList.contains('dropin-iconButton')).toEqual(true);
+    });
+    //test rendering of button with text and icon
+    test('renders with text and icon', () => {
+        const { container } = render(<Button icon={<div>icon</div>} children="test"/>);
+        const elem = container.querySelector('.dropin-button-icon');
+        expect(elem.classList.contains('dropin-button-icon')).toEqual(true);
+        const elem2 = container.querySelector('.dropin-button');
+        expect(elem2.classList.contains('dropin-button')).toEqual(true);
+    });
+    //test rendering of button variants
+    test('renders correct variants', () => {
+        //test rendering correct button variants with icon only
+        const { container, rerender } = render(<Button variant="primary" icon={<div>icon</div>} children=""/>);
+        const primary = container.querySelector('.dropin-iconButton');
+        expect(primary.classList.contains('dropin-iconButton--primary')).toEqual(true);
+        rerender(<Button variant="secondary" icon={<div>icon</div>} children=""/>);
+        const secondary = container.querySelector('.dropin-iconButton');
+        expect(secondary.classList.contains('dropin-iconButton--secondary')).toEqual(true);
+        rerender(<Button variant="tertiary" icon={<div>icon</div>} children=""/>);
+        const tertiary = container.querySelector('.dropin-iconButton');
+        expect(tertiary.classList.contains('dropin-iconButton--tertiary')).toEqual(true);
+        //test rendering correct button variants with text and icon
+        rerender(<Button variant="primary" icon={<div>icon</div>} children="test"/>);
+        const primaryText = container.querySelector('.dropin-button');
+        expect(primaryText.classList.contains('dropin-button--primary')).toEqual(true);
+        rerender(<Button variant="secondary" icon={<div>icon</div>} children="test"/>);
+        const secondaryText = container.querySelector('.dropin-button');
+        expect(secondaryText.classList.contains('dropin-button--secondary')).toEqual(true);
+        rerender(<Button variant="tertiary" icon={<div>icon</div>} children="test"/>);
+        const tertiaryText = container.querySelector('.dropin-button');
+        expect(tertiaryText.classList.contains('dropin-button--tertiary')).toEqual(true);
+        //test rendering correct button variants with no icon / text only
+        rerender(<Button variant="primary" children="test" icon={undefined}/>);
+        const primaryTextNoIcon = container.querySelector('.dropin-button');
+        expect(primaryTextNoIcon.classList.contains('dropin-button--primary')).toEqual(true);
+        rerender(<Button variant="secondary" children="test" icon={undefined}/>);
+        const secondaryTextNoIcon = container.querySelector('.dropin-button');
+        expect(secondaryTextNoIcon.classList.contains('dropin-button--secondary')).toEqual(true);
+        rerender(<Button variant="tertiary" children="test" icon={undefined}/>);
+        const tertiaryTextNoIcon = container.querySelector('.dropin-button');
+        expect(tertiaryTextNoIcon.classList.contains('dropin-button--tertiary')).toEqual(true);
+    });
+    //test rendering of button disabled with button variants
+    test('renders correct disabled variants', () => {
+        //test rendering correct button disabled variants with icon only
+        const { container, rerender } = render(<Button variant="primary" icon={<div>icon</div>} children="" disabled/>);
+        const primary = container.querySelector('.dropin-iconButton');
+        expect(primary.classList.contains('dropin-iconButton--primary--disabled')).toEqual(true);
+        rerender(<Button variant="secondary" icon={<div>icon</div>} children="" disabled/>);
+        const secondary = container.querySelector('.dropin-iconButton');
+        expect(secondary.classList.contains('dropin-iconButton--secondary--disabled')).toEqual(true);
+        rerender(<Button variant="tertiary" icon={<div>icon</div>} children="" disabled/>);
+        const tertiary = container.querySelector('.dropin-iconButton');
+        expect(tertiary.classList.contains('dropin-iconButton--tertiary--disabled')).toEqual(true);
+        //test rendering correct button disabled variants with text and icon
+        rerender(<Button variant="primary" icon={<div>icon</div>} children="test" disabled/>);
+        const primaryText = container.querySelector('.dropin-button');
+        expect(primaryText.classList.contains('dropin-button--primary--disabled')).toEqual(true);
+        rerender(<Button variant="secondary" icon={<div>icon</div>} children="test" disabled/>);
+        const secondaryText = container.querySelector('.dropin-button');
+        expect(secondaryText.classList.contains('dropin-button--secondary--disabled')).toEqual(true);
+        rerender(<Button variant="tertiary" icon={<div>icon</div>} children="test" disabled/>);
+        const tertiaryText = container.querySelector('.dropin-button');
+        expect(tertiaryText.classList.contains('dropin-button--tertiary--disabled')).toEqual(true);
+    });
+    //test rendering of button sizes
+    test('renders correct sizes', () => {
+        //test rendering correct button sizes with text
+        const { container, rerender } = render(<Button children="test" size="medium"/>);
+        const primaryText = container.querySelector('.dropin-button');
+        expect(primaryText.classList.contains('dropin-button--medium')).toEqual(true);
+        rerender(<Button children="test" size="large"/>);
+        const secondaryText = container.querySelector('.dropin-button');
+        expect(secondaryText.classList.contains('dropin-button--large')).toEqual(true);
+    });
+    //tests rending of active state variations
+    test('renders correct active variants', () => {
+        //test rendering active state with icon
+        const { container, rerender } = render(<Button activeIcon={<div>icon</div>} children="" active={true}/>);
+        const active = container.querySelector('.dropin-iconButton');
+        expect(active.classList.contains('dropin-iconButton--primary')).toEqual(true);
+        //test rending of active state with icon active, no children, active is true, and activeChidlren is available
+        rerender(<Button variant="primary" icon={<div>icon</div>} children="" active={true} activeIcon={<div>icon</div>} activeChildren="test"/>);
+        const active2 = container.querySelector('.dropin-button');
+        expect(active2.classList.contains('dropin-button--primary')).toEqual(true);
+        //test with children, active, and active children
+        rerender(<Button variant="primary" icon={<div>icon</div>} children="test" active={true} activeIcon={<div>icon</div>} activeChildren="test"/>);
+        const active3 = container.querySelector('.dropin-button');
+        expect(active3.classList.contains('dropin-button--primary')).toEqual(true);
+        //test with children, active, and active children with non-string in activeChildren
+        rerender(<Button variant="primary" icon={<div>icon</div>} children="test" active={true} activeIcon={<div>icon</div>} activeChildren={<div>icon</div>}/>);
+        const active4 = container.querySelector('.dropin-button');
+        expect(active4.classList.contains('dropin-button--primary')).toEqual(true);
+        //test with no children, active, and active children
+        rerender(<Button variant="primary" icon={<div>icon</div>} children={undefined} active={true} activeIcon={<div>icon</div>} activeChildren={<div>icon</div>}/>);
+        const active5 = container.querySelector('.dropin-button');
+        expect(active5.classList.contains('dropin-button--primary')).toEqual(true);
+    });
+});

package/components/Button/index.d.ts

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

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

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

package/components/Button/index.js

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

package/components/Card/Card.d.ts

@@ -0,0 +1,9 @@
+import { ComponentChildren, FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/Card/Card.css';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'primary' | 'secondary';
+    children: ComponentChildren | ComponentChildren[];
+}
+export declare const Card: FunctionComponent<CardProps>;
+//# sourceMappingURL=Card.d.ts.map

package/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,uCAAuC,CAAC;AAE/C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,QAAQ,EAAE,iBAAiB,GAAG,iBAAiB,EAAE,CAAC;CACnD;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAc7C,CAAC"}

package/components/Card/Card.jsx

@@ -0,0 +1,7 @@
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/Card/Card.css';
+export const Card = ({ variant = 'primary', className, children, ...props }) => {
+    return (<div {...props} className={classes(['dropin-card', `dropin-card--${variant}`, className])}>
+      <div class="dropin-card__content">{children}</div>
+    </div>);
+};

package/components/Card/Card.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { CardProps } from '@adobe/elsie/components/Card';
+/**
+ * Use Cards to group content into a single container.
+ */
+declare const meta: Meta<CardProps>;
+export default meta;
+type Story = StoryObj<CardProps>;
+/**
+ * ```ts
+ * import { Card } from '@adobe/elsie/components/Card';
+ * ```
+ */
+export declare const Primary: Story;
+export declare const Secondary: Story;
+//# sourceMappingURL=Card.stories.d.ts.map

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

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

package/components/Card/Card.stories.jsx

@@ -0,0 +1,47 @@
+import { Card } from '@adobe/elsie/components/Card';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+/**
+ * Use Cards to group content into a single container.
+ */
+const meta = {
+    title: 'Components/Card',
+    component: Card,
+    argTypes: {
+        variant: {
+            options: ['primary', 'secondary'],
+            control: { type: 'radio' },
+        },
+    },
+};
+export default meta;
+/**
+ * ```ts
+ * import { Card } from '@adobe/elsie/components/Card';
+ * ```
+ */
+export const Primary = {
+    name: 'Primary Card',
+    args: {
+        variant: 'primary',
+    },
+    render: ({ variant }) => (<Card variant={variant}>
+      <h2 style={{ font: 'var(--type-headline-2-strong-font)' }}>Title</h2>
+      <p style={{ font: 'var(--type-body-2-default-font)' }}>
+        This is a short description of the item and should be kept to two or
+        three lines as maximum.
+      </p>
+    </Card>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(await canvas.getByText('Title')).toBeVisible();
+        await expect(await canvas.getByText('This is a short description of the item and should be kept to two or three lines as maximum.')).toBeVisible();
+    },
+};
+export const Secondary = {
+    name: 'Secondary Card',
+    args: {
+        variant: 'secondary',
+    },
+    render: Primary.render,
+};

package/components/Card/Card.test.d.ts

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

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

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

package/components/Card/Card.test.jsx

@@ -0,0 +1,26 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render } from '@adobe/elsie/lib/tests';
+import { Card } from '@adobe/elsie/components/Card';
+describe('Containment/Card', () => {
+    test('it renders', () => {
+        const { container } = render(<Card children="some content"/>);
+        const elem = container.querySelector('.dropin-card');
+        expect(!!elem).toEqual(true);
+    });
+    test('it renders with some extra content', () => {
+        const { container } = render(<Card children={<>
+            <h2>Title</h2>
+            <p>some content</p>
+          </>}/>);
+        const elem = container.querySelector('.dropin-card');
+        expect(!!elem).toEqual(true);
+    });
+    test('it renders correct variants', () => {
+        const { container, rerender } = render(<Card variant="primary" children="some content"/>);
+        const primary = container.querySelector('.dropin-card');
+        expect(primary.classList.contains('dropin-card--primary')).toEqual(true);
+        rerender(<Card variant="secondary" children="some content"/>);
+        const secondary = container.querySelector('.dropin-card');
+        expect(secondary.classList.contains('dropin-card--secondary')).toEqual(true);
+    });
+});

package/components/Card/index.d.ts

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

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

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

package/components/Card/index.js

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