@faststore/core 22.42.6

package/src/components/sections/Newsletter/Newsletter.tsx

@@ -0,0 +1,151 @@
+import type { ComponentPropsWithRef, FormEvent, ReactNode } from 'react'
+import { forwardRef, useRef } from 'react'
+import { Form } from '@faststore/ui'
+
+import { useUI } from 'src/sdk/ui/Provider'
+import Icon from 'src/components/ui/Icon'
+import Button from 'src/components/ui/Button'
+import Link from 'src/components/ui/Link'
+import InputText from 'src/components/ui/InputText'
+import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'
+
+import Section from '../Section'
+import styles from './newsletter.module.scss'
+
+export interface NewsletterProps
+  extends Omit<ComponentPropsWithRef<'form'>, 'title' | 'onSubmit'> {
+  /**
+   * Title for the section.
+   */
+  title: ReactNode
+  /**
+   * A description for the section.
+   */
+  description?: ReactNode
+  /**
+   * The card Variant
+   */
+  card?: boolean
+  /**
+   * The compact version of the Newsletter component
+   */
+  lite?: boolean
+}
+
+const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
+  function Newsletter(
+    { title, description, card = false, lite = false, ...otherProps },
+    ref
+  ) {
+    const { subscribeUser, loading, data } = useNewsletter()
+    const nameInputRef = useRef<HTMLInputElement>(null)
+    const emailInputRef = useRef<HTMLInputElement>(null)
+
+    const { pushToast } = useUI()
+
+    const handleSubmit = (event: FormEvent) => {
+      event.preventDefault()
+      subscribeUser({
+        data: {
+          name: nameInputRef.current?.value ?? '',
+          email: emailInputRef.current?.value ?? '',
+        },
+      })
+
+      if (data?.subscribeToNewsletter?.id) {
+        pushToast({
+          title: 'Hooray!',
+          message: 'Thank for your subscription.',
+          status: 'INFO',
+          icon: 'CircleWavyCheck',
+        })
+      } else {
+        pushToast({
+          title: 'Oops.',
+          message: 'Something went wrong. Please Try again.',
+          status: 'ERROR',
+          icon: 'CircleWavyWarning',
+        })
+      }
+
+      const formElement = event.currentTarget as HTMLFormElement
+
+      formElement.reset()
+    }
+
+    return (
+      <Section
+        data-fs-newsletter={card ? 'card' : ''}
+        className={`layout__section ${styles.fsNewsletter}`}
+      >
+        <Form
+          data-fs-newsletter-form
+          ref={ref}
+          onSubmit={handleSubmit}
+          {...otherProps}
+          className="layout__content"
+        >
+          <header data-fs-newsletter-header>
+            <h3>
+              <Icon name="Envelop" width={32} height={32} />
+              {title}
+            </h3>
+            {description && <span> {description}</span>}
+          </header>
+
+          <div data-fs-newsletter-controls>
+            {lite ? (
+              <>
+                <InputText
+                  inputRef={emailInputRef}
+                  id="newsletter-email"
+                  label="Your Email"
+                  type="email"
+                  required
+                  actionable
+                  onSubmit={() => undefined}
+                  onClear={() => undefined}
+                  buttonActionText="Subscribe"
+                  displayClearButton={false}
+                />
+                <span data-fs-newsletter-addendum>
+                  By subscribing to our newsletter you agree to to our{' '}
+                  <Link href="/" inverse variant="inline">
+                    Privacy Policy.
+                  </Link>
+                </span>
+              </>
+            ) : (
+              <>
+                <InputText
+                  inputRef={nameInputRef}
+                  id="newsletter-name"
+                  label="Your Name"
+                  required
+                />
+                <InputText
+                  inputRef={emailInputRef}
+                  id="newsletter-email"
+                  label="Your Email"
+                  type="email"
+                  required
+                />
+                <span data-fs-newsletter-addendum>
+                  By subscribing to our newsletter you agree to to our{' '}
+                  <Link href="/" inverse variant="inline">
+                    Privacy Policy.
+                  </Link>
+                </span>
+                <Button variant="secondary" inverse type="submit">
+                  {loading ? 'Loading...' : 'Subscribe'}
+                </Button>
+              </>
+            )}
+          </div>
+        </Form>
+      </Section>
+    )
+  }
+)
+
+export default Newsletter

package/src/components/sections/Newsletter/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Newsletter'
+export type { NewsletterProps } from './Newsletter'

package/src/components/sections/Newsletter/newsletter.module.scss

