@faststore/ui 2.0.6-alpha.0 → 2.0.9-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.9-alpha.0](https://github.com/vtex/faststore/compare/v2.0.8-alpha.0...v2.0.9-alpha.0) (2022-12-12)
+
+
+### Features
+
+* Create `Price` component ([#1548](https://github.com/vtex/faststore/issues/1548)) ([2d7418a](https://github.com/vtex/faststore/commit/2d7418ad45f42cdb0174d45d7c4de5b6d6e27f60))
+
+
+
+## [2.0.7-alpha.0](https://github.com/vtex/faststore/compare/v2.0.6-alpha.0...v2.0.7-alpha.0) (2022-12-09)
+
+
+### Features
+
+* Adds `DiscountBadge` component ([#1546](https://github.com/vtex/faststore/issues/1546)) ([9b2e279](https://github.com/vtex/faststore/commit/9b2e27940ffa9b52c9a62541a07e1f593a0bcfb7)), closes [#313](https://github.com/vtex/faststore/issues/313)
+
+
+
 ## [2.0.6-alpha.0](https://github.com/vtex/faststore/compare/v2.0.5-alpha.0...v2.0.6-alpha.0) (2022-12-08)
 
 

package/dist/components/molecules/PriceRange/PriceRange.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { AriaAttributes } from 'react';
-import type { PriceProps } from '../../atoms/Price';
+import type { PriceProps } from '@faststore/components';
 import type { SliderProps } from '../../atoms/Slider';
 export declare type PriceRangeProps = SliderProps & {
     /**

package/dist/components/molecules/PriceRange/PriceRange.js

@@ -1,5 +1,5 @@
 import React, { useRef, useImperativeHandle, forwardRef } from 'react';
-import Price from '../../atoms/Price';
+import { Price } from '@faststore/components';
 import Slider from '../../atoms/Slider';
 const PriceRange = forwardRef(function PriceRange({ className, formatter, max, min, step, onChange, onEnd, testId = 'store-price-range', variant, 'aria-label': ariaLabel, }, ref) {
     const sliderRef = useRef();

package/dist/components/molecules/PriceRange/PriceRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"PriceRange.js","sourceRoot":"","sources":["../../../../src/components/molecules/PriceRange/PriceRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGtE,OAAO,KAAK,MAAM,mBAAmB,CAAA;AACrC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AA2BvC,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,mBAAmB,EAC5B,OAAO,EACP,YAAY,EAAE,SAAS,GACxB,EACD,GAAG;IAEH,MAAM,SAAS,GAAG,MAAM,EAEpB,CAAA;IAEJ,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,mBAAmB,EAAE,CAAC,MAAoC,EAAE,EAAE;YAC5D,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAA;YAClB,SAAS,CAAC,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;QAC5C,CAAC;KACF,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,yEAAsC,MAAM,EAAE,SAAS,EAAE,SAAS;QAChE,oBAAC,MAAM,IACL,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,gBACA,SAAS,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EACtC,sBAAsB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACnC,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;gBAElD,OAAO,CACL,oBAAC,KAAK,IACJ,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,kCACS,KAAK,EAClC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,QAAQ,UAAU,QAAQ,CAAC,GAAG,UAAU,GAAG,GAAG,MAAM;qBAC3D,GACD,CACH,CAAA;YACH,CAAC,EACD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACnC,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;gBAElD,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,QAAQ,kCACc,KAAK,EAClC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,QAAQ,UAAU,QAAQ,CAAC,GAAG,UAAU,GAAG,GAAG,MAAM;qBAC3D,GACD,CACH,CAAA;YACH,CAAC,GACD,CACE,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"PriceRange.js","sourceRoot":"","sources":["../../../../src/components/molecules/PriceRange/PriceRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGtE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAG7C,OAAO,MAAM,MAAM,oBAAoB,CAAA;AA0BvC,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,mBAAmB,EAC5B,OAAO,EACP,YAAY,EAAE,SAAS,GACxB,EACD,GAAG;IAEH,MAAM,SAAS,GAAG,MAAM,EAEpB,CAAA;IAEJ,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,mBAAmB,EAAE,CAAC,MAAoC,EAAE,EAAE;YAC5D,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAA;YAClB,SAAS,CAAC,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;QAC5C,CAAC;KACF,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,yEAAsC,MAAM,EAAE,SAAS,EAAE,SAAS;QAChE,oBAAC,MAAM,IACL,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,gBACA,SAAS,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EACtC,sBAAsB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACnC,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;gBAElD,OAAO,CACL,oBAAC,KAAK,IACJ,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,kCACS,KAAK,EAClC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,QAAQ,UAAU,QAAQ,CAAC,GAAG,UAAU,GAAG,GAAG,MAAM;qBAC3D,GACD,CACH,CAAA;YACH,CAAC,EACD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACnC,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;gBAElD,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,QAAQ,kCACc,KAAK,EAClC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,QAAQ,UAAU,QAAQ,CAAC,GAAG,UAAU,GAAG,GAAG,MAAM;qBAC3D,GACD,CACH,CAAA;YACH,CAAC,GACD,CACE,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/index.d.ts

@@ -3,8 +3,6 @@ export { default as Link } from './components/atoms/Link';
 export type { LinkProps } from './components/atoms/Link';
 export { default as Popover } from './components/atoms/Popover';
 export type { PopoverProps } from './components/atoms/Popover';
-export { default as Price } from './components/atoms/Price';
-export type { PriceProps } from './components/atoms/Price';
 export { default as TextArea } from './components/atoms/TextArea';
 export type { TextAreaProps } from './components/atoms/TextArea';
 export { default as Select } from './components/atoms/Select';

package/dist/index.js

@@ -2,7 +2,6 @@ export * from '@faststore/components';
 // Atoms
 export { default as Link } from './components/atoms/Link';
 export { default as Popover } from './components/atoms/Popover';
-export { default as Price } from './components/atoms/Price';
 export { default as TextArea } from './components/atoms/TextArea';
 export { default as Select } from './components/atoms/Select';
 export { default as Slider } from './components/atoms/Slider';

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.6-alpha.0",
+  "version": "2.0.9-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@babel/core": "^7.19.6",
     "@faststore/shared": "^2.0.3-alpha.0",
-    "@faststore/styles": "^2.0.6-alpha.0",
+    "@faststore/styles": "^2.0.9-alpha.0",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.13",
     "@storybook/addon-actions": "^6.5.13",
@@ -78,5 +78,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "ee9301dc7f42f9f5f6e8ccb5521078e8601fa728"
+  "gitHead": "df3ddd2d140bf19046a4753474bebee4298cd6ac"
 }

package/src/components/atoms/Price/styles.scss

@@ -0,0 +1,27 @@
+[data-fs-price] {
+  // --------------------------------------------------------
+  // Design Tokens for Price
+  // --------------------------------------------------------
+
+  // Listing
+  --fs-price-listing-color           : var(--fs-color-text-light);
+  --fs-price-listing-text-decoration : line-through;
+
+  // Spot
+  --fs-price-spot-margin-left        : var(--fs-spacing-1);
+  --fs-price-spot-font-weight        : var(--fs-text-weight-bold);
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-price-variant="listing"] {
+    color: var(--fs-price-listing-color);
+    text-decoration: var(--fs-price-listing-text-decoration);
+  }
+
+  &[data-fs-price-variant="spot"] {
+    margin-left: var(--fs-price-spot-margin-left);
+    font-weight: var(--fs-price-spot-font-weight);
+  }
+}

package/src/components/molecules/DiscountBadge/DiscountBadge.stories.mdx

@@ -0,0 +1,38 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { DiscountBadge } from '@faststore/components'
+
+<Meta title="Molecules/DiscountBadge" component={DiscountBadge} argTypes={{}} />
+
+export const Template = (args) => (
+  <DiscountBadge id="discount-badge-id" listPrice={65} spotPrice={40} />
+)
+
+<header>
+
+# DiscountBadge
+
+A custom `Badge` that display product's discounts.
+
+</header>
+
+## Usage
+
+```jsx
+import { DiscountBadge } from '@faststore/ui'
+// Styles
+import '@faststore/ui/src/components/molecules/DiscountBadge/styles.scss'
+```
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      id: 'discount-badge-default',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />

package/src/components/molecules/DiscountBadge/styles.scss

@@ -0,0 +1,57 @@
+[data-fs-discount-badge] {
+  // --------------------------------------------------------
+  // Design Tokens for Discount Badge
+  // --------------------------------------------------------
+
+  // Low
+  --fs-discount-badge-low-bkg-color       : var(--fs-badge-success-bkg-color);
+  --fs-discount-badge-low-text-color      : var(--fs-badge-success-text-color);
+  --fs-discount-badge-low-border-color    : var(--fs-badge-success-border-color);
+
+  // Medium
+  --fs-discount-badge-medium-bkg-color    : var(--fs-badge-warning-bkg-color);
+  --fs-discount-badge-medium-text-color   : var(--fs-badge-warning-text-color);
+  --fs-discount-badge-medium-border-color : var(--fs-badge-warning-border-color);
+
+  // High
+  --fs-discount-badge-high-bkg-color      : var(--fs-badge-danger-bkg-color);
+  --fs-discount-badge-high-text-color     : var(--fs-badge-danger-text-color);
+  --fs-discount-badge-high-border-color   : var(--fs-badge-danger-border-color);
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-discount-badge-variant="low"] {
+    color: var(--fs-discount-badge-low-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-discount-badge-low-bkg-color);
+      border-color: var(--fs-discount-badge-low-border-color);
+
+      &::after {
+        background-color: var(--fs-discount-badge-low-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-discount-badge-variant="medium"] {
+    color: var(--fs-discount-badge-medium-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-discount-badge-medium-bkg-color);
+      border-color: var(--fs-discount-badge-medium-border-color);
+      &::after { background-color: var(--fs-discount-badge-medium-bkg-color); }
+    }
+  }
+
+  &[data-fs-discount-badge-variant="high"] {
+    color: var(--fs-discount-badge-high-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-discount-badge-high-bkg-color);
+      border-color: var(--fs-discount-badge-high-border-color);
+      &::after { background-color: var(--fs-discount-badge-high-bkg-color); }
+    }
+  }
+}

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

@@ -1,8 +1,7 @@
 import type { Story, Meta } from '@storybook/react'
 import React, { useMemo } from 'react'
 
-import Badge from '@faststore/components'
-import Price from '../../../atoms/Price/Price'
+import { Badge, Price } from '@faststore/components'
 // Gift components
 import GiftComponent from '../Gift'
 import GiftContent from '../GiftContent'

package/src/components/molecules/PriceRange/PriceRange.tsx

@@ -1,9 +1,10 @@
 import React, { useRef, useImperativeHandle, forwardRef } from 'react'
 import type { AriaAttributes } from 'react'
 
-import Price from '../../atoms/Price'
+import { Price } from '@faststore/components'
+import type { PriceProps } from '@faststore/components'
+
 import Slider from '../../atoms/Slider'
-import type { PriceProps } from '../../atoms/Price'
 import type { SliderProps } from '../../atoms/Slider'
 
 export type PriceRangeProps = SliderProps & {

package/src/components/molecules/ProductCard/stories/ProductCard.stories.tsx

@@ -2,8 +2,7 @@ import type { Story, Meta } from '@storybook/react'
 import React from 'react'
 
 // Atoms
-import Price from '../../../atoms/Price'
-import { Badge, Button } from '@faststore/components'
+import { Badge, Button, Price } from '@faststore/components'
 // Card components
 import ProductCardComponent from '../ProductCard'
 import ProductCardImage from '../ProductCardImage'

package/src/index.ts

@@ -7,9 +7,6 @@ export type { LinkProps } from './components/atoms/Link'
 export { default as Popover } from './components/atoms/Popover'
 export type { PopoverProps } from './components/atoms/Popover'
 
-export { default as Price } from './components/atoms/Price'
-export type { PriceProps } from './components/atoms/Price'
-
 export { default as TextArea } from './components/atoms/TextArea'
 export type { TextAreaProps } from './components/atoms/TextArea'
 

package/src/styles/components.scss

@@ -4,10 +4,12 @@
 @import "../components/atoms/Checkbox/styles";
 @import "../components/atoms/Input/styles";
 @import "../components/atoms/Overlay/styles";
+@import "../components/atoms/Price/styles";
 @import "../components/atoms/Radio/styles";
 
 // Molecules
 @import "../components/molecules/CheckboxField/styles";
+@import "../components/molecules/DiscountBadge/styles";
 @import "../components/molecules/InputField/styles";
 @import "../components/molecules/RadioField/styles";
 @import "../components/molecules/Tag/styles";

package/dist/components/atoms/Price/Price.d.ts

@@ -1,28 +0,0 @@
-import type { HTMLAttributes, ElementType, ReactNode } from 'react';
-import React from 'react';
-export declare type PriceVariant = 'selling' | 'listing' | 'spot' | 'savings' | 'installment';
-export declare type PriceFormatter = (price: number, variant: PriceVariant) => ReactNode;
-export interface PriceProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
-    /**
-     * Set the HTML element tag of this component.
-     */
-    as?: ElementType;
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-    /**
-     * The raw price value.
-     */
-    value: number;
-    /**
-     * Formatter function that transforms the raw price value and render the result.
-     */
-    formatter?: PriceFormatter;
-    /**
-     * The current use case variant for prices.
-     */
-    variant?: PriceVariant;
-}
-export declare const Price: React.ForwardRefExoticComponent<PriceProps & React.RefAttributes<Omit<HTMLSpanElement, "children">>>;
-export default Price;

package/dist/components/atoms/Price/Price.js

@@ -1,7 +0,0 @@
-import React, { forwardRef } from 'react';
-export const Price = forwardRef(function Price({ as: Component = 'span', testId = 'store-price', value, formatter = (price) => price, variant = 'selling', ...otherProps }, ref) {
-    const formattedPrice = formatter(value, variant);
-    return (React.createElement(Component, Object.assign({ ref: ref, "data-fs-price": true, "data-testid": testId, "data-variant": variant }, otherProps), formattedPrice));
-});
-export default Price;
-//# sourceMappingURL=Price.js.map

package/dist/components/atoms/Price/Price.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Price.js","sourceRoot":"","sources":["../../../../src/components/atoms/Price/Price.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAmCzC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,SAAS,KAAK,CACZ,EACE,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,MAAM,GAAG,aAAa,EACtB,KAAK,EACL,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAC5B,OAAO,GAAG,SAAS,EACnB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,cAAc,GAAG,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IAEhD,OAAO,CACL,oBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,wCAEK,MAAM,kBACL,OAAO,IACjB,UAAU,GAEb,cAAc,CACL,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/components/atoms/Price/index.d.ts

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

package/dist/components/atoms/Price/index.js

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

package/dist/components/atoms/Price/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/Price/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA"}

package/src/components/atoms/Price/Price.tsx

@@ -1,65 +0,0 @@
-import type { HTMLAttributes, ElementType, ReactNode } from 'react'
-import React, { forwardRef } from 'react'
-
-export type PriceVariant =
-  | 'selling'
-  | 'listing'
-  | 'spot'
-  | 'savings'
-  | 'installment'
-
-export type PriceFormatter = (price: number, variant: PriceVariant) => ReactNode
-
-export interface PriceProps
-  extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
-  /**
-   * Set the HTML element tag of this component.
-   */
-  as?: ElementType
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-  /**
-   * The raw price value.
-   */
-  value: number
-  /**
-   * Formatter function that transforms the raw price value and render the result.
-   */
-  formatter?: PriceFormatter
-  /**
-   * The current use case variant for prices.
-   */
-  variant?: PriceVariant
-}
-
-export const Price = forwardRef<Omit<HTMLSpanElement, 'children'>, PriceProps>(
-  function Price(
-    {
-      as: Component = 'span',
-      testId = 'store-price',
-      value,
-      formatter = (price) => price,
-      variant = 'selling',
-      ...otherProps
-    },
-    ref
-  ) {
-    const formattedPrice = formatter(value, variant)
-
-    return (
-      <Component
-        ref={ref}
-        data-fs-price
-        data-testid={testId}
-        data-variant={variant}
-        {...otherProps}
-      >
-        {formattedPrice}
-      </Component>
-    )
-  }
-)
-
-export default Price

package/src/components/atoms/Price/index.ts

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

package/src/components/atoms/Price/stories/Price.mdx

@@ -1,51 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import Price from '../Price'
-
-# Price
-
-## Default
-
-<Canvas>
-  <Story id="atoms-price--default" />
-</Canvas>
-
-## INTL Formatted
-
-<Canvas>
-  <Story id="atoms-price--intl-formatted" />
-</Canvas>
-
-## INTL Formatted to parts
-
-<Canvas>
-  <Story id="atoms-price--intl-formatted-to-parts" />
-</Canvas>
-
-## Custom
-
-<Canvas>
-  <Story id="atoms-price--custom" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={Price} />
-
-## CSS Selectors
-
-```css
-[data-fs-price] {}
-
-[data-variant='('selling'|'listing'|'spot'|'savings'|'installment')'] {}
-```
-
-### Formatter function example
-
-```jsx
-function customFormatter(price: number) {
-  const unformattedPrice = `${price}`
-  const formattedPrice = `${unformattedPrice.replace('.', ',')} reais`
-
-  return formattedPrice
-},
-```

package/src/components/atoms/Price/stories/Price.stories.tsx

@@ -1,123 +0,0 @@
-import React, { useMemo } from 'react'
-import type { Story } from '@storybook/react'
-
-import Component from '../Price'
-import type { PriceProps } from '../Price'
-import mdx from './Price.mdx'
-import type { ComponentArgTypes } from '../../../../typings/utils'
-
-const priceValue = 62.5
-
-const PriceTemplate: Story<PriceProps> = ({ value, variant }) => (
-  <Component value={value} variant={variant} />
-)
-
-export const Default = PriceTemplate.bind({})
-Default.args = {
-  value: priceValue,
-}
-
-const INTLFormattedTemplate: Story<PriceProps> = ({ value, variant }) => {
-  function useIntlFormatter(price: number) {
-    return useMemo(() => {
-      const formattedPrice = new Intl.NumberFormat('en-GB', {
-        style: 'currency',
-        currency: 'EUR',
-      }).format(price)
-
-      return formattedPrice
-    }, [price])
-  }
-
-  return (
-    <Component formatter={useIntlFormatter} value={value} variant={variant} />
-  )
-}
-
-export const INTLFormatted = INTLFormattedTemplate.bind({})
-INTLFormatted.args = {
-  value: priceValue,
-  variant: 'spot',
-}
-
-const INTLFormattedToPartsTemplate: Story<PriceProps> = ({
-  value,
-  variant,
-}) => {
-  function useIntlPartsFormatter(price: number) {
-    return useMemo(() => {
-      return new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-      })
-        .formatToParts(price)
-        .map((part) => {
-          const props = {
-            [`data-fs-price-${part.type}`]: true,
-          } as Record<string, unknown>
-
-          if (part.type === 'integer') {
-            props.style = { fontWeight: 700 }
-          }
-
-          return (
-            <span key={part.type} {...props}>
-              {part.value}
-            </span>
-          )
-        })
-    }, [price])
-  }
-
-  return (
-    <Component
-      formatter={useIntlPartsFormatter}
-      value={value}
-      variant={variant}
-    />
-  )
-}
-
-export const INTLFormattedToParts = INTLFormattedToPartsTemplate.bind({})
-INTLFormattedToParts.args = {
-  value: priceValue,
-  variant: 'selling',
-}
-
-export const Custom: Story<PriceProps> = ({ value, variant }) => {
-  function customFormatter(price: number) {
-    const unformattedPrice = `${price}`
-    const formattedPrice = `${unformattedPrice.replace('.', ',')} reais`
-
-    return formattedPrice
-  }
-
-  return (
-    <Component formatter={customFormatter} value={value} variant={variant} />
-  )
-}
-
-Custom.args = {
-  value: priceValue,
-  variant: 'savings',
-}
-
-const argTypes: ComponentArgTypes<Omit<PriceProps, 'value'>> = {
-  variant: {
-    options: ['selling', 'listing', 'spot', 'savings', 'installment'],
-    control: { type: 'select' },
-  },
-  formatter: {
-    table: { disable: true },
-  },
-}
-
-export default {
-  title: 'Atoms/Price',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}