@faststore/core 2.0.151-alpha.0 → 2.0.152-alpha.0

package/src/stories/icons.stories.mdx

@@ -1,237 +0,0 @@
-import {
-  Canvas,
-  Meta,
-  Title,
-  IconGallery,
-  IconItem,
-} from '@storybook/addon-docs'
-
-import Icon from '../components/ui/Icon'
-import { Callout } from 'src/../.storybook/components'
-
-<Meta title="Media/Icons" parameters={{ options: { showToolbar: false } }} />
-
-<header>
-
-# Icons
-
-</header>
-
-This project uses SVGs from <a ahref="https://phosphoricons.com/">Phosphor icons</a>.
-
-<Callout>
-  Icons help build web pages by illustrating concepts and improving website
-  navigation. However, using icons can decrease the page's performance. One
-  option to avoid the decrease of the page's performance is to use SVGs from a
-  single SVG file, located in <code>/static/icons.svg</code>, and load them with
-  the <code>ui/Icon</code>.Please check the{' '}
-  <a href="https://github.com/vtex-sites/nextjs.store#managing-svg-icons">
-    Managing SVG Icons
-  </a>{' '}
-  section on our readme for further instructions.
-</Callout>
-
-| Weights                              |
-| ------------------------------------ |
-| thin, light, regular (default), bold |
-
-| Sizes                              |
-| ---------------------------------- |
-| 16px, 18px, 20px, 32px, 48px, 56px |
-
-<Canvas>
-  <Icon name="ShoppingCart" weight="bold" width="16" height="16" />
-  <Icon name="ShoppingCart" weight="bold" width="18" height="18" />
-  <Icon name="ShoppingCart" weight="bold" width="20" height="20" />
-  <Icon name="ShoppingCart" width="32" height="32" />
-  <Icon name="ShoppingCart" weight="light" width="48" height="48" />
-  <Icon name="ShoppingCart" weight="light" width="56" height="56" />
-</Canvas>
-
----
-
-## UI Actions
-
-<IconGallery>
-  <IconItem name="X">
-    <Icon name="X" />
-  </IconItem>
-  <IconItem name="Plus">
-    <Icon name="Plus" />
-  </IconItem>
-  <IconItem name="PlusCircle">
-    <Icon name="PlusCircle" />
-  </IconItem>
-  <IconItem name="Minus">
-    <Icon name="Minus" />
-  </IconItem>
-  <IconItem name="MinusCircle">
-    <Icon name="MinusCircle" />
-  </IconItem>
-  <IconItem name="XCircle">
-    <Icon name="XCircle" />
-  </IconItem>
-  <IconItem name="ArrowLeft">
-    <Icon name="ArrowLeft" />
-  </IconItem>
-  <IconItem name="ArrowRight">
-    <Icon name="ArrowRight" />
-  </IconItem>
-  <IconItem name="ArrowUpRight">
-    <Icon name="ArrowUpRight" />
-  </IconItem>
-  <IconItem name="ArrowSquareOut">
-    <Icon name="ArrowSquareOut" />
-  </IconItem>
-  <IconItem name="ArrowElbowDownRight">
-    <Icon name="ArrowElbowDownRight" />
-  </IconItem>
-  <IconItem name="CaretLeft">
-    <Icon name="CaretLeft" />
-  </IconItem>
-  <IconItem name="CaretRight">
-    <Icon name="CaretRight" />
-  </IconItem>
-  <IconItem name="CaretUp">
-    <Icon name="CaretUp" />
-  </IconItem>
-  <IconItem name="CaretDown">
-    <Icon name="CaretDown" />
-  </IconItem>
-  <IconItem name="Ellipsis">
-    <Icon name="Ellipsis" />
-  </IconItem>
-  <IconItem name="Checked">
-    <Icon name="Checked" />
-  </IconItem>
-  <IconItem name="MagnifyingGlass">
-    <Icon name="MagnifyingGlass" />
-  </IconItem>
-  <IconItem name="FadersHorizontal">
-    <Icon name="FadersHorizontal" />
-  </IconItem>
-  <IconItem name="List">
-    <Icon name="List" />
-  </IconItem>
-</IconGallery>
-
----
-
-## Common Actions
-
-<IconGallery>
-  <IconItem name="User">
-    <Icon name="User" />
-  </IconItem>
-  <IconItem name="Calendar">
-    <Icon name="Calendar" />
-  </IconItem>
-  <IconItem name="ShoppingCart">
-    <Icon name="ShoppingCart" />
-  </IconItem>
-  <IconItem name="MapPin">
-    <Icon name="MapPin" />
-  </IconItem>
-  <IconItem name="Clock">
-    <Icon name="Clock" />
-  </IconItem>
-  <IconItem name="House">
-    <Icon name="House" />
-  </IconItem>
-</IconGallery>
-
----
-
-## Informative
-
-<IconGallery>
-  <IconItem name="ShieldCheck">
-    <Icon name="ShieldCheck" />
-  </IconItem>
-  <IconItem name="Gift">
-    <Icon name="Gift" />
-  </IconItem>
-  <IconItem name="Storefront">
-    <Icon name="Storefront" />
-  </IconItem>
-  <IconItem name="Medal">
-    <Icon name="Medal" />
-  </IconItem>
-  <IconItem name="CircleWavyCheck">
-    <Icon name="CircleWavyCheck" />
-  </IconItem>
-  <IconItem name="CircleWavyWarning">
-    <Icon name="CircleWavyWarning" />
-  </IconItem>
-  <IconItem name="Headphones">
-    <Icon name="Headphones" />
-  </IconItem>
-  <IconItem name="Truck">
-    <Icon name="Truck" />
-  </IconItem>
-  <IconItem name="Bell">
-    <Icon name="Bell" />
-  </IconItem>
-  <IconItem name="BellRinging">
-    <Icon name="BellRinging" />
-  </IconItem>
-  <IconItem name="Clock">
-    <Icon name="Clock" />
-  </IconItem>
-  <IconItem name="RocketLaunch">
-    <Icon name="RocketLaunch" />
-  </IconItem>
-  <IconItem name="House">
-    <Icon name="House" />
-  </IconItem>
-</IconGallery>
-
----
-
-## Payment
-
-<IconGallery>
-  <IconItem name="GooglePay">
-    <Icon name="GooglePay" />
-  </IconItem>
-  <IconItem name="ApplePay">
-    <Icon name="ApplePay" />
-  </IconItem>
-  <IconItem name="Diners">
-    <Icon name="Diners" />
-  </IconItem>
-  <IconItem name="EloCard">
-    <Icon name="EloCard" />
-  </IconItem>
-  <IconItem name="Mastercard">
-    <Icon name="Mastercard" />
-  </IconItem>
-  <IconItem name="PayPal">
-    <Icon name="PayPal" />
-  </IconItem>
-  <IconItem name="Stripe">
-    <Icon name="Stripe" />
-  </IconItem>
-  <IconItem name="Visa">
-    <Icon name="Visa" />
-  </IconItem>
-</IconGallery>
-
----
-
-## Social
-
-<IconGallery>
-  <IconItem name="Instagram">
-    <Icon name="Instagram" />
-  </IconItem>
-  <IconItem name="Pinterest">
-    <Icon name="Pinterest" />
-  </IconItem>
-  <IconItem name="Twitter">
-    <Icon name="Twitter" />
-  </IconItem>
-  <IconItem name="Facebook">
-    <Icon name="Facebook" />
-  </IconItem>
-</IconGallery>

