@faststore/ui 1.11.8 → 1.11.18

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.11.18](https://github.com/vtex/faststore/compare/v1.11.17...v1.11.18) (2022-09-12)
+
+
+### Features
+
+* Adds OrderSummary component to FastStore UI ([#1456](https://github.com/vtex/faststore/issues/1456)) ([f1d983c](https://github.com/vtex/faststore/commit/f1d983cf5684053ad810455d2b6f6ac77bfc7b76))
+
+
+
 ## 1.11.8 (2022-09-01)
 
 

package/dist/index.d.ts

@@ -38,6 +38,8 @@ export { default as Gift, GiftContent, GiftImage } from './molecules/Gift';
 export type { GiftProps, GiftContentProps, GiftImageProps, } from './molecules/Gift';
 export { default as ProductTitle } from './molecules/ProductTitle';
 export type { ProductTitleProps } from './molecules/ProductTitle';
+export { default as OrderSummary } from './molecules/OrderSummary';
+export type { OrderSummaryProps } from './molecules/OrderSummary';
 export { default as AggregateRating } from './molecules/AggregateRating';
 export type { AggregateRatingProps } from './molecules/AggregateRating';
 export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';

package/dist/index.js

@@ -20,6 +20,7 @@ export { default as Incentive } from './atoms/Incentive';
 // Molecules
 export { default as Gift, GiftContent, GiftImage } from './molecules/Gift';
 export { default as ProductTitle } from './molecules/ProductTitle';
+export { default as OrderSummary } from './molecules/OrderSummary';
 export { default as AggregateRating } from './molecules/AggregateRating';
 export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';
 export { default as Card, CardImage, CardContent, CardActions, } from './molecules/Card';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/molecules/OrderSummary/OrderSummary.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ListProps } from '../../atoms/List';
+export interface OrderSummaryProps<T = HTMLElement> extends Omit<ListProps<T>, 'variant'> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * Label for the subtotal value of the order. Will only show if subtotalValue is provided.
+     */
+    subtotalLabel?: string;
+    /**
+     * Subtotal value of the order.  If provided, subtotal label and value will be shown.
+     */
+    subtotalValue?: string;
+    /**
+     * Label for the discount value for the order. Will only show if discountValue is provided.
+     */
+    discountLabel?: string;
+    /**
+     * Discount value for the order. If provided, discount label and value will be shown.
+     */
+    discountValue?: string;
+    /**
+     * Label for the total value of the order.
+     */
+    totalLabel?: string;
+    /**
+     * Total value of the order.
+     */
+    totalValue?: string;
+}
+declare const OrderSummary: React.ForwardRefExoticComponent<OrderSummaryProps<HTMLElement> & React.RefAttributes<HTMLUListElement>>;
+export default OrderSummary;

package/dist/molecules/OrderSummary/OrderSummary.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import List from '../../atoms/List';
+const OrderSummary = forwardRef(function OrderSummary({ testId = 'store-order-summary', children, subtotalLabel, subtotalValue, discountLabel, discountValue, totalLabel, totalValue, ...otherProps }, ref) {
+    return (React.createElement(List, Object.assign({ ref: ref, "data-fs-order-summary": true, "data-testid": testId }, otherProps),
+        subtotalValue ? (React.createElement("li", { "data-fs-order-summary-subtotal": true },
+            React.createElement("span", { "data-fs-order-summary-subtotal-label": true, "data-testid": `${testId}-subtotal-label` }, subtotalLabel),
+            React.createElement("span", { "data-fs-order-summary-subtotal-value": true, "data-testid": `${testId}-subtotal-value` }, subtotalValue))) : null,
+        discountValue ? (React.createElement("li", { "data-fs-order-summary-discount": true },
+            React.createElement("span", { "data-fs-order-summary-discount-label": true, "data-testid": `${testId}-discount-label` }, discountLabel),
+            React.createElement("span", { "data-fs-order-summary-discount-value": true, "data-testid": `${testId}-discount-value` }, discountValue))) : null,
+        React.createElement("li", { "data-fs-order-summary-total": true },
+            React.createElement("span", { "data-fs-order-summary-total-label": true, "data-testid": `${testId}-total-label` }, totalLabel),
+            React.createElement("span", { "data-fs-order-summary-total-value": true, "data-testid": `${testId}-total-value` }, totalValue))));
+});
+export default OrderSummary;
+//# sourceMappingURL=OrderSummary.js.map

package/dist/molecules/OrderSummary/OrderSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderSummary.js","sourceRoot":"","sources":["../../../src/molecules/OrderSummary/OrderSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,IAAmB,MAAM,kBAAkB,CAAA;AAkClD,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,YAAY,CACnB,EACE,MAAM,GAAG,qBAAqB,EAC9B,QAAQ,EACR,aAAa,EACb,aAAa,EACb,aAAa,EACb,aAAa,EACb,UAAU,EACV,UAAU,EACV,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,oBAAC,IAAI,kBACH,GAAG,EAAE,GAAG,gDAEK,MAAM,IACf,UAAU;QAEb,aAAa,CAAC,CAAC,CAAC,CACf;YACE,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT;YACP,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT,CACJ,CACN,CAAC,CAAC,CAAC,IAAI;QACP,aAAa,CAAC,CAAC,CAAC,CACf;YACE,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT;YACP,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT,CACJ,CACN,CAAC,CAAC,CAAC,IAAI;QACR;YACE,wFAEe,GAAG,MAAM,cAAc,IAEnC,UAAU,CACN;YACP,wFAEe,GAAG,MAAM,cAAc,IAEnC,UAAU,CACN,CACJ,CACA,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/molecules/OrderSummary/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './OrderSummary';
+export type { OrderSummaryProps } from './OrderSummary';

package/dist/molecules/OrderSummary/index.js

@@ -0,0 +1,2 @@
+export { default } from './OrderSummary';
+//# sourceMappingURL=index.js.map

package/dist/molecules/OrderSummary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/OrderSummary/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "1.11.8",
+  "version": "1.11.18",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@faststore/styles": "^1.11.8",
+    "@faststore/styles": "^1.11.18",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-actions": "^6.4.4",
     "@storybook/addon-docs": "^6.4.4",
@@ -85,5 +85,5 @@
     "tsdx": "^0.14.1",
     "typescript": "^4.2.4"
   },
