From 2b9779593a88c5b81b4c8cada44a651bc804cbf0 Mon Sep 17 00:00:00 2001 From: Arthur Andrade Date: Mon, 4 Jul 2022 11:50:58 -0300 Subject: [PATCH] feat: Add documentation to SuggestionProductCard Signed-off-by: Arthur Andrade --- .storybook/mocks/index.ts | 2 + .storybook/mocks/product.ts | 67 ++++++++++++ ...roductGridItems.js => productGridItems.ts} | 0 CHANGELOG.md | 1 + .../ProductGrid/ProductGrid.stories.mdx | 2 +- .../search/History/SearchHistory.stories.tsx | 2 +- .../SuggestionProductCard.stories.mdx | 102 ++++++++++++++++++ .../SuggestionProductCard.tsx | 18 +++- .../suggestion-product-card.module.scss | 53 +++++++++ .../suggestion-product-card.scss | 48 --------- .../SuggestionsTopSearch.stories.tsx | 2 +- .../Suggestions/Suggestions.stories.tsx | 2 +- src/styles/global/storybook-components.scss | 1 - src/styles/global/tokens.scss | 6 +- src/styles/pages/layout.scss | 1 - 15 files changed, 247 insertions(+), 60 deletions(-) create mode 100644 .storybook/mocks/index.ts create mode 100644 .storybook/mocks/product.ts rename .storybook/mocks/{productGridItems.js => productGridItems.ts} (100%) create mode 100644 src/components/search/SuggestionProductCard/SuggestionProductCard.stories.mdx create mode 100644 src/components/search/SuggestionProductCard/suggestion-product-card.module.scss delete mode 100644 src/components/search/SuggestionProductCard/suggestion-product-card.scss diff --git a/.storybook/mocks/index.ts b/.storybook/mocks/index.ts new file mode 100644 index 00000000..f5e58d01 --- /dev/null +++ b/.storybook/mocks/index.ts @@ -0,0 +1,2 @@ +export { product } from './product' +export { productGridItems } from './productGridItems' diff --git a/.storybook/mocks/product.ts b/.storybook/mocks/product.ts new file mode 100644 index 00000000..d55fc491 --- /dev/null +++ b/.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', + }, + }, + ], + }, +} diff --git a/.storybook/mocks/productGridItems.js b/.storybook/mocks/productGridItems.ts similarity index 100% rename from .storybook/mocks/productGridItems.js rename to .storybook/mocks/productGridItems.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 944a029a..2bb968e7 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/components/product/ProductGrid/ProductGrid.stories.mdx b/src/components/product/ProductGrid/ProductGrid.stories.mdx index 45adccde..b561d8c1 100644 --- a/src/components/product/ProductGrid/ProductGrid.stories.mdx +++ b/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' diff --git a/src/components/search/History/SearchHistory.stories.tsx b/src/components/search/History/SearchHistory.stories.tsx index 53bcd901..d11d88c4 100644 --- a/src/components/search/History/SearchHistory.stories.tsx +++ b/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) => { diff --git a/src/components/search/SuggestionProductCard/SuggestionProductCard.stories.mdx b/src/components/search/SuggestionProductCard/SuggestionProductCard.stories.mdx new file mode 100644 index 00000000..16f38aa4 --- /dev/null +++ b/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 '.' + + + +export const Template = (args) => ( + + + + + + + +) + +
+ +# Suggestion Product Card + +Card to show details of the product and suggest in search dropdown. + +
+ +## 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'` + + + {Template.bind({})} + + + + +## Nested Elements + +### Link + + + + + +### Image + + + + + + + +### Title + + + + + + diff --git a/src/components/search/SuggestionProductCard/SuggestionProductCard.tsx b/src/components/search/SuggestionProductCard/SuggestionProductCard.tsx index 4aacf6d7..1e229090 100644 --- a/src/components/search/SuggestionProductCard/SuggestionProductCard.tsx +++ b/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 ( - + - - + + {img.alternateName} ( diff --git a/src/components/ui/Search/Suggestions/Suggestions.stories.tsx b/src/components/ui/Search/Suggestions/Suggestions.stories.tsx index d0799148..a9c6ba4c 100644 --- a/src/components/ui/Search/Suggestions/Suggestions.stories.tsx +++ b/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) => ( diff --git a/src/styles/global/storybook-components.scss b/src/styles/global/storybook-components.scss index 48d8edbd..5c857a19 100644 --- a/src/styles/global/storybook-components.scss +++ b/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"; diff --git a/src/styles/global/tokens.scss b/src/styles/global/tokens.scss index e5f1cb7d..a5d53624 100644 --- a/src/styles/global/tokens.scss +++ b/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%; diff --git a/src/styles/pages/layout.scss b/src/styles/pages/layout.scss index a1fac9c3..5583ed83 100644 --- a/src/styles/pages/layout.scss +++ b/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";