@dropins/tools 0.21.2-alpha2 → 0.21.2-alpha389

package/components/PriceSummary/PriceSummary.stories.jsx

@@ -1,456 +0,0 @@
-import { Button, Input, Picker, Price } from '..';
-import { PriceSummary as component, } from '@adobe/elsie/components/PriceSummary';
-import { action } from '@storybook/addon-actions';
-import { userEvent, within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-/**
- * Use PriceSummary to provide a summary of the total, subtotal, shipping, discounts, and tax amounts.
- *
- * Import the component like this:
- *
- * ```tsx
- * import { PriceSummary } from '@adobe/elsie/componens/PriceSummary';
- * ```
- *
- */
-const meta = {
-    title: 'Components/PriceSummary',
-    component,
-    parameters: {
-        layout: 'fullscreen',
-    },
-    argTypes: {
-        heading: {
-            description: 'Heading for the PriceSummary.',
-            table: {
-                isRequired: true,
-                type: { summary: 'string' },
-            },
-        },
-        loading: {
-            description: 'Show a loading state.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: 'true' },
-            },
-        },
-        total: {
-            description: 'Configuration for total price display.',
-            table: {
-                category: 'total',
-                type: { summary: 'object' },
-            },
-            control: false,
-        },
-        /** @ts-ignore */
-        'total.price': {
-            description: 'Price object for total.',
-            table: {
-                category: 'total',
-                type: { summary: 'object' },
-            },
-        },
-        'total.estimated': {
-            description: 'Whether total is estimated.',
-            table: {
-                category: 'total',
-                type: { summary: 'boolean' },
-            },
-        },
-        'total.priceWithoutTax': {
-            description: 'Price object for total without tax.',
-            table: {
-                category: 'total',
-                type: { summary: 'object' },
-            },
-        },
-        subTotal: {
-            description: 'Configuration for subtotal price display.',
-            table: {
-                category: 'subtotal',
-                type: { summary: 'object' },
-            },
-            control: false,
-        },
-        'subTotal.price': {
-            description: 'Price object for subtotal.',
-            table: {
-                category: 'subtotal',
-                type: { summary: 'object' },
-            },
-        },
-        'subTotal.taxIncluded': {
-            description: 'Whether subtotal includes tax.',
-            table: {
-                category: 'subtotal',
-                type: { summary: 'boolean' },
-            },
-        },
-        shipping: {
-            description: 'Configuration for shipping price display.',
-            table: {
-                category: 'shipping',
-                type: { summary: 'object' },
-            },
-            control: false,
-        },
-        'shipping.price': {
-            description: 'Price object for shipping.',
-            table: {
-                category: 'shipping',
-                type: { summary: 'object' },
-            },
-        },
-        'shipping.estimated': {
-            description: 'Whether shipping is estimated.',
-            table: {
-                category: 'shipping',
-                type: { summary: 'boolean' },
-            },
-        },
-        'shipping.taxIncluded': {
-            description: 'Whether shipping includes tax.',
-            table: {
-                category: 'shipping',
-                type: { summary: 'boolean' },
-            },
-        },
-        'shipping.countryField': {
-            description: 'Country field input for shipping estimation.',
-            table: {
-                category: 'shipping',
-                type: { summary: 'object' },
-            },
-        },
-        'shipping.stateField': {
-            description: 'State field input for shipping estimation.',
-            table: {
-                category: 'shipping',
-                type: { summary: 'object' },
-            },
-        },
-        'shipping.zipField': {
-            description: 'Zip code input for shipping estimation.',
-            table: {
-                category: 'shipping',
-                type: { summary: 'object' },
-            },
-        },
-        'shipping.destinationText': {
-            description: 'Destination text for shipping estimation.',
-            table: {
-                category: 'shipping',
-                type: { summary: 'string' },
-            },
-        },
-        'shipping.onEstimate': {
-            description: 'Function to call when estimating shipping.',
-            table: {
-                category: 'shipping',
-                type: { summary: 'function' },
-            },
-        },
-        'shipping.estimateButton': {
-            description: 'Button to estimate shipping.',
-            table: {
-                category: 'shipping',
-                type: { summary: 'object' },
-            },
-        },
-        taxTotal: {
-            description: 'Total tax object.',
-            table: {
-                type: { summary: 'object' },
-            },
-            control: false,
-        },
-        'taxTotal.price': {
-            description: 'Price object for taxes.',
-            table: {
-                category: 'taxTotal',
-                type: { summary: 'object' },
-            },
-        },
-        'taxTotal.estimated': {
-            description: 'Whether taxTotal is estimated.',
-            table: {
-                category: 'taxTotal',
-                type: { summary: 'boolean' },
-            },
-        },
-        taxesApplied: {
-            description: 'Array of the taxes applied.',
-            table: {
-                category: 'taxes applied',
-                type: { summary: 'array' },
-            },
-            control: false,
-        },
-        'taxsAppliedEntry.label': {
-            description: 'Label for tax applied.',
-            table: {
-                category: 'taxes applied',
-                type: { summary: 'string' },
-            },
-        },
-        'taxesAppliedEntry.price': {
-            description: 'Price object for tax applied.',
-            table: {
-                category: 'taxes applied',
-                type: { summary: 'object' },
-            },
-        },
-        discounts: {
-            description: 'Array of discounts.',
-            table: {
-                category: 'discounts',
-                type: { summary: 'array' },
-            },
-            control: false,
-        },
-        'discountsEntry.label': {
-            description: 'Label for discount.',
-            table: {
-                category: 'discounts',
-                type: { summary: 'string' },
-            },
-        },
-        'discountsEntry.price': {
-            description: 'Price object for discount.',
-            table: {
-                category: 'discounts',
-                type: { summary: 'object' },
-            },
-        },
-        'discountsEntry.caption': {
-            description: 'Caption element for discount.',
-            table: {
-                category: 'discounts',
-                type: { summary: 'object' },
-            },
-        },
-        primaryAction: {
-            description: 'Primary action button.',
-            table: {
-                type: { summary: 'object' },
-            },
-            control: false,
-        },
-    },
-};
-export default meta;
-const defaultProps = {
-    heading: 'Order Summary',
-    loading: false,
-    total: {
-        price: <Price amount={100} currency="USD"/>,
-        priceWithoutTax: <Price amount={90} currency="USD"/>,
-    },
-    subTotal: {
-        price: <Price amount={90} currency="USD"/>,
-        taxIncluded: true,
-    },
-    shipping: {
-        price: <Price amount={10} currency="USD"/>,
-        taxIncluded: true,
-    },
-    taxTotal: {
-        price: <Price amount={10} currency="USD"/>,
-    },
-    taxesApplied: [
-        {
-            label: 'VAT standard',
-            price: <Price amount={5} currency="USD"/>,
-        },
-        {
-            label: 'VAT reduced',
-            price: <Price amount={5} currency="USD"/>,
-        },
-    ],
-};
-/**
- * Use the component like this to get a Checkout variation of the PriceSummary:
- *
- * ```tsx
- * <PriceSummary
- *    heading='Order Summary'
- *    loading={false}
- *    total={{
- *      price: <Price amount={100} currency="USD" />
- *      priceWithoutTax: <Price amount={90} currency="USD" />,
- *    }}
- *    subTotal={
- *      price: <Price amount={90} currency="USD" />,
- *      taxIncluded: true,
- *    }
- *    shipping={{
- *      price: <Price amount={10} currency="USD" />,
- *      taxIncluded: true,
- *    }}
- *    taxTotal={<Price amount={10} currency="USD" />},
- *    taxesApplied={[
- *      {
- *        label: 'VAT standard',
- *        price: <Price amount={5} currency="USD" />,
- *      },
- *      {
- *        label: 'VAT reduced',
- *        price: <Price amount={5} currency="USD" />,
- *      },
- *    ]}
- * />
- * ```
- */
-export const Checkout = {
-    args: {
-        ...defaultProps,
-    },
-};
-/**
- * Use the component like this to get a Cart variation of the PriceSummary:
- *
- * ```tsx
- * <PriceSummary
- *    heading='Order Summary'
- *    loading={false}
- *    subTotal={{
- *      price: <Price amount={90} currency="USD" />,
- *    }}
- *    shipping={{
- *      price: <Price amount={10} currency="USD" />,
- *      estimated: true,
- *      countryField: (
- *       <Picker
- *        name="shippingCountry"
- *        placeholder="Country"
- *        variant="primary"
- *        options={[
- *          { text: 'United States', value: 'US' },
- *          { text: 'Canada', value: 'CA' },
- *         ]}/>
- *       ),
- *      stateField: (
- *        <Picker name="shippingState" placeholder="State" variant="primary"
- *          options={
- *         [
- *          { text: 'Alabama', value: 'AL' },
- *          { text: 'Alaska', value: 'AK' },
- *          { text: 'Arizona', value: 'AZ' },
- *         ]} />
- *       ),
- *     zipField: (
- *      <Input
- *          aria-label="Zip"
- *          name="shippingZip"
- *          placeholder="Zip Code"
- *          variant="primary"
- *          value=""
- *        />
- *      ),
- *     destinationText: '12345',
- *     onEstimate: (value) => console.log(value),
- *     estimateButton: <Button variant="secondary">Apply</Button>,
- *    }}
- *    total={{
- *      price: <Price amount={100} currency="USD" />,
- *      estimated: true,
- *    }}
- *    taxTotal={<span>TBD</span>}
- *    discounts={[
- *      {
- *        label: '10% off',
- *        price: <Price amount={-10} currency="USD" sale={true} />,
- *      },
- *      {
- *        label: '100th Customer Discount',
- *        price: <Price amount={-2} currency="USD" sale={true} />,
- *        caption: <div>Discount for our 100th customer!</div>,
- *      },
- *    ]}
- *    primaryAction={<Button variant="primary">Checkout</Button>}
- * />
- * ```
- */
-export const Cart = {
-    args: {
-        heading: 'Order Summary',
-        loading: false,
-        subTotal: {
-            price: <Price amount={90} currency="USD"/>,
-        },
-        shipping: {
-            price: <Price amount={10} currency="USD"/>,
-            estimated: true,
-            countryField: (<Picker name="shippingCountry" placeholder="Country" variant="primary" options={[
-                    { text: 'United States', value: 'US' },
-                    { text: 'Canada', value: 'CA' },
-                    { text: 'Mexico', value: 'MX' },
-                    { text: 'United Kingdom', value: 'UK' },
-                ]} data-testid="country-field"/>),
-            stateField: (<Picker name="shippingState" placeholder="State" variant="primary" options={[
-                    { text: 'Alabama', value: 'AL' },
-                    { text: 'Alaska', value: 'AK' },
-                    { text: 'Arizona', value: 'AZ' },
-                    { text: 'Arkansas', value: 'AR' },
-                ]} data-testid="state-field"/>),
-            zipField: (<Input aria-label="Zip" name="shippingZip" placeholder="Zip Code" variant="primary" value="" data-testid="zip-field"/>),
-            destinationText: '12345',
-            onEstimate: (value) => action('onEstimate')(value),
-            estimateButton: <Button variant="secondary">Apply</Button>,
-        },
-        total: {
-            price: <Price amount={100} currency="USD"/>,
-            estimated: true,
-        },
-        taxTotal: { price: <span>TBD</span>, estimated: true },
-        discounts: [
-            {
-                label: '10% off',
-                price: <Price amount={-10} currency="USD" sale={true}/>,
-            },
-            {
-                label: '100th Customer Discount',
-                price: <Price amount={-2} currency="USD" sale={true}/>,
-                caption: <div>Discount for our 100th customer!</div>,
-            },
-        ],
-        primaryAction: <Button variant="primary">Checkout</Button>,
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        let form = await canvas.queryByTestId('shipping-estimate-form');
-        await expect(form).not.toBeNull();
-        const toggleFormLink = await canvas.findByTestId('shipping-destination-link');
-        await userEvent.click(toggleFormLink);
-        form = await canvas.queryByTestId('shipping-estimate-form');
-        await expect(form?.classList).toContain('dropin-price-summary__shipping--hide');
-        await userEvent.click(toggleFormLink);
-        const alternateFieldLink = await canvas.findByTestId('shipping-alternate-field-link');
-        await userEvent.click(alternateFieldLink);
-        const stateField = await canvas.findByTestId('state-field');
-        await expect(stateField).not.toBeNull();
-        await userEvent.click(alternateFieldLink);
-        const countryField = await canvas.findByTestId('country-field');
-        await userEvent.selectOptions(countryField, 'CA');
-        const zipField = await canvas.findByTestId('zip-field');
-        await userEvent.type(zipField, '12345');
-        const estimateButton = await canvas.findByText('Apply');
-        await userEvent.click(estimateButton);
-    },
-};
-/**
- * Set the loading prop to true to show a loading state.
- *
- * ```tsx
- * <PriceSummary
- *   heading='Order Summary',
- *   loading={true},
- * />
- * ```
- */
-export const Loading = {
-    args: {
-        heading: 'Order Summary',
-        loading: true,
-    },
-};

package/components/PriceSummary/PriceSummary.test.d.ts

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

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

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