From 5dffba2f04831b736489bf6db26c03522210df62 Mon Sep 17 00:00:00 2001 From: eduardoformiga Date: Thu, 9 Jun 2022 12:52:22 -0300 Subject: [PATCH 1/9] Adds CSS Modules to empty state --- src/components/ui/EmptyState/EmptyState.tsx | 8 ++- .../ui/EmptyState/empty-state.module.scss | 62 +++++++++++++++++++ src/components/ui/EmptyState/empty-state.scss | 39 ------------ src/styles/global/components.scss | 1 - src/styles/global/storybook-components.scss | 1 - 5 files changed, 69 insertions(+), 42 deletions(-) create mode 100644 src/components/ui/EmptyState/empty-state.module.scss delete mode 100644 src/components/ui/EmptyState/empty-state.scss diff --git a/src/components/ui/EmptyState/EmptyState.tsx b/src/components/ui/EmptyState/EmptyState.tsx index acd8b938..cdc055eb 100644 --- a/src/components/ui/EmptyState/EmptyState.tsx +++ b/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) { return ( -
+
{children}
) diff --git a/src/components/ui/EmptyState/empty-state.module.scss b/src/components/ui/EmptyState/empty-state.module.scss new file mode 100644 index 00000000..71d23269 --- /dev/null +++ b/src/components/ui/EmptyState/empty-state.module.scss @@ -0,0 +1,62 @@ +@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); + + // Header + --fs-empty-state-header-margin-bottom : var(--fs-spacing-2); + --fs-empty-state-header-color : var(--fs-color-disabled-text); + --fs-empty-state-header-text-size : var(--fs-text-size-3); + + --fs-empty-state-link-min-width : rem(190px); + + // 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; + } + + > header { + display: flex; + flex-direction: column; + row-gap: var(--fs-spacing-1); + align-items: center; + justify-content: center; + margin-bottom: var(--fs-empty-state-header-margin-bottom); + color: var(--fs-empty-state-header-color); + + p { + font-size: var(--fs-empty-state-header-text-size); + text-align: center; + } + } + + a { + 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); + } +} diff --git a/src/components/ui/EmptyState/empty-state.scss b/src/components/ui/EmptyState/empty-state.scss deleted file mode 100644 index f03d2d77..00000000 --- a/src/components/ui/EmptyState/empty-state.scss +++ /dev/null @@ -1,39 +0,0 @@ -@import "src/styles/scaffold"; - -[data-fs-empty-state] { - display: flex; - flex-direction: column; - row-gap: var(--fs-spacing-3); - justify-content: center; - height: 100%; - min-height: 50vh; - padding: 0 var(--fs-spacing-8); - background-color: var(--fs-color-neutral-bkg); - - @include media(">=notebook") { - align-items: center; - } - - > header { - display: flex; - flex-direction: column; - row-gap: var(--fs-spacing-1); - align-items: center; - justify-content: center; - margin-bottom: var(--fs-spacing-2); - color: var(--fs-color-disabled-text); - - p { - font-size: var(--fs-text-size-3); - text-align: center; - } - } - - a { - min-width: rem(190px); - } -} - -[data-fs-empty-state-variant="rounded"] { - border-radius: var(--fs-border-radius); -} diff --git a/src/styles/global/components.scss b/src/styles/global/components.scss index a8407ad3..44b4661b 100644 --- a/src/styles/global/components.scss +++ b/src/styles/global/components.scss @@ -35,7 +35,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"; diff --git a/src/styles/global/storybook-components.scss b/src/styles/global/storybook-components.scss index 8394731a..357f4eb1 100644 --- a/src/styles/global/storybook-components.scss +++ b/src/styles/global/storybook-components.scss @@ -32,7 +32,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"; From 324dd54e6bb0c169f81a049add8be11da34d6b7a Mon Sep 17 00:00:00 2001 From: eduardoformiga Date: Tue, 14 Jun 2022 19:58:53 -0300 Subject: [PATCH 2/9] Creates EmptyState along with related components stories --- .../cart/EmptyCart/EmptyCart.stories.mdx | 49 ++++++++++ src/components/cart/EmptyCart/EmptyCart.tsx | 2 +- .../ProductGallery/EmptyGallery.stories.mdx | 55 ++++++++++++ .../sections/ProductGallery/EmptyGallery.tsx | 4 +- .../ui/EmptyState/EmptyState.stories.mdx | 89 +++++++++++++++++++ .../ui/EmptyState/empty-state.module.scss | 21 ++--- 6 files changed, 208 insertions(+), 12 deletions(-) create mode 100644 src/components/cart/EmptyCart/EmptyCart.stories.mdx create mode 100644 src/components/sections/ProductGallery/EmptyGallery.stories.mdx create mode 100644 src/components/ui/EmptyState/EmptyState.stories.mdx diff --git a/src/components/cart/EmptyCart/EmptyCart.stories.mdx b/src/components/cart/EmptyCart/EmptyCart.stories.mdx new file mode 100644 index 00000000..ce07d69b --- /dev/null +++ b/src/components/cart/EmptyCart/EmptyCart.stories.mdx @@ -0,0 +1,49 @@ +import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs' + +import { TokenTable, TokenRow } from 'src/../.storybook/components' + +import EmptyCart from 'src/components/cart/EmptyCart' + + + +export const Template = (args) => + +
+ +# EmptyCart + +An implementation of the `EmptyState` that represents the Cart with no items. + +
+ +--- + +## Usage + +`import EmptyCart from 'src/components/cart/EmptyCart'` + + + {Template.bind({})} + + + + +## Nested Elements + +### Title + + + + + + diff --git a/src/components/cart/EmptyCart/EmptyCart.tsx b/src/components/cart/EmptyCart/EmptyCart.tsx index 9ee4397c..a9e8668f 100644 --- a/src/components/cart/EmptyCart/EmptyCart.tsx +++ b/src/components/cart/EmptyCart/EmptyCart.tsx @@ -12,7 +12,7 @@ interface Props { function EmptyCart({ onDismiss }: Props) { return ( -
+

