@dropins/tools 0.21.2-alpha3 → 0.22.0-alpha1

package/components/Price/Price.stories.jsx

@@ -1,78 +0,0 @@
-import { Price } from '@adobe/elsie/components/Price';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-/**
- * Use Price components to display the cost of an item or service.
- */
-const meta = {
-    title: 'Components/Price',
-    component: Price,
-    argTypes: {
-        currency: {
-            control: 'select',
-            options: ['USD', 'EUR'],
-        },
-        locale: {
-            control: 'select',
-            options: ['en-US', 'fr-FR'],
-        },
-        variant: {
-            description: 'Font variant',
-            defaultValue: 'default',
-            control: 'select',
-            options: ['default', 'strikethrough'],
-        },
-        size: {
-            control: 'select',
-            options: ['small', 'medium', 'large'],
-        },
-        weight: {
-            description: 'Font weight',
-            defaultValue: 'bold',
-            control: 'select',
-            options: ['bold', 'normal'],
-        },
-        formatOptions: {
-            control: { type: 'object' },
-            defaultValue: {
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 2,
-            },
-        },
-    },
-};
-export default meta;
-/**
- * ```ts
- * import { Price } from '@adobe/elsie/components/Price';
- * ```
- */
-export const Primary = {
-    args: {
-        amount: 9.99,
-        sale: false,
-        size: 'small',
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        await expect(await canvas.findByText('$9.99')).toBeVisible();
-    },
-};
-export const SpecialDefault = {
-    args: {
-        size: 'small',
-    },
-    render: (args) => (<div style="display: flex; flex-wrap:wrap; gap: 5px">
-      <Price {...args} amount={59.99} variant={'strikethrough'}/>
-      <Price {...args} amount={55.99} variant={'default'}/>
-    </div>),
-};
-export const HighContrast = {
-    args: {
-        size: 'small',
-    },
-    render: (args) => (<div style="display: flex; flex-wrap:wrap; gap: 5px">
-      <Price {...args} amount={59.99} variant={'strikethrough'}/>
-      <Price {...args} amount={55.99} variant={'default'} sale/>
-    </div>),
-};

package/components/Price/Price.test.d.ts

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

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

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

package/components/Price/Price.test.jsx

