@faststore/components 2.0.62-alpha.0 → 2.0.63-alpha.0

package/dist/index.d.ts

@@ -54,6 +54,8 @@ export { default as LinkButton } from './molecules/LinkButton';
 export type { LinkButtonProps } from './molecules/LinkButton';
 export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal';
 export type { ModalProps, ModalHeaderProps } from './molecules/Modal';
+export { default as ProductCard, ProductCardImage, ProductCardContent, } from './molecules/ProductCard';
+export type { ProductCardProps, ProductCardImageProps, ProductCardContentProps, } from './molecules/ProductCard';
 export { default as ProductTitle } from './molecules/ProductTitle';
 export type { ProductTitleProps } from './molecules/ProductTitle';
 export { default as RadioField } from './molecules/RadioField';

package/dist/index.js

@@ -32,6 +32,7 @@ export { default as Gift, GiftContent, GiftImage } from './molecules/Gift';
 export { default as InputField } from './molecules/InputField';
 export { default as LinkButton } from './molecules/LinkButton';
 export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal';
+export { default as ProductCard, ProductCardImage, ProductCardContent, } from './molecules/ProductCard';
 export { default as ProductTitle } from './molecules/ProductTitle';
 export { default as RadioField } from './molecules/RadioField';
 export { default as RadioGroup, RadioOption } from './molecules/RadioGroup';

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface ProductCardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Sets a border to the component.
+     */
+    bordered?: boolean;
+    /**
+     * Sets the component's size.
+     */
+    variant?: 'wide' | 'default';
+    /**
+     * Enables a outOfStock status.
+     */
+    outOfStock?: boolean;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+}
+declare const ProductCard: React.ForwardRefExoticComponent<ProductCardProps & React.RefAttributes<HTMLDivElement>>;
+export default ProductCard;

package/dist/molecules/ProductCard/ProductCard.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const ProductCard = forwardRef(function ProductCard({ testId = 'fs-product-card', variant = 'default', bordered = false, outOfStock, children, ...otherProps }, ref) {
+    return (React.createElement("article", { ref: ref, "data-fs-product-card": outOfStock ? 'out-of-stock' : '', "data-fs-product-card-variant": variant, "data-fs-product-card-bordered": bordered, "data-testid": testId, ...otherProps }, children));
+});
+export default ProductCard;
+//# sourceMappingURL=ProductCard.js.map

package/dist/molecules/ProductCard/ProductCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.js","sourceRoot":"","sources":["../../../src/molecules/ProductCard/ProductCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAuBzC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,MAAM,GAAG,iBAAiB,EAC1B,OAAO,GAAG,SAAS,EACnB,QAAQ,GAAG,KAAK,EAChB,UAAU,EACV,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,iCACE,GAAG,EAAE,GAAG,0BACc,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,kCACxB,OAAO,mCACN,QAAQ,iBAC1B,MAAM,KACf,UAAU,IAEb,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/molecules/ProductCard/ProductCardContent.d.ts

@@ -0,0 +1,53 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import type { PriceFormatter } from '../../atoms/Price/Price';
+import { Price, LinkProps, LinkElementType } from '../../';
+interface Price {
+    value: number;
+    listPrice: number;
+    formatter: PriceFormatter;
+}
+export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * Specifies the product's title.
+     */
+    title: string;
+    /**
+     * Props for the link from ProductCard component.
+     */
+    linkProps?: Partial<LinkProps<LinkElementType>>;
+    /**
+     * Specifies product's prices.
+     */
+    price?: Price;
+    /**
+     * Enables a outOfStock status.
+     */
+    outOfStock?: boolean;
+    /**
+     * Specifies the OutOfStock badge's label.
+     */
+    outOfStockLabel?: string;
+    /**
+     * Specifies Rating Value of the product.
+     */
+    ratingValue?: number;
+    /**
+     * Callback function when button is clicked.
+     */
+    onButtonClick?: () => void;
+    /**
+     * Specifies the button's label.
+     */
+    buttonLabel?: string;
+    /**
+     * Enables a DiscountBadge to the component.
+     */
+    showDiscountBadge?: boolean;
+}
+declare const ProductCardContent: React.ForwardRefExoticComponent<ProductCardContentProps & React.RefAttributes<HTMLElement>>;
+export default ProductCardContent;

