@faststore/ui 2.0.2-alpha.0 → 2.0.4-alpha.0

package/src/molecules/CartItem/CartItem.test.tsx

@@ -1,79 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import CartItem, {
-  CartItemActions,
-  CartItemContent,
-  CartItemImage,
-  CartItemPrices,
-  CartItemSummary,
-  CartItemTitle,
-} 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 CartItemTest = () => {
-  return (
-    <CartItem>
-      <CartItemContent>
-        <CartItemImage>
-          <img alt={product.name} src={product.imageUrl} />
-        </CartItemImage>
-
-        <CartItemSummary>
-          <CartItemTitle>{product.name}</CartItemTitle>
-
-          <CartItemPrices>
-            <span>{product.price.listing}</span>
-            <span>{product.price.spot}</span>
-          </CartItemPrices>
-        </CartItemSummary>
-      </CartItemContent>
-
-      <CartItemActions>
-        <button>Remove</button>
-
-        <span>Quantity Selector</span>
-      </CartItemActions>
-    </CartItem>
-  )
-}
-
-describe('`CartItem`', () => {
-  describe('Data attributes', () => {
-    it(`should have the correct format`, () => {
-      const testIdToDataAttributeMap = {
-        'store-cart-item': 'data-fs-cart-item',
-        'store-cart-item-content': 'data-fs-cart-item-content',
-        'store-cart-item-image': 'data-fs-cart-item-image',
-        'store-cart-item-summary': 'data-fs-cart-item-summary',
-        'store-cart-item-title': 'data-fs-cart-item-title',
-        'store-cart-item-prices': 'data-fs-cart-item-prices',
-        'store-cart-item-actions': 'data-fs-cart-item-actions',
-      }
-      const { getByTestId } = render(<CartItemTest />)
-
-      for (const [testId, dataAttribute] of Object.entries(testIdToDataAttributeMap)) {
-        expect(getByTestId(testId)).toHaveAttribute(dataAttribute)
-      }
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { getByTestId } = render(<CartItemTest />)
-
-      expect(await axe(getByTestId('store-cart-item'))).toHaveNoViolations()
-      expect(await axe(getByTestId('store-cart-item'))).toHaveNoIncompletes()
-    })
-  })
-})

package/src/molecules/Dropdown/Dropdown.test.tsx