@@ -1,68 +0,0 @@
-/** https://preactjs.com/guide/v10/preact-testing-library/ */
-import { render } from '@adobe/elsie/lib/tests';
-import { Price } from '@adobe/elsie/components/Price';
-describe('Patterns/Price', () => {
-    test('renders', () => {
-        const { container } = render(<Price />);
-        const elem = container.querySelector('.dropin-price');
-        expect(!!elem).toEqual(true);
-    });
-    test('renders the correct shape', () => {
-        const { container } = render(<Price amount={9.99}/>);
-        const elem = container.querySelector('.dropin-price');
-        expect(elem).toMatchSnapshot();
-    });
-    test('renders the price with strikethrough', () => {
-        const { container } = render(<Price amount={9.99} variant="strikethrough"/>);
-        const elem = container.querySelector('.dropin-price--strikethrough');
-        expect(elem).not.toBeNull();
-    });
-    test('renders the price with sale', () => {
-        const { container, rerender } = render(<Price amount={9.99} sale={false}/>);
-        const notSaleElem = container.querySelector('.dropin-price--sale');
-        expect(notSaleElem).toBeNull();
-        rerender(<Price amount={9.99} sale={true}/>);
-        const saleElem = container.querySelector('.dropin-price--sale');
-        expect(saleElem).not.toBeNull();
-    });
-    test('renders the price with normal weight', () => {
-        const { container, rerender } = render(<Price amount={9.99} weight="normal"/>);
-        const normalElem = container.querySelector('.dropin-price--normal');
-        expect(normalElem).not.toBeNull();
-        rerender(<Price amount={9.99}/>);
-        const boldElem = container.querySelector('.dropin-price--bold');
-        expect(boldElem).not.toBeNull();
-    });
-    test('renders the price with currency', () => {
-        const { container, rerender } = render(<Price amount={9.99} currency="USD"/>);
-        const usdElem = container.querySelector('.dropin-price');
-        expect(usdElem?.innerHTML).toContain('$');
-        rerender(<Price amount={9.99} currency="EUR"/>);
-        const eurElem = container.querySelector('.dropin-price');
-        expect(eurElem?.innerHTML).toContain('€');
-    });
-    test('renders the price with locale and format options', () => {
-        const { container, rerender } = render(<Price amount={9.9555} currency="USD" locale="en-US" formatOptions={{ minimumFractionDigits: 3, maximumFractionDigits: 3 }}/>);
-        const usdElem = container.querySelector('.dropin-price');
-        expect(usdElem?.textContent).toBe('$9.956');
-        rerender(<Price amount={9.9555} currency="USD" locale="fr-FR" formatOptions={{ minimumFractionDigits: 2, maximumFractionDigits: 2 }}/>);
-        const eurElem = container.querySelector('.dropin-price');
-        expect(eurElem?.innerHTML).toContain('9,96&nbsp;$US');
-    });
-    test('renders the price with falsy currency', () => {
-        const { container } = render(<Price amount={9.99} currency=""/>);
-        const elem = container.querySelector('.dropin-price');
-        expect(elem?.innerHTML).toContain('$9.99');
-    });
-    test('renders the price with null currency', () => {
-        //@ts-ignore
-        const { container } = render(<Price amount={9.99} currency={null}/>);
-        const elem = container.querySelector('.dropin-price');
-        expect(elem?.innerHTML).toContain('$9.99');
-    });
-    test('renders the price with undefined currency', () => {
-        const { container } = render(<Price amount={9.99} currency={undefined}/>);
-        const elem = container.querySelector('.dropin-price');
-        expect(elem?.innerHTML).toContain('$9.99');
-    });
-});

package/components/Price/index.d.ts

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

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

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

package/components/Price/index.js

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

package/components/PriceRange/PriceRange.d.ts

@@ -1,17 +0,0 @@
-import { FunctionComponent } from 'preact';
-import { HTMLAttributes } from 'preact/compat';
-import '@adobe/elsie/components/PriceRange/PriceRange.css';
-export interface PriceRangeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
-    locale?: string;
-    currency?: string;
-    amount?: number;
-    variant?: 'default' | 'strikethrough';
-    minimumAmount?: number;
-    maximumAmount?: number;
-    display?: 'dash' | 'from to' | 'as low as';
-    size?: 'small' | 'medium' | 'large';
-    specialPrice?: number;
-    sale?: boolean;
-}
-export declare const PriceRange: FunctionComponent<PriceRangeProps>;
-//# sourceMappingURL=PriceRange.d.ts.map

package/components/PriceRange/PriceRange.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PriceRange.d.ts","sourceRoot":"","sources":["../../../src/components/PriceRange/PriceRange.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAW,MAAM,eAAe,CAAC;AAExD,OAAO,mDAAmD,CAAC;AAI3D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,eAAe,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA+EzD,CAAC"}

package/components/PriceRange/PriceRange.jsx

