feat: Extract RegionalizationModal (#128)

vtex-sites · Jun 23, 2022 · 3a201f4 · 3a201f4 · vercel · Jun 23, 2022
1 parent 49f95fd
commit 3a201f4
Show file tree

Hide file tree

Showing 12 changed files with 574 additions and 143 deletions.
diff --git 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 `Modal` and `RegionalizationModal` ([#128](https://github.com/vtex-sites/nextjs.store/pull/128))
 - PriceRange component ([#124](https://github.com/vtex-sites/nextjs.store/pull/124))
 - PriceRange component to PLP and StoryBook ([#121](https://github.com/vtex-sites/nextjs.store/pull/121))
 - Displays the `Sandbox` tab on the storybook along with `Viewport` toolbar and `Accessibility` checks ([#129](https://github.com/vtex-sites/nextjs.store/pull/129))

diff --git a/...omponents/regionalization/RegionalizationModal/RegionalizationModal.stories.mdx b/...omponents/regionalization/RegionalizationModal/RegionalizationModal.stories.mdx
@@ -0,0 +1,182 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import Button from 'src/components/ui/Button'
+import { SessionProvider } from '@faststore/sdk'
+import RegionalizationModal, { RegionalizationModalContent } from '.'
+import RegionalizationButton from 'src/components/regionalization/RegionalizationButton'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Features/Regionalization/RegionalizationModal"
+  component={RegionalizationModal}
+/>
+
+export const ModalTemplate = () => {
+  const { modal, openModal } = useUI()
+  return (
+    <div>
+      <RegionalizationButton onClick={() => openModal()}>Open Regionalization Modal</RegionalizationButton>
+      {
+        modal && (
+        <RegionalizationModal />
+        )
+      }
+    </div>
+  )
+}
+
+export const Template = (args) => {
+  return (
+    <SessionProvider>
+      <UIProvider>
+        <ModalTemplate />
+      </UIProvider>
+    </SessionProvider>
+  )
+}
+
+export const RegionalizationModalContentTemplate = (args) => {
+  return (
+    <SessionProvider>
+      <UIProvider>
+        <RegionalizationModalContent onClose={() => {}} />
+      </UIProvider>
+    </SessionProvider>
+  )
+}
+
+<header>
+
+# RegionalizationModal
+
+This component calls a modal with some regionalization configurations.
+
+</header>
+
+## Overview
+
+This component uses [Modal](/docs/molecules-modal--overview) as a base.
+
+<Canvas  style={{ backgroundColor: 'var(--fs-color-neutral-1)' }}>
+  <Story
+    name="Overview"
+  >
+    {RegionalizationModalContentTemplate.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+`import RegionalizationModal from src/components/regionalization/RegionalizationModal`
+
+<Canvas>
+  <Story
+    name="RegionalizationModalContent"
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+<TokenTable>
+  <TokenRow
+    token="--fs-regionalization-modal-padding"
+    value="var(--fs-spacing-1) var(--fs-spacing-4) var(--fs-spacing-5)"
+  />
+  <TokenRow
+    token="--fs-regionalization-modal-background-color"
+    value="var(--fs-color-body-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-regionalization-modal-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+### Header
+
+<TokenTable>
+  <TokenRow
+    token="--fs-regionalization-modal-header-padding"
+    value="var(--fs-spacing-4) var(--fs-spacing-7) var(--fs-spacing-4) var(--fs-spacing-4)"
+  />
+</TokenTable>
+
+### Title
+
+<TokenTable>
+  <TokenRow
+    token="--fs-regionalization-modal-title-margin-bottom"
+    value=".625rem"
+  />
+  <TokenRow
+    token="--fs-regionalization-modal-title-size"
+    value="var(--fs-text-size-lead)"
+  />
+  <TokenRow
+    token="--fs-regionalization-modal-title-weight"
+    value="var(--fs-text-weight-bold)"
+  />
+  <TokenRow
+    token="--fs-regionalization-modal-title-line-height"
+    value="1.2"
+  />
+</TokenTable>
+
+### Description
+
+<TokenTable>
+  <TokenRow
+    token="--fs-regionalization-modal-description-size"
+    value="var(--fs-text-size-body)"
+  />
+  <TokenRow
+    token="--fs-regionalization-modal-description-line-height"
+    value="1.5"
+  />
+  <TokenRow
+    token="--fs-regionalization-modal-description-color"
+    value="var(--fs-color-text-light)"
+    isColor
+  />
+</TokenTable>
+
+### Buttons
+
+<TokenTable>
+  <TokenRow
+    token="--fs-regionalization-modal-close-button-position-top"
+    value="0"
+  />
+  <TokenRow
+    token="--fs-regionalization-modal-close-button-position-right"
+    value="0"
+  />
+</TokenTable>
+
+### Link
+
+<TokenTable>
+  <TokenRow
+    token="--fs-regionalization-modal-link-padding"
+    value="0"
+  />
+  <TokenRow
+    token="--fs-regionalization-modal-link-color"
+    value="var(--fs-color-link)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-regionalization-modal-link-margin-right"
+    value="var(--fs-spacing-0)"
+  />
+</TokenTable>
diff --git a/src/components/regionalization/RegionalizationModal/RegionalizationModal.tsx b/src/components/regionalization/RegionalizationModal/RegionalizationModal.tsx
@@ -1,53 +1,13 @@
-import { Modal as UIModal } from '@faststore/ui'
+import Modal from 'src/components/ui/Modal'
 
-import RegionalizationInput from 'src/components/regionalization/RegionalizationInput'
-import { ButtonIcon } from 'src/components/ui/Button'
-import Icon from 'src/components/ui/Icon'
-import Link from 'src/components/ui/Link'
-import { useUI } from 'src/sdk/ui/Provider'
-import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
-
-function RegionModal() {
-  const { closeModal } = useUI()
-  const { fade, fadeOut } = useFadeEffect()
+import { RegionalizationModalContent } from '.'
 
+function RegionalizationModal() {
   return (
-    <UIModal
-      isOpen
-      data-regionalization-modal
-      data-regionalization-modal-state={fade}
-      onDismiss={fadeOut}
-      onTransitionEnd={() => fade === 'out' && closeModal()}
-    >
-      <header className="regionalization-modal__header">
-        <ButtonIcon
-          onClick={fadeOut}
-          data-fs-regionalization-modal-button
-          aria-label="Close Regionalization Modal"
-          data-testid="regionalization-modal-button-close"
-          icon={<Icon name="X" width={30} height={30} />}
-        />
-        <p className="text__title-subsection" data-regionalization-modal-title>
-          Set your location
-        </p>
-        <p className="text__body" data-regionalization-modal-description>
-          Prices, offers and availability may vary according to your location.
-        </p>
-      </header>
-      <div className="regionalization-modal__body">
-        {/* TODO: Remove this div when PostalCodeInput be styled */}
-        <div data-regionalization-modal-input>
-          <RegionalizationInput closeModal={fadeOut} />
-        </div>
-        <Link href="/">
-          <span data-regionalization-modal-link>
-            {"Don't know my Postal Code"}
-          </span>
-          <Icon name="ArrowSquareOut" width={18} height={18} />
-        </Link>
-      </div>
-    </UIModal>
+    <Modal>
+      {({ fadeOut }) => <RegionalizationModalContent onClose={fadeOut} />}
+    </Modal>
   )
 }
 
-export default RegionModal
+export default RegionalizationModal
diff --git a/src/components/regionalization/RegionalizationModal/RegionalizationModalContent.tsx b/src/components/regionalization/RegionalizationModal/RegionalizationModalContent.tsx
@@ -0,0 +1,48 @@
+import RegionalizationInput from 'src/components/regionalization/RegionalizationInput'
+import { ButtonIcon } from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+import Link from 'src/components/ui/Link'
+
+import styles from './regionalization-modal-content.module.scss'
+
+export type RegionalizationModalContentProps = {
+  onClose?: () => void
+}
+
+function RegionalizationModalContent({
+  onClose,
+}: RegionalizationModalContentProps) {
+  return (
+    <div
+      data-fs-regionalization-modal-content
+      className={styles.fsRegionalizationModalContent}
+    >
+      <header data-fs-regionalization-modal-header>
+        {onClose && (
+          <ButtonIcon
+            onClick={() => onClose?.()}
+            data-fs-regionalization-modal-button
+            aria-label="Close Regionalization Modal"
+            data-testid="regionalization-modal-button-close"
+            icon={<Icon name="X" width={30} height={30} />}
+          />
+        )}
+        <p data-fs-regionalization-modal-title>Set your location</p>
+        <p data-fs-regionalization-modal-description>
+          Prices, offers and availability may vary according to your location.
+        </p>
+      </header>
+      <div data-fs-regionalization-modal-body>
+        <div data-fs-regionalization-modal-input>
+          <RegionalizationInput closeModal={() => onClose?.()} />
+        </div>
+        <Link href="/" data-fs-regionalization-modal-link>
+          {"Don't know my Postal Code"}
+          <Icon name="ArrowSquareOut" width={18} height={18} />
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default RegionalizationModalContent
diff --git a/src/components/regionalization/RegionalizationModal/index.ts b/src/components/regionalization/RegionalizationModal/index.ts
@@ -1 +1,2 @@
 export { default } from './RegionalizationModal'
+export { default as RegionalizationModalContent } from './RegionalizationModalContent'
diff --git a/...components/regionalization/RegionalizationModal/regionalization-modal-content.module.scss b/...components/regionalization/RegionalizationModal/regionalization-modal-content.module.scss
@@ -0,0 +1,81 @@
+@import "src/styles/scaffold";
+
+.fs-regionalization-modal-content {
+  // --------------------------------------------------------
+  // Design Tokens for Regionalization Modal
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-regionalization-modal-padding                        : var(--fs-spacing-1) var(--fs-spacing-4) var(--fs-spacing-5);
+  --fs-regionalization-modal-background-color               : var(--fs-color-body-bkg);
+  --fs-regionalization-modal-border-radius                  : var(--fs-border-radius);
+
+  // Header
+  --fs-regionalization-modal-header-padding                 : var(--fs-spacing-4) var(--fs-spacing-7) var(--fs-spacing-4) var(--fs-spacing-4);
+
+  // Title
+  --fs-regionalization-modal-title-margin-bottom            : .625rem;
+  --fs-regionalization-modal-title-size                     : var(--fs-text-size-lead);
+  --fs-regionalization-modal-title-weight                   : var(--fs-text-weight-bold);
+  --fs-regionalization-modal-title-line-height              : 1.2;
+
+  // Description
+  --fs-regionalization-modal-description-size               : var(--fs-text-size-body);
+  --fs-regionalization-modal-description-line-height        : 1.5;
+  --fs-regionalization-modal-description-color              : var(--fs-color-text-light);
+
+  // Close Button
+  --fs-regionalization-modal-close-button-position-top      : 0;
+  --fs-regionalization-modal-close-button-position-right    : 0;
+
+  // Link
+  --fs-regionalization-modal-link-padding                   : 0;
+  --fs-regionalization-modal-link-color                     : var(--fs-color-link);
+  --fs-regionalization-modal-link-margin-right              : var(--fs-spacing-0);
+
+  position: relative;
+  background-color: var(--fs-regionalization-modal-background-color);
+  border-radius: var(--fs-regionalization-modal-border-radius);
+
+  [data-fs-regionalization-modal-header] {
+    padding: var(--fs-regionalization-modal-header-padding);
+
+    [data-fs-regionalization-modal-title] {
+      margin-bottom: var(--fs-regionalization-modal-title-margin-bottom);
+      font-size: var(--fs-regionalization-modal-title-size);
+      font-weight: var(--fs-regionalization-modal-title-weight);
+      line-height: var(--fs-regionalization-modal-title-line-height);
+    }
+
+    [data-fs-regionalization-modal-description] {
+      font-size: var(--fs-regionalization-modal-description-size);
+      line-height: var(--fs-regionalization-modal-description-line-height);
+      color: var(--fs-regionalization-modal-description-color);
+    }
+
+    [data-fs-regionalization-modal-button] {
+      position: absolute;
+      top: var(--fs-regionalization-modal-close-button-position-top);
+      right: var(--fs-regionalization-modal-close-button-position-right);
+    }
+  }
+
+  [data-fs-regionalization-modal-body] {
+    padding: var(--fs-regionalization-modal-padding);
+
+    [data-fs-regionalization-modal-input] {
+      margin-bottom: var(--fs-spacing-6);
+    }
+
+    [data-fs-regionalization-modal-link] {
+      display: flex;
+      flex-direction: row;
+      align-content: flex-start;
+      align-items: center;
+      justify-content: flex-start;
+      padding: var(--fs-regionalization-modal-link-padding);
+      margin-right: var(--fs-regionalization-modal-link-margin-right);
+      color: var(--fs-regionalization-modal-link-color);
+    }
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { default } from './RegionalizationModal'
		export { default as RegionalizationModalContent } from './RegionalizationModalContent'