@dropins/tools 0.21.1-beta1 → 0.21.2-alpha1

package/components/AlertBanner/AlertBanner.test.jsx

@@ -0,0 +1,40 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render } from '@adobe/elsie/lib/tests';
+import { AlertBanner } from '@adobe/elsie/components/AlertBanner';
+import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
+jest.mock('@adobe/elsie/icons', () => ({
+    WarningFilled: jest.fn(({ className }) => (<svg className={className} id="WarningFilled"/>)),
+}));
+describe('Base/Components/AlertBanner', () => {
+    test('renders', () => {
+        const { container } = render(<AlertBanner variant={'warning'} 
+        //@ts-ignore
+        icon={IconsList.WarningFilled} message={<span>This is a warning message</span>} onDismiss={() => { }}/>);
+        expect(!!container).toEqual(true);
+        expect(container).toMatchSnapshot();
+        const element = container.querySelector('.dropin-alert-banner');
+        expect(element).not.toBeNull();
+        const icon = container.querySelector('.dropin-alert-banner__icon');
+        expect(icon).not.toBeNull();
+    });
+    test('renders without icon', () => {
+        const { container } = render(<AlertBanner variant={'warning'} message={<span>This is a warning message</span>} onDismiss={() => { }}/>);
+        expect(!!container).toEqual(true);
+        expect(container).toMatchSnapshot();
+        const icon = container.querySelector('.dropin-alert-banner__icon');
+        expect(icon).toBeNull();
+    });
+    test('renders with action', () => {
+        const { container } = render(<AlertBanner variant={'warning'} 
+        //@ts-ignore
+        icon={IconsList.WarningFilled} message={<span>This is a warning message</span>} onDismiss={() => { }} action={{
+                label: 'Action',
+                onClick: () => { },
+            }}/>);
+        expect(!!container).toEqual(true);
+        expect(container).toMatchSnapshot();
+        const action = container.querySelector('.dropin-alert-banner__action');
+        expect(action).not.toBeNull();
+        expect(action?.textContent).toEqual('Action');
+    });
+});

package/components/AlertBanner/index.d.ts

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

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

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

package/components/AlertBanner/index.js

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

package/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'preact/compat';
+import { FunctionComponent, VNode } from 'preact';
+import '@adobe/elsie/components/Breadcrumbs/Breadcrumbs.css';
+export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+    categories: VNode[];
+    separator?: VNode<HTMLAttributes<SVGSVGElement>>;
+}
+export declare const Breadcrumbs: FunctionComponent<BreadcrumbsProps>;
+//# sourceMappingURL=Breadcrumbs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAElD,OAAO,qDAAqD,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACnE,UAAU,EAAE,KAAK,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAmD3D,CAAC"}

package/components/Breadcrumbs/Breadcrumbs.jsx

@@ -0,0 +1,26 @@
+import { VComponent, classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/Breadcrumbs/Breadcrumbs.css';
+export const Breadcrumbs = ({ className, categories, separator, ...props }) => {
+    return (<>
+      {categories?.length > 1 && (<nav role="navigation" {...props} className={classes(['dropin-breadcrumbs__container', className])}>
+          <ul className="dropin-breadcrumbs__items">
+            {categories?.map((category, index) => {
+                return (<li key={index} className={classes([
+                        'dropin-breadcrumbs__item',
+                        [
+                            'dropin-breadcrumbs__item--last',
+                            index === categories.length - 1,
+                        ],
+                    ])}>
+                  <VComponent node={category} className="dropin-breadcrumbs__link"/>
+                  {!separator && index !== categories.length - 1 && (<span className="dropin-breadcrumbs__separator--default">
+                      {' '}
+                      /{' '}
+                    </span>)}
+                  {separator && index !== categories.length - 1 && (<VComponent node={separator} className="dropin-breadcrumbs__separator--icon"/>)}
+                </li>);
+            })}
+          </ul>
+        </nav>)}
+    </>);
+};

package/components/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { BreadcrumbsProps } from '@adobe/elsie/components/Breadcrumbs';
+declare const meta: Meta<BreadcrumbsProps>;
+export default meta;
+type Story = StoryObj<BreadcrumbsProps>;
+/**
+ * ```ts
+ * import { Breadcrumbs } from '@adobe/elsie/components/Breadcrumbs';
+ * ```
+ */
+export declare const Breadcrumbs: Story;
+export declare const BreadcrumbsWithLeadingIcon: Story;
+export declare const BreadcrumbsWithSeparator: Story;
+export declare const BreadcrumbsWithIcons: Story;
+//# sourceMappingURL=Breadcrumbs.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAEL,gBAAgB,EACjB,MAAM,qCAAqC,CAAC;AAM7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAqBhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAExC;;;;GAIG;AAEH,eAAO,MAAM,WAAW,EAAE,KAwBzB,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAoCxC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KA0BtC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAiDlC,CAAC"}

package/components/Breadcrumbs/Breadcrumbs.stories.jsx

@@ -0,0 +1,110 @@
+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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,67 @@
+/** 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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"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

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

package/components/Button/Button.d.ts

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,135 @@
+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

@@ -0,0 +1 @@
+{"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"}