@@ -1,75 +0,0 @@
-import { useMemo } from 'preact/compat';
-import { classes } from '@adobe/elsie/lib';
-import '@adobe/elsie/components/PriceRange/PriceRange.css';
-import { Price } from '@adobe/elsie/components/Price';
-import { useText } from '@adobe/elsie/i18n';
-export const PriceRange = ({ className, children, locale, currency, amount, variant = 'default', minimumAmount, maximumAmount, size = 'small', display = 'dash', specialPrice, sale = false, ...props }) => {
-    const isSimpleProduct = useMemo(() => amount ||
-        minimumAmount === maximumAmount ||
-        (minimumAmount && !maximumAmount) ||
-        (maximumAmount && !minimumAmount), [amount, maximumAmount, minimumAmount]);
-    return (<div>
-      {/* Simple product price or when configurable product minimum price equals to maximum price */}
-      {isSimpleProduct ? (<div {...props} className={classes(['dropin-price-range', className])}>
-          <Price amount={amount ?? minimumAmount ?? maximumAmount} currency={currency} locale={locale} size={size} variant={variant} sale={sale}/>
-        </div>) : (<div {...props} className={classes(['dropin-price-range', className])}>
-          {display === 'dash' ? (<Dashed specialPrice={specialPrice} minimumAmount={minimumAmount} maximumAmount={maximumAmount} currency={currency} locale={locale} size={size} sale={sale}/>) : null}
-
-          {display === 'from to' ? (<FromTo specialPrice={specialPrice} minimumAmount={minimumAmount} maximumAmount={maximumAmount} currency={currency} locale={locale} size={size} sale={sale}/>) : null}
-
-          {display === 'as low as' ? (<SpecialPrice specialPrice={specialPrice} minimumAmount={minimumAmount} maximumAmount={maximumAmount} currency={currency} locale={locale} size={size} sale={sale}/>) : null}
-        </div>)}
-    </div>);
-};
-// Variations
-function Dashed({ specialPrice, minimumAmount, maximumAmount, currency, locale, size, sale, }) {
-    return (<>
-      <Price amount={specialPrice ?? minimumAmount} currency={currency} locale={locale} size={size} sale={!!specialPrice && sale}/>
-      <span className="dropin-price-range__separator">-</span>
-      <Price amount={maximumAmount} currency={currency} locale={locale} size={size}/>
-    </>);
-}
-function FromTo({ specialPrice, minimumAmount, maximumAmount, currency, locale, size, sale, }) {
-    // Translations
-    const translations = useText({
-        from: 'Dropin.PriceRange.from.label',
-        to: 'Dropin.PriceRange.to.label',
-        asLowAs: 'Dropin.PriceRange.asLowAs.label',
-    });
-    return (<>
-      <span className={classes([
-            'dropin-price-range__from',
-            `dropin-price-range__from--${size}`,
-        ])}>
-        {translations.from}
-      </span>
-      <Price amount={specialPrice ?? minimumAmount} currency={currency} locale={locale} size={size} sale={!!specialPrice && sale}/>
-      <span className={classes([
-            'dropin-price-range__to',
-            `dropin-price-range__to--${size}`,
-        ])}>
-        {translations.to}
-      </span>
-      <Price amount={maximumAmount} currency={currency} locale={locale} size={size}/>
-    </>);
-}
-function SpecialPrice({ specialPrice, minimumAmount, maximumAmount, currency, locale, size, sale, }) {
-    // Translations
-    const translations = useText({
-        from: 'Dropin.PriceRange.from.label',
-        to: 'Dropin.PriceRange.to.label',
-        asLowAs: 'Dropin.PriceRange.asLowAs.label',
-    });
-    return (<>
-      <span className={classes([
-            'dropin-price-range__as-low-as',
-            `dropin-price-range__as-low-as--${size}`,
-        ])}>
-        {translations.asLowAs}
-      </span>
-      {specialPrice ? (<div>
-          <Price amount={maximumAmount} currency={currency} locale={locale} size={size} variant="strikethrough"/>
-          <Price amount={specialPrice} currency={currency} locale={locale} size={size} className="dropin-price-range__special" sale={!!specialPrice && sale}/>
-        </div>) : (<Price amount={minimumAmount} currency={currency} locale={locale} size={size}/>)}
-    </>);
-}

package/components/PriceRange/PriceRange.stories.d.ts