-  "gitHead": "3775ec32d866149eb6519e68b7b2b977ffc0dace"
+  "gitHead": "0d01ff2f997acf54f9066d7245c521ddfdbc5bea"
 }

package/src/index.ts

@@ -64,6 +64,9 @@ export type {
 export { default as ProductTitle } from './molecules/ProductTitle'
 export type { ProductTitleProps } from './molecules/ProductTitle'
 
+export { default as OrderSummary } from './molecules/OrderSummary'
+export type { OrderSummaryProps } from './molecules/OrderSummary'
+
 export { default as AggregateRating } from './molecules/AggregateRating'
 export type { AggregateRatingProps } from './molecules/AggregateRating'
 

package/src/molecules/OrderSummary/OrderSummary.test.tsx

@@ -0,0 +1,103 @@
+import { render } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import React from 'react'
+
+import OrderSummary from './OrderSummary'
+
+const ELEMENT_NOT_FOUND_MESSAGE = 'Unable to find an element by:'
+
+describe('OrderSummary', () => {
+  it('should have `data-fs-order-summary` attribute', () => {
+    const { getByTestId } = render(<OrderSummary />)
+
+    expect(getByTestId('store-order-summary')).toHaveAttribute(
+      'data-fs-order-summary'
+    )
+  })
+
+  it('should always render total labels and values elements', async () => {
+    const { getByTestId } = render(<OrderSummary />)
+
+    expect(getByTestId('store-order-summary-total-label')).toBeInTheDocument()
+    expect(getByTestId('store-order-summary-total-value')).toBeInTheDocument()
+  })
+
+  it('should not render subtotal or discount labels and values if subtotalValue or discountValue are not provided', async () => {
+    const { getByTestId } = render(
+      <OrderSummary totalLabel="Total" totalValue="250$" />
+    )
+
+    expect(() =>
+      getByTestId('store-order-summary-subtotal-label')
+    ).toThrowError(ELEMENT_NOT_FOUND_MESSAGE)
+    expect(() => getByTestId('store-order-summary-subtotal-value')).toThrow(
+      ELEMENT_NOT_FOUND_MESSAGE
+    )
+
+    expect(() => getByTestId('store-order-summary-discount-label')).toThrow(
+      ELEMENT_NOT_FOUND_MESSAGE
+    )
+    expect(() => getByTestId('store-order-summary-discount-value')).toThrow(
+      ELEMENT_NOT_FOUND_MESSAGE
+    )
+  })
+
+  it('should render subtotal label and value if subtotalValue is provided', async () => {
+    const { getByTestId } = render(
+      <OrderSummary
+        subtotalLabel="Subtotal"
+        totalLabel="Total"
+        subtotalValue="300$"
+        totalValue="250$"
+      />
+    )
+
+    expect(
+      getByTestId('store-order-summary-subtotal-label')
+    ).toBeInTheDocument()
+    expect(getByTestId('store-order-summary-subtotal-label')).toHaveTextContent(
+      'Subtotal'
+    )
+
+    expect(
+      getByTestId('store-order-summary-subtotal-value')
+    ).toBeInTheDocument()
+    expect(getByTestId('store-order-summary-subtotal-value')).toHaveTextContent(
+      '300$'
+    )
+  })
+
+  it('should render discount label and value if discountValue is provided', async () => {
+    const { getByTestId } = render(
+      <OrderSummary
+        subtotalLabel="Subtotal"
+        totalLabel="Total"
+        subtotalValue="300$"
+        totalValue="250$"
+        discountLabel="Discount"
+        discountValue="-50$"
+      />
+    )
+
+    expect(
+      getByTestId('store-order-summary-discount-label')
+    ).toBeInTheDocument()
+    expect(getByTestId('store-order-summary-discount-label')).toHaveTextContent(
+      'Discount'
+    )
+    expect(
+      getByTestId('store-order-summary-discount-value')
+    ).toBeInTheDocument()
+    expect(getByTestId('store-order-summary-discount-value')).toHaveTextContent(
+      '-50$'
+    )
+  })
+
+  describe('Accessibility', () => {
+    it('should have no violations', async () => {
+      const { getByTestId } = render(<OrderSummary />)
+
+      expect(await axe(getByTestId('store-order-summary'))).toHaveNoViolations()
+    })
+  })
+})

package/src/molecules/OrderSummary/OrderSummary.tsx

@@ -0,0 +1,109 @@
+import React, { forwardRef } from 'react'
+import List, { ListProps } from '../../atoms/List'
+
+export interface OrderSummaryProps<T = HTMLElement> extends Omit<ListProps<T>, 'variant'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * Label for the subtotal value of the order. Will only show if subtotalValue is provided.
+   */
+  subtotalLabel?: string
+  /**
+   * Subtotal value of the order.  If provided, subtotal label and value will be shown.
+   */
+  subtotalValue?: string
+  /**
+   * Label for the discount value for the order. Will only show if discountValue is provided.
+   */
+  discountLabel?: string
+  /**
+   * Discount value for the order. If provided, discount label and value will be shown.
+   */
+  discountValue?: string
+  /**
+   * Label for the total value of the order.
+   */
+  totalLabel?: string
+  /**
+   * Total value of the order.
+   */
+  totalValue?: string
+}
+
+const OrderSummary = forwardRef<HTMLUListElement, OrderSummaryProps>(
+  function OrderSummary(
+    {
+      testId = 'store-order-summary',
+      children,
+      subtotalLabel,
+      subtotalValue,
+      discountLabel,
+      discountValue,
+      totalLabel,
+      totalValue,
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <List
+        ref={ref}
+        data-fs-order-summary
+        data-testid={testId}
+        {...otherProps}
+      >
+        {subtotalValue ? (
+          <li data-fs-order-summary-subtotal>
+            <span
+              data-fs-order-summary-subtotal-label
+              data-testid={`${testId}-subtotal-label`}
+            >
+              {subtotalLabel}
+            </span>
+            <span
+              data-fs-order-summary-subtotal-value
+              data-testid={`${testId}-subtotal-value`}
+            >
+              {subtotalValue}
+            </span>
+          </li>
+        ) : null}
+        {discountValue ? (
+          <li data-fs-order-summary-discount>
+            <span
+              data-fs-order-summary-discount-label
+              data-testid={`${testId}-discount-label`}
+            >
+              {discountLabel}
+            </span>
+            <span
+              data-fs-order-summary-discount-value
+              data-testid={`${testId}-discount-value`}
+            >
+              {discountValue}
+            </span>
+          </li>
+        ) : null}
+        <li data-fs-order-summary-total>
+          <span
+            data-fs-order-summary-total-label
+            data-testid={`${testId}-total-label`}
+          >
+            {totalLabel}
+          </span>
+          <span
+            data-fs-order-summary-total-value
+            data-testid={`${testId}-total-value`}
+          >
+            {totalValue}
+          </span>
+        </li>
+      </List>
+    )
+  }
+)
+
+export default OrderSummary

