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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.70-alpha.0",
+  "version": "2.0.73-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -21,8 +21,8 @@
     "src"
   ],
   "devDependencies": {
-    "@faststore/eslint-config": "^2.0.66-alpha.0",
-    "@faststore/shared": "^2.0.66-alpha.0",
+    "@faststore/eslint-config": "^2.0.73-alpha.0",
+    "@faststore/shared": "^2.0.73-alpha.0",
     "eslint": "7.32.0",
     "typescript": "^4.8.4"
   },
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "5718a199c16ee52a9446cd4090a4f564863c4243"
+  "gitHead": "6ea74fc2ff1eaa78550e8801304eeac29e7d5938"
 }

package/src/assets/ClockClockwise.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const ClockClockwise: FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="16"
+    width={24}
+    height={24}
+  >
+    <rect width="256" height="256" fill="none"></rect>
+    <line
+      x1="128"
+      y1="80"
+      x2="128"
+      y2="128"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="16"
+    ></line>
+    <line
+      x1="169.6"
+      y1="152"
+      x2="128"
+      y2="128"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="16"
+    ></line>
+    <polyline
+      points="184.2 99.7 224.2 99.7 224.2 59.7"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="16"
+    ></polyline>
+    <path
+      d="M190.2,190.2a88,88,0,1,1,0-124.4l34,33.9"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="16"
+    ></path>
+  </svg>
+)
+
+export default ClockClockwise

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 ClockClockwise } from './ClockClockwise'
 export { default as DotsThree } from './DotsThree'
 export { default as Heart } from './Heart'
 export { default as House } from './House'

package/src/index.ts

