@faststore/core 0.3.13 → 0.3.15

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

@@ -1,277 +0,0 @@
-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.module.scss

@@ -1,180 +0,0 @@
-@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/ui/SROnly/SROnly.tsx

@@ -1,20 +0,0 @@
-import type { ElementType } from 'react'
-
-import styles from './sr-only.module.scss'
-
-interface Props {
-  text: string
-  as?: ElementType
-}
-
-function SROnly({ text, as }: Props) {
-  const Component = as ?? 'span'
-
-  return (
-    <Component className={styles.fsSrOnly} data-fs-sr-only>
-      {text}
-    </Component>
-  )
-}
-
-export default SROnly

package/src/components/ui/SROnly/index.ts

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

package/src/components/ui/SROnly/sr-only.module.scss

@@ -1,15 +0,0 @@
-.fs-sr-only {
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  &:not(:focus):not(:active) {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-}