package/src/molecules/OrderSummary/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './OrderSummary'
+export type { OrderSummaryProps } from './OrderSummary'

package/src/molecules/OrderSummary/stories/OrderSummary.mdx

@@ -0,0 +1,29 @@
+import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
+
+import OrderSummary from '../OrderSummary'
+
+# OrderSummary
+
+<Canvas>
+  <Story id="molecules-ordersummary--order-summary" />
+</Canvas>
+
+## Props
+
+<ArgsTable of={ OrderSummary } />
+
+## CSS Selectors
+
+```css
+[data-fs-order-summary] {}
+[data-fs-order-summary-subtotal] {}
+[data-fs-order-summary-subtotal-label] {}
+[data-fs-order-summary-subtotal-value] {}
+[data-fs-order-summary-discount] {}
+[data-fs-order-summary-discount-label] {}
+[data-fs-order-summary-discount-value] {}
+[data-fs-order-summary-total] {}
+[data-fs-order-summary-total-label] {}
+[data-fs-order-summary-total-value] {}
+
+```

package/src/molecules/OrderSummary/stories/OrderSummary.stories.tsx

@@ -0,0 +1,29 @@
+import type { Story, Meta } from '@storybook/react'
+import React from 'react'
+
+import type { OrderSummaryProps } from '../OrderSummary'
+import Component from '../OrderSummary'
+import mdx from './OrderSummary.mdx'
+
+const OrderSummaryTemplate: Story<OrderSummaryProps> = () => (
+  <Component 
+    subtotalLabel='Subtotal (3 products)'
+    subtotalValue='$300'
+    discountLabel='Discount'
+    discountValue='-$50'
+    totalLabel='Total'
+    totalValue='250$'
+  />
+)
+
+export const OrderSummary = OrderSummaryTemplate.bind({})
+OrderSummary.storyName = 'OrderSummary'
+
+export default {
+  title: 'Molecules/OrderSummary',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta