@dropins/tools 0.21.1 → 0.21.2-alpha1

package/components/Price/Price.stories.jsx

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

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

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

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

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

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

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

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

package/components/Price/index.js

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

package/components/PriceRange/PriceRange.d.ts

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

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

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

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

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

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

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

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

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