@faststore/components 2.0.7-alpha.0 → 2.0.9-alpha.0

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.
 
+## [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)
 
 

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

@@ -0,0 +1,28 @@
+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;
+}
+declare const Price: React.ForwardRefExoticComponent<PriceProps & React.RefAttributes<Omit<HTMLSpanElement, "children">>>;
+export default Price;

package/dist/atoms/Price/Price.js

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

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

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

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

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

package/dist/atoms/Price/index.js

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

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

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

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export { default as Label } from './atoms/Label';
 export type { LabelProps } from './atoms/Label';
 export { default as Overlay } from './atoms/Overlay';
 export type { OverlayProps } from './atoms/Overlay';
+export { default as Price } from './atoms/Price';
+export type { PriceProps } from './atoms/Price';
 export { default as Radio } from './atoms/Radio';
 export type { RadioProps } from './atoms/Radio';
 export { default as CheckboxField } from './molecules/CheckboxField';

package/dist/index.js

@@ -6,6 +6,7 @@ export { default as Icon } from './atoms/Icon';
 export { default as Input } from './atoms/Input';
 export { default as Label } from './atoms/Label';
 export { default as Overlay } from './atoms/Overlay';
+export { default as Price } from './atoms/Price';
 export { default as Radio } from './atoms/Radio';
 // Molecules
 export { default as CheckboxField } from './molecules/CheckboxField';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAGhD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAGhD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.7-alpha.0",
+  "version": "2.0.9-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -28,5 +28,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "f740d9f405309548f33c81d061131de9905c95bf"
+  "gitHead": "df3ddd2d140bf19046a4753474bebee4298cd6ac"
 }

package/src/atoms/Price/Price.tsx

@@ -0,0 +1,65 @@
+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
+}
+
+const Price = forwardRef<Omit<HTMLSpanElement, 'children'>, PriceProps>(
+  function Price(
+    {
+      value,
+      as: Component = 'span',
+      variant = 'selling',
+      testId = 'fs-price',
+      formatter = (price) => price,
+      ...otherProps
+    },
+    ref
+  ) {
+    const formattedPrice = formatter(value, variant)
+
+    return (
+      <Component
+        ref={ref}
+        data-fs-price
+        data-testid={testId}
+        data-fs-price-variant={variant}
+        {...otherProps}
+      >
+        {formattedPrice}
+      </Component>
+    )
+  }
+)
+
+export default Price

package/src/atoms/Price/index.ts

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

package/src/index.ts

@@ -13,6 +13,8 @@ export { default as Label } from './atoms/Label'
 export type { LabelProps } from './atoms/Label'
 export { default as Overlay } from './atoms/Overlay'
 export type { OverlayProps } from './atoms/Overlay'
+export { default as Price } from './atoms/Price'
+export type { PriceProps } from './atoms/Price'
 export { default as Radio } from './atoms/Radio'
 export type { RadioProps } from './atoms/Radio'