@faststore/ui 1.11.2 → 1.11.8

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.8 (2022-09-01)
+
+
+### Bug Fixes
+
+* Lint issues ([#1450](https://github.com/vtex/faststore/issues/1450)) ([139de34](https://github.com/vtex/faststore/commit/139de346d5d8f094caff4cc58f340f85043e1fb4))
+
+
+
 ## [1.11.2](https://github.com/vtex/faststore/compare/v1.11.1...v1.11.2) (2022-08-10)
 
 **Note:** Version bump only for package @faststore/ui

package/dist/index.d.ts

@@ -34,6 +34,8 @@ export { default as Label } from './atoms/Label';
 export type { LabelProps } from './atoms/Label';
 export { default as Incentive } from './atoms/Incentive';
 export type { IncentiveProps } from './atoms/Incentive';
+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 AggregateRating } from './molecules/AggregateRating';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as Spinner } from './atoms/Spinner';
 export { default as Label } from './atoms/Label';
 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 AggregateRating } from './molecules/AggregateRating';
 export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';

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/Gift/Gift.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+import type { ReactNode } from 'react';
+export interface GiftProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * 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;
+}
+declare const Gift: React.ForwardRefExoticComponent<GiftProps & React.RefAttributes<HTMLDivElement>>;
+export default Gift;

package/dist/molecules/Gift/Gift.js

@@ -0,0 +1,9 @@
+import React, { forwardRef } from 'react';
+import Icon from '../../atoms/Icon';
+const Gift = forwardRef(function Gift({ icon, testId = 'store-gift', children, ...otherProps }, ref) {
+    return (React.createElement("div", Object.assign({ ref: ref, "data-fs-gift": true, "data-testid": testId }, otherProps),
+        icon && React.createElement(Icon, { component: icon, "data-fs-gift-icon": true }),
+        React.createElement("div", { "data-fs-gift-wrapper": true }, children)));
+});
+export default Gift;
+//# sourceMappingURL=Gift.js.map

package/dist/molecules/Gift/Gift.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gift.js","sourceRoot":"","sources":["../../../src/molecules/Gift/Gift.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAIzC,OAAO,IAAI,MAAM,kBAAkB,CAAA;AAcnC,MAAM,IAAI,GAAG,UAAU,CAA4B,SAAS,IAAI,CAC9D,EAAE,IAAI,EAAE,MAAM,GAAG,YAAY,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACxD,GAAG;IAEH,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,uCAA4B,MAAM,IAAM,UAAU;QAC5D,IAAI,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,8BAAsB;QACpD,6DAA2B,QAAQ,CAAO,CACtC,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}

package/dist/molecules/Gift/GiftContent.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+export interface GiftContentProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+}
+declare const GiftContent: React.ForwardRefExoticComponent<GiftContentProps & React.RefAttributes<HTMLElement>>;
+export default GiftContent;

package/dist/molecules/Gift/GiftContent.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const GiftContent = forwardRef(function GiftContent({ testId = 'store-gift-content', children, ...otherProps }, ref) {
+    return (React.createElement("section", Object.assign({ ref: ref, "data-fs-gift-content": true, "data-testid": testId }, otherProps), children));
+});
+export default GiftContent;
+//# sourceMappingURL=GiftContent.js.map

package/dist/molecules/Gift/GiftContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GiftContent.js","sourceRoot":"","sources":["../../../src/molecules/Gift/GiftContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,MAAM,GAAG,oBAAoB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC1D,GAAG;IAEH,OAAO,CACL,+CACE,GAAG,EAAE,GAAG,+CAEK,MAAM,IACf,UAAU,GAEb,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/molecules/Gift/GiftImage.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+export interface GiftImageProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+}
+declare const GiftImage: React.ForwardRefExoticComponent<GiftImageProps & React.RefAttributes<HTMLDivElement>>;
+export default GiftImage;

package/dist/molecules/Gift/GiftImage.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const GiftImage = forwardRef(function GiftImage({ testId = 'store-gift-image', children, ...otherProps }, ref) {
+    return (React.createElement("div", Object.assign({ ref: ref, "data-fs-gift-image": true, "data-testid": testId }, otherProps), children));
+});
+export default GiftImage;
+//# sourceMappingURL=GiftImage.js.map

package/dist/molecules/Gift/GiftImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GiftImage.js","sourceRoot":"","sources":["../../../src/molecules/Gift/GiftImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EAAE,MAAM,GAAG,kBAAkB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACxD,GAAG;IAEH,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,6CAAkC,MAAM,IAAM,UAAU,GAClE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

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

@@ -0,0 +1,6 @@
+export { default } from './Gift';
+export type { GiftProps } from './Gift';
+export { default as GiftContent } from './GiftContent';
+export type { GiftContentProps } from './GiftContent';
+export { default as GiftImage } from './GiftImage';
+export type { GiftImageProps } from './GiftImage';

package/dist/molecules/Gift/index.js

@@ -0,0 +1,4 @@
+export { default } from './Gift';
+export { default as GiftContent } from './GiftContent';
+export { default as GiftImage } from './GiftImage';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/Gift/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAGhC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AAGtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "1.11.2",
+  "version": "1.11.8",
   "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.10.34",
