@faststore/core 22.42.6

package/src/components/sections/BannerText/BannerText.stories.mdx

@@ -0,0 +1,270 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+
+import BannerText from '.'
+
+import { TokenTable, TokenRow } from 'src/../.storybook/components'
+
+<Meta
+  title="Organisms/BannerText"
+  argTypes={{
+    actionPath: { table: { disable: true } },
+  }}
+  component={BannerText}
+/>
+
+export const Template = (args) => <BannerText {...args} />
+
+<header>
+
+# Banner Text
+
+Banners are used for advertising brands, products, and/or collections. They comprise a title, some description (only available for the `Secondary` variation), and a call-to-action button.
+
+</header>
+
+## Overview
+
+The `BannerText` component uses [FastStore UI Banner](https://www.faststore.dev/reference/ui/molecules/Banner) as base.
+
+---
+
+## Usage
+
+`import BannerText from 'src/components/sections/BannerText'`
+
+<Canvas>
+  <Story
+    name="BannerText"
+    args={{
+      title:
+        "The sun has set on our Summer Sale! Save up to 50% off. Don't miss out!",
+      actionPath: '/',
+      actionLabel: 'Call to action',
+      colorVariant: 'accent',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="BannerText" />
+
+<TokenTable>
+  <TokenRow token="--fs-banner-padding-mobile" value="var(--fs-spacing-6) 5%" />
+  <TokenRow
+    token="--fs-banner-padding-desktop"
+    value="var(--fs-spacing-9) 15%"
+  />
+</TokenTable>
+
+## Nested Elements
+
+### Link
+
+<TokenTable>
+  <TokenRow token="--fs-banner-link-min-width" value="11.25rem" />
+  <TokenRow token="--fs-banner-link-margin-top" value="var(--fs-spacing-6)" />
+</TokenTable>
+
+### Title
+
+<TokenTable>
+  <TokenRow token="--fs-banner-title-size" value="var(--fs-text-size-lead)" />
+  <TokenRow
+    token="--fs-banner-title-weight"
+    value="var(--fs-text-weight-bold)"
+  />
+  <TokenRow token="--fs-banner-title-line-height" value="1.2" />
+</TokenTable>
+
+---
+
+## Hierarchy
+
+### Primary
+
+<Canvas>
+  <Story
+    name="Primary"
+    args={{
+      title:
+        "The sun has set on our Summer Sale! Save up to 50% off. Don't miss out!",
+      actionPath: '/',
+      actionLabel: 'Call to action',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-banner-primary-title-size"
+    value="var(--fs-text-size-title-page)"
+  />
+</TokenTable>
+
+### Secondary
+
+<Canvas>
+  <Story
+    name="Secondary"
+    args={{
+      variant: 'secondary',
+      title: 'The sun has set on our Summer Sale!',
+      caption: "Save up to 50% off. Don't miss out!",
+      actionPath: '/',
+      actionLabel: 'Call to action',
+      colorVariant: 'main',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-banner-secondary-title-size"
+    value="var(--fs-text-size-4)"
+  />
+  <TokenRow
+    token="--fs-banner-secondary-caption-size"
+    value="var(--fs-text-size-base)"
+  />
+  <TokenRow
+    token="--fs-banner-secondary-caption-weight"
+    value="var(--fs-text-weight-regular)"
+  />
+  <TokenRow token="--fs-banner-secondary-line-height" value="1.5" />
+</TokenTable>
+
+---
+
+## Variants
+
+### Main
+
+<Canvas isColumn>
+  <Story
+    name="Main"
+    args={{
+      title: 'The sun has set on our Summer Sale!',
+      caption: "Save up to 50% off. Don't miss out!",
+      actionPath: '/',
+      actionLabel: 'Call to action',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="Secondary Main"
+    args={{
+      variant: 'secondary',
+      title: 'The sun has set on our Summer Sale!',
+      caption: "Save up to 50% off. Don't miss out!",
+      actionPath: '/',
+      actionLabel: 'Call to action',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-banner-main-bkg-color"
+    value="var(--fs-color-primary-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-banner-main-text-color"
+    value="var(--fs-color-primary-text)"
+    isColor
+  />
+</TokenTable>
+
+### Light
+
+<Canvas isColumn>
+  <Story
+    name="Light"
+    args={{
+      title: 'The sun has set on our Summer Sale!',
+      caption: "Save up to 50% off. Don't miss out!",
+      actionPath: '/',
+      actionLabel: 'Call to action',
+      colorVariant: 'light',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="Secondary Light"
+    args={{
+      variant: 'secondary',
+      title: 'The sun has set on our Summer Sale!',
+      caption: "Save up to 50% off. Don't miss out!",
+      actionPath: '/',
+      actionLabel: 'Call to action',
+      colorVariant: 'light',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-banner-light-bkg-color"
+    value="var(--fs-color-secondary-bkg-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-banner-light-text-color"
+    value="var(--fs-color-text-display)"
+    isColor
+  />
+</TokenTable>
+
+### Accent
+
+<Canvas isColumn>
+  <Story
+    name="Accent"
+    args={{
+      title: 'The sun has set on our Summer Sale!',
+      caption: "Save up to 50% off. Don't miss out!",
+      actionPath: '/',
+      actionLabel: 'Call to action',
+      colorVariant: 'accent',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="Secondary Accent"
+    args={{
+      variant: 'secondary',
+      title: 'The sun has set on our Summer Sale!',
+      caption: "Save up to 50% off. Don't miss out!",
+      actionPath: '/',
+      actionLabel: 'Call to action',
+      colorVariant: 'accent',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-banner-accent-bkg-color"
+    value="var(--fs-color-highlighted-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-banner-accent-text-color"
+    value="var(--fs-banner-light-text-color)"
+    isColor
+  />
+</TokenTable>

package/src/components/sections/BannerText/BannerText.tsx

@@ -0,0 +1,87 @@
+import { Banner, BannerContent, BannerLink } from '@faststore/ui'
+import type { HTMLAttributes } from 'react'
+
+import { ButtonLink } from 'src/components/ui/Button'
+
+import Section from '../Section'
+import styles from './banner-text.module.scss'
+
+type BannerTextVariant =
+  | {
+      variant?: 'primary'
+      /**
+       * The content for the h2 tag.
+       */
+      title: string
+      caption?: never
+    }
+  | {
+      variant: 'secondary'
+      /**
+       * The content for the h2 tag.
+       */
+      title: string
+      /**
+       * The content for the p tag below the h2.
+       */
+      caption: string
+    }
+
+interface BaseProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The href used at the link
+   */
+  actionPath: string
+  /**
+   * The label used at the link
+   */
+  actionLabel: string
+  /**
+   * Color variant combinations
+   * @default: 'main'
+   */
+  colorVariant?: 'main' | 'light' | 'accent'
+}
+
+export type BannerTextProps = BaseProps & BannerTextVariant
+
+function BannerText({
+  title,
+  caption,
+  actionPath,
+  actionLabel,
+  variant = 'primary',
+  colorVariant = 'main',
+}: BannerTextProps) {
+  return (
+    <Section className="layout__section">
+      <Banner
+        className={styles.fsBannerText}
+        data-fs-banner-text
+        data-fs-banner-text-variant={variant}
+        data-fs-banner-text-color-variant={colorVariant}
+      >
+        <BannerContent data-fs-banner-text-content className="layout__content">
+          <div
+            data-fs-banner-text-heading
+            data-fs-banner-text-color-variant={colorVariant}
+          >
+            <h2>{title}</h2>
+            {variant === 'secondary' && caption && <p>{caption}</p>}
+          </div>
+          <BannerLink data-fs-banner-text-link>
+            <ButtonLink
+              href={actionPath}
+              variant={variant}
+              inverse={colorVariant === 'main'}
+            >
+              {actionLabel}
+            </ButtonLink>
+          </BannerLink>
+        </BannerContent>
+      </Banner>
+    </Section>
+  )
+}
+
+export default BannerText

package/src/components/sections/BannerText/banner-text.module.scss

@@ -0,0 +1,127 @@
+@import "src/styles/scaffold";
+
+.fs-banner-text {
+  // --------------------------------------------------------
+  // Design Tokens for Banner Text
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-banner-padding-mobile                : var(--fs-spacing-6) 5%;
+  --fs-banner-padding-desktop               : var(--fs-spacing-9) 15%;
+
+  // Link
+  --fs-banner-link-min-width                : 11.25rem;
+  --fs-banner-link-margin-top               : var(--fs-spacing-6);
+
+  // Title
+  --fs-banner-title-size                    : var(--fs-text-size-lead);
+  --fs-banner-title-weight                  : var(--fs-text-weight-bold);
+  --fs-banner-title-line-height             : 1.2;
+
+  // Primary
+  --fs-banner-primary-title-size            : var(--fs-text-size-title-page);
+
+  // Secondary
+  --fs-banner-secondary-title-size          : var(--fs-text-size-4);
+  --fs-banner-secondary-caption-size        : var(--fs-text-size-base);
+  --fs-banner-secondary-caption-weight      : var(--fs-text-weight-regular);
+  --fs-banner-secondary-caption-line-height : 1.5;
+
+  // Main
+  --fs-banner-main-bkg-color                : var(--fs-color-primary-bkg);
+  --fs-banner-main-text-color               : var(--fs-color-primary-text);
+
+  // Light
+  --fs-banner-light-bkg-color               : var(--fs-color-secondary-bkg-light);
+  --fs-banner-light-text-color              : var(--fs-color-text-display);
+
+  // Accent
+  --fs-banner-accent-bkg-color              : var(--fs-color-highlighted-bkg);
+  --fs-banner-accent-text-color             : var(--fs-banner-light-text-color);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  height: 100%;
+  padding: var(--fs-banner-padding-mobile);
+  text-align: center;
+
+  @include media(">=notebook") {
+    padding: var(--fs-banner-padding-desktop);
+  }
+
+  [data-fs-banner-text-content] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  [data-fs-banner-text-link] [data-fs-link] {
+    min-width: var(--fs-banner-link-min-width);
+    margin-top: var(--fs-banner-link-margin-top);
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-banner-text-variant="primary"] {
+    h2 {
+      font-size: var(--fs-banner-title-size);
+      font-weight: var(--fs-banner-title-weight);
+      line-height: var(--fs-banner-title-line-height);
+
+      @include media(">=notebook") {
+        display: block;
+        font-size: var(--fs-banner-primary-title-size);
+      }
+    }
+  }
+
+  &[data-fs-banner-text-variant="secondary"] {
+    h2 {
+      margin-bottom: var(--fs-spacing-2);
+      font-size: var(--fs-banner-title-size);
+      font-weight: var(--fs-banner-title-weight);
+      line-height: var(--fs-banner-title-line-height);
+
+      @include media(">=notebook") {
+        display: block;
+        font-size: var(--fs-banner-secondary-title-size);
+      }
+    }
+
+    p {
+      font-size: var(--fs-banner-secondary-caption-size);
+      font-weight: var(--fs-banner-secondary-caption-weight);
+      line-height: var(--fs-banner-secondary-caption-line-height);
+    }
+  }
+
+  &[data-fs-banner-text-color-variant="main"] {
+    background-color: var(--fs-banner-main-bkg-color);
+
+    [data-fs-banner-text-heading] {
+      color: var(--fs-banner-main-text-color);
+    }
+  }
+
+  &[data-fs-banner-text-color-variant="light"] {
+    background-color: var(--fs-banner-light-bkg-color);
+
+    [data-fs-banner-text-heading] {
+      color: var(--fs-banner-light-text-color);
+    }
+  }
+
+  &[data-fs-banner-text-color-variant="accent"] {
+    background-color: var(--fs-banner-accent-bkg-color);
+
+    [data-fs-banner-text-heading] {
+      color: var(--fs-banner-accent-text-color);
+    }
+  }
+}

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

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

package/src/components/sections/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,24 @@
+import { memo } from 'react'
+
+import UIBreadcrumb from 'src/components/ui/Breadcrumb'
+import type { BreadcrumbProps } from 'src/components/ui/Breadcrumb'
+
+import Section from '../Section'
+
+interface BreadcrumbWrapperProps
+  extends Partial<Pick<BreadcrumbProps, 'breadcrumbList'>> {
+  name: string
+}
+
+function Breadcrumb({ breadcrumbList, name }: BreadcrumbWrapperProps) {
+  const fallback = [{ item: '/', name, position: 1 }]
+  const list = breadcrumbList ?? fallback
+
+  return (
+    <Section className="layout__content">
+      <UIBreadcrumb breadcrumbList={list} />
+    </Section>
+  )
+}
+
+export default memo(Breadcrumb)

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

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