@faststore/ui 1.8.16 → 1.8.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "1.8.16",
+  "version": "1.8.17",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -76,7 +76,7 @@
     "@types/jest-axe": "^3.5.3",
     "@types/tabbable": "^3.1.1",
     "@types/testing-library__jest-dom": "^5.9.5",
-    "@vtex/theme-b2c-tailwind": "^1.8.16",
+    "@vtex/theme-b2c-tailwind": "^1.8.17",
     "@vtex/tsconfig": "^0.5.0",
     "chalk": "^5.0.0",
     "jest-axe": "^5.0.1",
@@ -89,5 +89,5 @@
     "tsdx": "^0.14.1",
     "typescript": "^4.2.4"
   },
-  "gitHead": "a600bcd470484f21abe7d03281b8e8c6bfe73140"
+  "gitHead": "fc944db9b694bfc8841ffbe3d7868bb460da5937"
 }

package/src/index.ts

@@ -54,6 +54,32 @@ export { default as Incentive } from './atoms/Incentive'
 export type { IncentiveProps } from './atoms/Incentive'
 
 // Molecules
+export {
+  default as ProductCard,
+  ProductCardImage,
+  ProductCardContent,
+  ProductCardActions,
+} from './molecules/ProductCard'
+export type {
+  ProductCardProps,
+  ProductCardImageProps,
+  ProductCardContentProps,
+  ProductCardActionsProps,
+} from './molecules/ProductCard'
+
+export {
+  default as Card,
+  CardImage,
+  CardContent,
+  CardActions,
+} from './molecules/Card'
+export type {
+  CardProps,
+  CardImageProps,
+  CardContentProps,
+  CardActionsProps,
+} from './molecules/Card'
+
 export { default as Bullets } from './molecules/Bullets'
 export type { BulletsProps } from './molecules/Bullets'
 
@@ -150,18 +176,6 @@ export type {
 } from './molecules/Dropdown'
 
 // Organisms
-export {
-  default as Card,
-  CardImage,
-  CardContent,
-  CardActions,
-} from './organisms/Card'
-export type {
-  CardProps,
-  CardImageProps,
-  CardContentProps,
-  CardActionsProps,
-} from './organisms/Card'
 
 // Hooks
 export { default as useSlider } from './hooks/useSlider'

package/src/{organisms → molecules}/Card/stories/Card.mdx

@@ -8,7 +8,7 @@ import CardActions from '../CardActions'
 # Card
 
 <Canvas>
-  <Story id="organisms-card--card" />
+  <Story id="molecules-card--card" />
 </Canvas>
 
 ## Components

package/src/molecules/Card/stories/Card.stories.tsx

