@faststore/core 22.42.6

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

@@ -0,0 +1,277 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+import { TokenTable, TokenRow } from 'src/../.storybook/components'
+
+import Hero from '.'
+import Icon from 'src/components/ui/Icon'
+
+<Meta
+  title="Organisms/Hero"
+  component={Hero}
+  argTypes={{
+    imageAlt: {
+      control: {
+        disable: true,
+      },
+    },
+    imageSrc: {
+      control: {
+        disable: true,
+      },
+    },
+    variant: {
+      defaultValue: 'primary',
+    },
+    colorVariant: {
+      defaultValue: 'main',
+    },
+    icon: {
+      control: { disable: true },
+    },
+  }}
+/>
+
+export const Template = (args) => <Hero {...args} />
+
+<header>
+
+# Hero
+
+The `Hero` component is a full-width banner presented on the above-the-fold section of a web page with the intent to show the brand's identity and messaging.
+
+</header>
+
+## Overview
+
+The `Hero` component uses [FastStore UI Hero](https://www.faststore.dev/reference/ui/organisms/Hero) as base.
+
+---
+
+## Usage
+
+`import Hero from 'src/components/sections/Hero'`
+
+<Canvas>
+  <Story
+    name="usage"
+    args={{
+      title: 'Explore more about our amazing products',
+      subtitle: 'All the amazing products from the brands we partner with.',
+      imageSrc:
+        'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
+      imageAlt: 'Quest 2 Controller on a table',
+      link: '/',
+      linkText: 'See more',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="usage" />
+
+<TokenTable>
+  <TokenRow token="--fs-hero-text-size" value="var(--fs-text-size-lead)" />
+  <TokenRow token="--fs-hero-text-line-height" value="1.33" />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Image
+
+<TokenTable>
+  <TokenRow token="--fs-hero-image-border-radius" value="0" />
+</TokenTable>
+
+### Title
+
+<TokenTable>
+  <TokenRow
+    token="--fs-hero-title-padding"
+    value="var(--fs-spacing-5) 0 var(--fs-spacing-6)"
+  />
+  <TokenRow
+    token="--fs-hero-title-weight"
+    value="var(--fs-text-weight-black)"
+  />
+  <TokenRow token="--fs-hero-title-line-height" value="1.1" />
+</TokenTable>
+
+### Subtitle
+
+<TokenTable>
+  <TokenRow
+    token="--fs-hero-subtitle-margin-top-mobile"
+    value="var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-hero-subtitle-margin-top-tablet"
+    value="var(--fs-spacing-4)"
+  />
+  <TokenRow token="--fs-hero-subtitle-size" value="var(--fs-hero-text-size)" />
+  <TokenRow
+    token="--fs-hero-subtitle-line-height"
+    value="var(--fs-hero-text-line-height)"
+  />
+</TokenTable>
+
+---
+
+## Hierarchy
+
+### Primary
+
+<Canvas>
+  <Story
+    name="primary"
+    args={{
+      variant: 'primary',
+      title: 'Explore more about our amazing products',
+      subtitle: 'All the amazing products from the brands we partner with.',
+      imageSrc:
+        'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
+      imageAlt: 'Quest 2 Controller on a table',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-hero-primary-image-height-mobile" value="15rem" />
+  <TokenRow token="--fs-hero-primary-image-height-desktop" value="29rem" />
+  <TokenRow
+    token="--fs-hero-primary-title-size"
+    value="var(--fs-text-size-title-huge)"
+  />
+</TokenTable>
+
+### Secondary
+
+<Canvas>
+  <Story
+    name="secondary"
+    args={{
+      variant: 'secondary',
+      title: 'Explore more about our amazing products',
+      subtitle: 'All the amazing products from the brands we partner with.',
+      imageSrc:
+        'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
+      imageAlt: 'Quest 2 Controller on a table',
+      icon: <Icon name="House" width="40" height="40" />,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-hero-secondary-image-height-mobile" value="11.25rem" />
+  <TokenRow
+    token="--fs-hero-secondary-image-height-desktop"
+    value="14.188rem"
+  />
+  <TokenRow
+    token="--fs-hero-secondary-title-size"
+    value="var(--fs-text-size-title-page)"
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### Main
+
+<Canvas>
+  <Story
+    name="main"
+    args={{
+      colorVariant: 'main',
+      title: 'Explore more about our amazing products',
+      subtitle: 'All the amazing products from the brands we partner with.',
+      imageSrc:
+        'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
+      imageAlt: 'Quest 2 Controller on a table',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-hero-main-bkg-color"
+    value="var(--fs-color-primary-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-hero-main-text-color"
+    value="var(--fs-color-primary-text)"
+    isColor
+  />
+</TokenTable>
+
+### Light
+
+<Canvas>
+  <Story
+    name="light"
+    args={{
+      colorVariant: 'light',
+      title: 'Explore more about our amazing products',
+      subtitle: 'All the amazing products from the brands we partner with.',
+      imageSrc:
+        'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
+      imageAlt: 'Quest 2 Controller on a table',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-hero-light-bkg-color"
+    value="var(--fs-color-secondary-bkg-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-hero-light-text-color"
+    value="var(--fs-color-text-display)"
+    isColor
+  />
+</TokenTable>
+
+### Accent
+
+<Canvas>
+  <Story
+    name="accent"
+    args={{
+      colorVariant: 'accent',
+      title: 'Explore more about our amazing products',
+      subtitle: 'All the amazing products from the brands we partner with.',
+      imageSrc:
+        'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
+      imageAlt: 'Quest 2 Controller on a table',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-hero-accent-bkg-color"
+    value="var(--fs-color-highlighted-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-hero-accent-text-color"
+    value="var(--fs-hero-light-text-color)"
+    globalValue="var(--fs-color-text-display)"
+    isColor
+  />
+</TokenTable>

package/src/components/sections/Hero/Hero.tsx

@@ -0,0 +1,109 @@
+import type { ReactNode } from 'react'
+import {
+  Hero as UIHero,
+  HeroHeading as UIHeroHeading,
+  HeroImage as UIHeroImage,
+} from '@faststore/ui'
+
+import { ButtonLink } from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+import Image from 'src/components/ui/Image/Image'
+
+import Section from '../Section'
+import styles from './hero.module.scss'
+
+type Variant = 'primary' | 'secondary'
+type ColorVariant = 'main' | 'light' | 'accent'
+
+export interface HeroProps {
+  /**
+   * Content for the h1 tag.
+   */
+  title: string
+  /**
+   * Content for the p tag.
+   */
+  subtitle: string
+  /**
+   * Specifies the component variant.
+   */
+  variant?: Variant
+  /**
+   * Specifies the component's color variant combination.
+   */
+  colorVariant?: ColorVariant
+  /**
+   * Specifies the URL the action button goes to.
+   */
+  link?: string
+  /**
+   * Specifies the action button's content.
+   */
+  linkText?: string
+  /**
+   * Icon component for additional customization.
+   */
+  icon?: ReactNode
+  /**
+   * Specifies the image URL.
+   */
+  imageSrc: string
+  /**
+   * Alternative description of the image.
+   */
+  imageAlt: string
+}
+
+const Hero = ({
+  title,
+  subtitle,
+  variant = 'primary',
+  colorVariant = 'main',
+  linkText,
+  link,
+  icon,
+  imageAlt,
+  imageSrc,
+}: HeroProps) => {
+  return (
+    <Section>
+      <UIHero
+        className={styles.fsHero}
+        data-fs-hero
+        data-fs-hero-variant={variant}
+        data-fs-hero-color-variant={colorVariant}
+      >
+        <UIHeroImage data-fs-hero-image>
+          <Image
+            preload
+            loading="eager"
+            fetchPriority="high"
+            src={imageSrc}
+            alt={imageAlt}
+            width={360}
+            height={240}
+            sizes="(max-width: 768px) 70vw, 50vw"
+          />
+        </UIHeroImage>
+        <UIHeroHeading data-fs-hero-heading aria-labelledby="hero-heading">
+          <div data-fs-hero-wrapper className="layout__content">
+            <div data-fs-hero-info>
+              <h1 data-fs-hero-title>{title}</h1>
+              <p data-fs-hero-subtitle>{subtitle}</p>
+              {!!link && (
+                <ButtonLink href={link} inverse={colorVariant === 'main'}>
+                  {linkText} <Icon name="ArrowRight" width={24} height={24} />
+                </ButtonLink>
+              )}
+            </div>
+            {icon && variant === 'secondary' && (
+              <div data-fs-hero-icon>{icon}</div>
+            )}
+          </div>
+        </UIHeroHeading>
+      </UIHero>
+    </Section>
+  )
+}
+
+export default Hero

package/src/components/sections/Hero/hero.module.scss

@@ -0,0 +1,180 @@
+@import "src/styles/scaffold";
+
+.fs-hero {
+  // --------------------------------------------------------
+  // Design Tokens for Hero Section
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-hero-text-size                      : var(--fs-text-size-lead);
+  --fs-hero-text-line-height               : 1.33;
+
+  // Image
+  --fs-hero-image-border-radius            : 0;
+
+  // Title
+  --fs-hero-title-padding                  : var(--fs-spacing-5) 0 var(--fs-spacing-6);
+  --fs-hero-title-weight                   : var(--fs-text-weight-black);
+  --fs-hero-title-line-height              : 1.1;
+
+  // Subtitle
+  --fs-hero-subtitle-margin-top-mobile     : var(--fs-spacing-2);
+  --fs-hero-subtitle-margin-top-tablet     : var(--fs-spacing-4);
+  --fs-hero-subtitle-size                  : var(--fs-hero-text-size);
+  --fs-hero-subtitle-line-height           : var(--fs-hero-text-line-height);
+
+  // Primary
+  --fs-hero-primary-image-height-mobile    : 15rem; // 240px
+  --fs-hero-primary-image-height-desktop   : 29rem; // 464px
+  --fs-hero-primary-title-size             : var(--fs-text-size-title-huge);
+
+  // Secondary
+  --fs-hero-secondary-image-height-mobile  : 11.25rem;  // 180px
+  --fs-hero-secondary-image-height-desktop : 14.188rem; // 227px
+  --fs-hero-secondary-title-size           : var(--fs-text-size-title-page);
+
+  // Main
+  --fs-hero-main-bkg-color                 : var(--fs-color-primary-bkg);
+  --fs-hero-main-text-color                : var(--fs-color-primary-text);
+
+  // Light
+  --fs-hero-light-bkg-color                : var(--fs-color-secondary-bkg-light);
+  --fs-hero-light-text-color               : var(--fs-color-text-display);
+
+  // Accent
+  --fs-hero-accent-bkg-color               : var(--fs-color-highlighted-bkg);
+  --fs-hero-accent-text-color              : var(--fs-hero-light-text-color);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  @include media(">=tablet") {
+    position: relative;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+
+  [data-fs-hero-image] {
+    border-radius: var(--fs-hero-image-border-radius);
+
+    @include media(">=tablet") {
+      position: absolute;
+      right: 0;
+      width: 50%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+
+  [data-fs-hero-heading] {
+    width: 100%;
+    padding: var(--fs-hero-title-padding);
+  }
+
+  [data-fs-hero-wrapper] {
+    display: flex;
+    gap: var(--fs-spacing-3);
+    justify-content: space-between;
+
+    @include media(">=tablet") {
+      gap: var(--fs-spacing-1);
+      justify-content: flex-start;
+    }
+  }
+
+  [data-fs-hero-title] {
+    font-weight: var(--fs-hero-title-weight);
+    line-height: var(--fs-hero-title-line-height);
+  }
+
+  [data-fs-hero-subtitle] {
+    margin-top: var(--fs-hero-subtitle-margin-top-mobile);
+    font-size: var(--fs-hero-subtitle-size);
+    line-height: var(--fs-hero-subtitle-line-height);
+
+    @include media(">=tablet") { margin-top: var(--fs-hero-subtitle-margin-top-tablet); }
+  }
+
+  [data-fs-button] {
+    justify-content: space-between;
+    min-width: 11.25rem;
+    margin-top: var(--fs-spacing-6);
+  }
+
+  [data-fs-hero-icon] { color: var(--fs-hero-text-color); }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-hero-variant="primary"] {
+    @include media(">=tablet") { min-height: var(--fs-hero-primary-image-height-desktop); }
+
+    [data-fs-hero-title] { font-size: var(--fs-hero-primary-title-size); }
+
+    [data-fs-hero-heading] {
+      @include media(">=tablet") {
+        display: flex;
+        align-items: center;
+        padding: var(--fs-spacing-9) 0;
+      }
+    }
+
+    [data-fs-button] {
+      @include media(">=tablet") { margin-top: var(--fs-spacing-8); }
+    }
+
+    [data-fs-hero-image] {
+      @include media("<tablet") { height: var(--fs-hero-primary-image-height-mobile); }
+    }
+
+    [data-fs-hero-info] {
+      @include media(">=tablet") {
+        width: 46%;
+        padding-right: var(--fs-spacing-9);
+      }
+    }
+  }
+
+  &[data-fs-hero-variant="secondary"] {
+    @include media(">=tablet") { min-height: var(--fs-hero-secondary-image-height-desktop); }
+
+    [data-fs-hero-title] { font-size: var(--fs-hero-secondary-title-size); }
+
+    [data-fs-hero-info] {
+      @include media(">=tablet") {
+        width: 42%;
+      }
+    }
+
+    [data-fs-hero-heading] {
+      padding: var(--fs-spacing-4) 0 var(--fs-spacing-5);
+
+      @include media(">=tablet") { padding: var(--fs-spacing-5) 0; }
+    }
+
+    [data-fs-hero-image] {
+      @include media("<tablet") { height: var(--fs-hero-secondary-image-height-mobile); }
+    }
+  }
+
+  &[data-fs-hero-color-variant="main"] {
+    color: var(--fs-hero-main-text-color);
+    background-color: var(--fs-hero-main-bkg-color);
+  }
+
+  &[data-fs-hero-color-variant="light"] {
+    color: var(--fs-hero-light-text-color);
+    background-color: var(--fs-hero-light-bkg-color);
+  }
+
+  &[data-fs-hero-color-variant="accent"] {
+    color: var(--fs-hero-accent-text-color);
+    background-color: var(--fs-hero-accent-bkg-color);
+  }
+}

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

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