Feat: Adds tokens to EmptyState

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Applies new local tokens to `EmptyState` ([#122](https://github.com/vtex-sites/nextjs.store/pull/122))
 - Applies new local tokens to `Dropdown` ([#118](https://github.com/vtex-sites/nextjs.store/pull/118))
 - Creates and styles `Dropdown` component ([#118](https://github.com/vtex-sites/nextjs.store/pull/118))
 - 301 redirects when visiting old VTEX product routes ([#93](https://github.com/vtex-sites/nextjs.store/pull/93))

src/components/cart/EmptyCart/EmptyCart.stories.mdx

@@ -0,0 +1,47 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+
+import { TokenTable, TokenRow } from 'src/../.storybook/components'
+
+import EmptyCart from 'src/components/cart/EmptyCart'
+
+<Meta component={EmptyCart} title="Organisms/EmptyState/EmptyCart" />
+
+export const Template = (args) => <EmptyCart {...args}></EmptyCart>
+
+<header>
+
+# EmptyCart
+
+An implementation of the `EmptyState` that represents the Cart with no items.
+
+</header>
+
+## Usage
+
+`import EmptyCart from 'src/components/cart/EmptyCart'`
+
+<Canvas>
+  <Story name="default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+## Nested Elements
+
+### Title
+
+<TokenTable>
+  <TokenRow
+    token="--fs-empty-state-title-margin-bottom"
+    value="var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-empty-state-title-color"
+    value="var(--fs-color-disabled-text)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-empty-state-title-text-size"
+    value="var(--fs-text-size-3)"
+  />
+</TokenTable>

src/components/cart/EmptyCart/EmptyCart.tsx

@@ -12,7 +12,7 @@ interface Props {
 function EmptyCart({ onDismiss }: Props) {
   return (
     <EmptyState>
-      <header data-empty-cart-title>
+      <header data-fs-empty-state-title>
         <Icon name="ShoppingCart" width={56} height={56} weight="thin" />
         <p>Your Cart is empty</p>
       </header>

src/components/sections/ProductGallery/EmptyGallery.stories.mdx

@@ -0,0 +1,53 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+
+import { TokenTable, TokenRow } from 'src/../.storybook/components'
+
+import EmptyGallery from 'src/components/sections/ProductGallery/EmptyGallery'
+
+<Meta component={EmptyGallery} title="Organisms/EmptyState/EmptyGallery" />
+
+export const Template = (args) => <EmptyGallery {...args}></EmptyGallery>
+
+<header>
+
+# EmptyGallery
+
+An implementation of the `EmptyState` that represents a Gallery with no items.
+
+</header>
+
+## Usage
+
+`import EmptyGallery from 'src/components/sections/ProductGallery/EmptyGallery'`
+
+<Canvas>
+  <Story name="default">{Template.bind({})}</Story>
+</Canvas>
+
+---
+
+## Nested Elements
+
+### Title
+
+<TokenTable>
+  <TokenRow
+    token="--fs-empty-state-title-margin-bottom"
+    value="var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-empty-state-title-color"
+    value="var(--fs-color-disabled-text)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-empty-state-title-text-size"
+    value="var(--fs-text-size-3)"
+  />
+</TokenTable>
+
+### Link
+
+<TokenTable>
+  <TokenRow token="--fs-empty-state-link-min-width" value="11.875rem" />
+</TokenTable>

src/components/sections/ProductGallery/EmptyGallery.tsx

@@ -5,13 +5,14 @@ import Icon from 'src/components/ui/Icon'
 function EmptyGallery() {
   return (
     <EmptyState variant="rounded">
-      <header>
+      <header data-fs-empty-state-title>
         <Icon name="CircleWavyWarning" width={56} height={56} weight="thin" />
 
         <p>Nothing matches with your search</p>
       </header>
 
       <ButtonLink
+        data-fs-empty-state-link
         href="/office"
         variant="secondary"
         icon={
@@ -22,6 +23,7 @@ function EmptyGallery() {
         Browse Offers
       </ButtonLink>
       <ButtonLink
+        data-fs-empty-state-link
         href="/technology"
         variant="secondary"
         icon={<Icon name="RocketLaunch" width={18} height={18} weight="bold" />}

src/components/ui/EmptyState/EmptyState.stories.mdx

@@ -0,0 +1,87 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+
+import { TokenTable, TokenRow } from 'src/../.storybook/components'
+
+import EmptyState from '.'
+import EmptyGallery from 'src/components/sections/ProductGallery'
+import EmptyCart from 'src/components/cart/EmptyCart'
+
+<Meta component={EmptyState} title="Organisms/EmptyState/Default" />
+
+export const Template = (args) => (
+  <EmptyState {...args}>Nothing to display</EmptyState>
+)
+
+<header>
+
+# EmptyState
+
+This component represents an empty state, usually used on `EmptyCart` and `EmptyGallery` components.
+
+</header>
+
+## Usage
+
+`import EmptyState from 'src/components/ui/EmptyState'`
+
+<Canvas>
+  <Story name="default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow token="--fs-empty-state-height" value="100%" />
+  <TokenRow token="--fs-empty-state-min-height" value="50vh" />
+  <TokenRow token="--fs-empty-state-padding" value="0 var(--fs-spacing-8)" />
+  <TokenRow
+    token="--fs-empty-state-bkg-color"
+    value="var(--fs-color-neutral-bkg)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### Rounded
+
+<TokenTable>
+  <TokenRow
+    token="--fs-empty-state-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+---
+
+## Related Components
+
+<section className="sbdocs-section">
+  <article>
+    <div style={{ height: '250px' }}>
+      <a href="?path=/docs/organisms-emptystate-emptycart--default-story">
+        <img width="190px" src="https://vtexhelp.vtexassets.com/assets/docs/src/empty-car___33a48f795ba03130f1bc81f1c075143d.png"/>
+      </a>
+    </div>
+    <article className="sbdocs-section-text">
+      <h3>Empty Cart</h3>
+      <p>
+        Displays the empty cart message along with the `Start Shopping` button.
+      </p>
+    </article>
+
+  </article>
+  <article>
+    <div style={{ height: '250px' }}>
+      <a href="?path=/docs/organisms-emptystate-emptygallery--default-story">
+        <img width="245px" src="https://vtexhelp.vtexassets.com/assets/docs/src/empty-gallery___ede63510d9b1d22e187b095ef04f70f7.png"/>
+      </a>
+    </div>
+    <article className="sbdocs-section-text">
+      <h3>Empty Gallery</h3>
+      <p>Displays the empty gallery message along with some button navigation options.</p>
+    </article>
+  </article>
+</section>

src/components/ui/EmptyState/EmptyState.tsx

@@ -1,5 +1,7 @@
 import type { PropsWithChildren } from 'react'
 
+import styles from './empty-state.module.scss'
+
 type Variant = 'default' | 'rounded'
 
 interface Props {
@@ -11,7 +13,11 @@ function EmptyState({
   variant = 'default',
 }: PropsWithChildren<Props>) {
   return (
-    <section data-fs-empty-state data-fs-empty-state-variant={variant}>
+    <section
+      className={styles.fsEmptyState}
+      data-fs-empty-state
+      data-fs-empty-state-variant={variant}
+    >
       {children}
     </section>
   )

src/components/ui/EmptyState/empty-state.module.scss

@@ -0,0 +1,63 @@
+@import "src/styles/scaffold";
+
+.fs-empty-state {
+  // --------------------------------------------------------
+  // Design Tokens for EmptyState
+  // --------------------------------------------------------
+  --fs-empty-state-height               : 100%;
+  --fs-empty-state-min-height           : 50vh;
+  --fs-empty-state-padding              : 0 var(--fs-spacing-8);
+  --fs-empty-state-bkg-color            : var(--fs-color-neutral-bkg);
+
+  // Title
+  --fs-empty-state-title-margin-bottom : var(--fs-spacing-2);
+  --fs-empty-state-title-color         : var(--fs-color-disabled-text);
+  --fs-empty-state-title-text-size     : var(--fs-text-size-lead);
+
+  // Link
+  --fs-empty-state-link-min-width       : 11.875rem;
+
+  // Rounded
+  --fs-empty-state-border-radius        : var(--fs-border-radius);
+
+  // Default properties
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--fs-spacing-3);
+  justify-content: center;
+  height: var(--fs-empty-state-height);
+  min-height: var(--fs-empty-state-min-height);
+  padding: var(--fs-empty-state-padding);
+  background-color: var(--fs-empty-state-bkg-color);
+
+  @include media(">=notebook") {
+    align-items: center;
+  }
+
+  > [data-fs-empty-state-title] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-spacing-1);
+    align-items: center;
+    justify-content: center;
+    margin-bottom: var(--fs-empty-state-title-margin-bottom);
+    color: var(--fs-empty-state-title-color);
+
+    p {
+      font-size: var(--fs-empty-state-title-text-size);
+      text-align: center;
+    }
+  }
+
+  [data-fs-empty-state-link] {
+    min-width: var(--fs-empty-state-link-min-width);
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-empty-state-variant="rounded"] {
+    border-radius: var(--fs-empty-state-border-radius);
+  }
+}

src/styles/global/components.scss

@@ -37,7 +37,6 @@
 @import "src/components/ui/Accordion/accordion.scss";
 @import "src/components/ui/Badge/badge.scss";
 @import "src/components/ui/Breadcrumb/breadcrumb.scss";
-@import "src/components/ui/EmptyState/empty-state.scss";
 @import "src/components/ui/Image/image.scss";
 @import "src/components/ui/InputText/input-text.scss";
 @import "src/components/ui/SlideOver/slide-over.scss";

src/styles/global/storybook-components.scss

@@ -34,7 +34,6 @@
 @import "src/components/ui/Accordion/accordion.scss";
 @import "src/components/ui/Badge/badge.scss";
 @import "src/components/ui/Breadcrumb/breadcrumb.scss";
-@import "src/components/ui/EmptyState/empty-state.scss";
 @import "src/components/ui/Image/image.scss";
 @import "src/components/ui/InputText/input-text.scss";
 @import "src/components/ui/SlideOver/slide-over.scss";