@dropins/tools 0.21.2-alpha3 → 0.21.2-alpha389

package/components/Breadcrumbs/Breadcrumbs.stories.jsx

@@ -1,110 +0,0 @@
-import { Breadcrumbs as component, } from '@adobe/elsie/components/Breadcrumbs';
-import { Icon } from '@adobe/elsie/components/Icon';
-import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
-import { ChevronRight, Placeholder } from '@adobe/elsie/icons';
-import { expect } from '@storybook/jest';
-const meta = {
-    title: 'Components/Breadcrumbs',
-    component,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'centered', // centered | fullscreen
-    },
-    argTypes: {
-        categories: {
-            description: 'List of categories to display on the Breadcrumbs.',
-            type: { name: 'object', value: {} },
-            control: 'array',
-        },
-        separator: {
-            description: 'Icon used to separate the Breadcrumbs items.',
-            type: { name: 'symbol' },
-            options: Object.keys(IconsList),
-            mapping: IconsList,
-            control: 'select',
-        },
-    },
-};
-export default meta;
-/**
- * ```ts
- * import { Breadcrumbs } from '@adobe/elsie/components/Breadcrumbs';
- * ```
- */
-export const Breadcrumbs = {
-    args: {
-        categories: [
-            <a href="#" key="1">
-        One
-      </a>,
-            <a href="/two" key="2">
-        Two
-      </a>,
-            <a key="3">Three</a>,
-        ],
-    },
-    play: async () => {
-        const breadcrumbsElement = document.querySelector('.dropin-breadcrumbs__container');
-        const categories = breadcrumbsElement.querySelectorAll('.dropin-breadcrumbs__item a');
-        await expect(breadcrumbsElement).toBeVisible();
-        await expect(categories[0]).toHaveTextContent('One');
-        await expect(categories[1]).toHaveAttribute('href', '/two');
-    },
-};
-export const BreadcrumbsWithLeadingIcon = {
-    args: {
-        categories: [
-            <Icon key={0} source={Placeholder} size="16" className="storybook_icon" stroke="1" viewBox="0 0 24 24" aria-label="One" style={{ cursor: 'pointer' }} onClick={() => console.log('Go to Homepage')}/>,
-            <a href="/two" key="2">
-        Two
-      </a>,
-            <a key="3">Three</a>,
-        ],
-    },
-    play: async () => {
-        const breadcrumbsElement = document.querySelector('.dropin-breadcrumbs__container');
-        const icon = breadcrumbsElement.querySelector('.dropin-breadcrumbs__item svg');
-        const categories = breadcrumbsElement.querySelectorAll('.dropin-breadcrumbs__item a');
-        await expect(breadcrumbsElement).toBeVisible();
-        await expect(icon).toBeVisible();
-        await expect(categories[0]).toHaveAttribute('href', '/two');
-        await expect(categories[1]).toHaveTextContent('Three');
-    },
-};
-export const BreadcrumbsWithSeparator = {
-    args: {
-        ...Breadcrumbs.args,
-        separator: (<Icon source={ChevronRight} size="16" className="storybook_icon" stroke="1" viewBox="0 0 24 24"/>),
-    },
-    play: async () => {
-        const breadcrumbsElement = document.querySelector('.dropin-breadcrumbs__container');
-        const separators = breadcrumbsElement.querySelectorAll('.dropin-breadcrumbs__separator--icon');
-        await expect(breadcrumbsElement).toBeVisible();
-        await expect(separators).toHaveLength(2);
-        await expect(separators[0]).toBeVisible();
-        await expect(separators[1]).toBeVisible();
-    },
-};
-export const BreadcrumbsWithIcons = {
-    args: {
-        categories: [
-            <Icon key={0} source={Placeholder} size="16" className="storybook_icon" stroke="1" viewBox="0 0 24 24" aria-label="One" style={{ cursor: 'pointer' }} onClick={() => console.log('Go to Homepage')}/>,
-            <a href="/two" key="2">
-        Two
-      </a>,
-            <a key="3">Three</a>,
-        ],
-        separator: (<Icon source={ChevronRight} size="16" className="storybook_icon" stroke="1" viewBox="0 0 24 24"/>),
-    },
-    play: async () => {
-        const breadcrumbsElement = document.querySelector('.dropin-breadcrumbs__container');
-        const icon = breadcrumbsElement.querySelector('.dropin-breadcrumbs__item svg');
-        const categories = breadcrumbsElement.querySelectorAll('.dropin-breadcrumbs__item a');
-        const separators = breadcrumbsElement.querySelectorAll('.dropin-breadcrumbs__separator--icon');
-        await expect(breadcrumbsElement).toBeVisible();
-        await expect(icon).toBeVisible();
-        await expect(categories[0]).toHaveAttribute('href', '/two');
-        await expect(separators).toHaveLength(2);
-        await expect(separators[1]).toBeVisible();
-    },
-};