@@ -1,275 +0,0 @@
-import { fireEvent, render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-import { act } from 'react-dom/test-utils'
-
-import Dropdown, { DropdownButton, DropdownItem, DropdownMenu } from '.'
-
-type SimpleDropdownProps = {
-  onDismiss?(): void
-}
-
-const SimpleDropdown = ({ onDismiss }: SimpleDropdownProps) => (
-  <Dropdown onDismiss={onDismiss}>
-    <DropdownButton>Dropdown Button</DropdownButton>
-    <DropdownMenu>
-      <DropdownItem>Dropdown Item 1</DropdownItem>
-      <DropdownItem>Dropdown Item 2</DropdownItem>
-      <DropdownItem>Dropdown Item 3</DropdownItem>
-    </DropdownMenu>
-  </Dropdown>
-)
-
-describe('Dropdown', () => {
-  it('Should render the DropdownButton component', () => {
-    const { getByText, queryByTestId } = render(<SimpleDropdown />)
-
-    expect(getByText(/Dropdown Button/g)).toBeInTheDocument()
-    expect(queryByTestId('store-dropdown-menu')).not.toBeInTheDocument()
-  })
-
-  it('Should render DropdownMenu when DropdownButton is clicked', () => {
-    const { getByText, queryByTestId } = render(<SimpleDropdown />)
-
-    const dropdownButton = getByText(/Dropdown Button/g)
-
-    fireEvent.click(dropdownButton)
-    expect(queryByTestId('store-dropdown-menu')).toBeInTheDocument()
-  })
-
-  it('Should render DropdownMenu in correct position', () => {
-    const { getByText, getByTestId } = render(
-      <>
-        <SimpleDropdown />
-        <div style={{ height: 2000, width: 200 }}>Large element</div>
-      </>
-    )
-
-    const dropdownButton = getByText(/Dropdown Button/g)
-
-    fireEvent.click(dropdownButton)
-
-    const dropdownMenu = getByTestId('store-dropdown-menu')
-
-    expect(dropdownMenu).toBeInTheDocument()
-
-    const buttonRect = dropdownButton?.getBoundingClientRect()
-
-    fireEvent.scroll(window, { target: { scrollY: 300 } })
-
-    const topLevel: number = buttonRect?.top ?? 0
-    const topOffset: number = buttonRect?.height ?? 0
-    const topPosition =
-      topLevel + topOffset + document.documentElement.scrollTop
-
-    const leftLevel = buttonRect?.left ?? 0
-    const leftPosition = leftLevel + document.documentElement.scrollLeft
-
-    const topMenuPosition = dropdownMenu.style.top
-    const leftMenuPosition = dropdownMenu.style.left
-
-    expect(topMenuPosition).toEqual(`${topPosition}px`)
-    expect(leftMenuPosition).toEqual(`${leftPosition}px`)
-  })
-
-  it('Should render 3 dropdownItems when DropdownMenu is opened', () => {
-    const { getByText, queryAllByTestId } = render(<SimpleDropdown />)
-
-    const dropdownButton = getByText(/Dropdown Button/g)
-
-    fireEvent.click(dropdownButton)
-
-    expect(queryAllByTestId('store-dropdown-item')).toHaveLength(3)
-  })
-
-  it('Should close DropdownMenu and emit onDismiss when DropdownButton is clicked twice', () => {
-    const onDismissMock = jest.fn()
-
-    const { getByText, queryByTestId } = render(
-      <SimpleDropdown onDismiss={onDismissMock} />
-    )
-
-    const dropdownButton = getByText(/Dropdown Button/g)
-
-    fireEvent.click(dropdownButton)
-    expect(queryByTestId('store-dropdown-menu')).toBeInTheDocument()
-
-    fireEvent.click(dropdownButton)
-    expect(queryByTestId('store-dropdown-menu')).not.toBeInTheDocument()
-    expect(onDismissMock).toHaveBeenCalledTimes(1)
-  })
-
-  it('Should close menu and emit onDismiss event when Overlay is clicked', () => {
-    const onDismissMock = jest.fn()
-    const { getByText, queryByTestId, getByTestId } = render(
-      <SimpleDropdown onDismiss={onDismissMock} />
-    )
-
-    const dropdownButton = getByText(/Dropdown Button/g)
-
-    dropdownButton.click()
-
-    const dropdownMenu = queryByTestId('store-dropdown-menu')
-
-    expect(dropdownMenu).toBeInTheDocument()
-
-    const overlay = getByTestId('store-dropdown-menu-overlay')
-
-    act(() => {
-      fireEvent.click(overlay)
-    })
-
-    expect(queryByTestId('store-dropdown-menu')).not.toBeInTheDocument()
-    expect(onDismissMock).toHaveBeenCalledTimes(1)
-  })
-
-  it('Should close menu and emit onDismiss event when other element is clicked', () => {
-    const onDismissMock = jest.fn()
-    const { getByText, queryByTestId } = render(
-      <>
-        <span>Other Element</span>
-        <SimpleDropdown onDismiss={onDismissMock} />
-      </>
-    )
-
-    const dropdownButton = getByText(/Dropdown Button/g)
-
-    dropdownButton.click()
-
-    const dropdownMenu = queryByTestId('store-dropdown-menu')
-
-    expect(dropdownMenu).toBeInTheDocument()
-
-    const otherElement = getByText(/Other Element/g)
-
-    act(() => {
-      otherElement.click()
-    })
-
-    expect(dropdownMenu).not.toBeInTheDocument()
-    expect(onDismissMock).toHaveBeenCalledTimes(1)
-  })
-
-  it('Should close menu, emit onDismiss and emit onClose, event when an item is clicked', () => {
-    const onDismissMock = jest.fn()
-    const onClickItemMock = jest.fn()
-
-    const { getByText, queryByTestId, getByTestId } = render(
-      <Dropdown onDismiss={onDismissMock}>
-        <DropdownButton>Dropdown Button</DropdownButton>
-        <DropdownMenu>
-          <DropdownItem onClick={onClickItemMock}>Dropdown Item 1</DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    )
-
-    const dropdownButton = getByText(/Dropdown Button/g)
-
-    dropdownButton.click()
-
-    const dropdownMenu = queryByTestId('store-dropdown-menu')
-
-    expect(dropdownMenu).toBeInTheDocument()
-
-    const firstItem = getByTestId('store-dropdown-item')
-
-    act(() => {
-      firstItem.click()
-    })
-
-    expect(dropdownMenu).not.toBeInTheDocument()
-    expect(onDismissMock).toHaveBeenCalledTimes(1)
-    expect(onClickItemMock).toHaveBeenCalledTimes(1)
-  })
-})
-
-describe('Accessibility', () => {
-  const getDropdownStructures = () => {
-    const onDismissMock = jest.fn()
-    const { getByText, queryAllByTestId, getByTestId, queryByTestId } = render(
-      <SimpleDropdown onDismiss={onDismissMock} />
-    )
-
-    const dropdownButton = getByText(/Dropdown Button/g)
-
-    fireEvent.click(dropdownButton)
-
-    const dropdownItems = queryAllByTestId('store-dropdown-item')
-    const overlay = getByTestId('store-dropdown-menu-overlay')
-    const menu = queryByTestId('store-dropdown-menu')
-
-    return { dropdownItems, overlay, menu, onDismissMock }
-  }
-
-  it('Should not have violations', async () => {
-    const { getByText, getByTestId, container } = render(<SimpleDropdown />)
-
-    const dropdownButton = getByText(/Dropdown Button/g)
-
-    fireEvent.click(dropdownButton)
-
-    const menu = getByTestId('store-dropdown-menu')
-
-    expect(await axe(container)).toHaveNoViolations()
-    expect(await axe(container)).toHaveNoIncompletes()
-    expect(await axe(menu)).toHaveNoViolations()
-    expect(await axe(menu)).toHaveNoIncompletes()
-  })
-
-  it('Should close Dropdown menu when Escape key is pressed', async () => {
-    const { overlay, menu, onDismissMock } = getDropdownStructures()
-
-    fireEvent.keyDown(overlay, {
-      key: 'Escape',
-    })
-
-    expect(menu).not.toBeInTheDocument()
-    expect(onDismissMock).toHaveBeenCalledTimes(1)
-  })
-
-  it('Should focus on second DropdownItem when ArrowDown key is pressed', async () => {
-    const { overlay, dropdownItems } = getDropdownStructures()
-
-    fireEvent.keyDown(overlay, {
-      key: 'ArrowDown',
-    })
-
-    expect(dropdownItems[1]).toHaveFocus()
-  })
-
-  it('Should focus on second DropdownItem when ArrowUp key is pressed twice', () => {
-    const { overlay, dropdownItems } = getDropdownStructures()
-
-    fireEvent.keyDown(overlay, {
-      key: 'ArrowUp',
-    })
-    fireEvent.keyDown(overlay, {
-      key: 'ArrowUp',
-    })
-
-    expect(dropdownItems[1]).toHaveFocus()
-  })
-
-  it('Should focus on last DropdownItem when End key is pressed', () => {
-    const { overlay, dropdownItems } = getDropdownStructures()
-
-    fireEvent.keyDown(overlay, {
-      key: 'End',
-    })
-
-    expect(dropdownItems[2]).toHaveFocus()
-  })
-
-  it('Should focus on first DropdownItem when Home key is pressed', () => {
-    const { overlay, dropdownItems } = getDropdownStructures()
-
-    fireEvent.keyDown(overlay, {
-      key: 'ArrowUp',
-    })
-    fireEvent.keyDown(overlay, {
-      key: 'Home',
-    })
-
-    expect(dropdownItems[0]).toHaveFocus()
-  })
-})

package/src/molecules/Form/Form.test.tsx

@@ -1,61 +0,0 @@
-import { fireEvent, render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import type { FormProps } from '.'
-import { Label, Input, Checkbox, Button } from '../..'
-import Form from './Form'
-
-const TestForm = ({ onSubmit }: Pick<FormProps, 'onSubmit'>) => (
-  <Form onSubmit={onSubmit}>
-    <h1>Sign up & save 15% off your first order</h1>
-    <h2>
-      Be the first to hear about special offers, new product launches, gift
-      ideas and more.
-    </h2>
-    <div>
-      <Label htmlFor="name">Name:</Label>
-      <Input
-        id="name"
-        placeholder="Enter your name"
-        required
-        testId="test-submit-input"
-      />
-    </div>
-    <div>
-      <Label htmlFor="email">Email:</Label>
-      <Input id="email" placeholder="Enter your email" required />
-    </div>
-    <div>
-      <Label>
-        <Checkbox required />I agree to receive emails from Brand. View our{' '}
-        <a href="/">Privacy Policy</a>.
-      </Label>
-    </div>
-    <Button type="submit">Subscribe</Button>
-  </Form>
-)
-
-describe('Form', () => {
-  it('should have `data-fs-form` attribute', () => {
-    const { getByTestId } = render(<TestForm />)
-
-    expect(getByTestId('store-form')).toHaveAttribute('data-fs-form')
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { getByTestId } = render(<TestForm />)
-
-      expect(await axe(getByTestId('store-form'))).toHaveNoViolations()
-    })
-
-    it('should be able to submit from input', async () => {
-      const mockOnSubmit = jest.fn()
-      const { getByTestId } = render(<TestForm onSubmit={mockOnSubmit} />)
-
-      fireEvent.submit(getByTestId('test-submit-input'))
-      expect(mockOnSubmit).toHaveBeenCalled()
-    })
-  })
-})

