@faststore/ui 1.11.8 → 1.11.20

package/src/molecules/CartItem/CartItemActions.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface CartItemActionsProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItemActions = forwardRef<HTMLDivElement, CartItemActionsProps>(
+  function CartItemActions(
+    { testId = 'store-cart-item-actions', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <div ref={ref} data-fs-cart-item-actions data-testid={testId} {...otherProps}>
+        {children}
+      </div>
+    )
+  }
+)
+
+export default CartItemActions

package/src/molecules/CartItem/CartItemContent.tsx

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface CartItemContentProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItemContent = forwardRef<HTMLElement, CartItemContentProps>(
+  function CartItemContent(
+    { testId = 'store-cart-item-content', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <section ref={ref} data-fs-cart-item-content data-testid={testId} {...otherProps}>
+        {children}
+      </section>
+    )
+  }
+)
+
+export default CartItemContent

package/src/molecules/CartItem/CartItemImage.tsx

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface CartItemImageProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItemImage = forwardRef<HTMLDivElement, CartItemImageProps>(function CartItemImage(
+  { testId = 'store-cart-item-image', children, ...otherProps },
+  ref
+) {
+  return (
+    <div ref={ref} data-fs-cart-item-image data-testid={testId} {...otherProps}>
+      {children}
+    </div>
+  )
+})
+
+export default CartItemImage

package/src/molecules/CartItem/CartItemPrices.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface CartItemPricesProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItemPrices = forwardRef<HTMLSpanElement, CartItemPricesProps>(
+  function CartItemPrices(
+    { testId = 'store-cart-item-prices', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <span ref={ref} data-fs-cart-item-prices data-testid={testId} {...otherProps}>
+        {children}
+      </span>
+    )
+  }
+)
+
+export default CartItemPrices

package/src/molecules/CartItem/CartItemSummary.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface CartItemSummaryProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItemSummary = forwardRef<HTMLDivElement, CartItemSummaryProps>(
+  function CartItemSummary(
+    { testId = 'store-cart-item-summary', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <div ref={ref} data-fs-cart-item-summary data-testid={testId} {...otherProps}>
+        {children}
+      </div>
+    )
+  }
+)
+
+export default CartItemSummary

package/src/molecules/CartItem/CartItemTitle.tsx

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface CartItemTitleProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItemTitle = forwardRef<HTMLDivElement, CartItemTitleProps>(function CartItemTitle(
+  { testId = 'store-cart-item-title', children, ...otherProps },
+  ref
+) {
+  return (
+    <div ref={ref} data-fs-cart-item-title data-testid={testId} {...otherProps}>
+      {children}
+    </div>
+  )
+})
+
+export default CartItemTitle

package/src/molecules/CartItem/index.tsx

@@ -0,0 +1,20 @@
+export { default } from './CartItem'
+export type { CartItemProps } from './CartItem'
+
+export { default as CartItemActions } from './CartItemActions'
+export type { CartItemActionsProps } from './CartItemActions'
+
+export { default as CartItemContent } from './CartItemContent'
+export type { CartItemContentProps } from './CartItemContent'
+
+export { default as CartItemImage } from './CartItemImage'
+export type { CartItemImageProps } from './CartItemImage'
+
+export { default as CartItemPrices } from './CartItemPrices'
+export type { CartItemPricesProps } from './CartItemPrices'
+
+export { default as CartItemSummary } from './CartItemSummary'
+export type { CartItemSummaryProps } from './CartItemSummary'
+
+export { default as CartItemTitle } from './CartItemTitle'
+export type { CartItemTitleProps } from './CartItemTitle'

package/src/molecules/CartItem/stories/CartItem.mdx

@@ -0,0 +1,79 @@
+import { ArgsTable, Canvas, Props, Story } from '@storybook/addon-docs'
+
+import CartItem, {
+  CartItemActions,
+  CartItemContent,
+  CartItemImage,
+  CartItemPrices,
+  CartItemSummary,
+  CartItemTitle,
+} from '../'
+
+# Cart Item
+
+<Canvas>
+  <Story id="molecules-cartitem--default" />
+</Canvas>
+
+## Components
+
+The `CartItem` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
+
+- `CartItem`: the wrapper component;
+- `CartItemContent`: the wrapper component for the image and summary;
+- `CartItemImage`: the wrapper component for the content's image;
+- `CartItemSummary`: the wrapper component for the title and prices;
+- `CartItemTitle`: the wrapper component for the title;
+- `CartItemPrices`: the wrapper component for the prices;
+- `CartItemActions`: the wrapper component for the remove from cart button and quantity selector;
+
+## Props
+
+All CartItem-related components support all attributes also supported by the `<div>` tag.
+
+### `CartItem`
+
+<ArgsTable of={CartItem} />
+
+### `CartItemContent`
+
+<ArgsTable of={CartItemContent} />
+
+### `CartItemImage`
+
+<ArgsTable of={CartItemImage} />
+
+### `CartItemSummary`
+
+<ArgsTable of={CartItemSummary} />
+
+### `CartItemTitle`
+
+<ArgsTable of={CartItemTitle} />
+
+### `CartItemPrices`
+
+<ArgsTable of={CartItemPrices} />
+
+### `CartItemActions`
+
+<ArgsTable of={CartItemActions} />
+
+## CSS Selectors
+
+```css
+[data-fs-cart-item] {
+}
+[data-fs-cart-item-content] {
+}
+[data-fs-cart-item-image] {
+}
+[data-fs-cart-item-summary] {
+}
+[data-fs-cart-item-title] {
+}
+[data-fs-cart-item-prices] {
+}
+[data-fs-cart-item-actions] {
+}
+```

