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

package/dist/molecules/SearchTop/SearchTopTerm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchTopTerm.js","sourceRoot":"","sources":["../../../src/molecules/SearchTop/SearchTopTerm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,IAAI,EAA8B,MAAM,QAAQ,CAAA;AAqBhE,MAAM,aAAa,GAAG,UAAU,CAC9B,SAAS,aAAa,CAAC,EACrB,MAAM,GAAG,oBAAoB,EAC7B,KAAK,EACL,SAAS,EACT,KAAK,GACN;IACC,OAAO,CACL,4EAAyC,MAAM;QAC7C,oBAAC,IAAI,OAAK,SAAS,wCAA+B,OAAO,EAAC,SAAS;YACjE,oBAAC,KAAK,2CAA+B,OAAO,EAAC,MAAM,IAChD,KAAK,GAAG,CAAC,CACJ;YACP,KAAK,CACD,CACJ,CACN,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,aAAa,CAAA"}

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

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

package/dist/molecules/SearchTop/index.js

@@ -0,0 +1,3 @@
+export { default } from './SearchTop';
+export { default as SearchTopTerm } from './SearchTopTerm';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/SearchTop/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAGrC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/organisms/Hero/{HeroHeading.d.ts → HeroHeader.d.ts}

@@ -1,6 +1,6 @@
 import type { ReactNode, HTMLAttributes } from 'react';
 import React from 'react';
-export interface HeroHeadingProps extends HTMLAttributes<HTMLDivElement> {
+export interface HeroHeaderProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Content for the h1 tag.
      */
@@ -26,5 +26,5 @@ export interface HeroHeadingProps extends HTMLAttributes<HTMLDivElement> {
      */
     testId?: string;
 }
-declare const HeroHeading: React.ForwardRefExoticComponent<HeroHeadingProps & React.RefAttributes<HTMLDivElement>>;
-export default HeroHeading;
+declare const HeroHeader: React.ForwardRefExoticComponent<HeroHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default HeroHeader;

package/dist/organisms/Hero/{HeroHeading.js → HeroHeader.js}

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import { Icon, LinkButton } from '../..';
 import { ArrowRight } from '../../assets';
 import { useHero } from './Hero';
-const HeroHeading = forwardRef(function HeroHeading({ icon, link, title, linkText, subtitle, children, testId = 'fs-hero-heading', ...otherProps }, ref) {
+const HeroHeader = forwardRef(function HeroHeader({ icon, link, title, linkText, subtitle, children, testId = 'fs-hero-heading', ...otherProps }, ref) {
     const { variant, colorVariant } = useHero();
     return (React.createElement("header", { ref: ref, "data-fs-hero-heading": true, "data-testid": testId, ...otherProps },
         React.createElement("div", { "data-fs-hero-wrapper": true, className: "layout__content" },
@@ -12,5 +12,5 @@ const HeroHeading = forwardRef(function HeroHeading({ icon, link, title, linkTex
                 !!link && (React.createElement(LinkButton, { href: link, inverse: colorVariant === 'main', icon: React.createElement(ArrowRight, null), iconPosition: "right" }, linkText))),
             icon && variant === 'secondary' && (React.createElement(Icon, { "data-fs-hero-icon": true, component: icon })))));
 });
-export default HeroHeading;
-//# sourceMappingURL=HeroHeading.js.map
+export default HeroHeader;
+//# sourceMappingURL=HeroHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeroHeader.js","sourceRoot":"","sources":["../../../src/organisms/Hero/HeroHeader.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,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,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,UAAU,CAAA"}

package/dist/organisms/Hero/index.d.ts

@@ -2,5 +2,5 @@ export { default } from './Hero';
 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/dist/organisms/Hero/index.js

@@ -1,4 +1,4 @@
 export { default } from './Hero';
 export { default as HeroImage } from './HeroImage';
-export { default as HeroHeading } from './HeroHeading';
+export { default as HeroHeader } from './HeroHeader';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/Hero/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAGhC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/Hero/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAGhC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA"}

package/dist/organisms/SlideOver/SlideOver.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+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;
+};
+declare function SlideOver({ isOpen, direction, size, fade, children, onDismiss, testId, ...otherProps }: SlideOverProps): JSX.Element;
+export default SlideOver;

package/dist/organisms/SlideOver/SlideOver.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Modal } from '../../';
+function SlideOver({ isOpen, direction = 'leftSide', size = 'full', fade = 'out', children, onDismiss, testId = 'fs-slide-over', ...otherProps }) {
+    return (React.createElement(Modal, { "data-fs-modal": null, "data-fs-slide-over": true, "data-fs-slide-over-direction": direction, "data-fs-slide-over-size": size, "data-fs-slide-over-state": fade, isOpen: isOpen, onDismiss: onDismiss, ...otherProps }, children));
+}
+export default SlideOver;
+//# sourceMappingURL=SlideOver.js.map

package/dist/organisms/SlideOver/SlideOver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideOver.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/SlideOver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAmC9B,SAAS,SAAS,CAAC,EACjB,MAAM,EACN,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,eAAe,EACxB,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,KAAK,qBACW,IAAI,8DAEW,SAAS,6BACd,IAAI,8BACH,IAAI,EAC9B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,KAChB,UAAU,IAEb,QAAQ,CACH,CACT,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}

package/dist/organisms/SlideOver/SlideOverHeader.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+import type { ReactNode } from 'react';
+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;
+}
+declare const SlideOverHeader: ({ onClose, children, closeBtnProps, }: SlideOverHeaderProps) => JSX.Element;
+export default SlideOverHeader;

package/dist/organisms/SlideOver/SlideOverHeader.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { X } from '../../assets';
+import { IconButton } from '../../';
+const SlideOverHeader = ({ onClose, children, closeBtnProps = {}, }) => {
+    return (React.createElement("header", { "data-fs-slide-over-header": true },
+        children,
+        React.createElement(IconButton, { "data-fs-slide-over-header-icon": true, "aria-label": "Close", icon: React.createElement(X, null), onClick: onClose, ...closeBtnProps })));
+};
+export default SlideOverHeader;
+//# sourceMappingURL=SlideOverHeader.js.map

package/dist/organisms/SlideOver/SlideOverHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideOverHeader.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/SlideOverHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAE7C,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAA;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAiBnC,MAAM,eAAe,GAAG,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,aAAa,GAAG,EAAE,GACG,EAAE,EAAE;IACzB,OAAO,CACL;QACG,QAAQ;QACT,oBAAC,UAAU,0DAEE,OAAO,EAClB,IAAI,EAAE,oBAAC,CAAC,OAAG,EACX,OAAO,EAAE,OAAO,KACZ,aAAa,GACjB,CACK,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/organisms/SlideOver/index.d.ts

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

package/dist/organisms/SlideOver/index.js

@@ -0,0 +1,3 @@
+export { default } from './SlideOver';
+export { default as SlideOverHeader } from './SlideOverHeader';
+//# sourceMappingURL=index.js.map

package/dist/organisms/SlideOver/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAGrC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.69-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": "9203ce7fd8a8fd0d0ae60afde8743adaec18c53d"
+  "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/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,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,26 @@ 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,
+  SearchProductCardContent,
+} from './molecules/SearchProductCard'
+export type {
+  SearchProductCardProps,
+  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 {
@@ -147,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'
@@ -159,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/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/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/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