package/src/molecules/Gift/Gift.test.tsx

@@ -1,53 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Gift from './Gift'
-import GiftImage from './GiftImage'
-import GiftContent from './GiftContent'
-
-const GiftTest = () => {
-  return (
-    <Gift>
-      <GiftImage>
-        <div>An image</div>
-      </GiftImage>
-      <GiftContent>
-        <h3>Product Name</h3>
-        <p>89.90</p>
-        <span>Free</span>
-      </GiftContent>
-    </Gift>
-  )
-}
-
-describe('Gift', () => {
-  describe('Data attributes', () => {
-    const { getByTestId } = render(<GiftTest />)
-
-    const gift = getByTestId('store-gift')
-    const giftImage = getByTestId('store-gift-image')
-    const giftContent = getByTestId('store-gift-content')
-
-    it('`Gift` component should have `data-fs-gift` attribute', () => {
-      expect(gift).toHaveAttribute('data-fs-gift')
-    })
-
-    it('`GiftImage` component should have `data-fs-gift-image` attribute', () => {
-      expect(giftImage).toHaveAttribute('data-fs-gift-image')
-    })
-
-    it('`GiftContent` component should have `data-fs-gift-content` attribute', () => {
-      expect(giftContent).toHaveAttribute('data-fs-gift-content')
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { getByTestId } = render(<GiftTest />)
-
-      expect(await axe(getByTestId('store-gift'))).toHaveNoViolations()
-      expect(await axe(getByTestId('store-gift'))).toHaveNoIncompletes()
-    })
-  })
-})

