@faststore/components 2.0.66-alpha.0 → 2.0.70-alpha.0

package/dist/molecules/SearchProductCard/SearchProductCardImage.d.ts

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

package/dist/molecules/SearchProductCard/SearchProductCardImage.js

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

package/dist/molecules/SearchProductCard/SearchProductCardImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchProductCardImage.js","sourceRoot":"","sources":["../../../src/molecules/SearchProductCard/SearchProductCardImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,sBAAsB,GAAG,UAAU,CAGvC,SAAS,sBAAsB,CAC/B,EAAE,MAAM,GAAG,8BAA8B,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACpE,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,4DAEK,MAAM,KACf,UAAU,IAEb,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,sBAAsB,CAAA"}

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

@@ -0,0 +1,6 @@
+export { default } from './SearchProductCard';
+export type { SearchProductCardProps } from './SearchProductCard';
+export { default as SearchProductCardImage } from './SearchProductCardImage';
+export type { SearchProductCardImageProps } from './SearchProductCardImage';
+export { default as SearchProductCardContent } from './SearchProductCardContent';
+export type { SearchProductCardContentProps } from './SearchProductCardContent';

package/dist/molecules/SearchProductCard/index.js

@@ -0,0 +1,4 @@
+export { default } from './SearchProductCard';
+export { default as SearchProductCardImage } from './SearchProductCardImage';
+export { default as SearchProductCardContent } from './SearchProductCardContent';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/SearchProductCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAG7C,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAG5E,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.66-alpha.0",
+  "version": "2.0.70-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": "67c201f56dcedf4ee63b4a852264e8b147b8dff0"
+  "gitHead": "5718a199c16ee52a9446cd4090a4f564863c4243"
 }

package/src/assets/ArrowElbowDownRight.tsx

@@ -1,32 +1,26 @@
 import React from 'react'
-import type { FC } from 'react'
+import { IconProps } from './IconProps'
 
 // Icon from Phosphor Icons
