Feat: Regionalization Doc Storybook

.storybook/preview.js

@@ -30,6 +30,7 @@ export const parameters = {
         'Atoms',
         'Molecules',
         'Organisms',
+        'Features',
         'Releases',
       ],
     },

.storybook/storybook.css

@@ -5,9 +5,18 @@
   font-size: var(--fs-text-size-5);
 }
 
-.sbdocs-content > header .sbdocs-p { margin: var(--fs-spacing-1) 0 0; }
+.sbdocs.sbdocs-p code {
+  font-size: var(--fs-text-size-legend);
+}
+
+.sbdocs-content > header .sbdocs-p {
+  margin: var(--fs-spacing-1) 0 0;
+}
 
-.sbdocs.sbdocs-p { font-size: var(--fs-text-size-body); }
+.sbdocs.sbdocs-p,
+.sbdocs.sbdocs-li {
+  font-size: var(--fs-text-size-body);
+}
 
 .sbdocs.sbdocs-h2 {
   margin: 0 0 var(--fs-spacing-1);
@@ -21,7 +30,9 @@ h3.sbdocs.sbdocs-h3 {
   font-size: var(--fs-text-size-lead);
 }
 
-.sbdocs.sbdocs-h2 + .sbdocs.sbdocs-h3 { margin-top: var(--fs-spacing-4); }
+.sbdocs.sbdocs-h2 + .sbdocs.sbdocs-h3 {
+  margin-top: var(--fs-spacing-4);
+}
 
 /* Header */
 
@@ -96,21 +107,27 @@ h3.sbdocs.sbdocs-h3 {
   margin-top: var(--fs-spacing-4);
 }
 
-.sbdocs-best-practices-rule:not(:first-of-type) { margin-top: var(--fs-spacing-6); }
+.sbdocs-best-practices-rule:not(:first-of-type) {
+  margin-top: var(--fs-spacing-6);
+}
 
 .sbdocs-best-practices-rule > article {
   flex-basis: 100%;
   width: 0;
 }
 
-.sbdocs-best-practices-text { margin-top: var(--fs-spacing-3); }
+.sbdocs-best-practices-text {
+  margin-top: var(--fs-spacing-3);
+}
 
 .sbdocs-best-practices-text h3.sbdocs.sbdocs-h3 {
   margin: 0 0 var(--fs-spacing-1) 0;
   font-weight: var(--fs-text-weight-bold);
 }
 
-.sbdocs-best-practices-text h3 span { margin-right: var(--fs-spacing-0); }
+.sbdocs-best-practices-text h3 span {
+  margin-right: var(--fs-spacing-0);
+}
 
 .sbdocs-best-practices-text p {
   padding-right: var(--fs-spacing-4);
@@ -131,7 +148,9 @@ h3.sbdocs.sbdocs-h3 {
   max-width: 90%;
 }
 
-.sbdocs-best-practices-rule > article div > [data-fs-alert] { width: 90%; }
+.sbdocs-best-practices-rule > article div > [data-fs-alert] {
+  width: 90%;
+}
 
 /* Section */
 
@@ -169,3 +188,60 @@ h3.sbdocs.sbdocs-h3 {
   background-color: var(--fs-color-neutral-1);
   border-radius: var(--fs-border-radius);
 }
+
+/* List */
+
+.sbdocs-list {
+  display: flex;
+  justify-content: center;
+}
+
+.sbdocs-list .sbdocs-ul {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--fs-spacing-4);
+  justify-content: center;
+  width: 100%;
+  padding: 0;
+  margin-top: var(--fs-spacing-4);
+}
+
+.sbdocs-list .sbdocs-li {
+  display: flex;
+  flex-basis: 100%;
+  column-gap: var(--fs-spacing-4);
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sbdocs-list .sbdocs-li > * {
+  flex-shrink: 0;
+  width: 48%;
+}
+
+.sbdocs-list .sbdocs-li > div {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+  padding: var(--fs-spacing-3);
+  background-color: var(--fs-color-neutral-1);
+  border-radius: var(--fs-border-radius);
+}
+
+.sbdocs-list .sbdocs-div > img {
+  max-height: 100%;
+  border-radius: var(--fs-border-radius);
+}
+
+.sbdocs-list-text h3.sbdocs.sbdocs-h3 {
+  margin: 0 0 var(--fs-spacing-1) 0;
+  font-weight: var(--fs-text-weight-bold);
+}
+
+.sbdocs-list-text p {
+  padding-right: var(--fs-spacing-4);
+  margin: 0;
+  line-height: 1.3;
+}

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 `RegionalizationBar` ([#104](https://github.com/vtex-sites/nextjs.store/pull/104))
 - 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))
@@ -68,6 +69,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - The `default` nomenclature from global tokens ([#51](https://github.com/vtex-sites/nextjs.store/pull/51))
 
 ### Fixed
+
 - Fix Region Input's behavior when setting zipCode ([#108](https://github.com/vtex-sites/nextjs.store/pull/108))
 - Lighthouse complaining about missing robots.txt ([#89](https://github.com/vtex-sites/nextjs.store/pull/89))
 - Fix 404 being returned for existing pages when the server fails to fetch data ([#88](https://github.com/vtex-sites/nextjs.store/pull/88))

src/components/regionalization/Regionalization.stories.mdx

@@ -0,0 +1,155 @@
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { SessionProvider } from '@faststore/sdk'
+
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import RegionalizationButton from './RegionalizationButton'
+import RegionalizationInput from './RegionalizationInput'
+import RegionalizationBar from './RegionalizationBar'
+import RegionalizationModal from './RegionalizationModal'
+
+<Meta title="Features/Regionalization" />
+
+export const Template = () => {
+  const { modal: displayModal } = useUI()
+  return <>{displayModal && <RegionalizationModal />}</>
+}
+
+export const TemplateButtonWithProvider = () => {
+  return (
+    <UIProvider>
+      <SessionProvider initialState={{}}>
+        <div
+          style={{ display: 'flex', alignItems: 'center', columnGap: '20px' }}
+        >
+          <p style={{ whiteSpace: 'nowrap' }}>Try me:</p>
+          <RegionalizationButton />
+          <Template />
+        </div>
+      </SessionProvider>
+    </UIProvider>
+  )
+}
+
+export const TemplateBarWithProvider = () => {
+  return (
+    <UIProvider>
+      <SessionProvider initialState={{}}>
+        <div
+          style={{ display: 'flex', alignItems: 'center', columnGap: '20px' }}
+        >
+          <p style={{ whiteSpace: 'nowrap' }}>Try me:</p>
+          <RegionalizationBar />
+          <Template />
+        </div>
+      </SessionProvider>
+    </UIProvider>
+  )
+}
+
+<header>
+
+# Regionalization
+
+This feature enables customers to Set a location using a valid Postal Code.
+
+</header>
+
+## Overview
+
+1. Intentionally, a user Sets its location using a Postal Code
+2. Updates Product Catalog
+3. Gets notified if there's product conflict at minicart
+
+---
+
+## Usage
+
+Import RegionalizationComponents `from '../components/regionalization/...'`
+
+<Canvas>
+  <Story name="default-button">{TemplateButtonWithProvider.bind({})}</Story>
+</Canvas>
+
+<Canvas style={{ backgroundColor: 'var(--fs-color-neutral-1)' }}>
+  <Story name="default-bar">{TemplateBarWithProvider.bind({})}</Story>
+</Canvas>
+
+---
+
+## Components
+
+<section className="sbdocs-list">
+  <ul>
+    <li>
+      <div>
+        <SessionProvider>
+          <UIProvider>
+            <RegionalizationButton />
+          </UIProvider>
+        </SessionProvider>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationButton</h3>
+        <p>
+          Using a{' '}
+          <a href="../?path=/docs/atoms-button--button#tertiary">
+            tertiary button
+          </a>{' '}
+          as base, this component is usually placed on the <code>Navbar</code>{' '}
+          and triggers
+          <code>RegionalizationModal</code>.
+        </p>
+      </article>
+    </li>
+    <li>
+      <div>
+        <SessionProvider>
+          <UIProvider>
+            <RegionalizationBar />
+          </UIProvider>
+        </SessionProvider>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationBar</h3>
+        <p>
+          The Bar is a similar proposal for the button, usually used on mobile
+          devices only. It also triggers <code>RegionalizationModal</code>.
+        </p>
+      </article>
+    </li>
+    <li>
+      <div>
+        <SessionProvider>
+          <UIProvider>
+            <RegionalizationInput />
+          </UIProvider>
+        </SessionProvider>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationInput</h3>
+        <p>
+          An actionable{' '}
+          <a href="../?path=/docs/atoms-inputtext--actionable">InputText</a>{' '}
+          able to check the Postal Code authenticity.
+        </p>
+      </article>
+    </li>
+    <li>
+      <div>
+        <img
+          src="https://user-images.githubusercontent.com/11613011/172647856-b7b733ec-870f-45df-b26f-476456179a7e.png"
+          align="right"
+        />
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationModal</h3>
+        <p>
+          It's the modal that, trigged by <code>RegionalizationButton/RegionalizationBar</code>, shows the user
+          the <code>RegionalizationInput</code> search.
+        </p>
+      </article>
+    </li>
+
+  </ul>
+</section>

src/components/regionalization/RegionalizationBar/RegionalizationBar.tsx

@@ -5,6 +5,8 @@ import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import { useUI } from 'src/sdk/ui/Provider'
 
+import styles from './regionalization-bar.module.scss'
+
 interface Props extends HTMLAttributes<HTMLDivElement> {
   classes: string
 }
@@ -14,16 +16,22 @@ function RegionBar({ classes, ...otherProps }: Props) {
   const { postalCode } = useSession()
 
   return (
-    <div data-fs-regionalization-bar className={classes} {...otherProps}>
+    <div
+      data-fs-regionalization-bar
+      className={`${classes} ${styles.fsRegionalizationBar}`}
+      {...otherProps}
+    >
       <Button onClick={openModal}>
         <Icon name="MapPin" width={24} height={24} />
         {postalCode ? (
           <>
-            <span>{postalCode}</span>
-            <span>Edit</span>
+            <span data-fs-regionalization-bar-postal-code>{postalCode}</span>
+            <span data-fs-regionalization-bar-edit-message>Edit</span>
           </>
         ) : (
-          <span>Set your location</span>
+          <span data-fs-regionalization-bar-input-message>
+            Set your location
+          </span>
         )}
         <Icon name="CaretRight" width={24} height={24} />
       </Button>