package/components/Breadcrumbs/Breadcrumbs.test.d.ts

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

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

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

package/components/Breadcrumbs/Breadcrumbs.test.jsx

@@ -1,67 +0,0 @@
-/** https://preactjs.com/guide/v10/preact-testing-library/ */
-import { render } from '@adobe/elsie/lib/tests';
-import { Breadcrumbs } from '@adobe/elsie/components/Breadcrumbs';
-const MOCK_CATEGORIES = [
-    <a href="/" key="1">
-    One
-  </a>,
-    <a href="/two" key="2">
-    Two
-  </a>,
-    <a key="3">Three</a>,
-];
-describe('Base/Components/Breadcrumbs', () => {
-    test('renders', () => {
-        const { container } = render(<Breadcrumbs categories={MOCK_CATEGORIES}/>);
-        expect(!!container).toEqual(true);
-    });
-    test('should not render when no categories', () => {
-        const { container } = render(<Breadcrumbs categories={[]}/>);
-        const elem = container.querySelector('.dropin-breadcrumbs__container');
-        expect(elem).toBeNull();
-    });
-    test('renders with custom separator', () => {
-        const { container } = render(<Breadcrumbs categories={MOCK_CATEGORIES} separator={<div>separator</div>}/>);
-        const elem = container.querySelector('.dropin-breadcrumbs__separator--icon');
-        expect(elem.classList.contains('dropin-breadcrumbs__separator--icon')).toEqual(true);
-    });
-    test('renders with default separator', () => {
-        const { container } = render(<Breadcrumbs categories={MOCK_CATEGORIES}/>);
-        const elem1 = container.querySelector('.dropin-breadcrumbs__separator--default');
-        expect(elem1.classList.contains('dropin-breadcrumbs__separator--default')).toEqual(true);
-    });
-    test('renders with leading icon and default separator', () => {
-        const { container } = render(<Breadcrumbs categories={[
-                <a href="/" key="1">
-            <div class="leading-icon">icon</div>
-          </a>,
-                <a href="/two" key="2">
-            Two
-          </a>,
-                <a key="3">Three</a>,
-            ]}/>);
-        const elem1 = container.querySelector('.dropin-breadcrumbs__separator--default');
-        const elem2 = container.querySelector('.dropin-breadcrumbs__separator--icon');
-        const elem3 = container.querySelector('.leading-icon');
-        expect(elem1.classList.contains('dropin-breadcrumbs__separator--default')).toEqual(true);
-        expect(elem2).toBeNull();
-        expect(elem3).not.toBeNull();
-    });
-    test('renders with leading icon and custom separator', () => {
-        const { container } = render(<Breadcrumbs categories={[
-                <a href="/" key="1">
-            <div class="leading-icon">icon</div>
-          </a>,
-                <a href="/two" key="2">
-            Two
-          </a>,
-                <a key="3">Three</a>,
-            ]} separator={<div>separator</div>}/>);
-        const elem1 = container.querySelector('.dropin-breadcrumbs__separator--default');
-        const elem2 = container.querySelector('.dropin-breadcrumbs__separator--icon');
-        const elem3 = container.querySelector('.leading-icon');
-        expect(elem1).toBeNull();
-        expect(elem2.classList.contains('dropin-breadcrumbs__separator--icon')).toEqual(true);
-        expect(elem3).not.toBeNull();
-    });
-});

package/components/Breadcrumbs/index.d.ts

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

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

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

package/components/Breadcrumbs/index.js

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

package/components/Button/Button.d.ts

@@ -1,15 +0,0 @@
-import { ComponentChildren, FunctionComponent, VNode } from 'preact';
-import { HTMLAttributes } from 'preact/compat';
-import '@adobe/elsie/components/Button/Button.css';
-export interface ButtonProps extends Omit<HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, 'size' | 'icon'> {
-    variant?: 'primary' | 'secondary' | 'tertiary';
-    size?: 'medium' | 'large';
-    children?: ComponentChildren;
-    icon?: VNode<HTMLAttributes<SVGSVGElement>>;
-    disabled?: boolean;
-    active?: boolean;
-    activeChildren?: ComponentChildren;
-    activeIcon?: VNode<HTMLAttributes<SVGSVGElement>>;
-}
-export declare const Button: FunctionComponent<ButtonProps>;
-//# sourceMappingURL=Button.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,2CAA2C,CAAC;AAEnD,MAAM,WAAW,WACf,SAAQ,IAAI,CACV,cAAc,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,EACrD,MAAM,GAAG,MAAM,CAChB;IACD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAqFjD,CAAC"}

package/components/Button/Button.jsx

