@faststore/components 2.0.60-alpha.0 → 2.0.61-alpha.0

package/dist/index.d.ts

@@ -36,6 +36,8 @@ export type { AccordionProps, AccordionItemProps, AccordionButtonProps, Accordio
 export { default as Alert } from './molecules/Alert';
 export type { AlertProps } from './molecules/Alert';
 export { default as BuyButton } from './molecules/BuyButton';
+export { default as CartItem, CartItemImage, CartItemSummary, } from './molecules/CartItem';
+export type { CartItemProps, CartItemImageProps, CartItemSummaryProps, } from './molecules/CartItem';
 export { default as CheckboxField } from './molecules/CheckboxField';
 export type { CheckboxFieldProps } from './molecules/CheckboxField';
 export { default as IconButton } from './molecules/IconButton';

package/dist/index.js

@@ -23,6 +23,7 @@ export { default as SROnly } from './atoms/SROnly';
 export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './molecules/Accordion';
 export { default as Alert } from './molecules/Alert';
 export { default as BuyButton } from './molecules/BuyButton';
+export { default as CartItem, CartItemImage, CartItemSummary, } from './molecules/CartItem';
 export { default as CheckboxField } from './molecules/CheckboxField';
 export { default as IconButton } from './molecules/IconButton';
 export { default as DiscountBadge } from './molecules/DiscountBadge';

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

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import { IconButtonProps, Price } from '../../';
+import type { PriceFormatter } from '../../atoms/Price/Price';
+interface Price {
+    value: number;
+    listPrice: number;
+    formatter: PriceFormatter;
+}
+export interface CartItemProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+     */
+    testId?: string;
+    /**
+     * Specifies product Price.
+     */
+    price?: Price;
+    /**
+     * Specifies the quantity of items of the same product.
+     */
+    quantity?: number;
+    /**
+     * Specifies that this product is unavailable.
+     */
+    unavailable?: boolean;
+    /**
+     * Event emitted when product quantity value is changed.
+     */
+    onQuantityChange?: (value: number) => void;
+    /**
+     * Props for the Remove from cart IconButton component.
+     */
+    removeBtnProps?: Partial<IconButtonProps>;
+}
+declare const CartItem: React.ForwardRefExoticComponent<CartItemProps & React.RefAttributes<HTMLDivElement>>;
+export default CartItem;

package/dist/molecules/CartItem/CartItem.js

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import { XCircle } from '../../assets';
+import { IconButton, Price, QuantitySelector } from '../../';
+const CartItem = forwardRef(function CartItem({ testId = 'fs-cart-item', price, quantity, unavailable, onQuantityChange, children, removeBtnProps, ...otherProps }, ref) {
+    return (React.createElement("article", { ref: ref, "data-fs-cart-item": unavailable ? 'unavailable' : 'true', "data-testid": testId, ...otherProps },
+        React.createElement("div", { "data-fs-cart-item-content": true }, children),
+        React.createElement(IconButton, { "data-fs-cart-item-remove-button": true, icon: React.createElement(XCircle, null), "aria-label": "Remove", ...removeBtnProps }),
+        React.createElement("div", { "data-fs-cart-item-actions": true },
+            React.createElement(QuantitySelector, { min: 1, initial: quantity, onChange: onQuantityChange }),
+            React.createElement("span", { "data-fs-cart-item-prices": true },
+                React.createElement(Price, { value: price?.listPrice ? price.listPrice : 0, formatter: price?.formatter, variant: "listing" }),
+                React.createElement(Price, { value: price?.value ? price.value : 0, formatter: price?.formatter, variant: "spot" })))));
+});
+export default CartItem;
+//# sourceMappingURL=CartItem.js.map