@@ -0,0 +1,135 @@
+@import "src/styles/scaffold";
+
+.fs-newsletter {
+  // --------------------------------------------------------
+  // Design Tokens for Newsletter
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-newsletter-padding                           : var(--fs-spacing-4) var(--fs-spacing-1) var(--fs-spacing-5) var(--fs-spacing-1);
+  --fs-newsletter-bkg                               : var(--fs-color-primary-bkg);
+  --fs-newsletter-text-color                        : var(--fs-color-text-inverse);
+
+  // Title
+  --fs-newsletter-title-size                        : var(--fs-text-size-title-section);
+  --fs-newsletter-title-weight                      : var(--fs-text-weight-bold);
+
+  // Card
+  --fs-newsletter-card-border-radius                : var(--fs-border-radius);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: var(--fs-newsletter-padding);
+  color: var(--fs-newsletter-text-color);
+  background-color: var(--fs-newsletter-bkg);
+
+  [data-fs-newsletter-form] {
+    @include media(">=notebook") {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      column-gap: var(--fs-spacing-8);
+      padding-top: var(--fs-spacing-6);
+      padding-bottom: var(--fs-spacing-6);
+
+      [data-fs-newsletter-header] {
+        align-content: flex-start;
+      }
+    }
+
+    [data-fs-newsletter-controls] {
+      @include media(">=notebook") {
+        grid-template-columns: repeat(3, 1fr);
+        margin-top: 0;
+
+        [data-fs-input-text] {
+          grid-column: 1 / span 3;
+        }
+
+        [data-fs-button-inverse] {
+          grid-column: 3;
+        }
+
+        [data-fs-newsletter-addendum] {
+          grid-column: 1 / span 3;
+        }
+      }
+    }
+  }
+
+  [data-fs-newsletter-header] {
+    display: grid;
+    row-gap: var(--fs-spacing-2);
+    line-height: 1.5;
+    text-align: center;
+
+    @include media(">=notebook") {
+      text-align: left;
+    }
+  }
+
+  [data-fs-newsletter-header] h3 {
+    display: grid;
+    grid-template-columns: var(--fs-spacing-5) auto;
+    column-gap: var(--fs-spacing-1);
+    align-items: center;
+    justify-content: center;
+    font-size: var(--fs-newsletter-title-size);
+    font-weight: var(--fs-newsletter-title-weight);
+    color: var(--fs-newsletter-text-color);
+
+    @include media(">=notebook") {
+      justify-content: left;
+    }
+  }
+
+  [data-fs-newsletter-controls] {
+    display: grid;
+    row-gap: var(--fs-spacing-3);
+    margin-top: var(--fs-spacing-4);
+
+    [data-fs-button-inverse] {
+      margin-top: var(--fs-spacing-3);
+    }
+  }
+
+  [data-fs-newsletter-addendum] {
+    text-align: center;
+
+    @include media(">=notebook") {
+      text-align: left;
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-newsletter="card"] {
+    text-align: center;
+    border-radius: var(--fs-newsletter-card-border-radius);
+
+    [data-fs-newsletter-header] {
+      text-align: center;
+    }
+
+    @include media(">=notebook") {
+      [data-fs-newsletter-form] {
+        display: block;
+      }
+
+      [data-fs-newsletter-controls] {
+        margin-top: var(--fs-spacing-4);
+      }
+    }
+
+    [data-fs-newsletter-header] h3 {
+      justify-content: center;
+    }
+  }
+}

package/src/components/sections/ProducDetailsContent/ProductDetailsContent.stories.mdx

@@ -0,0 +1,66 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import ProductDetailsContent from '.'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Organisms/ProductDetailsContent"
+  component={ProductDetailsContent}
+  argTypes={{
+    initiallyExpanded: { defaultValue: 'first' },
+  }}
+/>
+
+export const TemplateProvider = (args) => {
+  return <ProductDetailsContent {...args} />
+}
+
+export const CustomLabelsTemplateProvider = (args) => {
+  return (
+    <ProductDetailsContent
+      labels={{
+        description: 'Product description',
+        about: 'Product specifications',
+        highlights: 'Highlights',
+        learnMore: 'More',
+      }}
+    />
+  )
+}
+
+<header>
+
+# Product Details Content
+
+This component is used to show information related to a product
+
+</header>
+
+## Overview
+
+The `ProductDetailsContent` component uses [Accordion](/docs/molecules-accordion-overview--default-story), [FastStore UI Table](https://www.faststore.dev/reference/ui/molecules/Table), and [FastStore UI List](https://www.faststore.dev/reference/ui/molecules/List) as base.
+
+---
+
+## Usage
+
+`import ProductDetailsContent from 'src/components/sections/ProductDetailsContent'`
+
+<Canvas>
+  <Story name="default">{TemplateProvider.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+---
+
+## Variants
+
+### Custom labels for each article
+
+<Canvas>
+  <Story name="customLabels">{CustomLabelsTemplateProvider.bind({})}</Story>
+</Canvas>

package/src/components/sections/ProducDetailsContent/ProductDetailsContent.tsx

@@ -0,0 +1,278 @@
+import { useState } from 'react'
+import {
+  List as UIList,
+  Table as UITable,
+  TableBody as UITableBody,
+  TableCell as UITableCell,
+  TableRow as UITableRow,
+  Icon as UIIcon,
+} from '@faststore/ui'
+
+import Accordion, { AccordionItem } from 'src/components/ui/Accordion'
+import Icon from 'src/components/ui/Icon'
+
+import styles from './product-details-content.module.scss'
+import Section from '../Section'
+
+interface ArticleLabels {
+  /**
+   * Label for the "description" article.
+   *
+   * @default 'Description'
+   */
+  description: string
+  /**
+   * Label for the "About this product" article.
+   *
+   * @default 'About this product'
+   */
+  about: string
+  /**
+   * Label for the "Product highlights" article.
+   *
+   * @default 'Product highlights'
+   */
+  highlights: string
+  /**
+   * Label for the "Learn more" article.
+   *
+   * @default 'Learn more'
+   */
+  learnMore: string
+}
+
+interface Props {
+  /**
+   * Controls which articles will be initially expanded.
+   *
+   * @default 'first'
+   */
+  initiallyExpanded?: 'first' | 'all' | 'none'
+  /**
+   * Defines the labels used in each article.
+   *
+   * @default {description: 'Description', about: 'About this product', highlights: 'Product highlights', learnMore: 'Learn More' }
+   */
+  labels?: Partial<ArticleLabels>
+}
+
+/**
+ * Maps 'initiallyExpanded' prop values to indices
+ */
+const INITIALLY_EXPANDED_MAP = {
+  first: [0],
+  all: [0, 1, 2, 3],
+  none: [],
+}
+
+/**
+ * Default article labels
+ */
+const DEFAULT_LABELS: ArticleLabels = {
+  description: 'Description',
+  about: 'About this product',
+  highlights: 'Product highlights',
+  learnMore: 'Learn More',
+} as const
+
+function ProductDetailsContent({
+  initiallyExpanded = 'first',
+  labels: propLabels = {},
+}: Props) {
+  const [indices, setIndices] = useState(
+    new Set(INITIALLY_EXPANDED_MAP[initiallyExpanded])
+  )
+
+  const onChange = (index: number) => {
+    setIndices((currentIndices) => {
+      const newIndices = new Set(currentIndices)
+
+      if (currentIndices.has(index)) {
+        newIndices.delete(index)
+      } else {
+        newIndices.add(index)
+      }
+
+      return newIndices
+    })
+  }
+
+  const labels = { ...DEFAULT_LABELS, ...propLabels }
+
+  return (
+    <Section
+      className={styles.fsProductDetailsContent}
+      data-fs-product-details-content
+    >
+      <Accordion
+        expandedIndices={indices}
+        onChange={onChange}
+        aria-label="Product Details Content"
+      >
+        <AccordionItem
+          as="article"
+          index={0}
+          isExpanded={indices.has(0)}
+          buttonLabel={
+            <h2 className="text__title-subsection">{labels.description}</h2>
+          }
+          data-fs-product-details-description
+          prefixId="product-details-content"
+        >
+          <p className="text__body">
+            Sony WH-1000XM4 Wireless Industry Leading Noise Canceling Overhead
+            Headphones with Mic for Phone-Call and Alexa Voice Control, Black.
+          </p>
+        </AccordionItem>
+        <AccordionItem
+          as="article"
+          index={1}
+          isExpanded={indices.has(1)}
+          buttonLabel={
+            <h2 className="text__title-subsection">{labels.about}</h2>
+          }
+          data-fs-product-details-about
+          prefixId="product-details-content"
+        >
+          <UITable
+            cellPadding={0}
+            cellSpacing={0}
+            className="text__title-mini-alt"
+          >
+            <UITableBody>
+              <UITableRow>
+                <UITableCell variant="header">
+                  <UIIcon
+                    data-fs-accordion-item-button-icon
+                    component={<Icon name="Ruler" width={18} height={18} />}
+                  />
+                  <span>Width</span>
+                </UITableCell>
+                <UITableCell>1.50m</UITableCell>
+              </UITableRow>
+              <UITableRow>
+                <UITableCell variant="header">
+                  <UIIcon
+                    data-fs-accordion-item-button-icon
+                    component={<Icon name="Ruler" width={18} height={18} />}
+                  />
+                  Height
+                </UITableCell>
+                <UITableCell>1.50m</UITableCell>
+              </UITableRow>
+              <UITableRow>
+                <UITableCell variant="header">
+                  <UIIcon
+                    data-fs-accordion-item-button-icon
+                    component={<Icon name="Ruler" width={18} height={18} />}
+                  />
+                  Dimensions
+                </UITableCell>
+                <UITableCell>7.27 x 3.03 x 9.94 inches</UITableCell>
+              </UITableRow>
+              <UITableRow>
+                <UITableCell variant="header">
+                  <UIIcon
+                    data-fs-accordion-item-button-icon
+                    component={<Icon name="Bag" width={18} height={18} />}
+                  />
+                  Weight
+                </UITableCell>
+                <UITableCell>12oz</UITableCell>
+              </UITableRow>
+              <UITableRow>
+                <UITableCell variant="header">
+                  <UIIcon
+                    data-fs-accordion-item-button-icon
+                    component={
+                      <Icon name="RocketLaunch" width={18} height={18} />
+                    }
+                  />
+                  Days to ship
+                </UITableCell>
+                <UITableCell>11 Days</UITableCell>
+              </UITableRow>
+              <UITableRow>
+                <UITableCell variant="header">
+                  <UIIcon
+                    data-fs-accordion-item-button-icon
+                    component={
+                      <Icon name="CircleWavyCheck" width={18} height={18} />
+                    }
+                  />
+                  Estimated
+                </UITableCell>
+                <UITableCell>Nov 10th</UITableCell>
+              </UITableRow>
+            </UITableBody>
+          </UITable>
+        </AccordionItem>
+        <AccordionItem
+          as="article"
+          className="text__body"
+          index={2}
+          isExpanded={indices.has(2)}
+          buttonLabel={
+            <h2 className="text__title-subsection">{labels.highlights}</h2>
+          }
+          data-fs-product-details-highlights
+          prefixId="product-details-content"
+        >
+          <UIList>
+            <li>
+              Industry-leading noise canceling with Dual Noise Sensor technology
+            </li>
+            <li>
+              Next-level music with Edge-AI, co-developed with Sony Music
+              Studios Tokyo
+            </li>
+            <li>
+              Up to 30-hour battery life with quick charging (10 min charge for
+              5 hours of playback)
+            </li>
+            <li>
+              Touch Sensor controls to pause play skip tracks, control volume,
+              activate your voice assistant, and answer phone calls
+            </li>
+            <li>
+              Speak-to-chat technology automatically reduces volume during
+              conversations
+            </li>
+            <li>Superior call quality with precise voice pickup</li>
+            <li>
+              Wearing detection pauses playback when headphones are removed
+            </li>
+            <li>Seamless multiple-device pairing</li>
+            <li>
+              Adaptive Sound Control provides a personalized listening
+              experience
+            </li>
+            <li>Updated design relieves pressure for long-lasting comfort</li>
+          </UIList>
+        </AccordionItem>
+        <AccordionItem
+          as="article"
+          index={3}
+          isExpanded={indices.has(3)}
+          buttonLabel={
+            <h2 className="text__title-subsection">{labels.learnMore}</h2>
+          }
+          data-fs-product-details-learn-more
+          prefixId="product-details-content"
+        >
+          <p className="text__body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laboru.
+          </p>
+        </AccordionItem>
+      </Accordion>
+    </Section>
+  )
+}
+
+export default ProductDetailsContent

package/src/components/sections/ProducDetailsContent/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductDetailsContent'

package/src/components/sections/ProducDetailsContent/product-details-content.module.scss

@@ -0,0 +1,50 @@
+.fs-product-details-content {
+  // -----------------------------
+  // List
+  // -----------------------------
+
+  [data-fs-product-details-highlights] [data-fs-list="unordered"] {
+    list-style: initial;
+    list-style-position: inside;
+  }
+
+  // -----------------------------
+  // Table
+  // -----------------------------
+
+  [data-fs-product-details-about] [data-fs-table] {
+    width: 100%;
+
+    [data-fs-accordion-item-button-icon] {
+      height: 18px;
+    }
+
+    [data-fs-icon] {
+      margin-right: var(--fs-spacing-2);
+    }
+
+    tr:nth-child(even) td {
+      background-color: var(--fs-color-neutral-1);
+      border-top-right-radius: var(--fs-border-radius);
+      border-bottom-right-radius: var(--fs-border-radius);
+    }
+
+    tr:nth-child(even) th {
+      background-color: var(--fs-color-neutral-1);
+      border-top-left-radius: var(--fs-border-radius);
+      border-bottom-left-radius: var(--fs-border-radius);
+    }
+
+    td {
+      padding: var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2) 0;
+      text-align: right;
+    }
+
+    th {
+      display: flex;
+      padding: var(--fs-spacing-2) 0 var(--fs-spacing-2) var(--fs-spacing-3);
+      font-weight: normal;
+      text-align: left;
+    }
+  }
+}