package/src/molecules/IconButton/IconButton.test.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-
-import IconButton from './IconButton'
-
-describe('IconButton', () => {
-  const testId = 'store-icon-button'
-
-  it('data-fs-icon-button is present', () => {
-    const { getByTestId } = render(
-      <IconButton testId={testId} aria-label="foo" icon={<div>foo</div>} />
-    )
-
-    const iconButton = getByTestId(testId)
-
-    expect(iconButton).toBeInTheDocument()
-    expect(iconButton).toHaveAttribute('data-fs-icon-button')
-  })
-
-  it('icon is present', () => {
-    const { getByTestId } = render(
-      <IconButton
-        testId={testId}
-        aria-label="foo"
-        icon={<div data-testid="icon">foo</div>}
-      />
-    )
-
-    expect(getByTestId('icon')).toBeInTheDocument()
-  })
-})

package/src/molecules/IconButton/IconButton.tsx

@@ -1,35 +0,0 @@
-import type { ReactNode } from 'react'
-import React, { forwardRef } from 'react'
-
-import Button from '../../atoms/Button'
-import type { ButtonProps } from '../../atoms/Button'
-import Icon from '../../atoms/Icon'
-
-export interface Props extends Omit<ButtonProps, 'children' | 'aria-label'> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-  /**
-   * A React component that will be rendered as an icon.
-   */
-  icon: ReactNode
-
-  /**
-   * Label to be required for accessibility.
-   */
-  'aria-label': string
-}
-
-const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
-  { icon, testId = 'store-icon-button', ...buttonProps },
-  ref
-) {
-  return (
-    <Button ref={ref} data-fs-icon-button testId={testId} {...buttonProps}>
-      <Icon component={icon} />
-    </Button>
-  )
-})
-
-export default IconButton