@@ -1,107 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/preact';
-import { PriceRangeProps } from '@adobe/elsie/components/PriceRange';
-/**
- * Use PriceRanges to display price range.
- *
- * Import the component like this:
- *
- * ```tsx
- * import { PriceRange } from '@adobe/elsie/components/PriceRange';
- * ```
- *
- */
-declare const meta: Meta<PriceRangeProps>;
-export default meta;
-type Story = StoryObj<PriceRangeProps>;
-/**
- * Use the component like this to get a price for a simple product:
- *
- * ```tsx
- * <PriceRange
- *    currency: 'USD',
- *    amount: 36.0,
- *    size: 'small',
- *    variant: 'default',
- *    sale: false,
- * />
- * ```
- */
-export declare const SimplePrice: Story;
-/**
- * Use the component like this to get a simple PriceRange:
- *
- * ```tsx
- * <PriceRange
- *    currency: 'USD',
- *    minimumAmount: 56.0,
- *    maximumAmount: 58.0,
- *    size: 'small',
- *    display: 'dash',
- *    sale: false,
- * />
- * ```
- */
-export declare const PriceRangeDash: Story;
-/**
- * Use the component like this to get a from / to PriceRange:
- *
- * ```tsx
- * <PriceRange
- *    currency: 'USD',
- *    minimumAmount: 56.0,
- *    maximumAmount: 58.0,
- *    size: 'small',
- *    display: 'from to',
- *    sale: false,
- * />
- * ```
- */
-export declare const PriceRangeFromTo: Story;
-/**
- * Use the component like this to get a as low as PriceRange:
- *
- * ```tsx
- * <PriceRange
- *    currency: 'USD',
- *    minimumAmount: 56.0,
- *    maximumAmount: 58.0,
- *    size: 'small',
- *    display: 'as low as',
- *    sale: false,
- * />
- * ```
- */
-export declare const PriceRangeAsLowAs: Story;
-/**
- * Use the component like this to get a simple PriceRange with special price:
- *
- * ```tsx
- * <PriceRange
- *    currency: 'USD',
- *    minimumAmount: 56.0,
- *    maximumAmount: 58.0,
- *    size: 'small',
- *    display: 'dash',
- *    sale: false,
- *    specialPrice: 9.99,
- * />
- * ```
- */
-export declare const PriceRangeSpecialPrice: Story;
-/**
- * Use the component like this to get a simple PriceRange with high contrast special price:
- *
- * ```tsx
- * <PriceRange
- *    currency: 'USD',
- *    minimumAmount: 56.0,
- *    maximumAmount: 58.0,
- *    size: 'small',
- *    display: 'dash',
- *    sale: true,
- *    specialPrice: 9.99,
- * />
- * ```
- */
-export declare const PriceRangeSpecialPriceContrast: Story;
-//# sourceMappingURL=PriceRange.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"PriceRange.stories.d.ts","sourceRoot":"","sources":["../../../src/components/PriceRange/PriceRange.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAEL,eAAe,EAChB,MAAM,oCAAoC,CAAC;AAE5C;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CAoD/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEvC;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc,EAAE,KAS5B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AAEH,eAAO,MAAM,sBAAsB,EAAE,KAUpC,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AAEH,eAAO,MAAM,8BAA8B,EAAE,KAU5C,CAAC"}

package/components/PriceRange/PriceRange.stories.jsx