@@ -1,59 +0,0 @@
-import { VComponent, classes } from '@adobe/elsie/lib';
-import '@adobe/elsie/components/Button/Button.css';
-export const Button = ({ value, variant = 'primary', size = 'medium', icon, className, children, disabled = false, active = false, activeChildren, activeIcon, href, ...props }) => {
-    let buttonType = 'dropin-button';
-    if ((icon && !children) ||
-        (icon && active && !activeChildren) ||
-        (!icon && active && activeIcon)) {
-        buttonType = 'dropin-iconButton';
-    }
-    if (active && activeChildren) {
-        buttonType = 'dropin-button';
-    }
-    className = classes([
-        buttonType,
-        `${buttonType}--${size}`,
-        `${buttonType}--${variant}`,
-        [`${buttonType}--${variant}--disabled`, disabled],
-        children && icon && `${buttonType}--with-icon`,
-        !children && activeChildren && icon && `${buttonType}--with-icon`,
-        active && activeIcon && `${buttonType}--with-icon`,
-        className,
-    ]);
-    const iconClassName = classes([
-        'dropin-button-icon',
-        `dropin-button-icon--${variant}`,
-        [`dropin-button-icon--${variant}--disabled`, disabled],
-        icon?.props.className,
-    ]);
-    const attributes = href
-        ? {
-            node: <a />,
-            role: 'link',
-            href,
-            ...props,
-            disabled,
-            active,
-        }
-        : {
-            node: <button />,
-            role: 'button',
-            ...props,
-            value,
-            disabled,
-            active,
-        };
-    return (<VComponent {...attributes} className={className}>
-      {icon && !active && <VComponent node={icon} className={iconClassName}/>}
-
-      {activeIcon && active && (<VComponent node={activeIcon} className={iconClassName}/>)}
-
-      {children &&
-            !active &&
-            (typeof children === 'string' ? <span>{children}</span> : children)}
-
-      {active &&
-            activeChildren &&
-            (typeof activeChildren === 'string' ? (<span>{activeChildren}</span>) : (activeChildren))}
-    </VComponent>);
-};

package/components/Button/Button.stories.d.ts

@@ -1,135 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/preact';
-import { ButtonProps } from '@adobe/elsie/components/Button';
-/**
- * Use Buttons to highlight or guide user actions.
- */
-declare const meta: Meta<ButtonProps>;
-export default meta;
-type Story = StoryObj<ButtonProps>;
-/**
- * ```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 declare const Button: Story;
-/**
- * ```tsx
- * <Button>Button</Button>
- * ```
- * ```tsx
- * <Button children="Button" />
- * ```
- */
-export declare const Children: Story;
-/**
- * ```tsx
- * <Button variant="primary">Primary</Button>
- * ```
- */
-export declare const Primary: Story;
-/**
- * ```tsx
- * <Button variant='secondary'>Secondary</Button>
- * ```
- */
-export declare const Secondary: Story;
-/**
- * ```tsx
- * <Button variant='tertiary'>Tertiary</Button>
- * ```
- */
-export declare const Tertiary: Story;
-/**
- * ```tsx
- * <Button size='large'>Large</Button>
- * ```
- */
-export declare const LargeSize: Story;
-/**
- * ```tsx
- * <Button size='medium'>Medium</Button>
- * ```
- */
-export declare const MediumSize: Story;
-/**
- * ```tsx
- * <Button
- *  icon={<Icon
- *    source={Cart}
- *    size="24"
- *    stroke="2"
- *    viewBox="0 0 24 24"
- *    aria-label="Search" />}
- * />
- * ```
- */
-export declare const IconOnly: Story;
-/**
- * ```tsx
- * <Button
- *  icon={<Icon
- *    source={Cart}
- *    size="24"
- *    stroke="2"
- *    viewBox="0 0 24 24"
- *    aria-label="Search" />}
- * >
- *  Search
- * </Button>
- * ```
- */
-export declare const TextAndIcon: Story;
-/**
- * ```tsx
- * <Button disabled>Button</Button>
- * ```
- * ```tsx
- * <Button disabled={true}>Button</Button>
- * ```
- * ```tsx
- * <Button disabled={loop ? false : current < 1}>Button</Button>
- * ```
- */
-export declare const Disabled: Story;
-/**
- * ```tsx
- * <Button
- *  active={true}
- *  activeChildren="Active"
- *  activeIcon={<Icon source={SearchFilled} />}
- *  children="Not Active"
- *  icon={<Icon source={Search} />}
- * />
- * ```
- */
-export declare const Active: Story;
-/**
- * ```tsx
- * <Button
- *  active={false}
- *  activeChildren="Active"
- *  activeIcon={<Icon source={SearchFilled} />}
- *  children="Not Active"
- *  icon={<Icon source={Search} />}
- * />
- * ```
- */
-export declare const NotActive: Story;
-/**
- * ```tsx
- * <Button href="https://google.com">Link</Button>
- * ```
- */
-export declare const AsLink: Story;
-//# sourceMappingURL=Button.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAEL,WAAW,EACZ,MAAM,gCAAgC,CAAC;AAQxC;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CA2F3B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,EAAE,KAcpB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,EAAE,KAoBpB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,MAAM,EAAE,KAapB,CAAC"}