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

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

package/src/molecules/SearchProductCard/SearchProductCardImage.tsx

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } 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
+}
+
+const SearchProductCardImage = forwardRef<
+  HTMLDivElement,
+  SearchProductCardImageProps
+>(function SearchProductCardImage(
+  { testId = 'fs-search-product-card-image', children, ...otherProps },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      data-fs-search-product-card-image
+      data-testid={testId}
+      {...otherProps}
+    >
+      {children}
+    </div>
+  )
+})
+
+export default SearchProductCardImage

package/src/molecules/SearchProductCard/index.ts

@@ -0,0 +1,8 @@
+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/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"}