package/dist/molecules/CartItem/CartItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartItem.js","sourceRoot":"","sources":["../../../src/molecules/CartItem/CartItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,UAAU,EAAmB,KAAK,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AAqC7E,MAAM,QAAQ,GAAG,UAAU,CAAgC,SAAS,QAAQ,CAC1E,EACE,MAAM,GAAG,cAAc,EACvB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,iCACE,GAAG,EAAE,GAAG,uBACW,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,iBAC1C,MAAM,KACf,UAAU;QAEd,kEAAgC,QAAQ,CAAO;QAC/C,oBAAC,UAAU,6CAET,IAAI,EAAE,oBAAC,OAAO,OAAG,gBACN,QAAQ,KACf,cAAc,GAClB;QACF;YACE,oBAAC,gBAAgB,IACf,GAAG,EAAE,CAAC,EACN,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,gBAAgB,GAC1B;YACF;gBACE,oBAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAC7C,SAAS,EAAE,KAAK,EAAE,SAAS,EAC3B,OAAO,EAAC,SAAS,GACjB;gBACF,oBAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EACrC,SAAS,EAAE,KAAK,EAAE,SAAS,EAC3B,OAAO,EAAC,MAAM,GACd,CACG,CACH,CACE,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/molecules/CartItem/CartItemImage.d.ts

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

package/dist/molecules/CartItem/CartItemImage.js

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

package/dist/molecules/CartItem/CartItemImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartItemImage.js","sourceRoot":"","sources":["../../../src/molecules/CartItem/CartItemImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,aAAa,GAAG,UAAU,CAC9B,SAAS,aAAa,CACpB,EAAE,MAAM,GAAG,oBAAoB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC1D,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,kDAEK,MAAM,KACf,UAAU,IAEb,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/molecules/CartItem/CartItemSummary.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface CartItemSummaryProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+     */
+    testId?: string;
+    /**
+     * Specifies the product's title.
+     */
+    title: string;
+    /**
+     * Array of the product's chosen variations.
+     */
+    activeVariations?: Array<{
+        label: string;
+        option: string;
+    }>;
+}
+declare const CartItemSummary: React.ForwardRefExoticComponent<CartItemSummaryProps & React.RefAttributes<HTMLDivElement>>;
+export default CartItemSummary;

package/dist/molecules/CartItem/CartItemSummary.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+const CartItemSummary = forwardRef(function CartItemSummary({ testId = 'fs-cart-item-summary', title, activeVariations = [], children, ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-cart-item-summary": true, "data-testid": testId, ...otherProps },
+        React.createElement("div", { "data-fs-cart-item-title": true }, title),
+        activeVariations.length > 0 && (React.createElement("div", { "data-fs-cart-item-skus": true }, activeVariations.map(({ label, option }) => (React.createElement("p", { key: label },
+            label,
+            ": ",
+            React.createElement("span", null, option)))))),
+        children));
+});
+export default CartItemSummary;
+//# sourceMappingURL=CartItemSummary.js.map

package/dist/molecules/CartItem/CartItemSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartItemSummary.js","sourceRoot":"","sources":["../../../src/molecules/CartItem/CartItemSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAkBzC,MAAM,eAAe,GAAG,UAAU,CAChC,SAAS,eAAe,CACtB,EACE,MAAM,GAAG,sBAAsB,EAC/B,KAAK,EACL,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,oDAEK,MAAM,KACf,UAAU;QAEd,gEAA8B,KAAK,CAAO;QACzC,gBAAgB,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9B,+DACG,gBAAgB,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAC3C,2BAAG,GAAG,EAAE,KAAK;YACV,KAAK;;YAAG,kCAAO,MAAM,CAAQ,CAC5B,CACL,CAAC,CACE,CACP;QACA,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,eAAe,CAAA"}

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

@@ -0,0 +1,6 @@
+export { default } from './CartItem';
+export type { CartItemProps } from './CartItem';
+export { default as CartItemImage } from './CartItemImage';
+export type { CartItemImageProps } from './CartItemImage';
+export { default as CartItemSummary } from './CartItemSummary';
+export type { CartItemSummaryProps } from './CartItemSummary';

