@dropins/tools 0.21.1 → 0.21.2-alpha2

package/components/PriceRange/PriceRange.test.jsx

@@ -0,0 +1,188 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render } from '@adobe/elsie/lib/tests';
+import { PriceRange } from '@adobe/elsie/components/PriceRange';
+describe('Base/Components/PriceRange', () => {
+    test('renders', () => {
+        const { container } = render(<PriceRange />);
+        expect(!!container).toEqual(true);
+    });
+    test('Renders simple price range', () => {
+        const { container } = render(<PriceRange minimumAmount={100} maximumAmount={200} currency="USD" locale="en-US" display="dash"/>);
+        // Ensure the price range is rendered
+        const priceRange = container.querySelector('.dropin-price-range');
+        expect(priceRange).toMatchInlineSnapshot(`
+      <div
+        class="dropin-price-range"
+      >
+        <span
+          class="dropin-price dropin-price--default dropin-price--small dropin-price--bold"
+        >
+          $100.00
+        </span>
+        <span
+          class="dropin-price-range__separator"
+        >
+          -
+        </span>
+        <span
+          class="dropin-price dropin-price--default dropin-price--small dropin-price--bold"
+        >
+          $200.00
+        </span>
+      </div>
+    `);
+    });
+    test('Renders from to price range', () => {
+        const { container } = render(<PriceRange minimumAmount={100} maximumAmount={200} currency="USD" locale="en-US" display="from to"/>);
+        // Ensure the price range is rendered
+        const priceRange = container.querySelector('.dropin-price-range');
+        expect(priceRange).toMatchInlineSnapshot(`
+      <div
+        class="dropin-price-range"
+      >
+        <span
+          class="dropin-price-range__from dropin-price-range__from--small"
+        >
+          From
+        </span>
+        <span
+          class="dropin-price dropin-price--default dropin-price--small dropin-price--bold"
+        >
+          $100.00
+        </span>
+        <span
+          class="dropin-price-range__to dropin-price-range__to--small"
+        >
+          to
+        </span>
+        <span
+          class="dropin-price dropin-price--default dropin-price--small dropin-price--bold"
+        >
+          $200.00
+        </span>
+      </div>
+    `);
+    });
+    test('Renders as low as price range', () => {
+        const { container } = render(<PriceRange minimumAmount={100} maximumAmount={200} currency="USD" locale="en-US" display="as low as"/>);
+        // Ensure the price range is rendered
+        const priceRange = container.querySelector('.dropin-price-range');
+        expect(priceRange).toMatchInlineSnapshot(`
+      <div
+        class="dropin-price-range"
+      >
+        <span
+          class="dropin-price-range__as-low-as dropin-price-range__as-low-as--small"
+        >
+          As low as
+        </span>
+        <span
+          class="dropin-price dropin-price--default dropin-price--small dropin-price--bold"
+        >
+          $100.00
+        </span>
+      </div>
+    `);
+    });
+    test('Renders simple price range with special price', () => {
+        const { container } = render(<PriceRange minimumAmount={100} maximumAmount={200} currency="USD" locale="en-US" display="dash" specialPrice={9.99} sale={false}/>);
+        // Ensure the price range is rendered
+        const priceRange = container.querySelector('.dropin-price-range');
+        expect(priceRange).toMatchInlineSnapshot(`
+      <div
+        class="dropin-price-range"
+      >
+        <span
+          class="dropin-price dropin-price--default dropin-price--small dropin-price--bold"
+        >
+          $9.99
+        </span>
+        <span
+          class="dropin-price-range__separator"
+        >
+          -
+        </span>
+        <span
+          class="dropin-price dropin-price--default dropin-price--small dropin-price--bold"
+        >
+          $200.00
+        </span>
+      </div>
+    `);
+    });
+    test('Renders from to price range with special price', () => {
+        const { container } = render(<PriceRange minimumAmount={100} maximumAmount={200} currency="USD" locale="en-US" display="from to" specialPrice={9.99} sale={false}/>);
+        // Ensure the price range is rendered
+        const priceRange = container.querySelector('.dropin-price-range');
+        expect(priceRange).toMatchInlineSnapshot(`
+      <div
+        class="dropin-price-range"
+      >
+        <span
+          class="dropin-price-range__from dropin-price-range__from--small"
+        >
+          From
+        </span>
+        <span
+          class="dropin-price dropin-price--default dropin-price--small dropin-price--bold"
+        >
+          $9.99
+        </span>
+        <span
+          class="dropin-price-range__to dropin-price-range__to--small"
+        >
+          to
+        </span>
+        <span
+          class="dropin-price dropin-price--default dropin-price--small dropin-price--bold"
+        >
+          $200.00
+        </span>
+      </div>
+    `);
+    });
+    test('Renders as low as price range with high contrast special price', () => {
+        const { container } = render(<PriceRange minimumAmount={100} maximumAmount={200} currency="USD" locale="en-US" display="as low as" specialPrice={9.99} sale={true}/>);
+        // Ensure the price range is rendered
+        const priceRange = container.querySelector('.dropin-price-range');
+        expect(priceRange).toMatchInlineSnapshot(`
+      <div
+        class="dropin-price-range"
+      >
+        <span
+          class="dropin-price-range__as-low-as dropin-price-range__as-low-as--small"
+        >
+          As low as
+        </span>
+        <div>
+          <span
+            class="dropin-price dropin-price--strikethrough dropin-price--small dropin-price--bold"
+          >
+            $200.00
+          </span>
+          <span
+            class="dropin-price dropin-price--default dropin-price--small dropin-price--bold dropin-price--sale dropin-price-range__special"
+          >
+            $9.99
+          </span>
+        </div>
+      </div>
+    `);
+    });
+    test('Renders simple product price with amount prop', () => {
+        const { container } = render(<PriceRange amount={9.99} currency="USD" locale="en-US"/>);
+        // Ensure the price range is rendered
+        const priceRange = container.querySelector('.dropin-price-range');
+        expect(priceRange).toMatchInlineSnapshot(`
+      <div
+        class="dropin-price-range"
+      >
+        <span
+          class="dropin-price dropin-price--default dropin-price--small dropin-price--bold"
+        >
+          $9.99
+        </span>
+      </div>
+    `);
+    });
+});