@@ -1,210 +0,0 @@
-import { PriceRange as component, } from '@adobe/elsie/components/PriceRange';
-/**
- * Use PriceRanges to display price range.
- *
- * Import the component like this:
- *
- * ```tsx
- * import { PriceRange } from '@adobe/elsie/components/PriceRange';
- * ```
- *
- */
-const meta = {
-    title: 'Components/PriceRange',
-    component,
-    argTypes: {
-        currency: {
-            description: 'Currency of price',
-            control: 'select',
-            options: ['USD', 'EUR'],
-        },
-        locale: {
-            description: 'Locale of price',
-            control: 'select',
-            options: ['en-US', 'fr-FR'],
-        },
-        amount: {
-            description: 'Price of a simple product',
-            control: 'number',
-        },
-        variant: {
-            description: 'Price display variant',
-            control: 'select',
-            options: ['default', 'strikethrough'],
-        },
-        minimumAmount: {
-            description: 'Minimum price of a product price range',
-            control: 'number',
-        },
-        maximumAmount: {
-            description: 'Maximum price of a product price range',
-            control: 'number',
-        },
-        size: {
-            description: 'Size of price',
-            control: 'select',
-            options: ['small', 'medium', 'large'],
-        },
-        display: {
-            description: 'Price range display option',
-            control: 'select',
-            options: ['dash', 'from to', 'as low as'],
-        },
-        specialPrice: {
-            description: 'Special price of a product',
-            control: 'select',
-            options: [undefined, 9.99],
-        },
-        sale: {
-            description: 'Whether or not to display contrast color for special sale price',
-            control: 'boolean',
-        },
-    },
-};
-export default meta;
-/**
- * Use the component like this to get a price for a simple product:
- *
- * ```tsx
- * <PriceRange
- *    currency: 'USD',
- *    amount: 36.0,
- *    size: 'small',
- *    variant: 'default',
- *    sale: false,
- * />
- * ```
- */
-export const SimplePrice = {
-    args: {
-        currency: 'USD',
-        amount: 36.0,
-        size: 'small',
-        variant: 'default',
-        sale: false,
-    },
-};
-/**
- * Use the component like this to get a simple PriceRange:
- *
- * ```tsx
- * <PriceRange
- *    currency: 'USD',
- *    minimumAmount: 56.0,
- *    maximumAmount: 58.0,
- *    size: 'small',
- *    display: 'dash',
- *    sale: false,
- * />
- * ```
- */
-export const PriceRangeDash = {
-    args: {
-        currency: 'USD',
-        minimumAmount: 56.0,
-        maximumAmount: 58.0,
-        size: 'small',
-        display: 'dash',
-        sale: false,
-    },
-};
-/**
- * Use the component like this to get a from / to PriceRange:
- *
- * ```tsx
- * <PriceRange
- *    currency: 'USD',
- *    minimumAmount: 56.0,
- *    maximumAmount: 58.0,
- *    size: 'small',
- *    display: 'from to',
- *    sale: false,
- * />
- * ```
- */
-export const PriceRangeFromTo = {
-    args: {
-        currency: 'USD',
-        minimumAmount: 56.0,
-        maximumAmount: 58.0,
-        size: 'small',
-        display: 'from to',
-        sale: false,
-    },
-};
-/**
- * Use the component like this to get a as low as PriceRange:
- *
- * ```tsx
- * <PriceRange
- *    currency: 'USD',
- *    minimumAmount: 56.0,
- *    maximumAmount: 58.0,
- *    size: 'small',
- *    display: 'as low as',
- *    sale: false,
- * />
- * ```
- */
-export const PriceRangeAsLowAs = {
-    args: {
-        currency: 'USD',
-        minimumAmount: 56.0,
-        maximumAmount: 58.0,
-        size: 'small',
-        display: 'as low as',
-        sale: false,
-    },
-};
-/**
- * Use the component like this to get a simple PriceRange with special price:
- *
- * ```tsx
- * <PriceRange
- *    currency: 'USD',
- *    minimumAmount: 56.0,
- *    maximumAmount: 58.0,
- *    size: 'small',
- *    display: 'dash',
- *    sale: false,
- *    specialPrice: 9.99,
- * />
- * ```
- */
-export const PriceRangeSpecialPrice = {
-    args: {
-        currency: 'USD',
-        minimumAmount: 56.0,
-        maximumAmount: 58.0,
-        size: 'small',
-        display: 'dash',
-        sale: false,
-        specialPrice: 9.99,
-    },
-};
-/**
- * Use the component like this to get a simple PriceRange with high contrast special price:
- *
- * ```tsx
- * <PriceRange
- *    currency: 'USD',
- *    minimumAmount: 56.0,
- *    maximumAmount: 58.0,
- *    size: 'small',
- *    display: 'dash',
- *    sale: true,
- *    specialPrice: 9.99,
- * />
- * ```
- */
-export const PriceRangeSpecialPriceContrast = {
-    args: {
-        currency: 'USD',
-        minimumAmount: 56.0,
-        maximumAmount: 58.0,
-        size: 'small',
-        display: 'dash',
-        sale: true,
-        specialPrice: 9.99,
-    },
-};

package/components/PriceRange/PriceRange.test.d.ts

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

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

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