@@ -52,10 +52,7 @@ 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 { BreadcrumbPure, Breadcrumb } from './molecules/Breadcrumb'
 export type {
   BreadcrumbPureProps,
   BreadcrumbProps,
@@ -119,6 +116,14 @@ 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 SearchHistory,
+  SearchHistoryTerm,
+} from './molecules/SearchHistory'
+export type {
+  SearchHistoryProps,
+  SearchHistoryTermProps,
+} from './molecules/SearchHistory'
 export {
   default as SearchProductCard,
   SearchProductCardImage,
@@ -129,6 +134,8 @@ export type {
   SearchProductCardImageProps,
   SearchProductCardContentProps,
 } from './molecules/SearchProductCard'
+export { default as SearchTop, SearchTopTerm } from './molecules/SearchTop'
+export type { SearchTopProps, SearchTopTermProps } from './molecules/SearchTop'
 export { default as SelectField } from './molecules/SelectField'
 export type { SelectFieldProps } from './molecules/SelectField'
 export {
@@ -157,11 +164,11 @@ export { default as QuantitySelector } from './molecules/QuantitySelector'
 export type { QuantitySelectorProps } from './molecules/QuantitySelector'
 
 // Organisms
-export { default as Hero, HeroImage, HeroHeading } from './organisms/Hero'
+export { default as Hero, HeroImage, HeroHeader } from './organisms/Hero'
 export type {
   HeroProps,
   HeroImageProps,
-  HeroHeadingProps,
+  HeroHeaderProps,
 } from './organisms/Hero'
 
 export { default as PaymentMethods } from './organisms/PaymentMethods'
@@ -169,3 +176,9 @@ export type { PaymentMethodsProps } from './organisms/PaymentMethods'
 
 export { default as PriceRange } from './organisms/PriceRange'
 export type { PriceRangeProps } from './organisms/PriceRange'
+
+export { default as SlideOver, SlideOverHeader } from './organisms/SlideOver'
+export type {
+  SlideOverProps,
+  SlideOverHeaderProps,
+} from './organisms/SlideOver'

package/src/molecules/CartItem/CartItem.tsx

@@ -77,11 +77,13 @@ const CartItem = forwardRef<HTMLDivElement, CartItemProps>(function CartItem(
             value={price?.listPrice ? price.listPrice : 0}
             formatter={price?.formatter}
             variant="listing"
+            SRText="Original price:"
           />
           <Price
             value={price?.value ? price.value : 0}
             formatter={price?.formatter}
             variant="spot"
+            SRText="Price:"
           />
         </span>
       </div>

package/src/molecules/Gift/GiftContent.tsx

@@ -1,16 +1,49 @@
 import type { HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
+import type { PriceFormatter } from '../../atoms/Price/Price'
+
+import { Price, Badge } from '../../'
+
+interface Price {
+  value: number
+  listPrice: number
+  formatter: PriceFormatter
+}
+
 export interface GiftContentProps extends HTMLAttributes<HTMLElement> {
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
   testId?: string
+  /**
+   * Specifies the product's name.
+   */
+  productName: string
+  /**
+   * Specifies product's prices.
+   */
+  price: Price
+  /**
+   * Badge's label
+   */
+  badgeLabel?: string
+  /**
+   * Additional message in the title
+   */
+  titleMessage?: string
 }
 
 const GiftContent = forwardRef<HTMLElement, GiftContentProps>(
   function GiftContent(
-    { testId = 'fs-gift-content', children, ...otherProps },
+    {
+      price,
+      productName,
+      titleMessage = 'Get a',
+      badgeLabel = 'Free',
+      testId = 'fs-gift-content',
+      ...otherProps
+    },
     ref
   ) {
     return (
@@ -20,7 +53,20 @@ const GiftContent = forwardRef<HTMLElement, GiftContentProps>(
         data-testid={testId}
         {...otherProps}
       >
-        {children}
+        <h3 data-fs-gift-product-title>
+          {titleMessage} {productName}
+        </h3>
+        <span data-fs-gift-product-summary>
+          <Price
+            value={price?.listPrice ? price.listPrice : 0}
+            formatter={price?.formatter}
+            testId="list-price"
+            data-value={price?.listPrice}
+            variant="listing"
+            SRText="Original price:"
+          />
+          <Badge>{badgeLabel}</Badge>
+        </span>
       </section>
     )
   }

package/src/molecules/Modal/ModalHeader.tsx

@@ -16,7 +16,7 @@ export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Props for the Close Button component.
    */
-  closeButtonProps?: Partial<Omit<IconButtonProps, 'onClick'>>
+  closeBtnProps?: Partial<Omit<IconButtonProps, 'onClick'>>
 
   onClose?: () => void
 }
@@ -24,7 +24,7 @@ export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
 const ModalHeader = ({
   onClose,
   title,
-  closeButtonProps = {},
+  closeBtnProps = {},
   description,
 }: ModalHeaderProps) => {
   return (
@@ -35,7 +35,7 @@ const ModalHeader = ({
           data-fs-modal-header-close-button
           icon={<X />}
           aria-label="Close modal"
-          {...closeButtonProps}
+          {...closeBtnProps}
         />
       )}
       <p data-fs-modal-header-title>{title}</p>

package/src/molecules/SearchHistory/SearchHistory.tsx

@@ -0,0 +1,44 @@
+import React, { HTMLAttributes } from 'react'
+import { List, Button } from '../..'
+
+export interface SearchHistoryProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Title attribute for the <section> tag rendered by this component.
+   */
+  title: string
+  /**
+   * Defines the text displayed in clear history button.
+   */
+  clearLabel?: string
+  /**
+   * Event handler for click on clear history button.
+   */
+  onClear?: () => void
+}
+
+const SearchHistory = ({
+  testId = 'fs-search-history',
+  title = 'History',
+  clearLabel = 'Clear History',
+  onClear,
+  children,
+  ...otherProps
+}: SearchHistoryProps) => {
+  return (
+    <section data-testid={testId} data-fs-search-history {...otherProps}>
+      <header data-fs-search-history-header>
+        <p data-fs-search-history-title>{title}</p>
+        <Button variant="tertiary" onClick={onClear} size="small">
+          {clearLabel}
+        </Button>
+      </header>
+      <List as="ol">{children}</List>
+    </section>
+  )
+}
+
+export default SearchHistory

package/src/molecules/SearchHistory/SearchHistoryTerm.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react'
+import React, { HTMLAttributes } from 'react'
+import { Icon, ClockClockwise, Link, LinkProps, LinkElementType } from '../..'
+
+export interface SearchHistoryTermProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Defines the text displayed in history term item.
+   */
+  value: string
+  /**
+   * Props for the link from term component.
+   */
+  linkProps?: Partial<LinkProps<LinkElementType>>
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  icon?: ReactNode
+}
+
+const SearchHistoryTerm = ({
+  testId = 'fs-search-history-term',
+  value,
+  linkProps,
+  icon,
+}: SearchHistoryTermProps) => {
+  const historyIcon = icon ? icon : <ClockClockwise />
+
+  return (
+    <li data-fs-search-history-item data-testid={testId}>
+      <Link {...linkProps} data-fs-search-history-item-link variant="display">
+        {historyIcon && (
+          <Icon component={historyIcon} data-fs-search-history-item-icon />
+        )}
+        <span>{value}</span>
+      </Link>
+    </li>
+  )
+}
+
+export default SearchHistoryTerm

package/src/molecules/SearchHistory/index.ts

@@ -0,0 +1,5 @@
+export { default } from './SearchHistory'
+export type { SearchHistoryProps } from './SearchHistory'
+
+export { default as SearchHistoryTerm } from './SearchHistoryTerm'
+export type { SearchHistoryTermProps } from './SearchHistoryTerm'

package/src/molecules/SearchTop/SearchTop.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+import { List } from '../../'
+
+export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Title attribute for the <section> tag rendered by this component.
+   */
+  title: string
+  /**
+   * Defines the the message displayed while loading.
+   */
+  loadingMessage?: string
+  /**
+   * Enables a loading state.
+   */
+  isLoading?: boolean
+}
+
+const SearchTop = forwardRef<HTMLDivElement, SearchTopProps>(function SearchTop(
+  {
+    testId = 'fs-top-search',
+    title = 'Top Search',
+    loadingMessage = 'Loading...',
+    isLoading,
+    children,
+    ...otherProps
+  },
+  ref
+) {
+  return (
+    <section ref={ref} data-testid={testId} data-fs-search-top {...otherProps}>
+      {isLoading ? (
+        <p data-fs-search-top-input-loading-text>{loadingMessage}</p>
+      ) : (
+        <>
+          <header data-fs-search-top-header>
+            <p data-fs-search-top-title>{title}</p>
+          </header>
+          <List as="ol">{children}</List>
+        </>
+      )}
+    </section>
+  )
+})
+
+export default SearchTop

package/src/molecules/SearchTop/SearchTopTerm.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+import { Badge, Link, LinkProps, LinkElementType } from '../../'
+
+export interface SearchTopTermProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Search term to be shown.
+   */
+  value: string
+  /**
+   * Props for the `<Link>` rendered by this component.
+   */
+  linkProps?: Partial<LinkProps<LinkElementType>>
+  /**
+   * Current term's position in a list of search terms.
+   */
+  index: number
+}
+
+const SearchTopTerm = forwardRef<HTMLDivElement, SearchTopTermProps>(
+  function SearchTopTerm({
+    testId = 'fs-top-search-term',
+    value,
+    linkProps,
+    index,
+  }) {
+    return (
+      <li data-fs-search-top-item data-testid={testId}>
+        <Link {...linkProps} data-fs-search-top-item-link variant="display">
+          <Badge data-fs-search-top-item-badge variant="info">
+            {index + 1}
+          </Badge>
+          {value}
+        </Link>
+      </li>
+    )
+  }
+)
+
+export default SearchTopTerm

package/src/molecules/SearchTop/index.ts

@@ -0,0 +1,5 @@
+export { default } from './SearchTop'
+export type { SearchTopProps } from './SearchTop'
+
+export { default as SearchTopTerm } from './SearchTopTerm'
+export type { SearchTopTermProps } from './SearchTopTerm'

package/src/organisms/Hero/{HeroHeading.tsx → HeroHeader.tsx}

@@ -5,7 +5,7 @@ import { ArrowRight } from '../../assets'
 
 import { useHero } from './Hero'
 
-export interface HeroHeadingProps extends HTMLAttributes<HTMLDivElement> {
+export interface HeroHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Content for the h1 tag.
    */
@@ -32,8 +32,8 @@ export interface HeroHeadingProps extends HTMLAttributes<HTMLDivElement> {
   testId?: string
 }
 
-const HeroHeading = forwardRef<HTMLDivElement, HeroHeadingProps>(
-  function HeroHeading(
+const HeroHeader = forwardRef<HTMLDivElement, HeroHeaderProps>(
+  function HeroHeader(
     {
       icon,
       link,
@@ -79,4 +79,4 @@ const HeroHeading = forwardRef<HTMLDivElement, HeroHeadingProps>(
   }
 )
 
-export default HeroHeading
+export default HeroHeader

package/src/organisms/Hero/index.tsx

@@ -4,5 +4,5 @@ export type { HeroProps } from './Hero'
 export { default as HeroImage } from './HeroImage'
 export type { HeroImageProps } from './HeroImage'
 
-export { default as HeroHeading } from './HeroHeading'
-export type { HeroHeadingProps } from './HeroHeading'
+export { default as HeroHeader } from './HeroHeader'
+export type { HeroHeaderProps } from './HeroHeader'

package/src/organisms/SlideOver/SlideOver.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import type { ReactNode } from 'react'
+
+import { Modal } from '../../'
+import type { ModalProps } from '../../'
+
+type Direction = 'leftSide' | 'rightSide'
+type WidthSize = 'full' | 'partial'
+
+export type SlideOverProps = Omit<ModalProps, 'title'> & {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * A boolean value that represents the state of the SlideOver
+   */
+  isOpen: boolean
+  /**
+   * Represents the side that the SlideOver comes from.
+   */
+  direction: Direction
+  /**
+   * Represents the size of the SlideOver.
+   */
+  size: WidthSize
+  /**
+   * Represents the fade effect of the SlideOver.
+   */
+  fade: 'in' | 'out'
+  /**
+   * This function is called whenever the user clicks outside.
+   * the modal content
+   */
+  onDismiss?: () => void
+  children: ReactNode
+}
+
+function SlideOver({
+  isOpen,
+  direction = 'leftSide',
+  size = 'full',
+  fade = 'out',
+  children,
+  onDismiss,
+  testId = 'fs-slide-over',
+  ...otherProps
+}: SlideOverProps) {
+  return (
+    <Modal
+      data-fs-modal={null}
+      data-fs-slide-over
+      data-fs-slide-over-direction={direction}
+      data-fs-slide-over-size={size}
+      data-fs-slide-over-state={fade}
+      isOpen={isOpen}
+      onDismiss={onDismiss}
+      {...otherProps}
+    >
+      {children}
+    </Modal>
+  )
+}
+
+export default SlideOver

package/src/organisms/SlideOver/SlideOverHeader.tsx

@@ -0,0 +1,40 @@
+import React, { HTMLAttributes } from 'react'
+import type { ReactNode } from 'react'
+import { X } from '../../assets'
+import { IconButton } from '../../'
+import type { IconButtonProps } from '../../'
+
+export interface SlideOverHeaderProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * A react component to be used as the title in the header.
+   */
+  children: ReactNode
+  /**
+   * Props for the Close Button component.
+   */
+  closeBtnProps?: Partial<Omit<IconButtonProps, 'onClick'>>
+
+  onClose: () => void
+}
+
+const SlideOverHeader = ({
+  onClose,
+  children,
+  closeBtnProps = {},
+}: SlideOverHeaderProps) => {
+  return (
+    <header data-fs-slide-over-header>
+      {children}
+      <IconButton
+        data-fs-slide-over-header-icon
+        aria-label="Close"
+        icon={<X />}
+        onClick={onClose}
+        {...closeBtnProps}
+      />
+    </header>
+  )
+}
+
+export default SlideOverHeader

package/src/organisms/SlideOver/index.ts

@@ -0,0 +1,5 @@
+export { default } from './SlideOver'
+export type { SlideOverProps } from './SlideOver'
+
+export { default as SlideOverHeader } from './SlideOverHeader'
+export type { SlideOverHeaderProps } from './SlideOverHeader'

package/dist/organisms/Hero/HeroHeading.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeroHeading.js","sourceRoot":"","sources":["../../../src/organisms/Hero/HeroHeading.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AA6BhC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAM,GAAG,iBAAiB,EAC1B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,OAAO,EAAE,CAAA;IAE3C,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,+CAEK,MAAM,KACf,UAAU;QAEd,2DAA0B,SAAS,EAAC,iBAAiB;YACnD;gBACE,0DAAwB,KAAK,CAAM;gBACnC,4DAA0B,QAAQ,CAAK;gBACtC,CAAC,CAAC,IAAI,IAAI,CACT,oBAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,YAAY,KAAK,MAAM,EAChC,IAAI,EAAE,oBAAC,UAAU,OAAG,EACpB,YAAY,EAAC,OAAO,IAEnB,QAAQ,CACE,CACd,CACG;YACL,IAAI,IAAI,OAAO,KAAK,WAAW,IAAI,CAClC,oBAAC,IAAI,+BAAmB,SAAS,EAAE,IAAI,GAAI,CAC5C,CACG,CACC,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}