package/dist/molecules/ProductCard/ProductCardContent.js

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import { Link, Price, Badge, Button, Rating, DiscountBadge, } from '../../';
+import { Star, ShoppingCart } from '../../assets';
+const ProductCardContent = forwardRef(function CardContent({ testId = 'fs-product-card-content', title, linkProps, price, outOfStock, outOfStockLabel = 'Out of stock', ratingValue, showDiscountBadge, buttonLabel = 'Add', onButtonClick, children, ...otherProps }, ref) {
+    return (React.createElement("section", { ref: ref, "data-fs-product-card-content": true, "data-fs-product-card-badge": showDiscountBadge, "data-testid": testId, ...otherProps },
+        React.createElement("div", { "data-fs-product-card-heading": true },
+            React.createElement("h3", { "data-fs-product-card-title": true },
+                React.createElement(Link, { ...linkProps, title: title }, title)),
+            React.createElement("div", { "data-fs-product-card-prices": true },
+                React.createElement(Price, { value: price?.listPrice ? price.listPrice : 0, formatter: price?.formatter, testId: "list-price", "data-value": price?.listPrice, variant: "listing" }),
+                React.createElement(Price, { value: price?.value ? price.value : 0, formatter: price?.formatter, testId: "price", "data-value": price?.value, variant: "spot" })),
+            ratingValue && React.createElement(Rating, { value: ratingValue, icon: React.createElement(Star, null) })),
+        showDiscountBadge && !outOfStock && (React.createElement(DiscountBadge, { listPrice: price?.listPrice ? price.listPrice : 0, spotPrice: price?.value ? price.value : 0 })),
+        outOfStock && React.createElement(Badge, null, outOfStockLabel),
+        onButtonClick && !outOfStock && (React.createElement("div", { "data-fs-product-card-actions": true },
+            React.createElement(Button, { variant: "primary", icon: React.createElement(ShoppingCart, null), iconPosition: "left", size: "small", onClick: onButtonClick }, buttonLabel)))));
+});
+export default ProductCardContent;
+//# sourceMappingURL=ProductCardContent.js.map

package/dist/molecules/ProductCard/ProductCardContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCardContent.js","sourceRoot":"","sources":["../../../src/molecules/ProductCard/ProductCardContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAIzC,OAAO,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,aAAa,GAGd,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAmDjD,MAAM,kBAAkB,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EACE,MAAM,GAAG,yBAAyB,EAClC,KAAK,EACL,SAAS,EACT,KAAK,EACL,UAAU,EACV,eAAe,GAAG,cAAc,EAChC,WAAW,EACX,iBAAiB,EACjB,WAAW,GAAG,KAAK,EACnB,aAAa,EACb,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,iCACE,GAAG,EAAE,GAAG,sEAEoB,iBAAiB,iBAChC,MAAM,KACf,UAAU;QAEd;YACE;gBACE,oBAAC,IAAI,OAAK,SAAS,EAAE,KAAK,EAAE,KAAK,IAC9B,KAAK,CACD,CACJ;YACL;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,MAAM,EAAC,YAAY,gBACP,KAAK,EAAE,SAAS,EAC5B,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,MAAM,EAAC,OAAO,gBACF,KAAK,EAAE,KAAK,EACxB,OAAO,EAAC,MAAM,GACd,CACE;YACL,WAAW,IAAI,oBAAC,MAAM,IAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,oBAAC,IAAI,OAAG,GAAI,CAC1D;QACL,iBAAiB,IAAI,CAAC,UAAU,IAAI,CACnC,oBAAC,aAAa,IACZ,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACjD,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GACzC,CACH;QACA,UAAU,IAAI,oBAAC,KAAK,QAAE,eAAe,CAAS;QAC9C,aAAa,IAAI,CAAC,UAAU,IAAI,CAC/B;YACE,oBAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,oBAAC,YAAY,OAAG,EACtB,YAAY,EAAC,MAAM,EACnB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,aAAa,IAErB,WAAW,CACL,CACL,CACP,CACO,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/dist/molecules/ProductCard/ProductCardImage.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+import React 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;
+    /**
+     * Specifies the ProductCard image's aspect ratio.
+     */
+    aspectRatio?: number;
+}
+declare const ProductCardImage: React.ForwardRefExoticComponent<ProductCardImageProps & React.RefAttributes<HTMLDivElement>>;
+export default ProductCardImage;

