Feat: Adds tokens to SlideOver (#142)

* Feat: Adds tokens to `SlideOver` (#145) * Uses CSS Modules on SlideOver component with themification * Extracts FilterSliderComponent * Extracts FilterSlider components and uses CSS Modules and tokens * Adds CSS Modules to Accordion * Adds Accordion theming tokens * Adds Changelog Entry * Moves styles to accordion component * Creates Accordion stories * Adds Accordion stories * Adds tokens to facets * Adds tokens to Filter Slider * Creates Filter Stories * Removes unused imports from Filter stories * Adds Filter facet description * Creates facets stories * Removes unused import from facets stories * Crestes FilterSlider stories * Adds CHANGELOG entry * Updates Filter related stories with PriceRange changes * Updates Filter related components links on storybook * Extracts Navbar related components and uses CSS Modules * Updates README navbar example * Adds tokens to navbar * Adds tokens to navlinks * Adds tokens to NavbarSlider * Tweaks navbar module comments * Adds CHANGELOG entry * Tweaks tokens spaces * Creates Navbar stories * Creates NavbarSlider stories * Creates NavLinks stories * Updates navbar related components links * Adds tokens to cart sidebar * Adds CHANGELOG entry * Adds tokens to cart sidebar * Moves facets mock to own file * Creates SlideOver stories * Tweaks breakpoint tokens * Removes height token * Removes some tokens * Updates SlideOver usage stories and props descriptions * Tweaks bkg color token Co-authored-by: Renata Motta <[email protected]> * Removes full width token * Uses Button with icon to show SlideOver and Navbar * uses SectionList on SlideOver stories * Update src/components/cart/CartSidebar/CartSidebar.tsx Co-authored-by: Victor Hugo Miranda Pinto <[email protected]> * Update src/components/ui/SlideOver/SlideOver.tsx Co-authored-by: Victor Hugo Miranda Pinto <[email protected]> Co-authored-by: Renata Motta <[email protected]> Co-authored-by: Victor Hugo Miranda Pinto <[email protected]> * Adds CHANGELOG entry * Adds overlay css to global layout file * Adds CHANGELOG entry Co-authored-by: Renata Motta <[email protected]> Co-authored-by: Victor Hugo Miranda Pinto <[email protected]>
vtex-sites · Jul 12, 2022 · 34a91df · 34a91df · vercel · Jul 12, 2022
1 parent 7a99d4f
commit 34a91df
Show file tree

Hide file tree

Showing 14 changed files with 692 additions and 124 deletions.
diff --git a/.storybook/mocks/cart-sidebar.js b/.storybook/mocks/cart-sidebar.js
@@ -0,0 +1,40 @@
+export const cartItem = {
+  id: '39542524',
+  price: 656.5,
+  listPrice: 892.43,
+  seller: {
+    identifier: '1',
+  },
+  quantity: 1,
+  itemOffered: {
+    sku: '39542524',
+    name: 'pink',
+    gtin: '0001078884042',
+    image: [
+      {
+        url: 'https://storeframework.vtexassets.com/arquivos/ids/165082/sed.jpg?v=637752996157770000',
+        alternateName: 'accusamus',
+      },
+      {
+        url: 'https://storeframework.vtexassets.com/arquivos/ids/165079/quis.jpg?v=637752996135400000',
+        alternateName: 'dolorem',
+      },
+      {
+        url: 'https://storeframework.vtexassets.com/arquivos/ids/165080/tempora.jpg?v=637752996141030000',
+        alternateName: 'enim',
+      },
+      {
+        url: 'https://storeframework.vtexassets.com/arquivos/ids/165081/est.jpg?v=637752996144600000',
+        alternateName: 'ea',
+      },
+    ],
+    brand: {
+      name: 'iRobot',
+    },
+    isVariantOf: {
+      productGroupID: '99483893',
+      name: 'Tasty Concrete Computer',
+    },
+    additionalProperty: [],
+  },
+}
diff --git a/.storybook/mocks/filter-slider.js b/.storybook/mocks/filter-slider.js
@@ -0,0 +1,59 @@
+export const facets = [
+  {
+    key: 'price',
+    label: 'Preço',
+    min: {
+      selected: 1.67,
+      absolute: 1.67,
+    },
+    max: {
+      selected: 889.53,
+      absolute: 889.53,
+    },
+    __typename: 'StoreFacetRange',
+  },
+  {
+    key: 'category-2',
+    label: 'Categoria',
+    values: [
+      {
+        label: 'Chairs',
+        value: 'chairs',
+        selected: true,
+        quantity: 138,
+      },
+      {
+        label: 'Desks',
+        value: 'desks',
+        selected: false,
+        quantity: 125,
+      },
+    ],
+    __typename: 'StoreFacetBoolean',
+  },
+  {
+    key: 'brand',
+    label: 'Marca',
+    values: [
+      {
+        label: 'Acer',
+        value: 'acer',
+        selected: true,
+        quantity: 138,
+      },
+      {
+        label: 'Adidas',
+        value: 'adidas',
+        selected: false,
+        quantity: 121,
+      },
+      {
+        label: 'Nike',
+        value: 'nike',
+        selected: false,
+        quantity: 150,
+      },
+    ],
+    __typename: 'StoreFacetBoolean',
+  },
+]
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Applies new local tokens to `SlideOver` ([#142](https://github.com/vtex-sites/gatsby.store/pull/142))
+- Applies new local tokens to `CartSidebar` ([#142](https://github.com/vtex-sites/gatsby.store/pull/142))
 - Adds [MSW Addon](https://storybook.js.org/addons/msw-storybook-addon) ([#143](https://github.com/vtex-sites/gatsby.store/pull/143))
 - Global tokens doc page on storybook ([#140](https://github.com/vtex-sites/gatsby.store/pull/140))
 - Uses new cross selling API on PDP ([#137](https://github.com/vtex-sites/gatsby.store/pull/137))

diff --git a/src/components/cart/CartSidebar/CartSidebar.stories.mdx b/src/components/cart/CartSidebar/CartSidebar.stories.mdx
@@ -0,0 +1,118 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { CartProvider, SessionProvider } from '@faststore/sdk'
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { useCart } from 'src/sdk/cart/useCart'
+
+import CartToggle from 'src/components/cart/CartToggle'
+import CartSidebar from '.'
+
+import { cartItem } from 'src/../.storybook/mocks/cart-sidebar'
+import { ButtonBuy } from 'src/components/ui/Button'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta component={CartSidebar} title="Organisms/CartSidebar" />
+
+export const Template = () => {
+  const { cart: displayCart } = useUI()
+  const { addItem } = useCart()
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <CartToggle />
+      <ButtonBuy
+        style={{ marginLeft: '12px' }}
+        onClick={() => addItem(cartItem)}
+      >
+        Add item to Cart
+      </ButtonBuy>
+      {displayCart && <CartSidebar />}
+    </div>
+  )
+}
+
+export const TemplateProvider = () => {
+  return (
+    <SessionProvider initialState={{}}>
+      <CartProvider>
+        <UIProvider>
+          <Template />
+        </UIProvider>
+      </CartProvider>
+    </SessionProvider>
+  )
+}
+
+<header>
+
+# Cart Sidebar
+
+The `CartSidebar` displays the summary of items added to the cart along with detailed information, and checkout option.
+
+</header>
+
+## Usage
+
+`import CartSidebar from 'src/components/cart/CartSidebar'`
+
+<Canvas>
+  <Story name="overview-default">{TemplateProvider.bind({})}</Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-cart-sidebar-bkg-color"
+    value="var(--fs-color-neutral-bkg)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Header
+
+<TokenTable>
+  <TokenRow
+    token="--fs-cart-sidebar-header-padding"
+    value="var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-cart-sidebar-header-bkg-color"
+    value="var(--fs-color-neutral-0)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-cart-sidebar-header-title-margin-right"
+    value="var(--fs-spacing-2)"
+  />
+</TokenTable>
+
+### List
+
+<TokenTable>
+  <TokenRow
+    token="--fs-cart-sidebar-list-padding"
+    value="var(--fs-spacing-3)"
+  />
+</TokenTable>
+
+### Footer
+
+<TokenTable>
+  <TokenRow
+    token="--fs-cart-sidebar-footer-bkg-color"
+    value="var(--fs-color-neutral-0)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-cart-sidebar-footer-box-shadow"
+    value="0 0 6px rgb(0 0 0 / 20%)"
+  />
+</TokenTable>
diff --git a/src/components/cart/CartSidebar/CartSidebar.tsx b/src/components/cart/CartSidebar/CartSidebar.tsx
@@ -12,6 +12,7 @@ import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
 import CartItem from '../CartItem'
 import EmptyCart from '../EmptyCart'
 import OrderSummary from '../OrderSummary'
+import styles from './cart-sidebar.module.scss'
 
 function CartSidebar() {
   const btnProps = useCheckoutButton()
@@ -30,15 +31,18 @@ function CartSidebar() {
       onDismiss={fadeOut}
       size="partial"
       direction="rightSide"
-      className="cart-sidebar"
+      className={styles.fsCartSidebar}
       onTransitionEnd={() => fade === 'out' && closeCart()}
     >
-      <header data-testid="cart-sidebar">
-        <div className="cart-sidebar__title">
-          <p className="text__lead">Your Cart</p>
+      <header data-fs-cart-sidebar-header data-testid="cart-sidebar">
+        <div data-fs-cart-sidebar-title>
+          <p data-fs-cart-sidebar-title-text className="text__lead">
+            Your Cart
+          </p>
           <Badge variant="info">{totalItems}</Badge>
         </div>
         <ButtonIcon
+          data-fs-cart-sidebar-close-button
           data-testid="cart-sidebar-button-close"
           aria-label="Close Cart"
           icon={<Icon name="X" width={32} height={32} />}
@@ -53,21 +57,22 @@ function CartSidebar() {
         <EmptyCart onDismiss={fadeOut} />
       ) : (
         <>
-          <List>
+          <List data-fs-cart-sidebar-list>
             {items.map((item) => (
               <li key={item.id}>
                 <CartItem item={item} />
               </li>
             ))}
           </List>
 
-          <footer>
+          <footer data-fs-cart-sidebar-footer>
             <OrderSummary
               subTotal={subTotal}
               total={total}
               numberOfItems={totalItems}
               checkoutButton={
                 <Button
+                  data-fs-cart-sidebar-checkout-button
                   variant="primary"
                   icon={
                     !isValidating && (

diff --git a/src/components/cart/CartSidebar/cart-sidebar.module.scss b/src/components/cart/CartSidebar/cart-sidebar.module.scss
@@ -0,0 +1,69 @@
+.fs-cart-sidebar {
+  // --------------------------------------------------------
+  // Design Tokens for Cart Sidebar
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-cart-sidebar-bkg-color                        : var(--fs-color-neutral-bkg);
+
+  // Header
+  --fs-cart-sidebar-header-padding                   : var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2);
+  --fs-cart-sidebar-header-bkg-color                 : var(--fs-color-neutral-0);
+
+  --fs-cart-sidebar-header-title-margin-right        : var(--fs-spacing-2);
+
+  // List
+  --fs-cart-sidebar-list-padding                     : var(--fs-spacing-3);
+
+  // Footer
+  --fs-cart-sidebar-footer-bkg-color                 : var(--fs-color-neutral-0);
+  --fs-cart-sidebar-footer-box-shadow                : 0 0 6px rgb(0 0 0 / 20%);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+  background-color: var(--fs-cart-sidebar-bkg-color);
+
+  [data-fs-cart-sidebar-header] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--fs-cart-sidebar-header-padding);
+    background-color: var(--fs-cart-sidebar-header-bkg-color);
+  }
+
+  [data-fs-cart-sidebar-close-button] {
+    margin-right: calc(-1 * var(--fs-spacing-1));
+  }
+
+  [data-fs-cart-sidebar-title] {
+    display: flex;
+    align-items: center;
+
+    [data-fs-cart-sidebar-title-text] {
+      margin-right: var(--fs-cart-sidebar-header-title-margin-right);
+    }
+  }
+
+  [data-fs-cart-sidebar-list] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-spacing-2);
+    padding: var(--fs-cart-sidebar-list-padding);
+    overflow: auto;
+  }
+
+  [data-fs-cart-sidebar-footer] {
+    margin-top: auto;
+    background-color: var(--fs-cart-sidebar-footer-bkg-color);
+    box-shadow: var(--fs-cart-sidebar-footer-box-shadow);
+  }
+
+  [data-fs-cart-sidebar-checkout-button] {
+    width: 100%;
+  }
+}