package/dist/molecules/CartItem/index.js

@@ -0,0 +1,4 @@
+export { default } from './CartItem';
+export { default as CartItemImage } from './CartItemImage';
+export { default as CartItemSummary } from './CartItemSummary';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/CartItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAGpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/molecules/IconButton/IconButton.js

@@ -1,9 +1,7 @@
 import React, { forwardRef } from 'react';
-import { Icon, Button } from '../../';
+import { Button } from '../../';
 const IconButton = forwardRef(function IconButton({ icon, children, testId = 'fs-icon-button', 'aria-label': ariaLabel, variant, ...otherProps }, ref) {
-    return (React.createElement(Button, { ref: ref, "data-fs-button": true, "data-fs-icon-button": true, variant: variant ?? 'tertiary', "aria-label": ariaLabel, testId: testId, ...otherProps },
-        children,
-        React.createElement(Icon, { component: icon })));
+    return (React.createElement(Button, { ref: ref, "data-fs-button": true, "data-fs-icon-button": true, variant: variant ?? 'tertiary', icon: icon, "aria-label": ariaLabel, testId: testId, ...otherProps }, children));
 });
 export default IconButton;
 //# sourceMappingURL=IconButton.js.map

package/dist/molecules/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/molecules/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAkBrC,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,IAAI,EACJ,QAAQ,EACR,MAAM,GAAG,gBAAgB,EACzB,YAAY,EAAE,SAAS,EACvB,OAAO,EACP,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,uDAGR,OAAO,EAAE,OAAO,IAAI,UAAU,gBAClB,SAAS,EACrB,MAAM,EAAE,MAAM,KACV,UAAU;QAEb,QAAQ;QACT,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CAClB,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/molecules/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAkB/B,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,IAAI,EACJ,QAAQ,EACR,MAAM,GAAG,gBAAgB,EACzB,YAAY,EAAE,SAAS,EACvB,OAAO,EACP,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,uDAGR,OAAO,EAAE,OAAO,IAAI,UAAU,EAC9B,IAAI,EAAE,IAAI,gBACE,SAAS,EACrB,MAAM,EAAE,MAAM,KACV,UAAU,IAEb,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.60-alpha.0",
+  "version": "2.0.61-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "11f43052ae13416e55c3381ad6b655d0865f3bbd"
+  "gitHead": "7cb1ceba4bdfd0495b1f9226fa640d476ba15810"
 }

package/src/index.ts