-const ArrowElbowDownRight: FC = () => (
+const ArrowElbowDownRight = ({ size  = 24 }: IconProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 256 256" 
     fill="currentColor"
     strokeWidth="16"
-    width={24}
-    height={24}
+    width={size}
+    height={size}
   >
     <rect width="256" height="256" fill="none"></rect>
     <polyline 
       points="160 128 208 176 160 224" 
       fill="none" 
-      stroke="currentColor" 
-      stroke-linecap="round" 
-      stroke-linejoin="round" 
-      stroke-width="16"
+      stroke="currentColor"
     ></polyline>
     <polyline 
       points="64 32 64 176 208 176" 
       fill="none" 
       stroke="currentColor" 
-      stroke-linecap="round" 
-      stroke-linejoin="round" 
-      stroke-width="16"
     ></polyline>
   </svg>
 )

package/src/assets/DotsThree.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { IconProps } from './IconProps'
+
+// Icon from Phosphor Icons
+const DotsThree = ({ size = 24 }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="16"
+    width={size}
+    height={size}
+  >
+    <rect width="256" height="256" fill="none"></rect>
+    <circle cx="128" cy="128" r="12"></circle>
+    <circle cx="192" cy="128" r="12"></circle>
+    <circle cx="64" cy="128" r="12"></circle>
+  </svg>
+)
+
+export default DotsThree

package/src/assets/House.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
-import type { FC } from 'react'
+import { IconProps } from './IconProps'
 
 // Icon from Phosphor Icons
-const House: FC = () => (
+const House = ({ size = 24 }: IconProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="currentColor"
     viewBox="0 0 256 256"
     strokeWidth="16"
-    width={24}
-    height={24}
+    width={size}
+    height={size}
   >
     <rect width="256" height="256" fill="none"></rect>
     <path

package/src/assets/IconProps.ts

@@ -0,0 +1,3 @@
+export type IconProps = {
+    size?: number
+}

package/src/assets/index.ts

@@ -5,6 +5,7 @@ export { default as ArrowElbowDownRight } from './ArrowElbowDownRight'
 export { default as ArrowRight } from './ArrowRight'
 export { default as CaretDown } from './CaretDown'
 export { default as Checked } from './Checked'
+export { default as DotsThree } from './DotsThree'
 export { default as Heart } from './Heart'
 export { default as House } from './House'
 export { default as Minus } from './Minus'

package/src/atoms/Price/Price.tsx

@@ -1,6 +1,8 @@
 import type { HTMLAttributes, ElementType, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 
+import { SROnly } from '../../'
+
 export type PriceVariant =
   | 'selling'
   | 'listing'
@@ -32,6 +34,10 @@ export interface PriceProps
    * The current use case variant for prices.
    */
   variant?: PriceVariant
+  /**
+   * Text for the screen readers only
+   */
+  SRText?: string
 }
 
 const Price = forwardRef<Omit<HTMLSpanElement, 'children'>, PriceProps>(
@@ -42,6 +48,7 @@ const Price = forwardRef<Omit<HTMLSpanElement, 'children'>, PriceProps>(
       variant = 'selling',
       testId = 'fs-price',
       formatter = (price) => price,
+      SRText,
       ...otherProps
     },
     ref
@@ -56,6 +63,7 @@ const Price = forwardRef<Omit<HTMLSpanElement, 'children'>, PriceProps>(
         data-testid={testId}
         {...otherProps}
       >
+        {SRText && <SROnly text={SRText} />}
         {formattedPrice}
       </Component>
     )

package/src/index.ts

@@ -52,6 +52,14 @@ export type {
 } from './molecules/Accordion'
 export { default as Alert } from './molecules/Alert'
 export type { AlertProps } from './molecules/Alert'
+export {
+  BreadcrumbPure,
+  Breadcrumb,
+} from './molecules/Breadcrumb'
+export type {
+  BreadcrumbPureProps,
+  BreadcrumbProps,
+} from './molecules/Breadcrumb'
 export { default as BuyButton } from './molecules/BuyButton'
 export {
   default as CartItem,
@@ -111,6 +119,16 @@ export { default as RadioGroup, RadioOption } from './molecules/RadioGroup'
 export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup'
 export { default as Rating } from './molecules/Rating'
 export type { RatingProps } from './molecules/Rating'
+export {
+  default as SearchProductCard,
+  SearchProductCardImage,
+  SearchProductCardContent,
+} from './molecules/SearchProductCard'
+export type {
+  SearchProductCardProps,
+  SearchProductCardImageProps,
+  SearchProductCardContentProps,
+} from './molecules/SearchProductCard'
 export { default as SelectField } from './molecules/SelectField'
 export type { SelectFieldProps } from './molecules/SelectField'
 export {

package/src/molecules/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import BreadcrumbBase, { BreadcrumbBaseProps } from './BreadcrumbBase'
+
+export type BreadcrumbProps = Omit<BreadcrumbBaseProps, "isDesktop">
+
+
+const Breadcrumb = ({
+  breadcrumbList,
+  ...otherProps
+}: BreadcrumbProps) => (
+  <>
+    <BreadcrumbBase breadcrumbList={breadcrumbList} {...otherProps} />
+    <BreadcrumbBase breadcrumbList={breadcrumbList} isDesktop {...otherProps} />
+  </>
+)
+
+export default Breadcrumb

package/src/molecules/Breadcrumb/BreadcrumbBase.tsx

@@ -0,0 +1,165 @@
+import React, { cloneElement, forwardRef, ReactElement, ReactNode, useCallback } from 'react'
+import { ArrowElbowDownRight, DotsThree } from '../../assets'
+import Icon from '../../atoms/Icon'
+import Link from '../../atoms/Link'
+import Dropdown, {
+  DropdownButton,
+  DropdownMenu,
+  DropdownItem,
+} from '../Dropdown'
+import BreadcrumbPure, { BreadcrumbPureProps } from './BreadcrumbPure'
+import HomeLink from './HomeLink'
+
+type ItemElement = {
+  item: string
+  name: string
+  position: number
+}
+
+type RenderLinkProps = {
+  /**
+   * Item prop for specific item.
+   */
+  itemProps: ItemElement
+  /**
+   * Represents if the item is collapsed or not.
+   */
+  collapsed: boolean
+}
+
+export type BreadcrumbBaseProps = {
+  /**
+   * Array of ItemElement that represents each breadcrumb item.
+   */
+  breadcrumbList: ItemElement[]
+  /**
+   * Represents if is Desktop os mobile.
+   */
+  isDesktop?: boolean
+  /**
+   * Link go to home.
+   */
+  homeLink?: ReactElement
+  /**
+   * Icon for dropdown button.
+   */
+  dropdownButtonIcon?: ReactNode
+  /**
+   * Icon for collapsed items.
+   */
+  collapsedItemsIcon?: ReactNode
+  /**
+   * Function to render a item as breadcrumb link.
+   * @param renderLinkProps Properties for each item to be rendered.
+   * @returns Link to be rendered.
+   */
+  renderLink?: (renderLinkProps: RenderLinkProps) => ReactElement
+} & BreadcrumbPureProps
+
+const BreadcrumbBase = forwardRef<HTMLDivElement, BreadcrumbBaseProps>(
+  function BreadcrumbBase(
+    {
+      children,
+      divider: rawDivider = '',
+      testId = 'fs-breadcrumb',
+      breadcrumbList,
+      isDesktop = false,
+      renderLink,
+      homeLink = <HomeLink />,
+      dropdownButtonIcon = <Icon component={<DotsThree />} />,
+      collapsedItemsIcon = <Icon component={<ArrowElbowDownRight />} />,
+      ...otherProps
+    },
+    ref
+  ) {
+    const homeLinkProps = {
+      'data-fs-breadcrumb-link': true,
+      'data-fs-breadcrumb-link-home': true,
+      'aria-label': 'Go to homepage',
+      href: '/',
+    }
+
+    const homeLinkWithProps = cloneElement(homeLink, homeLinkProps)
+
+    const firstItem = isDesktop ? breadcrumbList[0] : null
+    const mediumItems = isDesktop
+      ? breadcrumbList.slice(1, -2)
+      : breadcrumbList.slice(0, -2)
+
+    const lastItems = breadcrumbList.slice(-2)
+
+    const collapseBreadcrumb = breadcrumbList.length > 4
+
+    const breadcrumbLink = useCallback((renderLinkProps: RenderLinkProps) => {
+      const breadcrumbItem = renderLink?.(renderLinkProps)
+      const itemProps = renderLinkProps.collapsed
+        ? {
+            'data-fs-breadcrumb-dropdown-link': true,
+          }
+        : {
+            'data-fs-breadcrumb-link': true,
+          }
+      return breadcrumbItem ? (
+        cloneElement(breadcrumbItem, {...itemProps, key: renderLinkProps.itemProps.position })
+      ) : (
+        <Link {...itemProps} href={renderLinkProps.itemProps.item} key={renderLinkProps.itemProps.position}>
+          {renderLinkProps.itemProps.name}
+        </Link>
+      )
+    }, [renderLink])
+
+    return (
+      <BreadcrumbPure
+        ref={ref}
+        data-fs-breadcrumb-is-desktop={isDesktop}
+        {...otherProps}
+      >
+        {homeLinkWithProps}
+        
+        {!collapseBreadcrumb &&
+          breadcrumbList.map((item, index) => {
+            return breadcrumbList.length === index + 1 ? (
+              <span key={String(item.position)}>{item.name}</span>
+            ) : (
+              breadcrumbLink({ itemProps: item, collapsed: false })
+            )
+          })}
+
+        {collapseBreadcrumb &&
+          firstItem &&
+          breadcrumbLink({ itemProps: firstItem, collapsed: false })}
+
+        {collapseBreadcrumb && (
+          <Dropdown>
+            <DropdownButton
+              data-fs-breadcrumb-dropdown-button
+              size="small"
+            >{dropdownButtonIcon}</DropdownButton>
+            <DropdownMenu data-fs-breadcrumb-dropdown-menu>
+              {mediumItems.map((item) => (
+                <DropdownItem
+                  data-fs-breadcrumb-dropdown-item
+                  key={String(item.position)}
+                  icon={collapsedItemsIcon}
+                >
+                  {breadcrumbLink({ itemProps: item, collapsed: true })}
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+        )}
+
+        {collapseBreadcrumb &&
+          lastItems.map((item, index) => {
+            return lastItems.length === index + 1 ? (
+              <span key={String(item.position)}>{item.name}</span>
+            ) : (
+              breadcrumbLink({ itemProps: item, collapsed: false })
+            )
+          })}
+      </BreadcrumbPure>
+    )
+  }
+)
+
+export default BreadcrumbBase

package/src/molecules/Breadcrumb/BreadcrumbPure.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from "react"
+import List from "../../atoms/List"
+import type { HTMLAttributes, ReactNode } from 'react'
+import ListItem from "./ListItem"
+
+export type BreadcrumbPureProps = {
+    /**
+     * A ReactNode that will be rendered as the Divider icon.
+     */
+    divider?: ReactNode
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string
+} & HTMLAttributes<HTMLDivElement> 
+
+const BreadcrumbPure = forwardRef<HTMLDivElement, BreadcrumbPureProps>(
+    function BreadcrumbPure(
+      {
+        children,
+        divider: rawDivider = '',
+        testId = 'fs-breadcrumb',
+        ...otherProps
+      },
+      ref
+    ) {
+      return (
+        <nav
+          aria-label="Breadcrumb"
+          role="navigation"
+          ref={ref}
+          data-fs-breadcrumb
+          data-testid={testId}
+          {...otherProps}
+        >
+          <List as="ol" data-fs-breadcrumb-list>
+            {React.Children.toArray(children).map(
+              (child, index, childrenArray) => {
+                const isLastItem = index === childrenArray.length - 1
+  
+                return (
+                  <ListItem
+                    isLastItem={isLastItem}
+                    divider={rawDivider}
+                    key={`breadcrumb-${index}`}
+                    testId={testId}
+                  >
+                    {child}
+                  </ListItem>
+                )
+              }
+            )}
+          </List>
+        </nav>
+      )
+    }
+  )
+
+export default BreadcrumbPure

package/src/molecules/Breadcrumb/Divider.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { BreadcrumbBaseProps } from "./BreadcrumbBase"
+
+const Divider = ({ divider, testId }: Omit<BreadcrumbBaseProps, "breadcrumbList">) => {
+    const props = {
+      'data-fs-breadcrumb-divider': true,
+      'aria-hidden': true,
+      'data-testid': `${testId}-divider`,
+    }
+  
+    if (React.isValidElement(divider)) {
+      return React.cloneElement(divider, props)
+    }
+  
+    return <span {...props}>{divider ?? '/'}</span>
+}
+
+export default Divider

package/src/molecules/Breadcrumb/HomeLink.tsx

@@ -0,0 +1,15 @@
+import { House, Icon, Link } from "../..";
+import React from "react";
+
+const HomeLink = () => (
+  <Link
+    data-fs-breadcrumb-link
+    data-fs-breadcrumb-link-home
+    aria-label="Go to homepage"
+    href="/"
+  >
+    <Icon component={<House size={18} />} />
+  </Link>
+)
+
+export default HomeLink

package/src/molecules/Breadcrumb/ListItem.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react'
+import { BreadcrumbBaseProps } from './BreadcrumbBase'
+import Divider from './Divider'
+
+type ListItemProps = {
+  children: ReactNode
+  isLastItem: boolean
+  divider: BreadcrumbBaseProps['divider']
+  testId: string
+}
+
+const ListItem = ({ children, isLastItem, divider, testId }: ListItemProps) => {
+  const props = {
+    'data-testid': `${testId}-item`,
+    'data-fs-breadcrumb-item': isLastItem ? 'current' : true,
+    'aria-current': isLastItem ? ('page' as const) : undefined,
+  }
+
+  if (!React.isValidElement(children)) {
+    return (
+      <li data-fs-breadcrumb-list-item>
+        <span {...props}>
+          {children}
+          {isLastItem ? null : <Divider divider={divider} testId={testId} />}
+        </span>
+      </li>
+    )
+  }
+
+  return (
+    <li data-fs-breadcrumb-list-item>
+      {React.cloneElement(children, props)}
+      {isLastItem ? null : <Divider divider={divider} testId={testId} />}
+    </li>
+  )
+}
+
+export default ListItem

package/src/molecules/Breadcrumb/index.ts

@@ -0,0 +1,4 @@
+export { default as BreadcrumbPure } from './BreadcrumbPure'
+export type { BreadcrumbPureProps } from './BreadcrumbPure'
+export { default as Breadcrumb } from './Breadcrumb'
+export type { BreadcrumbProps } from './Breadcrumb'

package/src/molecules/ProductCard/ProductCardContent.tsx

@@ -103,6 +103,7 @@ const ProductCardContent = forwardRef<HTMLElement, ProductCardContentProps>(
               testId="list-price"
               data-value={price?.listPrice}
               variant="listing"
+              SRText="Original price:"
             />
             <Price
               value={price?.value ? price.value : 0}
@@ -110,6 +111,7 @@ const ProductCardContent = forwardRef<HTMLElement, ProductCardContentProps>(
               testId="price"
               data-value={price?.value}
               variant="spot"
+              SRText="Sale Price:"
             />
           </div>
           {ratingValue && <Rating value={ratingValue} icon={<Star />} />}

package/src/molecules/SearchProductCard/SearchProductCard.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+import { Link, LinkProps, LinkElementType } from '../../'
+
+export interface SearchProductCardProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * Props for the link from SearchProduct component.
+   */
+  linkProps?: Partial<LinkProps<LinkElementType>>
+  /**
+   * Callback function when SearchProduct link is clicked.
+   */
+  onLinkClick?: () => void
+}
+
+const SearchProductCard = forwardRef<HTMLDivElement, SearchProductCardProps>(
+  function ProductCard(
+    {
+      testId = 'fs-search-product-card',
+      linkProps,
+      onLinkClick,
+      children,
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <article
+        ref={ref}
+        data-fs-search-product-card
+        data-testid={testId}
+        {...otherProps}
+      >
+        <Link
+          {...linkProps}
+          data-fs-search-product-card-link
+          title={name}
+          variant="display"
+          onClick={onLinkClick}
+        >
+          {children}
+        </Link>
+      </article>
+    )
+  }
+)
+
+export default SearchProductCard

package/src/molecules/SearchProductCard/SearchProductCardContent.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react'
+import { Price } from '../../'
+import type { PriceFormatter } from '../../atoms/Price/Price'
+
+interface Price {
+  value: number
+  listPrice: number
+  formatter: PriceFormatter
+}
+
+export type SearchProductCardContentProps = {
+  /**
+   * Specifies the product's title.
+   */
+  title: string
+  /**
+   * Specifies product's prices.
+   */
+  price: Price
+}
+
+const SearchProductCardContent = forwardRef<
+  HTMLElement,
+  SearchProductCardContentProps
+>(function SearchProductCardContent({ price, title, ...otherProps }, ref) {
+  return (
+    <section ref={ref} data-fs-search-product-card-content {...otherProps}>
+      <p data-fs-search-product-card-title>{title}</p>
+      <span data-fs-search-product-card-prices>
+        <Price
+          value={price?.listPrice ? price.listPrice : 0}
+          formatter={price?.formatter}
+          testId="list-price"
+          data-value={price?.listPrice}
+          variant="listing"
+          SRText="Original price:"
+        />
+        <Price
+          value={price?.value ? price.value : 0}
+          formatter={price?.formatter}
+          testId="price"
+          data-value={price?.value}
+          variant="spot"
+          SRText="Price:"
+        />
+      </span>
+    </section>
+  )
+})
+
+export default SearchProductCardContent