package/src/molecules/IconButton/index.tsx

@@ -1,2 +0,0 @@
-export { default } from './IconButton'
-export type { Props as IconButtonProps } from './IconButton'

package/src/molecules/IconButton/stories/IconButton.mdx

@@ -1,27 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import IconButton from '../IconButton'
-
-# Icon Button
-
-## Default
-
-<Canvas>
-  <Story id="molecules-iconbutton--default" />
-</Canvas>
-
-## Custom Style
-
-<Canvas>
-  <Story id="molecules-iconbutton--custom-style" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={IconButton} />
-
-## CSS Selectors
-```css
-[data-fs-icon-button] {}
-```
-
-This component inherits [Button](?path=/docs/atoms-button--button#css-selectors) css selectors.

package/src/molecules/IconButton/stories/IconButton.stories.tsx

@@ -1,35 +0,0 @@
-import type { Story, Meta } from '@storybook/react'
-import React from 'react'
-
-import type { Props as IconButtonProps } from '../IconButton'
-import Component from '../IconButton'
-import ShoppingCartIcon from '../../../atoms/Icon/stories/assets/ShoppingCart'
-import mdx from './IconButton.mdx'
-
-const IconButtonTemplate: Story<IconButtonProps> = (props) => (
-  <Component {...props} icon={<ShoppingCartIcon />} aria-label="Buy" />
-)
-
-export const Default = IconButtonTemplate.bind({})
-
-const IconButtonCustomTemplate: Story<IconButtonProps> = (props) => {
-  return (
-    <Component
-      {...props}
-      className="iconButton"
-      icon={<ShoppingCartIcon />}
-      aria-label="Buy"
-    />
-  )
-}
-
-export const CustomStyle = IconButtonCustomTemplate.bind({})
-
-export default {
-  title: 'Molecules/IconButton',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

package/src/molecules/LoadingButton/LoadingButton.test.tsx

@@ -1,14 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import LoadingButton from './LoadingButton'
-
-describe('Loading Button', () => {
-  it('`data-fs-loading-button` is present', () => {
-    const { getByTestId } = render(<LoadingButton loading />)
-
-    expect(getByTestId('store-loading-button')).toHaveAttribute(
-      'data-fs-loading-button'
-    )
-  })
-})