@@ -53,6 +53,16 @@ export type {
 export { default as Alert } from './molecules/Alert'
 export type { AlertProps } from './molecules/Alert'
 export { default as BuyButton } from './molecules/BuyButton'
+export {
+  default as CartItem,
+  CartItemImage,
+  CartItemSummary,
+} from './molecules/CartItem'
+export type {
+  CartItemProps,
+  CartItemImageProps,
+  CartItemSummaryProps,
+} from './molecules/CartItem'
 export { default as CheckboxField } from './molecules/CheckboxField'
 export type { CheckboxFieldProps } from './molecules/CheckboxField'
 export { default as IconButton } from './molecules/IconButton'

package/src/molecules/CartItem/CartItem.tsx

@@ -0,0 +1,92 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+import { XCircle } from '../../assets'
+import { IconButton, IconButtonProps, Price, QuantitySelector } from '../../'
+
+import type { PriceFormatter } from '../../atoms/Price/Price'
+
+interface Price {
+  value: number
+  listPrice: number
+  formatter: PriceFormatter
+}
+
+export interface CartItemProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+  /**
+   * Specifies product Price.
+   */
+  price?: Price
+  /**
+   * Specifies the quantity of items of the same product.
+   */
+  quantity?: number
+  /**
+   * Specifies that this product is unavailable.
+   */
+  unavailable?: boolean
+  /**
+   * Event emitted when product quantity value is changed.
+   */
+  onQuantityChange?: (value: number) => void
+  /**
+   * Props for the Remove from cart IconButton component.
+   */
+  removeBtnProps?: Partial<IconButtonProps>
+}
+
+const CartItem = forwardRef<HTMLDivElement, CartItemProps>(function CartItem(
+  {
+    testId = 'fs-cart-item',
+    price,
+    quantity,
+    unavailable,
+    onQuantityChange,
+    children,
+    removeBtnProps,
+    ...otherProps
+  },
+  ref
+) {
+  return (
+    <article
+      ref={ref}
+      data-fs-cart-item={unavailable ? 'unavailable' : 'true'}
+      data-testid={testId}
+      {...otherProps}
+    >
+      <div data-fs-cart-item-content>{children}</div>
+      <IconButton
+        data-fs-cart-item-remove-button
+        icon={<XCircle />}
+        aria-label="Remove"
+        {...removeBtnProps}
+      />
+      <div data-fs-cart-item-actions>
+        <QuantitySelector
+          min={1}
+          initial={quantity}
+          onChange={onQuantityChange}
+        />
+        <span data-fs-cart-item-prices>
+          <Price
+            value={price?.listPrice ? price.listPrice : 0}
+            formatter={price?.formatter}
+            variant="listing"
+          />
+          <Price
+            value={price?.value ? price.value : 0}
+            formatter={price?.formatter}
+            variant="spot"
+          />
+        </span>
+      </div>
+    </article>
+  )
+})
+
+export default CartItem

package/src/molecules/CartItem/CartItemImage.tsx

@@ -0,0 +1,29 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface CartItemImageProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItemImage = forwardRef<HTMLDivElement, CartItemImageProps>(
+  function CartItemImage(
+    { testId = 'fs-cart-item-image', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <div
+        ref={ref}
+        data-fs-cart-item-image
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+export default CartItemImage

package/src/molecules/CartItem/CartItemSummary.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface CartItemSummaryProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+  /**
+   * Specifies the product's title.
+   */
+  title: string
+  /**
+   * Array of the product's chosen variations.
+   */
+  activeVariations?: Array<{ label: string; option: string }>
+}
+
+const CartItemSummary = forwardRef<HTMLDivElement, CartItemSummaryProps>(
+  function CartItemSummary(
+    {
+      testId = 'fs-cart-item-summary',
+      title,
+      activeVariations = [],
+      children,
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <div
+        ref={ref}
+        data-fs-cart-item-summary
+        data-testid={testId}
+        {...otherProps}
+      >
+        <div data-fs-cart-item-title>{title}</div>
+        {activeVariations.length > 0 && (
+          <div data-fs-cart-item-skus>
+            {activeVariations.map(({ label, option }) => (
+              <p key={label}>
+                {label}: <span>{option}</span>
+              </p>
+            ))}
+          </div>
+        )}
+        {children}
+      </div>
+    )
+  }
+)
+
+export default CartItemSummary

package/src/molecules/CartItem/index.tsx

@@ -0,0 +1,8 @@
+export { default } from './CartItem'
+export type { CartItemProps } from './CartItem'
+
+export { default as CartItemImage } from './CartItemImage'
+export type { CartItemImageProps } from './CartItemImage'
+
+export { default as CartItemSummary } from './CartItemSummary'
+export type { CartItemSummaryProps } from './CartItemSummary'

package/src/molecules/IconButton/IconButton.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode, AriaAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
-import { Icon, Button } from '../../'
+import { Button } from '../../'
 import type { ButtonProps } from '../../'
 
 export interface IconButtonProps extends Omit<ButtonProps, 'aria-label'> {
@@ -37,12 +37,12 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         data-fs-button
         data-fs-icon-button
         variant={variant ?? 'tertiary'}
+        icon={icon}
         aria-label={ariaLabel}
         testId={testId}
         {...otherProps}
       >
         {children}
-        <Icon component={icon} />
       </Button>
     )
   }