@faststore/core 22.42.6

package/src/components/regionalization/RegionalizationBar/RegionalizationBar.stories.mdx

@@ -0,0 +1,116 @@
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import RegionalizationBar from './RegionalizationBar'
+import RegionalizationModal from '../RegionalizationModal'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta title="Features/Regionalization/RegionalizationBar" />
+
+export const TemplateRegionalizationModal = () => {
+  const { modal: displayModal } = useUI()
+  return <>{displayModal && <RegionalizationModal />}</>
+}
+
+export const TemplateBarWithProvider = () => {
+  return (
+    <UIProvider>
+      <div style={{ display: 'flex', alignItems: 'center', columnGap: '20px' }}>
+        <p style={{ whiteSpace: 'nowrap' }}>Try me:</p>
+        <RegionalizationBar />
+        <TemplateRegionalizationModal />
+      </div>
+    </UIProvider>
+  )
+}
+
+<header>
+
+# RegionalizationBar
+
+The Bar is a similar proposal for the button, usually used on mobile devices only. It also triggers <code>RegionalizationModal</code>.
+
+</header>
+
+## Overview
+
+The `RegionalizationBar` is part of [Regionalization](?path=/docs/features-regionalization-overview--default-button) feature.
+
+---
+
+## Usage
+
+`import RegionalizationBar from 'src/components/regionalization/RegionalizationBar'`
+
+<Canvas
+  className="no-code"
+  style={{ backgroundColor: 'var(--fs-color-neutral-1)' }}
+>
+  <Story name="Bar">{TemplateBarWithProvider.bind({})}</Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-regionalization-bar-width" value="100%" />
+  <TokenRow
+    token="--fs-regionalization-bar-padding"
+    value="var(--fs-spacing-0) var(--fs-spacing-3)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-regionalization-bar-text-color"
+    value="var(--fs-color-text-display)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-regionalization-bar-bkg-color"
+    value="var(--fs-color-body-bkg)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-regionalization-bar-border-bottom-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-regionalization-bar-border-bottom-color"
+    value="var(--fs-border-color-light)"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### CTA (Call To Action)
+
+<TokenTable>
+  <TokenRow token="--fs-regionalization-bar-cta-margin-left" value="auto" />
+  <TokenRow
+    token="--fs-regionalization-bar-cta-text-decoration"
+    value="underline"
+  />
+</TokenTable>
+
+### Message
+
+<TokenTable>
+  <TokenRow
+    token="--fs-regionalization-bar-message-margin-right"
+    value="auto"
+  />
+</TokenTable>
+
+### Postal Code
+
+<TokenTable>
+  <TokenRow
+    token="--fs-regionalization-bar-postal-code-margin-right"
+    value="auto"
+  />
+</TokenTable>

package/src/components/regionalization/RegionalizationBar/RegionalizationBar.tsx

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

package/src/components/regionalization/RegionalizationBar/index.ts

@@ -0,0 +1 @@
+export { default } from './RegionalizationBar'

package/src/components/regionalization/RegionalizationBar/regionalization-bar.module.scss

@@ -0,0 +1,56 @@
+.fs-regionalization-bar {
+  // --------------------------------------------------------
+  // Design Tokens for Regionalization Bar
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-regionalization-bar-width                    : 100%;
+  --fs-regionalization-bar-padding                  : var(--fs-spacing-0) var(--fs-spacing-2) var(--fs-spacing-0) var(--fs-spacing-3);
+
+  --fs-regionalization-bar-text-color               : var(--fs-color-text-display);
+
+  --fs-regionalization-bar-bkg-color                : var(--fs-color-body-bkg);
+
+  --fs-regionalization-bar-border-bottom-width      : var(--fs-border-width);
+  --fs-regionalization-bar-border-bottom-color      : var(--fs-border-color-light);
+
+  // CTA
+  --fs-regionalization-bar-cta-margin-left          : auto;
+  --fs-regionalization-bar-cta-text-decoration      : underline;
+
+  // Message
+  --fs-regionalization-bar-message-margin-right     : auto;
+
+  // Postal Code
+  --fs-regionalization-bar-postal-code-margin-right : auto;
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  width: var(--fs-regionalization-bar-width);
+
+  [data-fs-button] {
+    width: var(--fs-regionalization-bar-width);
+    padding: var(--fs-regionalization-bar-padding);
+    color: var(--fs-regionalization-bar-text-color);
+    background-color: var(--fs-regionalization-bar-bkg-color);
+    border-bottom: var(--fs-regionalization-bar-border-bottom-width) solid var(--fs-regionalization-bar-border-bottom-color);
+    border-radius: 0;
+  }
+
+  [data-fs-regionalization-bar-cta] {
+    margin-left: var(--fs-regionalization-bar-cta-margin-left);
+    text-decoration: var(--fs-regionalization-bar-cta-text-decoration);
+  }
+
+  [data-fs-regionalization-bar-postal-code] {
+    margin-right: var(--fs-regionalization-bar-postal-code-margin-right);
+    font-weight: var(--fs-text-weight-regular);
+  }
+
+  [data-fs-regionalization-bar-message] {
+    margin-right: var(--fs-regionalization-bar-message-margin-right);
+    font-weight: var(--fs-text-weight-regular);
+  }
+}

