Feat: Add tokens to SuggestionProductCard

.storybook/mocks/index.ts

@@ -0,0 +1,2 @@
+export { product } from './product'
+export { productGridItems } from './productGridItems'

.storybook/mocks/product.ts

@@ -0,0 +1,67 @@
+export const product = {
+  id: '99988212',
+  slug: 'apple-magic-mouse-99988212',
+  sku: '99988212',
+  brand: {
+    brandName: 'adidas',
+    name: 'adidas',
+  },
+  name: 'Magic white',
+  gtin: '1503',
+  isVariantOf: {
+    productGroupID: '99995945',
+    name: 'Apple Magic Mouse',
+  },
+  image: [
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000',
+      alternateName: 'Magicwhite',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190923/lena-de-fanti-nQ_j5d-klVU-unsplash.jpg?v=637867501523500000',
+      alternateName: 'magicbox',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000',
+      alternateName: 'magicblackwhite',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190925/maheshkumar-painam-GZdfLeL-MDk-unsplash.jpg?v=637867502064000000',
+      alternateName: 'magiccombo',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190926/math-0U9fBLGP3EY-unsplash.jpg?v=637867502325830000',
+      alternateName: 'magicback',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190927/marek-levak-YPeqMN_wfw0-unsplash.jpg?v=637867502641430000',
+      alternateName: 'magictable',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190928/mouse8.jpg?v=637867504048970000',
+      alternateName: 'magichand',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190929/harpal-singh-KuvEVL7lXYQ-unsplash.jpg?v=637867509459130000',
+      alternateName: 'magicstyle',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190930/chris-hardy-182PzOtcmWc-unsplash.jpg?v=637867509778300000',
+      alternateName: 'magicscale',
+    },
+  ],
+  offers: {
+    lowPrice: 950,
+    offers: [
+      {
+        availability: 'https://schema.org/InStock',
+        price: 950,
+        listPrice: 999,
+        quantity: 10000,
+        seller: {
+          identifier: '1',
+        },
+      },
+    ],
+  },
+}

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 `SuggestionProductCard` ([#135](https://github.com/vtex-sites/gatsby.store/pull/135))
 - Applies new local tokens to `Navbar` ([#132](https://github.com/vtex-sites/gatsby.store/pull/132))
 
 ### Changed

src/components/product/ProductGrid/ProductGrid.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 import { SearchProvider, SessionProvider } from '@faststore/sdk'
 import storeConfig from 'store.config'
 import Sentinel from 'src/sdk/search/Sentinel'
-import { productGridItems } from 'src/../.storybook/mocks/productGridItems'
+import { productGridItems } from 'src/../.storybook/mocks'
 import { LocationProvider } from '@reach/router'
 
 import { useProducts } from '../../sections/ProductGallery/usePageProducts'

src/components/search/History/SearchHistory.stories.tsx

@@ -5,7 +5,7 @@ import type { SearchHistoryProps } from '.'
 
 export default {
   component: SearchHistory,
-  title: 'Organisms/Search/History',
+  title: 'Features/Search/History',
 }
 
 const Template = (props: SearchHistoryProps) => {

src/components/search/SuggestionProductCard/SuggestionProductCard.stories.mdx

@@ -0,0 +1,102 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+import { SearchInputProvider } from 'src/sdk/search/useSearchInput'
+import { SessionProvider } from '@faststore/sdk'
+import { LocationProvider } from '@reach/router'
+import storeConfig from 'store.config'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+import { product } from 'src/../.storybook/mocks'
+
+import SuggestionProductCard from '.'
+
+<Meta
+  title="Features/Search/SuggestionProductCard"
+  component={SuggestionProductCard}
+  args={{
+    product,
+    index: 1
+  }}
+/>
+
+export const Template = (args) => (
+  <LocationProvider>
+    <SessionProvider initialState={{ channel: storeConfig.channel }}>
+      <SearchInputProvider>
+        <SuggestionProductCard {...args} />
+      </SearchInputProvider>
+    </SessionProvider>
+  </LocationProvider>
+)
+
+<header>
+
+# Suggestion Product Card
+
+Card to show details of the product and suggest in search dropdown.
+
+</header>
+
+## Overview
+
+The `SuggestionProductCard` differs from `ProductCard` because it is used in the `Search` feature and is called by the `Suggestion` component.
+
+---
+
+## Usage
+
+`import SuggestionProductCard from '../components/search/SuggestionProductCard'`
+
+<Canvas>
+  <Story name="SuggestionProductCard">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="SuggestionProductCard" />
+
+## Nested Elements
+
+### Link
+
+<TokenTable>
+  <TokenRow
+    token="--fs-suggestion-product-card-link-padding"
+    value="var(--fs-spacing-1) var(--fs-spacing-3)"
+  />
+</TokenTable>
+
+### Image
+
+<TokenTable>
+  <TokenRow
+    token="--fs-suggestion-product-card-image-border-radius"
+    value="var(--fs-border-radius)"
+  />
+  <TokenRow
+    token="--fs-suggestion-product-card-image-margin-right"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenRow
+    token="--fs-suggestion-product-card-image-height"
+    value="3.5rem"
+  />
+</TokenTable>
+
+### Title
+
+<TokenTable>
+  <TokenRow
+    token="--fs-suggestion-product-card-title-margin-bottom"
+    value="var(--fs-spacing-0)"
+  />
+  <TokenRow
+    token="--fs-suggestion-product-card-title-line-height"
+    value="1.2"
+  />
+  <TokenRow
+    token="--fs-suggestion-product-card-title-color"
+    value="var(--fs-color-text)"
+    isColor
+  />
+</TokenTable>

src/components/search/SuggestionProductCard/SuggestionProductCard.tsx

@@ -7,8 +7,16 @@ import { useProductLink } from 'src/sdk/product/useProductLink'
 import useSearchInput from 'src/sdk/search/useSearchInput'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 
+import styles from './suggestion-product-card.module.scss'
+
 type SuggestionProductCardProps = {
+  /**
+   * Product to be showed in `SuggestionProductCard`.
+   */
   product: ProductSummary_ProductFragment
+  /**
+   * Index to generate product link.
+   */
   index: number
 }
 
@@ -30,7 +38,11 @@ function SuggestionProductCard({ product, index }: SuggestionProductCardProps) {
   } = product
 
   return (
-    <Card data-fs-suggestion-product-card data-testid="suggestion-product-card">
+    <Card
+      data-fs-suggestion-product-card
+      className={styles.fsSuggestionProductCard}
+      data-testid="suggestion-product-card"
+    >
       <Link
         {...linkProps}
         href={href}
@@ -41,8 +53,8 @@ function SuggestionProductCard({ product, index }: SuggestionProductCardProps) {
           onSearchInputSelection?.(name, href)
         }}
       >
-        <CardContent>
-          <CardImage>
+        <CardContent data-fs-suggestion-product-card-content>
+          <CardImage data-fs-suggestion-product-card-image>
             <Image
               src={img.url}
               alt={img.alternateName}

src/components/search/SuggestionProductCard/suggestion-product-card.module.scss

@@ -0,0 +1,53 @@
+@import "src/styles/scaffold";
+
+.fs-suggestion-product-card {
+  // --------------------------------------------------------
+  // Design Tokens for Suggestion Product Card
+  // --------------------------------------------------------
+
+  // Suggestion Product Card Link
+  --fs-suggestion-product-card-link-padding                   : var(--fs-spacing-1) var(--fs-spacing-3);
+
+  // Suggestion Product Card Image
+  --fs-suggestion-product-card-image-border-radius            : var(--fs-border-radius);
+  --fs-suggestion-product-card-image-margin-right             : var(--fs-spacing-3);
+  --fs-suggestion-product-card-image-height                   : 3.5rem;
+
+  // Suggestion Product Card Title
+  --fs-suggestion-product-card-title-margin-bottom            : var(--fs-spacing-0);
+  --fs-suggestion-product-card-title-line-height              : 1.2;
+  --fs-suggestion-product-card-title-color                    : var(--fs-color-text);
+
+  [data-fs-suggestion-product-card-image] {
+    display: flex;
+    height: var(--fs-suggestion-product-card-image-height);
+    margin-right: var(--fs-suggestion-product-card-image-margin-right);
+    overflow: hidden;
+    border-radius: var(--fs-suggestion-product-card-image-border-radius);
+  }
+
+  [data-fs-suggestion-product-card-content] {
+    display: flex;
+    align-items: center;
+  }
+
+  [data-fs-suggestion-product-card-title] {
+    margin-bottom: var(--fs-suggestion-product-card-title-margin-bottom);
+    line-height: var(--fs-suggestion-product-card-title-line-height);
+    color: var(--fs-suggestion-product-card-title-color);
+    text-decoration: none;
+    outline: none;
+
+    @include truncate-title;
+  }
+
+  [data-fs-suggestion-product-card-prices] {
+    display: flex;
+    align-items: baseline;
+  }
+
+  [data-fs-link] {
+    padding: var(--fs-suggestion-product-card-link-padding);
+    text-decoration: none;
+  }
+}

src/components/search/Suggestions/SuggestionsTopSearch.stories.tsx

@@ -6,7 +6,7 @@ import type { SuggestionsTopSearchProps } from '.'
 
 export default {
   component: SuggestionsTopSearch,
-  title: 'Organisms/Search/TopSearch',
+  title: 'Features/Search/TopSearch',
 }
 
 const Template = (props: SuggestionsTopSearchProps) => (

src/components/ui/Search/Suggestions/Suggestions.stories.tsx

@@ -38,7 +38,7 @@ const product = ({ id = '1', name = 'Handmade Steel Towels Practical' }) => ({
 
 export default {
   component: Suggestions,
-  title: 'Organisms/Search/Suggestions',
+  title: 'Features/Search/Suggestions',
 }
 
 const Template = (props: SuggestionsProps) => (

src/styles/global/storybook-components.scss

@@ -9,7 +9,6 @@
 
 // Search
 @import "src/components/search/Suggestions/suggestions.scss";
-@import "src/components/search/SuggestionProductCard/suggestion-product-card.scss";
 
 // Sections
 @import "src/components/sections/BannerText/banner-text.scss";

src/styles/global/tokens.scss

@@ -246,9 +246,9 @@ body {
   --fs-transition-function             : ease-in-out;
 
   // BORDERS
-  --fs-border-radius-small             : .125rem;
-  --fs-border-radius                   : .25rem;
-  --fs-border-radius-medium            : .5rem;
+  --fs-border-radius-small             : .125rem; // 2px
+  --fs-border-radius                   : .25rem;  // 4px
+  --fs-border-radius-medium            : .5rem;   // 8px
   --fs-border-radius-pill              : 100px;
   --fs-border-radius-circle            : 100%;
 

src/styles/pages/layout.scss

@@ -7,7 +7,6 @@
 @import "src/components/common/Footer/footer.scss";
 @import "src/components/common/SearchInput/search-input.scss";
 @import "src/components/search/Suggestions/suggestions.scss";
-@import "src/components/search/SuggestionProductCard/suggestion-product-card.scss";
 
 // Sections
 @import "src/components/sections/Incentives/incentives.scss";