package/src/molecules/CartItem/stories/CartItem.stories.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+
+import CartItem, {
+  CartItemActions,
+  CartItemContent,
+  CartItemImage,
+  CartItemPrices,
+  CartItemSummary,
+  CartItemTitle,
+} from '../'
+import { Button, Price, QuantitySelector } from '../../../'
+import mdx from './CartItem.mdx'
+
+import type { Meta, Story } from '@storybook/react'
+import type { CartItemProps } from '../'
+
+const product = {
+  name: 'Apple Magic Mouse',
+  imageUrl:
+    'https://assets.vtex.app/unsafe/216x216/center/middle/https%3A%2F%2Fstoreframework.vtexassets.com%2Farquivos%2Fids%2F190902%2Funsplash-magic-mouse.jpg%3Fv%3D637800136963870000',
+  price: {
+    listing: 999,
+    spot: 950,
+  },
+}
+
+const CartItemTemplate: Story<CartItemProps> = ({ testId }) => {
+  return (
+    <CartItem testId={testId}>
+      <CartItemContent>
+        <CartItemImage>
+          <img alt={product.name} src={product.imageUrl} />
+        </CartItemImage>
+
+        <CartItemSummary>
+          <CartItemTitle>{product.name}</CartItemTitle>
+
+          <CartItemPrices>
+            <Price variant="listing" value={product.price.listing} />
+            <Price variant="spot" value={product.price.spot} />
+          </CartItemPrices>
+        </CartItemSummary>
+      </CartItemContent>
+
+      <CartItemActions>
+        <Button>Remove</Button>
+
+        <QuantitySelector
+          quantity={1}
+          leftButtonProps={{ icon: <span>-</span> }}
+          rightButtonProps={{ icon: <span>+</span> }}
+          inputProps={{ readOnly: true }}
+        />
+      </CartItemActions>
+    </CartItem>
+  )
+}
+
+export const Default = CartItemTemplate.bind({})
+
+Default.storyName = 'CartItem'
+
+export default {
+  title: 'Molecules/CartItem',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta

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

package/src/molecules/QuantitySelector/stories/QuantitySelector.mdx

@@ -7,7 +7,7 @@ import QuantitySelector from '../QuantitySelector'
 ## Default Style
 
 <Canvas>
-  <Story id="molecules-quantityselector--default-style" />
+  <Story id="molecules-quantityselector--quantity-selector" />
 </Canvas>
 
 # Props

package/src/molecules/SkuSelector/SkuSelector.test.tsx

@@ -0,0 +1,42 @@
+import { render } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import React from 'react'
+
+import SkuSelector from './SkuSelector'
+
+const SkuSelectorTest = () => {
+  const options = [
+    { label: 'Option round', value: 'Round' },
+    { label: 'Option square', value: 'Square' },
+  ]
+
+  return <SkuSelector variant="label" options={options} activeValue="Square" />
+}
+
+describe('SkuSelector', () => {
+  describe('Data attributes', () => {
+    it('should have `data-fs-sku-selector` attribute', () => {
+      const { getByTestId } = render(<SkuSelectorTest />)
+
+      expect(getByTestId('store-sku-selector')).toHaveAttribute(
+        'data-fs-sku-selector'
+      )
+    })
+
+    it('should have `data-fs-sku-selector-variant` attribute', () => {
+      const { getByTestId } = render(<SkuSelectorTest />)
+
+      expect(getByTestId('store-sku-selector')).toHaveAttribute(
+        'data-fs-sku-selector-variant'
+      )
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have no violations', async () => {
+      const { getByTestId } = render(<SkuSelectorTest />)
+
+      expect(await axe(getByTestId('store-sku-selector'))).toHaveNoViolations()
+    })
+  })
+})