@@ -0,0 +1,63 @@
+import type { Story, Meta } from '@storybook/react'
+import React from 'react'
+
+// Atoms
+import Icon from '../../../atoms/Icon'
+// Card components
+import CardComponent from '../Card'
+import CardImage from '../CardImage'
+import CardContent from '../CardContent'
+import CardActions from '../CardActions'
+import type { CardProps } from '../Card'
+import mdx from './Card.mdx'
+
+const RightArrow = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+  >
+    <path
+      d="M10.6553 3.40717C10.3624 3.11428 9.88756 3.11428 9.59467 3.40717C9.30178 3.70006 9.30178 4.17494 9.59467 4.46783L13.3768 8.25H2.8125C2.39829 8.25 2.0625 8.58579 2.0625 9C2.0625 9.41421 2.39829 9.75 2.8125 9.75H13.3768L9.59467 13.5322C9.30178 13.8251 9.30178 14.2999 9.59467 14.5928C9.88756 14.8857 10.3624 14.8857 10.6553 14.5928L15.7178 9.53033C15.8643 9.38388 15.9375 9.19194 15.9375 9C15.9375 8.89831 15.9173 8.80134 15.8806 8.71291C15.844 8.62445 15.7897 8.54158 15.7178 8.46967L10.6553 3.40717Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+const CardTemplate: Story<CardProps> = ({ testId }) => {
+  return (
+    <CardComponent testId={testId}>
+      <CardImage>
+        <img
+          alt="A person with hands on the pocket, carrying a round straw bag"
+          src="https://storecomponents.vtex.app/assets/fit-in/1280x613/center/middle/https%3A%2F%2Fstorecomponents.vtexassets.com%2Fassets%2Fvtex.file-manager-graphql%2Fimages%2Fedce348c-068c-4fb9-91f2-7d235d596e0f___b2822f893b14f87337d08f07f0e520ab.jpg"
+        />
+      </CardImage>
+      <CardContent>
+        <h3>Get to know our next release</h3>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Evehicula in
+          turpis sit ametl.{' '}
+        </p>
+      </CardContent>
+      <CardActions>
+        <a href="/">
+          Check new releases <Icon component={<RightArrow />} />
+        </a>
+      </CardActions>
+    </CardComponent>
+  )
+}
+
+export const Card = CardTemplate.bind({})
+Card.storyName = 'Card'
+
+export default {
+  title: 'Molecules/Card',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta

package/src/molecules/ProductCard/ProductCard.test.tsx

@@ -0,0 +1,75 @@
+import { render } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import React from 'react'
+
+import ProductCard from './ProductCard'
+import ProductCardImage from './ProductCardImage'
+import ProductCardContent from './ProductCardContent'
+import ProductCardActions from './ProductCardActions'
+
+const TestProductCard = () => {
+  return (
+    <ProductCard>
+      <ProductCardImage>
+        <div>An image</div>
+      </ProductCardImage>
+      <ProductCardContent>
+        <h3>A title</h3>
+        <p>A little text here: The quick brown fox jumps over the lazy dog.</p>
+      </ProductCardContent>
+      <ProductCardActions>
+        <button>A button</button>
+      </ProductCardActions>
+    </ProductCard>
+  )
+}
+
+describe('ProductCard', () => {
+  let productCard: HTMLElement
+  let productCardImage: HTMLElement
+  let productCardContent: HTMLElement
+  let productCardActions: HTMLElement
+  let productCardContainer: HTMLElement
+
+  beforeEach(() => {
+    const { getByTestId, container } = render(<TestProductCard />)
+
+    productCardContainer = container
+    productCard = getByTestId('store-product-card')
+    productCardImage = getByTestId('store-product-card-image')
+    productCardContent = getByTestId('store-product-card-content')
+    productCardActions = getByTestId('store-product-card-actions')
+  })
+
+  describe('Data attributes', () => {
+    it('`ProductCard` component should have `data-store-product-card` attribute', () => {
+      expect(productCard).toHaveAttribute('data-store-product-card')
+    })
+
+    it('`ProductCardContent` component should have `data-product-card-content` attribute', () => {
+      expect(productCardContent).toHaveAttribute('data-product-card-content')
+    })
+
+    it('`ProductCardImage` component should have `data-product-card-image` attribute', () => {
+      expect(productCardImage).toHaveAttribute('data-product-card-image')
+    })
+
+    it('`ProductCardActions` component should have `data-product-card-actions` attribute', () => {
+      expect(productCardActions).toHaveAttribute('data-product-card-actions')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should not have violations', async () => {
+      expect(await axe(productCardContainer)).toHaveNoViolations()
+    })
+
+    it('`ProductCard` component should be an `article`', () => {
+      expect(productCard.tagName).toEqual('ARTICLE')
+    })
+
+    it('`productCardContent` component should be an `section`', () => {
+      expect(productCardContent.tagName).toEqual('SECTION')
+    })
+  })
+})

package/src/molecules/ProductCard/ProductCard.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface ProductCardProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+}
+
+const ProductCard = forwardRef<HTMLDivElement, ProductCardProps>(function Card(
+  { testId = 'store-product-card', children, ...otherProps },
+  ref
+) {
+  return (
+    <article
+      ref={ref}
+      data-store-product-card
+      data-testid={testId}
+      {...otherProps}
+    >
+      {children}
+    </article>
+  )
+})
+
+export default ProductCard