Your Cart is empty

diff --git a/src/components/sections/ProductGallery/EmptyGallery.stories.mdx b/src/components/sections/ProductGallery/EmptyGallery.stories.mdx new file mode 100644 index 00000000..9bd82646 --- /dev/null +++ b/src/components/sections/ProductGallery/EmptyGallery.stories.mdx @@ -0,0 +1,55 @@ +import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs' + +import { TokenTable, TokenRow } from 'src/../.storybook/components' + +import EmptyGallery from 'src/components/sections/ProductGallery/EmptyGallery' + + + +export const Template = (args) => + +
+ +# EmptyGallery + +An implementation of the `EmptyState` that represents a Gallery with no items. + +
+ +--- + +## Usage + +`import EmptyGallery from 'src/components/sections/ProductGallery/EmptyGallery'` + + + {Template.bind({})} + + +--- + +## Nested Elements + +### Title + + + + + + + +### Link + + + + diff --git a/src/components/sections/ProductGallery/EmptyGallery.tsx b/src/components/sections/ProductGallery/EmptyGallery.tsx index d8bd96bb..97fc22b7 100644 --- a/src/components/sections/ProductGallery/EmptyGallery.tsx +++ b/src/components/sections/ProductGallery/EmptyGallery.tsx @@ -5,13 +5,14 @@ import Icon from 'src/components/ui/Icon' function EmptyGallery() { return ( -
+

Nothing matches with your search

} diff --git a/src/components/ui/EmptyState/EmptyState.stories.mdx b/src/components/ui/EmptyState/EmptyState.stories.mdx new file mode 100644 index 00000000..40a3dcdc --- /dev/null +++ b/src/components/ui/EmptyState/EmptyState.stories.mdx @@ -0,0 +1,89 @@ +import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs' + +import { TokenTable, TokenRow } from 'src/../.storybook/components' + +import EmptyState from '.' +import EmptyGallery from 'src/components/sections/ProductGallery' +import EmptyCart from 'src/components/cart/EmptyCart' + + + +export const Template = (args) => ( + The list is empty +) + +
+ +# EmptyState + +This component represents an empty state, usually used on `EmptyCart` and `EmptyGallery` components. + +
+ +--- + +## Usage + +`import EmptyState from 'src/components/ui/EmptyState'` + + + {Template.bind({})} + + + + + + + + + + + +--- + +## Variants + +### Rounded + + + + + +--- + +## Related Components + +
+
+
+ + + +
+
+

Empty Cart

+

+ Displays the empty cart message along with the start shopping button. +

+
+ +
+
+
+ + + +
+
+

Empty Gallery

+

Displays the empty gallery message along with some button navigation options.