package/src/stories/interactive-controls.stories.mdx

@@ -1,50 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
-import '/.storybook/storybook.css'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Global Tokens/Interactive Controls"
-  parameters={{ options: { showToolbar: false } }}
-/>
-
-<header>
-
-# Interactive Controls
-
-`Tap`, `States` and `Sizing` definitions.
-
-</header>
-
-## Tap
-
-<TokenTable title="Global Token" description="Value">
-  <TokenRow token="--fs-control-tap-size" value="var(--fs-spacing-7)" />
-  <TokenRow
-    token="--fs-control-tap-size-smallest"
-    value="calc(var(--fs-control-tap-size) / 2)"
-  />
-  <TokenRow
-    token="--fs-control-min-height"
-    value="var(--fs-control-tap-size)"
-  />
-</TokenTable>
-
-## States
-
-<TokenTable title="Global Token" description="Value">
-  <TokenRow
-    token="--fs-control-bkg"
-    value="var(--fs-color-neutral-0)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-control-bkg-disabled"
-    value="var(--fs-color-disabled-bkg)"
-    isColor
-  />
-</TokenTable>

package/src/stories/midnight.stories.mdx

@@ -1,56 +0,0 @@
-import { Description, Meta } from '@storybook/addon-docs'
-
-import { SectionList, SectionItem } from 'src/../.storybook/components'
-
-<Meta
-  title="Theming/Themes/Midnight"
-  parameters={{ options: { showToolbar: false } }}
-/>
-
-<header>
-
-# Midnight
-
-A darkmode theme created for testing purposes.
-
-</header>
-
-<section className="sbdocs-section-theme">
- <div className="sbdocs-section-theme-img">
-   <img
-    src="https://vtexhelp.vtexassets.com/assets/docs/src/midnight___2bb274e36a39ff9c2cfa3dcc740cbfab.png"
-  />
- </div>
-
-  <article>
-
-## Use `midnight` as your theme
-
-1. Import `midnight.scss` file on `src/pages/_app.tsx`
-
-```jsx
-import '../styles/themes/midnight.scss'
-```
-
-2. Go to `faststore.config.js` and change the `theme` to your file's name:
-
-```js
-// Theming
-theme: 'midnight',
-```
-
-3. Add the [Raleway](https://fonts.google.com/specimen/Raleway?query=raleway) font on `src/fonts/WebFonts.tsx`
-
-```tsx
-function WebFonts() {
-  return (
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700;900&display=swap"
-    />
-  )
-}
-```
-
-  </article>
-</section>

package/src/stories/refinements.stories.mdx

@@ -1,96 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
-import '/.storybook/storybook.css'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Global Tokens/Refinements"
-  parameters={{ options: { showToolbar: false } }}
-/>
-
-<header>
-
-# Refinements
-
-`Transition`, `Borders` and `Shadow` definitions.
-
-</header>
-
-## Transition
-
-<TokenTable title="Global Token" description="Value">
-  <TokenRow token="--fs-transition-timing" value=".2s" />
-  <TokenRow token="--fs-transition-property" value="all" />
-  <TokenRow token="--fs-transition-function" value="ease-in-out" />
-</TokenTable>
-
-## Borders
-
-<TokenTable title="Global Token" description="Value">
-  <TokenRow token="--fs-border-radius-small" value="1px" />
-  <TokenRow token="--fs-border-radius" value="2px" />
-  <TokenRow token="--fs-border-radius-medium" value="8px" />
-  <TokenRow token="--fs-border-radius-pill" value="100px" />
-  <TokenRow token="--fs-border-radius-circle" value="100%" />
-  <TokenDivider />
-  <TokenRow token="--fs-border-width" value="1px" />
-  <TokenRow token="--fs-border-width-thick" value="2px" />
-  <TokenRow token="--fs-border-width-thickest" value="3px" />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-border-color"
-    value="var(--fs-color-neutral-4)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-border-color-hover"
-    value="var(--fs-color-main-3)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-border-color-active"
-    value="var(--fs-color-main-2)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-border-color-disabled"
-    value="var(--fs-color-neutral-6)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-border-color-light"
-    value="var(--fs-color-neutral-2)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-border-color-light-hover"
-    value="var(--fs-color-neutral-3)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-border-color-light-active"
-    value="var(--fs-color-neutral-3)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-border-color-light-disabled"
-    value="var(--fs-color-neutral-5)"
-    isColor
-  />
-</TokenTable>
-
-## Shadow
-
-<TokenTable>
-  <TokenRow token="--fs-shadow" value="none" />
-  <TokenRow token="--fs-shadow-darker" value="0 0 10px rgb(0 0 0 / 20%)" />
-  <TokenRow
-    token="--fs-shadow-hover"
-    value="0 0 0 1px var(--fs-color-main-4)"
-  />
-</TokenTable>

package/src/stories/soft-blue.stories.mdx

@@ -1,56 +0,0 @@
-import { Description, Meta } from '@storybook/addon-docs'
-
-import { SectionList, SectionItem } from 'src/../.storybook/components'
-
-<Meta
-  title="Theming/Themes/Soft Blue"
-  parameters={{ options: { showToolbar: false } }}
-/>
-
-<header>
-
-# Soft Blue
-
-A basic theme created for testing purposes.
-
-</header>
-
-<section className="sbdocs-section-theme">
- <div className="sbdocs-section-theme-img">
-   <img
-    src="https://vtexhelp.vtexassets.com/assets/docs/src/soft-blue___b51efd8dd7623f9493efd77180ffc618.png"
-  />
- </div>
-
-  <article>
-
-## Use `soft-blue` as your theme
-
-1. Import `soft-blue.scss` file on `src/pages/_app.tsx`
-
-```jsx
-import '../styles/themes/soft-blue.scss'
-```
-
-2. Go to `faststore.config.js` and change the `theme` to your file's name:
-
-```js
-// Theming
-theme: 'soft-blue',
-```
-
-3. Add the [Lato](https://fonts.google.com/specimen/Lato?query=lato) font on `src/fonts/WebFonts.tsx`
-
-```tsx
-function WebFonts() {
-  return (
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap"
-    />
-  )
-}
-```
-
-  </article>
-</section>

package/src/stories/spacing.stories.mdx

@@ -1,38 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
-import '/.storybook/storybook.css'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Global Tokens/Spacing"
-  parameters={{ options: { showToolbar: false } }}
-/>
-
-<header>
-
-# Spacing
-
-All tokens used for spacings on the store: `padding`, `margins` and `sizes`. It's also used as base for grid tokens.
-
-</header>
-
-<TokenTable title="Global Token" description="Value">
-  <TokenRow token="--fs-spacing-0" value=".25rem" />
-  <TokenRow token="--fs-spacing-1" value=".5rem" />
-  <TokenRow token="--fs-spacing-2" value=".75rem" />
-  <TokenRow token="--fs-spacing-3" value="1rem" />
-  <TokenRow token="--fs-spacing-4" value="1.5rem" />
-  <TokenRow token="--fs-spacing-5" value="2rem" />
-  <TokenRow token="--fs-spacing-6" value="2.5rem" />
-  <TokenRow token="--fs-spacing-7" value="3rem" />
-  <TokenRow token="--fs-spacing-8" value="3.5rem" />
-  <TokenRow token="--fs-spacing-9" value="4rem" />
-  <TokenRow token="--fs-spacing-10" value="4.5rem" />
-  <TokenRow token="--fs-spacing-11" value="5rem" />
-  <TokenRow token="--fs-spacing-12" value="5.5rem" />
-  <TokenRow token="--fs-spacing-13" value="6rem" />
-</TokenTable>