package/dist/molecules/ProductCard/ProductCardImage.js

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+const ProductCardImage = forwardRef(function ProductCardImage({ testId = 'fs-product-card-image', aspectRatio = 1, children, ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-product-card-image": true, "data-testid": testId, style: {
+            '--fs-product-card-image-aspect-ratio': aspectRatio
+        }, ...otherProps }, children));
+});
+export default ProductCardImage;
+//# sourceMappingURL=ProductCardImage.js.map

package/dist/molecules/ProductCard/ProductCardImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCardImage.js","sourceRoot":"","sources":["../../../src/molecules/ProductCard/ProductCardImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAazC,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,gBAAgB,CACvB,EACE,MAAM,GAAG,uBAAuB,EAChC,WAAW,GAAG,CAAC,EACf,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,qDAEK,MAAM,EACnB,KAAK,EACH;YACE,sCAAsC,EAAE,WAAW;SAC7B,KAEtB,UAAU,IAEb,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,gBAAgB,CAAA"}

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

@@ -0,0 +1,6 @@
+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';

package/dist/molecules/ProductCard/index.js

@@ -0,0 +1,4 @@
+export { default } from './ProductCard';
+export { default as ProductCardImage } from './ProductCardImage';
+export { default as ProductCardContent } from './ProductCardContent';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/ProductCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGhE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.62-alpha.0",
+  "version": "2.0.63-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": "62683f903ca899d767fae418db5169cadf15e0f4"
+  "gitHead": "2f3645ace573036dfa23787a46992432389e242c"
 }

package/src/index.ts

@@ -93,6 +93,16 @@ export { default as LinkButton } from './molecules/LinkButton'
 export type { LinkButtonProps } from './molecules/LinkButton'
 export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal'
 export type { ModalProps, ModalHeaderProps } from './molecules/Modal'
+export {
+  default as ProductCard,
+  ProductCardImage,
+  ProductCardContent,
+} from './molecules/ProductCard'
+export type {
+  ProductCardProps,
+  ProductCardImageProps,
+  ProductCardContentProps,
+} from './molecules/ProductCard'
 export { default as ProductTitle } from './molecules/ProductTitle'
 export type { ProductTitleProps } from './molecules/ProductTitle'
 export { default as RadioField } from './molecules/RadioField'

package/src/molecules/ProductCard/ProductCard.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface ProductCardProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Sets a border to the component.
+   */
+  bordered?: boolean
+  /**
+   * Sets the component's size.
+   */
+  variant?: 'wide' | 'default'
+  /**
+   * Enables a outOfStock status.
+   */
+  outOfStock?: boolean
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+}
+
+const ProductCard = forwardRef<HTMLDivElement, ProductCardProps>(
+  function ProductCard(
+    {
+      testId = 'fs-product-card',
+      variant = 'default',
+      bordered = false,
+      outOfStock,
+      children,
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <article
+        ref={ref}
+        data-fs-product-card={outOfStock ? 'out-of-stock' : ''}
+        data-fs-product-card-variant={variant}
+        data-fs-product-card-bordered={bordered}
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </article>
+    )
+  }
+)
+
+export default ProductCard

package/src/molecules/ProductCard/ProductCardContent.tsx