package/components/PriceRange/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PriceRange/index.ts"],"names":[],"mappings":"AAAA,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,MAAM,+CAA+C,CAAC"}

package/components/PriceRange/index.js

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

package/components/PriceSummary/PriceSummary.d.ts

@@ -0,0 +1,43 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/PriceSummary/PriceSummary.css';
+export interface PriceSummaryProps extends Omit<HTMLAttributes<HTMLDivElement>, 'loading'> {
+    heading: string;
+    loading?: boolean;
+    total?: {
+        price: VNode<HTMLAttributes<HTMLSpanElement>>;
+        estimated?: boolean;
+        priceWithoutTax?: VNode<HTMLAttributes<HTMLSpanElement>>;
+    };
+    subTotal?: {
+        price: VNode<HTMLAttributes<HTMLSpanElement>>;
+        taxIncluded?: boolean;
+    };
+    shipping?: {
+        price: VNode<HTMLAttributes<HTMLSpanElement>>;
+        estimated?: boolean;
+        taxIncluded?: boolean;
+        countryField?: VNode<HTMLAttributes<HTMLInputElement>>;
+        stateField?: VNode<HTMLAttributes<HTMLInputElement>>;
+        zipField?: VNode<HTMLAttributes<HTMLInputElement>>;
+        destinationText?: string;
+        onEstimate?: (formData: any) => void;
+        estimateButton?: VNode<HTMLAttributes<HTMLButtonElement>>;
+    };
+    taxTotal?: {
+        price: VNode<HTMLAttributes<HTMLSpanElement>>;
+        estimated?: boolean;
+    };
+    taxesApplied?: {
+        label: string;
+        price: VNode<HTMLAttributes<HTMLSpanElement>>;
+    }[];
+    discounts?: {
+        label: string;
+        price: VNode<HTMLAttributes<HTMLSpanElement>>;
+        caption?: VNode<HTMLAttributes<HTMLDivElement>>;
+    }[];
+    primaryAction?: VNode<HTMLAttributes<HTMLButtonElement>>;
+}
+export declare const PriceSummary: FunctionComponent<PriceSummaryProps>;
+//# sourceMappingURL=PriceSummary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PriceSummary.d.ts","sourceRoot":"","sources":["../../../src/components/PriceSummary/PriceSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,cAAc,EAAoB,MAAM,eAAe,CAAC;AAajE,OAAO,uDAAuD,CAAC;AAE/D,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;QAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;KAC1D,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;QAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;QAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACvD,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACnD,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;QACrC,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAC;KAC3D,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;QAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,YAAY,CAAC,EAAE;QACb,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;KAC/C,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;QAC9C,OAAO,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;KACjD,EAAE,CAAC;IACJ,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAC;CAC1D;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA2b7D,CAAC"}