+    "@faststore/styles": "^1.11.8",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-actions": "^6.4.4",
     "@storybook/addon-docs": "^6.4.4",
@@ -79,11 +79,11 @@
     "react": "^17.0.2",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^17.0.2",
-    "shared": "^1.10.34",
+    "shared": "^1.11.8",
     "size-limit": "^7.0.8",
     "storybook-addon-themes": "^6.1.0",
     "tsdx": "^0.14.1",
     "typescript": "^4.2.4"
   },
-  "gitHead": "70ae3306209c6ee453cd169d6fdf7d2cf41cdf8b"
+  "gitHead": "3775ec32d866149eb6519e68b7b2b977ffc0dace"
 }

package/src/index.ts

@@ -54,6 +54,13 @@ export { default as Incentive } from './atoms/Incentive'
 export type { IncentiveProps } from './atoms/Incentive'
 
 // Molecules
+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'
 

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

@@ -0,0 +1,53 @@
+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/Gift/Gift.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+import type { ReactNode } from 'react'
+
+import Icon from '../../atoms/Icon'
+
+export interface GiftProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * 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
+}
+
+const Gift = forwardRef<HTMLDivElement, GiftProps>(function Gift(
+  { icon, testId = 'store-gift', children, ...otherProps },
+  ref
+) {
+  return (
+    <div ref={ref} data-fs-gift data-testid={testId} {...otherProps}>
+      {icon && <Icon component={icon} data-fs-gift-icon />}
+      <div data-fs-gift-wrapper>{children}</div>
+    </div>
+  )
+})
+
+export default Gift

package/src/molecules/Gift/GiftContent.tsx

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

package/src/molecules/Gift/GiftImage.tsx

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

package/src/molecules/Gift/index.tsx

@@ -0,0 +1,8 @@
+export { default } from './Gift'
+export type { GiftProps } from './Gift'
+
+export { default as GiftContent } from './GiftContent'
+export type { GiftContentProps } from './GiftContent'
+
+export { default as GiftImage } from './GiftImage'
+export type { GiftImageProps } from './GiftImage'

package/src/molecules/Gift/stories/Gift.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
+
+import Gift from '../Gift'
+
+# Gift
+
+<Canvas>
+  <Story id="molecules-gift--gift" />
+</Canvas>
+
+## Components
+
+The `Gift` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
+
+- `Gift`: the wrapper component, it can receive a `Icon` prop.
+- `GiftImage`: the component's that display the product image.
+- `GiftContent`: the component that can display the product's title, price, and a badge.
+
+## Props
+
+<ArgsTable of={Gift} />
+
+## CSS Selectors
+
+```css
+[data-fs-gift] {
+}
+
+[data-fs-gift-wrapper] {
+}
+
+[data-fs-gift-icon] {
+}
+
+[data-fs-gift-content] {
+}
+
+[data-fs-gift-image] {
+}
+```

package/src/molecules/Gift/stories/Gift.stories.tsx

@@ -0,0 +1,67 @@
+import type { Story, Meta } from '@storybook/react'
+import React, { useMemo } from 'react'
+
+import Badge from '../../../atoms/Badge/Badge'
+import Price from '../../../atoms/Price/Price'
+// Gift components
+import GiftComponent from '../Gift'
+import GiftContent from '../GiftContent'
+import GiftImage from '../GiftImage'
+import type { GiftProps } from '../Gift'
+import mdx from './Gift.mdx'
+
+const Tag = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+    <path fill="none" d="M0 0h256v256H0z" />
+    <path
+      d="M122.7 25.9 42 42l-16.1 80.7a8 8 0 0 0 2.2 7.2l104.4 104.4a7.9 7.9 0 0 0 11.3 0l90.5-90.5a7.9 7.9 0 0 0 0-11.3L129.9 28.1a8 8 0 0 0-7.2-2.2Z"
+      fill="none"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="16"
+    />
+    <circle cx="84" cy="84" r="12" />
+  </svg>
+)
+
+function useIntlFormatter(price: number) {
+  return useMemo(() => {
+    const formattedPrice = new Intl.NumberFormat('en-GB', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(price)
+
+    return formattedPrice
+  }, [price])
+}
+
+const GiftTemplate: Story<GiftProps> = ({ testId }) => (
+  <GiftComponent testId={testId} icon={<Tag />}>
+    <GiftImage>
+      <img
+        alt="Aedle VK-1 L Headphone"
+        src="https://assets.vtex.app/unsafe/1608x1206/center/middle/https%3A%2F%2Fstoreframework.vtexassets.com%2Farquivos%2Fids%2F190901%2Funsplash-headphone.jpg%3Fv%3D637800115948430000"
+      />
+    </GiftImage>
+    <GiftContent>
+      <h3>Get a pair of Aedle VK-1 L Headphone</h3>
+      <div>
+        <Price value={145} formatter={useIntlFormatter} />
+        <Badge>Free</Badge>
+      </div>
+    </GiftContent>
+  </GiftComponent>
+)
+
+export const Gift = GiftTemplate.bind({})
+Gift.storyName = 'Gift'
+
+export default {
+  title: 'Molecules/Gift',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta