Merge branch 'FS-358-feat/Add-product-title-from-faststore' of https:…

…//github.com/vtex-sites/gatsby.store into FS-358-feat/Add-product-title-from-faststore
vtex-sites · Aug 2, 2022 · 7d4e30f · 7d4e30f
2 parents e20e4ce + ad432b2
commit 7d4e30f
Show file tree

Hide file tree

Showing 37 changed files with 1,176 additions and 468 deletions.
diff --git a/.storybook/storybook.css b/.storybook/storybook.css
@@ -402,6 +402,45 @@ h3.sbdocs.sbdocs-h3 {
   background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/refinements___ca4c7814b2771e84601f4a6d457612fd.png");
 }
 
+/* Skeletons */
+
+.canvas-skeletons [data-fs-skeleton-variant="text"] {
+  max-width: 300px;
+}
+
+.canvas-skeletons [data-fs-skeleton-variant="badge"] {
+  max-width: 100px;
+}
+
+.canvas-skeletons [data-fs-skeleton-variant="image"] {
+  max-width: 12.188rem;
+}
+
+.canvas-filter-skeleton [data-fs-filter-skeleton] {
+  max-width: 350px;
+}
+
+.canvas-product-card-skeleton [data-fs-product-card-skeleton] {
+  max-width: 280px;
+}
+
+.sbdocs-skeletons .sbdocs-li > .sbdocs-div {
+  min-height: 420px;
+  background-color: #f7f7f7;
+}
+
+.sbdocs-skeletons .sbdocs-li > .sbdocs-div [data-fs-skeleton] {
+  width: 200px;
+}
+
+.sbdocs-skeletons .sbdocs-li > .sbdocs-div [data-fs-skeleton-variant="badge"] {
+  width: 120px;
+}
+
+.sbdocs-skeletons .sbdocs-li > .sbdocs-div [data-fs-skeleton-variant="button"] {
+  width: 90px;
+}
+
 /* Hero Section */
 
 .sbdocs-content > header.sbdocs-hero {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog),
 and this project adheres to [Calendar Versioning](https://calver.org/).
 
+## [22.30.0](https://github.com/vtex-sites/gatsby.store/compare/22.29.5...22.30.0) (2022-08-01)
+
+
+### Features
+
+* Adds new tokens to `Skeleton` [FS-269] ([#162](https://github.com/vtex-sites/gatsby.store/issues/162)) ([8423be3](https://github.com/vtex-sites/gatsby.store/commit/8423be3df7da4dc04d84f1b89fc4f6564ca476ba)), closes [#171](https://github.com/vtex-sites/gatsby.store/issues/171)
+
 ### [22.29.5](https://github.com/vtex-sites/gatsby.store/compare/22.29.4...22.29.5) (2022-07-28)
 
 ### Chores

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby.store",
   "private": true,
-  "version": "22.29.5",
+  "version": "22.30.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {

diff --git a/src/components/sections/ProductGallery/ProductGallery.tsx b/src/components/sections/ProductGallery/ProductGallery.tsx
@@ -6,7 +6,7 @@ import Filter from 'src/components/search/Filter'
 import Sort from 'src/components/search/Sort'
 import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
-import SkeletonElement from 'src/components/skeletons/SkeletonElement'
+import Skeleton from 'src/components/skeletons/Skeleton'
 import Button, { ButtonLink } from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import { mark } from 'src/sdk/tests/mark'
@@ -73,17 +73,32 @@ function ProductGallery({ title, searchTerm }: Props) {
         </div>
 
         <div data-fs-product-listing-results-count data-count={totalCount}>
-          <SkeletonElement shimmer type="text" loading={!data}>
+          <Skeleton
+            shimmer
+            variant="text"
+            loading={!data}
+            data-fs-product-listing-results-count-skeleton
+          >
             <h2 data-testid="total-product-count">{totalCount} Results</h2>
-          </SkeletonElement>
+          </Skeleton>
         </div>
 
         <div data-fs-product-listing-sort>
-          <SkeletonElement shimmer type="text" loading={facets?.length === 0}>
+          <Skeleton
+            shimmer
+            variant="text"
+            loading={facets?.length === 0}
+            data-fs-product-listing-sort-skeleton
+          >
             <Sort />
-          </SkeletonElement>
+          </Skeleton>
 
-          <SkeletonElement shimmer type="button" loading={facets?.length === 0}>
+          <Skeleton
+            shimmer
+            variant="button"
+            loading={facets?.length === 0}
+            data-fs-product-listing-filter-button-skeleton
+          >
             <Button
               variant="tertiary"
               data-testid="open-filter-button"
@@ -94,7 +109,7 @@ function ProductGallery({ title, searchTerm }: Props) {
             >
               Filters
             </Button>
-          </SkeletonElement>
+          </Skeleton>
         </div>
 
         <div data-fs-product-listing-results>

diff --git a/src/components/sections/ProductGallery/product-gallery.module.scss b/src/components/sections/ProductGallery/product-gallery.module.scss
@@ -72,7 +72,7 @@
     padding: var(--fs-spacing-1) var(--fs-spacing-3) var(--fs-spacing-2);
     background-color: var(--fs-color-body-bkg);
 
-    [data-element-variant="text"] {
+    [data-fs-product-listing-sort-skeleton] {
       min-width: rem(225px);
       min-height: var(--fs-spacing-5);
     }
@@ -88,7 +88,7 @@
         display: none;
       }
 
-      [data-element-variant="button"] {
+      [data-fs-product-listing-filter-button-skeleton] {
         display: none;
       }
     }
@@ -112,7 +112,7 @@
       background-color: unset;
     }
 
-    [data-element-variant="text"] {
+    [data-fs-product-listing-results-count-skeleton] {
       min-width: rem(130px);
     }
   }

diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -4,6 +4,7 @@ import type { ProductsQueryQueryVariables } from '@generated/graphql'
 
 import ProductCard from '../../product/ProductCard'
 import Section from '../Section'
+import styles from './product-shelf.module.scss'
 
 interface ProductShelfProps extends Partial<ProductsQueryQueryVariables> {
   title: string | JSX.Element
@@ -26,7 +27,7 @@ function ProductShelf({
       className={`layout__section ${withDivisor ? 'section__divisor' : ''}`}
     >
       <h2 className="text__title-section layout__content">{title}</h2>
-      <div data-fs-product-shelf>
+      <div className={styles.fsProductShelf} data-fs-product-shelf>
         <ProductShelfSkeleton loading={products === undefined}>
           <ul data-fs-product-shelf-items className="layout__content">
             {products?.edges.map((product, idx) => (

diff --git a/.../sections/ProductShelf/product-shelf.scss → ...ns/ProductShelf/product-shelf.module.scss b/.../sections/ProductShelf/product-shelf.scss → ...ns/ProductShelf/product-shelf.module.scss
@@ -1,6 +1,6 @@
 @import "src/styles/scaffold";
 
-[data-fs-product-shelf] {
+.fs-product-shelf {
   // --------------------------------------------------------
   // Design Tokens for Product Shelf
   // --------------------------------------------------------
@@ -17,23 +17,25 @@
   // Structural Styles
   // --------------------------------------------------------
 
-  min-height: var(--fs-product-shelf-min-height);
-}
-
-[data-fs-product-shelf-items] {
-  display: flex;
-  align-items: stretch;
-  overflow-x: scroll;
-
-  li {
-    width: 100%;
-    &:first-child { margin-left: var(--fs-product-shelf-first-item-margin-left); }
+  &[data-fs-product-shelf] {
+    min-height: var(--fs-product-shelf-min-height);
   }
 
-  @include media(">=tablet") {
-    column-gap: var(--fs-product-shelf-items-gap);
-    padding-top: var(--fs-product-shelf-items-padding-top);
-    padding-bottom: var(--fs-product-shelf-items-padding-bottom);
-    overflow-x: auto;
+  [data-fs-product-shelf-items] {
+    display: flex;
+    align-items: stretch;
+    overflow-x: scroll;
+
+    li {
+      width: 100%;
+      &:first-child { margin-left: var(--fs-product-shelf-first-item-margin-left); }
+    }
+
+    @include media(">=tablet") {
+      column-gap: var(--fs-product-shelf-items-gap);
+      padding-top: var(--fs-product-shelf-items-padding-top);
+      padding-bottom: var(--fs-product-shelf-items-padding-bottom);
+      overflow-x: auto;
+    }
   }
 }
diff --git a/src/components/skeletons/FilterSkeleton/FilterSkeleton.stories.mdx b/src/components/skeletons/FilterSkeleton/FilterSkeleton.stories.mdx
@@ -0,0 +1,97 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+import FilterSkeleton from '.'
+
+<Meta
+  component={FilterSkeleton}
+  title="Features/Skeletons/FilterSkeleton"
+  argTypes={{
+    loading: {
+      control: 'boolean',
+      table: { type: 'boolean', summary: true },
+    },
+  }}
+/>
+
+export const TemplateFilterSkeleton = ({ ...args }) => (
+  <FilterSkeleton {...args} />
+)
+
+<header>
+
+# Filter Skeleton
+
+The loading placeholder for the <code>Filter</code> component used in PLP.
+
+</header>
+
+## Overview
+
+The `FilterSkeleton` component is part of [Skeletons](?path=/docs/features-skeletons-overview--usage) feature.
+
+---
+
+## Usage
+
+`import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'`
+
+<Canvas className="canvas-filter-skeleton">
+  <Story name="Usage" args={{ loading: true }}>
+    {TemplateFilterSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Usage" />
+
+---
+
+<TokenTable>
+  <TokenRow
+    token="--fs-filter-skeleton-margin-top"
+    value="var(--fs-spacing-1)"
+  />
+</TokenTable>
+
+### Title
+
+<TokenTable>
+  <TokenRow token="--fs-filter-skeleton-title-max-width" value="30%" />
+  <TokenRow
+    token="--fs-filter-skeleton-title-margin-bottom"
+    value="var(--fs-spacing-2)"
+  />
+</TokenTable>
+
+### Content
+
+<TokenTable>
+  <TokenRow
+    token="--fs-filter-skeleton-content-min-height"
+    value="var(--fs-spacing-8)"
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-margin-bottom"
+    value="var(--fs-spacing-0)"
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-padding"
+    value="var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-0)"
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-border-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
diff --git a/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx b/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
@@ -1,24 +1,28 @@
 import type { PropsWithChildren } from 'react'
 
 import Shimmer from '../Shimmer'
-import SkeletonElement from '../SkeletonElement'
+import Skeleton from '../Skeleton'
+import styles from './filter-skeleton.module.scss'
 
-interface Props {
+interface FilterSkeletonProps {
+  /**
+   * Control whether skeleton should be visible or not.
+   */
   loading?: boolean
 }
 
 function FilterSkeleton({
   children,
   loading = true,
-}: PropsWithChildren<Props>) {
+}: PropsWithChildren<FilterSkeletonProps>) {
   return loading ? (
-    <div data-store-filter-skeleton>
-      <SkeletonElement shimmer type="text" />
+    <div className={styles.fsFilterSkeleton} data-fs-filter-skeleton>
+      <Skeleton shimmer variant="text" />
 
-      <div data-filter-skeleton-content>
-        <SkeletonElement type="text" />
-        <SkeletonElement type="text" />
-        <SkeletonElement type="text" />
+      <div data-fs-filter-skeleton-content>
+        <Skeleton variant="text" />
+        <Skeleton variant="text" />
+        <Skeleton variant="text" />
         <Shimmer />
       </div>
     </div>