package/components/PriceSummary/PriceSummary.jsx

@@ -0,0 +1,228 @@
+import { useRef, useState } from 'preact/compat';
+import { VComponent, classes, getFormValues } from '@adobe/elsie/lib';
+import { Text, useText } from '@adobe/elsie/i18n';
+import { Accordion, AccordionSection, Divider, Skeleton, SkeletonRow, } from '@adobe/elsie/components';
+import { ChevronDown, ChevronUp } from '@adobe/elsie/icons';
+import '@adobe/elsie/components/PriceSummary/PriceSummary.css';
+export const PriceSummary = ({ className, children, ...props }) => {
+    const { heading, loading = true, total, subTotal, shipping, taxTotal, taxesApplied, discounts, primaryAction, ...restProps } = props;
+    const [showTaxBreakdown, setShowTaxBreakdown] = useState(false);
+    const estimateFormRef = useRef(null);
+    const [showEstimateForm, setShowEstimateForm] = useState(true);
+    const [estimateField, setEstimateField] = useState('zip');
+    const translations = useText({
+        editZipAction: 'Dropin.PriceSummary.shipping.editZipAction',
+        destinationLinkAriaLabel: 'Dropin.PriceSummary.shipping.destinationLinkAriaLabel',
+        taxesBreakdownTitle: 'Dropin.PriceSummary.taxes.breakdown',
+        showTaxBreakdown: 'Dropin.PriceSummary.taxes.showBreakdown',
+        hideTaxBreakdown: 'Dropin.PriceSummary.taxes.hideBreakdown',
+        zipPlaceholder: 'Dropin.PriceSummary.shipping.zipPlaceholder',
+    });
+    const onDestinationLinkClick = (e) => {
+        e.preventDefault();
+        setShowEstimateForm((show) => !show);
+    };
+    const onAlternateFieldClick = (e) => {
+        e.preventDefault();
+        setShowEstimateForm(true);
+        setEstimateField((field) => (field === 'zip' ? 'state' : 'zip'));
+    };
+    const onSubmitEstimate = (e) => {
+        e.preventDefault();
+        setShowEstimateForm(false);
+        const formData = getFormValues(estimateFormRef.current);
+        shipping?.onEstimate?.(formData);
+    };
+    // Skeleton content to show while loading
+    const skeletonContent = (<Skeleton data-testid="loading-skeleton" rowGap="xsmall">
+      <SkeletonRow variant="row" size="small" lines={5} fullWidth={true} multilineGap="xsmall"/>
+    </Skeleton>);
+    // Entry for the shipping price
+    const shippingContent = shipping && (<>
+      <div data-testid="shipping-content" className={classes([
+            'dropin-price-summary__entry',
+            'dropin-price-summary__shipping',
+        ])}>
+        <span className={'dropin-price-summary__label'}>
+          {shipping.estimated ? (shipping.destinationText ? (<>
+                <Text id="Dropin.PriceSummary.shipping.estimatedDestination"/>
+                <a className={'dropin-price-summary__shippingLink'} role="button" href="" onClick={onDestinationLinkClick} onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    onDestinationLinkClick(event);
+                }
+            }} tabIndex={0} aria-label={translations.destinationLinkAriaLabel} data-testid="shipping-destination-link">
+                  {shipping.destinationText}
+                </a>
+              </>) : (<Text id="Dropin.PriceSummary.shipping.estimated"/>)) : (<Text id="Dropin.PriceSummary.shipping.label"/>)}
+        </span>
+        <VComponent node={shipping.price} className={'dropin-price-summary__price'}/>
+
+        {shipping.estimated && (<>
+            <div className={classes(['dropin-price-summary__caption'])}>
+              <a href="#" className={'dropin-price-summary__shippingLink'} onClick={onAlternateFieldClick} data-testid="shipping-alternate-field-link">
+                {estimateField === 'zip' ? (<Text id="Dropin.PriceSummary.shipping.alternateField.state"/>) : (<Text id="Dropin.PriceSummary.shipping.alternateField.zip"/>)}
+              </a>
+            </div>
+          </>)}
+
+        {/* Edit shipping address form */}
+        {shipping.estimated && (<>
+            <form className={classes([
+                'dropin-price-summary__shipping--edit',
+                ['dropin-price-summary__shipping--hide', !showEstimateForm],
+            ])} ref={estimateFormRef} data-testid="shipping-estimate-form">
+              {shipping.countryField && (<VComponent node={shipping.countryField} className={classes([
+                    'dropin-price-summary__shipping--country',
+                ])}/>)}
+              {estimateField === 'state'
+                ? shipping.stateField && (<VComponent node={shipping.stateField} className={classes([
+                        'dropin-price-summary__shipping--state',
+                    ])}/>)
+                : shipping.zipField && (<VComponent node={shipping.zipField} className={classes([
+                        'dropin-price-summary__shipping--zip',
+                    ])}/>)}
+              {shipping.estimateButton && (<VComponent node={shipping.estimateButton} className={classes([
+                    'dropin-price-summary__shipping--action',
+                ])} onClick={onSubmitEstimate} type="submit"/>)}
+            </form>
+          </>)}
+
+        {shipping.taxIncluded && (<div className={classes(['dropin-price-summary__caption'])}>
+            <span>
+              <Text id="Dropin.PriceSummary.shipping.withTaxes"/>
+            </span>
+          </div>)}
+      </div>
+    </>);
+    // Entry for the discounts
+    const discountContent = discounts && (<>
+      {discounts.map((discount) => (<div className={classes([
+                'dropin-price-summary__entry',
+                'dropin-price-summary__discount',
+            ])} key={discount.label}>
+          <span className={classes(['dropin-price-summary__label'])}>
+            {discount.label}
+          </span>
+          <VComponent node={discount.price} className={classes(['dropin-price-summary__price'])}/>
+          {discount.caption && (<VComponent node={discount.caption} className={classes(['dropin-price-summary__caption'])}/>)}
+        </div>))}
+    </>);
+    // Entry for the total tax and breakdown (if provided)
+    const taxContent = taxesApplied ? (
+    /* Show breakdown if provided */
+    <>
+      <Accordion data-testid="tax-breakdown" className={'dropin-price-summary__taxes'} iconOpen={ChevronDown} iconClose={ChevronUp}>
+        <AccordionSection title={translations.taxesBreakdownTitle} secondaryText={!showTaxBreakdown && taxTotal ? (<VComponent node={taxTotal.price} className={'dropin-price-summary__price'}/>) : undefined} renderContentWhenClosed={false} onStateChange={setShowTaxBreakdown}>
+          <div className={classes(['dropin-price-summary__appliedTaxes'])}>
+            {taxesApplied.map((tax) => (<div className={classes([
+                'dropin-price-summary__entry',
+                'dropin-price-summary__taxEntry',
+            ])} key={tax.label}>
+                <span className={classes([
+                'dropin-price-summary__label',
+                'dropin-price-summary__label--muted',
+            ])}>
+                  {tax.label}
+                </span>
+
+                <VComponent node={tax.price} className={classes([
+                'dropin-price-summary__price',
+                'dropin-price-summary__price--muted',
+            ])}/>
+              </div>))}
+          </div>
+
+          <div className={classes(['dropin-price-summary__entry'])}>
+            <span className={'dropin-price-summary__label'}>
+              <Text id="Dropin.PriceSummary.taxes.total"/>
+            </span>
+            {taxTotal && (<VComponent node={taxTotal.price} className={'dropin-price-summary__price'}/>)}
+          </div>
+        </AccordionSection>
+      </Accordion>
+    </>) : (taxTotal && (
+    /* Otherwise, show total only */
+    <div data-testid="tax-total-only" className={classes([
+            'dropin-price-summary__entry',
+            'dropin-price-summary__taxTotal',
+        ])}>
+        <span className={'dropin-price-summary__label'}>
+          {taxTotal.estimated ? (<Text id="Dropin.PriceSummary.taxes.estimated"/>) : (<Text id="Dropin.PriceSummary.taxes.totalOnly"/>)}
+        </span>
+        <VComponent node={taxTotal.price} className={'dropin-price-summary__price'}/>
+      </div>));
+    // Entry for the total
+    const totalContent = total && (<>
+      <div data-testid="total-content" className={classes([
+            'dropin-price-summary__entry',
+            'dropin-price-summary__total',
+            total.estimated && 'dropin-price-summary__total--padded',
+        ])}>
+        <span className={classes([
+            'dropin-price-summary__label',
+            'dropin-price-summary__label--bold',
+        ])}>
+          {total.estimated ? (<Text id="Dropin.PriceSummary.total.estimated"/>) : (<Text id="Dropin.PriceSummary.total.label"/>)}
+        </span>
+        <VComponent node={total.price} className={classes([
+            'dropin-price-summary__price',
+            'dropin-price-summary__price--bold',
+        ])}/>
+      </div>
+    </>);
+    // Entry for the total without tax
+    const totalWithoutTaxContent = total && total.priceWithoutTax && (<div data-testid="total-without-tax" className={'dropin-price-summary__entry dropin-price-summary__totalWithoutTax'}>
+      <span className={classes([
+            'dropin-price-summary__label',
+            'dropin-price-summary__label--muted',
+        ])}>
+        <Text id="Dropin.PriceSummary.total.withoutTax"/>
+      </span>
+      <VComponent node={total.priceWithoutTax} className={classes([
+            'dropin-price-summary__price',
+            'dropin-price-summary__price--muted',
+        ])}/>
+    </div>);
+    // Entry for the primary action
+    const primaryActionContent = primaryAction && (<div className={classes([
+            'dropin-price-summary__entry',
+            'dropin-price-summary__primaryAction',
+        ])}>
+      {primaryAction}
+    </div>);
+    const subTotalContent = subTotal && (<div className={classes([
+            'dropin-price-summary__entry',
+            'dropin-price-summary__subTotal',
+        ])}>
+      <span className={'dropin-price-summary__label'}>
+        <Text id="Dropin.PriceSummary.subTotal.label"/>
+      </span>
+      <VComponent node={subTotal.price} className={'dropin-price-summary__price'}/>
+      {subTotal.taxIncluded && (<div data-testid="sub-total-tax-caption" className={classes(['dropin-price-summary__caption'])}>
+          <span>
+            <Text id="Dropin.PriceSummary.subTotal.withTaxes"/>
+          </span>
+        </div>)}
+    </div>);
+    return (<div {...restProps} className={classes(['dropin-price-summary', className])}>
+      <div className={'dropin-price-summary__heading'}>{heading}</div>
+
+      <Divider variant="primary" className={'dropin-price-summary__divider-primary'}/>
+
+      {loading ? (skeletonContent) : (<>
+          {subTotalContent}
+
+          {shippingContent}
+
+          {discountContent}
+
+          {taxContent}
+
+          {totalContent}
+
+          {totalWithoutTaxContent}
+
+          {primaryActionContent}
+        </>)}
+    </div>);
+};

package/components/PriceSummary/PriceSummary.stories.d.ts

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { PriceSummaryProps } from '@adobe/elsie/components/PriceSummary';
+/**
+ * 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';
+ * ```
+ *
+ */
+declare const meta: Meta<PriceSummaryProps>;
+export default meta;
+type Story = StoryObj<PriceSummaryProps>;
+/**
+ * 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 declare const Checkout: Story;
+/**
+ * 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 declare const Cart: Story;
+/**
+ * Set the loading prop to true to show a loading state.
+ *
+ * ```tsx
+ * <PriceSummary
+ *   heading='Order Summary',
+ *   loading={true},
+ * />
+ * ```
+ */
+export declare const Loading: Story;
+//# sourceMappingURL=PriceSummary.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PriceSummary.stories.d.ts","sourceRoot":"","sources":["../../../src/components/PriceSummary/PriceSummary.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAEL,iBAAiB,EAClB,MAAM,sCAAsC,CAAC;AAK9C;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAgOjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAgCzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,eAAO,MAAM,IAAI,EAAE,KA4GlB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}