+
+
+
diff --git a/src/components/ui/EmptyState/empty-state.module.scss b/src/components/ui/EmptyState/empty-state.module.scss index 71d23269..9a383aa4 100644 --- a/src/components/ui/EmptyState/empty-state.module.scss +++ b/src/components/ui/EmptyState/empty-state.module.scss @@ -9,12 +9,13 @@ --fs-empty-state-padding : 0 var(--fs-spacing-8); --fs-empty-state-bkg-color : var(--fs-color-neutral-bkg); - // Header - --fs-empty-state-header-margin-bottom : var(--fs-spacing-2); - --fs-empty-state-header-color : var(--fs-color-disabled-text); - --fs-empty-state-header-text-size : var(--fs-text-size-3); + // 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-text-size : var(--fs-text-size-3); - --fs-empty-state-link-min-width : rem(190px); + // Link + --fs-empty-state-link-min-width : 11.875rem; // Rounded --fs-empty-state-border-radius : var(--fs-border-radius); @@ -33,22 +34,22 @@ align-items: center; } - > header { + > [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-header-margin-bottom); - color: var(--fs-empty-state-header-color); + margin-bottom: var(--fs-empty-state-title-margin-bottom); + color: var(--fs-empty-state-title-color); p { - font-size: var(--fs-empty-state-header-text-size); + font-size: var(--fs-empty-state-title-text-size); text-align: center; } } - a { + [data-fs-empty-state-link] { min-width: var(--fs-empty-state-link-min-width); } From 3675037b044a52050d87da360b7cf6a471ae17f1 Mon Sep 17 00:00:00 2001 From: eduardoformiga Date: Tue, 14 Jun 2022 20:15:33 -0300 Subject: [PATCH 3/9] Adds CHANGELOG entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a3227c24..6df39125 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 `EmptyState` ([#122](https://github.com/vtex-sites/nextjs.store/pull/122)) - Creates new Storybook section `BestPractices` ([#101](https://github.com/vtex-sites/nextjs.store/pull/101)) - Applies new local tokens to `OutOfStock` ([#97](https://github.com/vtex-sites/nextjs.store/pull/97)) - Applies new local tokens to `CartItem` ([#102](https://github.com/vtex-sites/nextjs.store/pull/102)) From c63bf5d51c6df34ebcfaab67ceb2ee4ce524edeb Mon Sep 17 00:00:00 2001 From: Eduardo Formiga Date: Tue, 14 Jun 2022 21:20:39 -0300 Subject: [PATCH 4/9] Update src/components/cart/EmptyCart/EmptyCart.stories.mdx Co-authored-by: Fanny Chien --- src/components/cart/EmptyCart/EmptyCart.stories.mdx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/cart/EmptyCart/EmptyCart.stories.mdx b/src/components/cart/EmptyCart/EmptyCart.stories.mdx index ce07d69b..5b1b6d27 100644 --- a/src/components/cart/EmptyCart/EmptyCart.stories.mdx +++ b/src/components/cart/EmptyCart/EmptyCart.stories.mdx @@ -15,9 +15,6 @@ export const Template = (args) => An implementation of the `EmptyState` that represents the Cart with no items.
- ---- - ## Usage `import EmptyCart from 'src/components/cart/EmptyCart'` From 744c55bcf55c450ac18772136e09f0d2ecdbf20a Mon Sep 17 00:00:00 2001 From: Eduardo Formiga Date: Tue, 14 Jun 2022 21:21:20 -0300 Subject: [PATCH 5/9] Update src/components/ui/EmptyState/empty-state.module.scss Co-authored-by: Fanny Chien --- src/components/ui/EmptyState/empty-state.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/EmptyState/empty-state.module.scss b/src/components/ui/EmptyState/empty-state.module.scss index 9a383aa4..d531cfd0 100644 --- a/src/components/ui/EmptyState/empty-state.module.scss +++ b/src/components/ui/EmptyState/empty-state.module.scss @@ -12,7 +12,7 @@ // 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-text-size : var(--fs-text-size-3); + --fs-empty-state-title-text-size : var(--fs-text-size-lead); // Link --fs-empty-state-link-min-width : 11.875rem; From b12d989f9ea0a029e176b08f2b8803904acf9450 Mon Sep 17 00:00:00 2001 From: Eduardo Formiga Date: Tue, 14 Jun 2022 21:22:00 -0300 Subject: [PATCH 6/9] Update src/components/ui/EmptyState/EmptyState.stories.mdx Co-authored-by: Fanny Chien --- src/components/ui/EmptyState/EmptyState.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/EmptyState/EmptyState.stories.mdx b/src/components/ui/EmptyState/EmptyState.stories.mdx index 40a3dcdc..cb3db20b 100644 --- a/src/components/ui/EmptyState/EmptyState.stories.mdx +++ b/src/components/ui/EmptyState/EmptyState.stories.mdx @@ -64,7 +64,7 @@ This component represents an empty state, usually used on `EmptyCart` and `Empty
From 4263659b1af37c28f47872b82baaaff757bb6c4e Mon Sep 17 00:00:00 2001 From: eduardoformiga Date: Wed, 15 Jun 2022 11:14:03 -0300 Subject: [PATCH 7/9] Changes template message Co-authored-by: Fanny Chien --- src/components/ui/EmptyState/EmptyState.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/EmptyState/EmptyState.stories.mdx b/src/components/ui/EmptyState/EmptyState.stories.mdx index 40a3dcdc..cc9b9abe 100644 --- a/src/components/ui/EmptyState/EmptyState.stories.mdx +++ b/src/components/ui/EmptyState/EmptyState.stories.mdx @@ -9,7 +9,7 @@ import EmptyCart from 'src/components/cart/EmptyCart' export const Template = (args) => ( - The list is empty + Nothing to display )
From 5366c1dd297ec999dc330799e2b2fbd6f19756b0 Mon Sep 17 00:00:00 2001 From: eduardoformiga Date: Wed, 15 Jun 2022 11:25:54 -0300 Subject: [PATCH 8/9] Removes divider for first sections on stories --- src/components/cart/EmptyCart/EmptyCart.stories.mdx | 1 + src/components/sections/ProductGallery/EmptyGallery.stories.mdx | 2 -- src/components/ui/EmptyState/EmptyState.stories.mdx | 2 -- 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/cart/EmptyCart/EmptyCart.stories.mdx b/src/components/cart/EmptyCart/EmptyCart.stories.mdx index 5b1b6d27..36f31352 100644 --- a/src/components/cart/EmptyCart/EmptyCart.stories.mdx +++ b/src/components/cart/EmptyCart/EmptyCart.stories.mdx @@ -15,6 +15,7 @@ export const Template = (args) => An implementation of the `EmptyState` that represents the Cart with no items.
+ ## Usage `import EmptyCart from 'src/components/cart/EmptyCart'` diff --git a/src/components/sections/ProductGallery/EmptyGallery.stories.mdx b/src/components/sections/ProductGallery/EmptyGallery.stories.mdx index 9bd82646..b9c98673 100644 --- a/src/components/sections/ProductGallery/EmptyGallery.stories.mdx +++ b/src/components/sections/ProductGallery/EmptyGallery.stories.mdx @@ -16,8 +16,6 @@ An implementation of the `EmptyState` that represents a Gallery with no items.
---- - ## Usage `import EmptyGallery from 'src/components/sections/ProductGallery/EmptyGallery'` diff --git a/src/components/ui/EmptyState/EmptyState.stories.mdx b/src/components/ui/EmptyState/EmptyState.stories.mdx index 97fd856a..7ccab5df 100644 --- a/src/components/ui/EmptyState/EmptyState.stories.mdx +++ b/src/components/ui/EmptyState/EmptyState.stories.mdx @@ -20,8 +20,6 @@ This component represents an empty state, usually used on `EmptyCart` and `Empty ---- - ## Usage `import EmptyState from 'src/components/ui/EmptyState'` From 668beda8812d04ea460ac11f75dc1d0771ee70d6 Mon Sep 17 00:00:00 2001 From: Eduardo Formiga Date: Wed, 15 Jun 2022 12:05:18 -0300 Subject: [PATCH 9/9] Update src/components/ui/EmptyState/EmptyState.stories.mdx Co-authored-by: Fanny Chien --- src/components/ui/EmptyState/EmptyState.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/EmptyState/EmptyState.stories.mdx b/src/components/ui/EmptyState/EmptyState.stories.mdx index 7ccab5df..9aa399a9 100644 --- a/src/components/ui/EmptyState/EmptyState.stories.mdx +++ b/src/components/ui/EmptyState/EmptyState.stories.mdx @@ -68,7 +68,7 @@ This component represents an empty state, usually used on `EmptyCart` and `Empty

Empty Cart

- Displays the empty cart message along with the start shopping button. + Displays the empty cart message along with the `Start Shopping` button.