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` ([#113](https://github.com/vtex-sites/gatsby.store/pull/113))
 - Applies new local tokens to `Dropdown` ([#111](https://github.com/vtex-sites/gatsby.store/pull/111))
 - Creates and styles `Dropdown` component ([#111](https://github.com/vtex-sites/gatsby.store/pull/111))
 - Creates new Storybook section `BestPractices` ([#110](https://github.com/vtex-sites/gatsby.store/pull/110))

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.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,146 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+
+import { TokenTable, TokenRow } from 'src/../.storybook/components'
+
+import Button from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+import { ButtonLink } from 'src/components/ui/Button'
+
+import EmptyState from '.'
+
+<Meta component={EmptyState} title="Organisms/EmptyState" />
+
+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>
+
+---
+
+## 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-size"
+    value="var(--fs-text-size-lead)"
+  />
+</TokenTable>
+
+### Link
+
+<TokenTable>
+  <TokenRow token="--fs-empty-state-link-min-width" value="11.875rem" />
+</TokenTable>
+
+---
+
+## Variants
+
+### Rounded
+
+<TokenTable>
+  <TokenRow
+    token="--fs-empty-state-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+---
+
+## Use Cases
+
+### EmptyCart
+
+export const TemplateEmptyCart = () => (
+  <EmptyState>
+    <header data-fs-empty-state-title>
+      <Icon name="ShoppingCart" width={56} height={56} weight="thin" />
+      <p>Your Cart is empty</p>
+    </header>
+    <Button variant="secondary">Start Shopping</Button>
+  </EmptyState>
+)
+
+An implementation of the `EmptyState` that represents the Cart with no items.
+
+<Canvas>
+  <Story name="default-empty-cart">{TemplateEmptyCart.bind({})}</Story>
+</Canvas>
+
+### EmptyGallery
+
+export const TemplateEmptyGallery = (args) => {
+  return (
+    <EmptyState variant="rounded">
+      <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="#"
+        variant="secondary"
+        icon={
+          <Icon name="CircleWavyWarning" width={18} height={18} weight="bold" />
+        }
+        iconPosition="left"
+      >
+        Browse Offers
+      </ButtonLink>
+      <ButtonLink
+        data-fs-empty-state-link
+        href="#"
+        variant="secondary"
+        icon={<Icon name="RocketLaunch" width={18} height={18} weight="bold" />}
+        iconPosition="left"
+      >
+        Just Arrived
+      </ButtonLink>
+    </EmptyState>
+  )
+}
+
+An implementation of the `EmptyState` that represents a Gallery with no items.
+
+<Canvas>
+  <Story name="default-empty-gallery">{TemplateEmptyGallery.bind({})}</Story>
+</Canvas>

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-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-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/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";

src/styles/pages/layout.scss

@@ -21,7 +21,6 @@
 // UI
 @import "src/components/ui/Accordion/accordion.scss";
 @import "src/components/ui/Badge/badge.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";