@@ -0,0 +1,142 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+import type { PriceFormatter } from '../../atoms/Price/Price'
+
+import {
+  Link,
+  Price,
+  Badge,
+  Button,
+  Rating,
+  DiscountBadge,
+  LinkProps,
+  LinkElementType,
+} from '../../'
+import { Star, ShoppingCart } from '../../assets'
+
+interface Price {
+  value: number
+  listPrice: number
+  formatter: PriceFormatter
+}
+
+export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Specifies the product's title.
+   */
+  title: string
+  /**
+   * Props for the link from ProductCard component.
+   */
+  linkProps?: Partial<LinkProps<LinkElementType>>
+  /**
+   * Specifies product's prices.
+   */
+  price?: Price
+  /**
+   * Enables a outOfStock status.
+   */
+  outOfStock?: boolean
+  /**
+   * Specifies the OutOfStock badge's label.
+   */
+  outOfStockLabel?: string
+  /**
+   * Specifies Rating Value of the product.
+   */
+  ratingValue?: number
+  /**
+   * Callback function when button is clicked.
+   */
+  onButtonClick?: () => void
+  /**
+   * Specifies the button's label.
+   */
+  buttonLabel?: string
+  /**
+   * Enables a DiscountBadge to the component.
+   */
+  showDiscountBadge?: boolean
+}
+
+const ProductCardContent = forwardRef<HTMLElement, ProductCardContentProps>(
+  function CardContent(
+    {
+      testId = 'fs-product-card-content',
+      title,
+      linkProps,
+      price,
+      outOfStock,
+      outOfStockLabel = 'Out of stock',
+      ratingValue,
+      showDiscountBadge,
+      buttonLabel = 'Add',
+      onButtonClick,
+      children,
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <section
+        ref={ref}
+        data-fs-product-card-content
+        data-fs-product-card-badge={showDiscountBadge}
+        data-testid={testId}
+        {...otherProps}
+      >
+        <div data-fs-product-card-heading>
+          <h3 data-fs-product-card-title>
+            <Link {...linkProps} title={title}>
+              {title}
+            </Link>
+          </h3>
+          <div data-fs-product-card-prices>
+            <Price
+              value={price?.listPrice ? price.listPrice : 0}
+              formatter={price?.formatter}
+              testId="list-price"
+              data-value={price?.listPrice}
+              variant="listing"
+            />
+            <Price
+              value={price?.value ? price.value : 0}
+              formatter={price?.formatter}
+              testId="price"
+              data-value={price?.value}
+              variant="spot"
+            />
+          </div>
+          {ratingValue && <Rating value={ratingValue} icon={<Star />} />}
+        </div>
+        {showDiscountBadge && !outOfStock && (
+          <DiscountBadge
+            listPrice={price?.listPrice ? price.listPrice : 0}
+            spotPrice={price?.value ? price.value : 0}
+          />
+        )}
+        {outOfStock && <Badge>{outOfStockLabel}</Badge>}
+        {onButtonClick && !outOfStock && (
+          <div data-fs-product-card-actions>
+            <Button
+              variant="primary"
+              icon={<ShoppingCart />}
+              iconPosition="left"
+              size="small"
+              onClick={onButtonClick}
+            >
+              {buttonLabel}
+            </Button>
+          </div>
+        )}
+      </section>
+    )
+  }
+)
+
+export default ProductCardContent

package/src/molecules/ProductCard/ProductCardImage.tsx

@@ -0,0 +1,43 @@
+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
+  /**
+   * Specifies the ProductCard image's aspect ratio.
+   */
+  aspectRatio?: number
+}
+
+const ProductCardImage = forwardRef<HTMLDivElement, ProductCardImageProps>(
+  function ProductCardImage(
+    {
+      testId = 'fs-product-card-image',
+      aspectRatio = 1,
+      children,
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <div
+        ref={ref}
+        data-fs-product-card-image
+        data-testid={testId}
+        style={
+          {
+            '--fs-product-card-image-aspect-ratio': aspectRatio
+          } as React.CSSProperties
+        }
+        {...otherProps}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+export default ProductCardImage

package/src/molecules/ProductCard/index.tsx

@@ -0,0 +1,8 @@
+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'