package/src/components/regionalization/RegionalizationButton/RegionalizationButton.tsx

@@ -0,0 +1,24 @@
+import Button from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+import { useSession } from 'src/sdk/session'
+import { useUI } from 'src/sdk/ui/Provider'
+
+function RegionButton() {
+  const { openModal } = useUI()
+  const { postalCode } = useSession()
+
+  return (
+    <Button
+      data-fs-regionalization-button
+      variant="tertiary"
+      size="small"
+      icon={<Icon name="MapPin" width={24} height={24} />}
+      iconPosition="left"
+      onClick={openModal}
+    >
+      <span>{postalCode ?? 'Set your location'}</span>
+    </Button>
+  )
+}
+
+export default RegionButton

package/src/components/regionalization/RegionalizationButton/index.ts

@@ -0,0 +1 @@
+export { default } from './RegionalizationButton'

package/src/components/regionalization/RegionalizationInput/RegionalizationInput.tsx

@@ -0,0 +1,61 @@
+import { useRef, useState } from 'react'
+
+import InputText from 'src/components/ui/InputText'
+import { sessionStore, useSession, validateSession } from 'src/sdk/session'
+
+interface Props {
+  closeModal: () => void
+}
+
+function RegionInput({ closeModal }: Props) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const { isValidating, ...session } = useSession()
+  const [errorMessage, setErrorMessage] = useState<string>('')
+  const [input, setInput] = useState<string>('')
+
+  const handleSubmit = async () => {
+    const value = inputRef.current?.value
+
+    if (typeof value !== 'string') {
+      return
+    }
+
+    setErrorMessage('')
+
+    try {
+      const newSession = await validateSession({
+        ...session,
+        postalCode: value,
+      })
+
+      if (newSession) {
+        sessionStore.set(newSession)
+      }
+
+      closeModal()
+    } catch (error) {
+      setErrorMessage('You entered an invalid Postal Code')
+    }
+  }
+
+  return (
+    <div className="regionalization-input">
+      <InputText
+        inputRef={inputRef}
+        id="postal-code-input"
+        error={errorMessage}
+        label="Postal Code"
+        actionable
+        value={input}
+        onInput={(e) => {
+          errorMessage !== '' && setErrorMessage('')
+          setInput(e.currentTarget.value)
+        }}
+        onSubmit={handleSubmit}
+        onClear={() => setInput('')}
+      />
+    </div>
+  )
+}
+
+export default RegionInput

package/src/components/regionalization/RegionalizationInput/index.ts

@@ -0,0 +1 @@
+export { default } from './RegionalizationInput'

package/src/components/regionalization/RegionalizationModal/RegionalizationModal.stories.mdx

@@ -0,0 +1,161 @@
+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 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 (
+    <UIProvider>
+      <ModalTemplate />
+    </UIProvider>
+  )
+}
+
+export const RegionalizationModalContentTemplate = (args) => {
+  return (
+    <UIProvider>
+      <RegionalizationModalContent onClose={() => {}} />
+    </UIProvider>
+  )
+}
+
+<header>
+
+# Regionalization Modal
+
+This component calls a modal with some regionalization configurations.
+
+</header>
+
+## Overview
+
+The `RegionalizationModal` is part of [Regionalization](?path=/docs/features-regionalization-overview--default-button) feature and 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>

package/src/components/regionalization/RegionalizationModal/RegionalizationModal.tsx

@@ -0,0 +1,13 @@
+import Modal from 'src/components/ui/Modal'
+
+import { RegionalizationModalContent } from '.'
+
+function RegionalizationModal() {
+  return (
+    <Modal>
+      {({ fadeOut }) => <RegionalizationModalContent onClose={fadeOut} />}
+    </Modal>
+  )
+}
+
+export default RegionalizationModal

package/src/components/regionalization/RegionalizationModal/RegionalizationModalContent.tsx

@@ -0,0 +1,48 @@
+import RegionalizationInput from 'src/components/regionalization/RegionalizationInput'
+import Button 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 && (
+          <Button
+            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>
+          {"I don't know my Postal Code"}
+          <Icon name="ArrowSquareOut" width={18} height={18} />
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default RegionalizationModalContent

package/src/components/regionalization/RegionalizationModal/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RegionalizationModal'
+export { default as RegionalizationModalContent } from './RegionalizationModalContent'

package/src/components/regionalization/RegionalizationModal/regionalization-modal-content.module.scss

@@ -0,0 +1,79 @@
+.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);
+    }
+  }
+}