package/src/molecules/ProductCard/ProductCardActions.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface ProductCardActionsProps
+  extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const ProductCardActions = forwardRef<HTMLDivElement, ProductCardActionsProps>(
+  function CardActions(
+    { testId = 'store-product-card-actions', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <div
+        ref={ref}
+        data-product-card-actions
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+export default ProductCardActions

package/src/molecules/ProductCard/ProductCardContent.tsx

@@ -0,0 +1,29 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const ProductCardContent = forwardRef<HTMLElement, ProductCardContentProps>(
+  function CardContent(
+    { testId = 'store-product-card-content', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <section
+        ref={ref}
+        data-product-card-content
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </section>
+    )
+  }
+)
+
+export default ProductCardContent

package/src/molecules/ProductCard/ProductCardImage.tsx

@@ -0,0 +1,29 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface ProductCardImageProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const ProductCardImage = forwardRef<HTMLDivElement, ProductCardImageProps>(
+  function ProductCardImage(
+    { testId = 'store-product-card-image', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <div
+        ref={ref}
+        data-product-card-image
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+export default ProductCardImage

package/src/molecules/ProductCard/index.tsx

@@ -0,0 +1,11 @@
+export { default } from './ProductCard'
+export type { ProductCardProps } from './ProductCard'
+
+export { default as ProductCardImage } from './ProductCardImage'
+export type { ProductCardImageProps } from './ProductCardImage'
+
+export { default as ProductCardContent } from './ProductCardContent'
+export type { ProductCardContentProps } from './ProductCardContent'
+
+export { default as ProductCardActions } from './ProductCardActions'
+export type { ProductCardActionsProps } from './ProductCardActions'

package/src/molecules/ProductCard/stories/ProductCard.mdx

@@ -0,0 +1,55 @@
+import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
+
+import ProductCard from '../ProductCard'
+import ProductCardImage from '../ProductCardImage'
+import ProductCardContent from '../ProductCardContent'
+import ProductCardActions from '../ProductCardActions'
+
+# ProductCard
+
+<Canvas>
+  <Story id="molecules-productcard--product-card" />
+</Canvas>
+
+The `ProductCard` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
+
+- `ProductCard`: the wrapper of the product card component;
+- `ProductCardImage`: the wrapper component for the content's image;
+- `ProductCardContent`: the wrapper component for the content's details;
+- `ProductCardActions`: the wrapper component for the content's CTAs (call-to-action);
+
+## Props
+
+All Product Card related components support all attributes also supported by the `<div>` tag.
+
+### `ProductCard`
+
+<ArgsTable of={ProductCard} />
+
+### `ProductCardImage`
+
+<ArgsTable of={ProductCardImage} />
+
+### `ProductCardContent`
+
+<ArgsTable of={ProductCardContent} />
+
+### `ProductCardActions`
+
+<ArgsTable of={ProductCardActions} />
+
+## CSS Selectors
+
+```css
+[data-store-product-card] {
+}
+
+[data-product-card-image] {
+}
+
+[data-product-card-content] {
+}
+
+[data-product-card-actions] {
+}
+```

package/src/{organisms/Card/stories/Card.stories.tsx → molecules/ProductCard/stories/ProductCard.stories.tsx}

@@ -6,23 +6,23 @@ import Price from '../../../atoms/Price'
 import Badge from '../../../atoms/Badge'
 import Button from '../../../atoms/Button'
 // Card components
-import CardComponent from '../Card'
-import CardImage from '../CardImage'
-import CardContent from '../CardContent'
-import CardActions from '../CardActions'
-import type { CardProps } from '../Card'
-import mdx from './Card.mdx'
+import ProductCardComponent from '../ProductCard'
+import ProductCardImage from '../ProductCardImage'
+import ProductCardContent from '../ProductCardContent'
+import ProductCardActions from '../ProductCardActions'
+import type { ProductCardProps } from '../ProductCard'
+import mdx from './ProductCard.mdx'
 
-const CardTemplate: Story<CardProps> = ({ testId }) => {
+const ProductCardTemplate: Story<ProductCardProps> = ({ testId }) => {
   return (
-    <CardComponent testId={testId}>
-      <CardImage>
+    <ProductCardComponent testId={testId}>
+      <ProductCardImage>
         <img
           alt="A vintage camera"
           src="https://storecomponents.vtex.app/assets/fit-in/480x480/center/middle/https%3A%2F%2Fstorecomponents.vtexassets.com%2Farquivos%2Fids%2F155481%2FFrame-3.jpg%3Fv%3D636793814536230000"
         />
-      </CardImage>
-      <CardContent>
+      </ProductCardImage>
+      <ProductCardContent>
         <h3>Vintage Top Camera</h3>
         <div>
           <Price
@@ -34,11 +34,11 @@ const CardTemplate: Story<CardProps> = ({ testId }) => {
           <Price value={68.9} variant="selling" formatter={formatter} />
         </div>
         <Badge>15% OFF</Badge>
-      </CardContent>
-      <CardActions>
+      </ProductCardContent>
+      <ProductCardActions>
         <Button onClick={() => null}>Add to Cart</Button>
-      </CardActions>
-    </CardComponent>
+      </ProductCardActions>
+    </ProductCardComponent>
   )
 }
 
@@ -49,11 +49,11 @@ function formatter(price: number) {
   }).format(price)
 }
 
-export const Card = CardTemplate.bind({})
-Card.storyName = 'Card'
+export const ProductCard = ProductCardTemplate.bind({})
+ProductCard.storyName = 'ProductCard'
 
 export default {
-  title: 'Organisms/Card',
+  title: 'Molecules/ProductCard',
   parameters: {
     docs: {
       page: mdx,