@faststore/core 22.42.6

package/src/components/ui/Link/link.module.scss

@@ -0,0 +1,98 @@
+@import "src/styles/scaffold";
+
+.fs-link {
+  // --------------------------------------------------------
+  // Design Tokens for Link
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-link-min-width                  : auto;
+  --fs-link-min-height                 : var(--fs-link-min-width);
+  --fs-link-padding                    : var(--fs-spacing-2) var(--fs-spacing-0);
+  --fs-link-border-radius              : var(--fs-border-radius);
+
+  --fs-link-text-line-height           : 1.5;
+  --fs-link-text-color                 : var(--fs-color-link);
+  --fs-link-text-color-visited         : var(--fs-color-link-visited);
+  --fs-link-text-decoration            : none;
+  --fs-link-text-decoration-hover      : underline;
+
+  --fs-link-transition-function        : var(--fs-transition-function);
+  --fs-link-transition-property        : var(--fs-transition-property);
+  --fs-link-transition-timing          : var(--fs-transition-timing);
+
+  // Inverse
+  --fs-link-inverse-text-color         : var(--fs-color-link-inverse);
+  --fs-link-inverse-text-color-visited : var(--fs-link-inverse-text-color);
+
+  // Display
+  --fs-link-display-text-line-height   : var(--fs-link-text-line-height);
+  --fs-link-display-text-color         : var(--fs-color-text-display);
+  --fs-link-display-text-color-visited : var(--fs-link-display-text-color);
+
+  // Inline
+  --fs-link-inline-padding             : 0;
+  --fs-link-inline-text-decoration     : underline;
+  --fs-link-inline-text-color          : var(--fs-link-text-color);
+
+  // Footer
+  --fs-link-footer-text-size           : var(--fs-text-size-1);
+  --fs-link-footer-text-color          : var(--fs-color-info-text);
+  --fs-link-footer-padding             : var(--fs-spacing-1) var(--fs-spacing-0);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  min-width: var(--fs-link-min-width);
+  min-height: var(--fs-link-min-height);
+  padding: var(--fs-link-padding);
+  text-decoration: var(--fs-link-text-decoration);
+
+  &:hover { text-decoration: var(--fs-link-text-decoration-hover); }
+
+  &:visited { color: var(--fs-link-text-color-visited); }
+
+  a, [data-fs-link] {
+    border-radius: var(--fs-link-border-radius);
+    transition: var(--fs-link-transition-property) var(--fs-link-transition-timing) var(--fs-link-transition-function);
+
+    @include focus-ring-visible;
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-link-variant="default"] {
+    line-height: var(--fs-link-text-line-height);
+    color: var(--fs-link-text-color);
+  }
+
+  &[data-fs-link-variant="display"] {
+    line-height: var(--fs-link-display-text-line-height);
+    color: var(--fs-link-display-text-color);
+
+    &:visited { color: var(--fs-link-display-text-color-visited); }
+  }
+
+  &[data-fs-link-variant="inline"] {
+    display: inline-block;
+    padding: var(--fs-link-inline-padding);
+    color: var(--fs-link-inline-text-color);
+    text-decoration: var(--fs-link-inline-text-decoration);
+  }
+
+  &[data-fs-link-variant="footer"] {
+    font-size: var(--fs-link-footer-text-size);
+    color: var(--fs-link-footer-text-color);
+
+    @include media(">=notebook") { padding: var(--fs-link-footer-padding); }
+  }
+
+  &[data-fs-link-inverse="true"] {
+    color: var(--fs-link-inverse-text-color);
+
+    &:visited { color: var(--fs-link-inverse-text-color-visited); }
+  }
+}

package/src/components/ui/Logo/Logo.tsx

@@ -0,0 +1,14 @@
+import styles from './logo.module.scss'
+
+function Logo() {
+  return (
+    <span
+      className={styles.fsLogo}
+      data-fs-logo
+      role="img"
+      aria-label="BaseStore logo"
+    />
+  )
+}
+
+export default Logo

package/src/components/ui/Logo/index.ts

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

package/src/components/ui/Logo/logo.module.scss

@@ -0,0 +1,12 @@
+.fs-logo {
+  --fs-logo-width      : 7rem;
+  --fs-logo-img        : url("~/public/brandless-neutral.png");
+
+  display: block;
+  width: var(--fs-logo-width);
+  height: 100%;
+  min-height: var(--fs-spacing-6);
+  background: var(--fs-logo-img) no-repeat;
+  background-position: center;
+  background-size: 100% auto;
+}

package/src/components/ui/Modal/Modal.stories.mdx

@@ -0,0 +1,142 @@
+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 ButtonLink from 'src/components/ui/Button/ButtonLink'
+import { RegionalizationModalContent } from 'src/components/regionalization/RegionalizationModal'
+
+import Modal from '.'
+import Icon from '../Icon'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta title="Molecules/Modal" component={Modal} />
+
+export const ModalTemplate = (args) => {
+  const { modal, openModal } = useUI()
+  return (
+    <div>
+      <Button variant="primary" onClick={() => openModal()}>
+        Open Modal
+      </Button>
+      {modal && (
+        <Modal>
+          {({ fadeOut }) => (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                flexDirection: 'column',
+                padding: '3rem',
+                backgroundColor: 'white',
+              }}
+            >
+              <h1
+                style={{
+                  fontSize: '2rem',
+                  paddingBottom: '1rem',
+                }}
+              >
+                Hello, i'm a Modal!
+              </h1>
+              <Button onClick={fadeOut}>Close Modal</Button>
+            </div>
+          )}
+        </Modal>
+      )}
+    </div>
+  )
+}
+
+export const Template = (args) => {
+  return (
+    <UIProvider>
+      <ModalTemplate />
+    </UIProvider>
+  )
+}
+
+<header>
+
+# Modal
+
+Modals are dialog windows that sit on top of an application's main view. Once a Modal is open, interactions with the content behind it are blocked.
+
+</header>
+
+## Overview
+
+The `Modal` component uses [FastStore UI Modal](https://www.faststore.dev/reference/ui/molecules/Modal) as base.
+
+---
+
+## Usage
+
+`import Modal from 'src/components/ui/Modal'`
+
+<Canvas>
+  <Story name="Overview">{Template.bind({})}</Story>
+</Canvas>
+
+---
+
+<TokenTable>
+  <TokenRow token="--fs-modal-position-top" value="30vh" />
+  <TokenRow token="--fs-modal-position-right" value="var(--fs-spacing-4)" />
+  <TokenRow token="--fs-modal-position-left" value="var(--fs-spacing-4)" />
+  <TokenRow
+    token="--fs-modal-max-width"
+    value="calc(var(--fs-grid-breakpoint-desktop) / 3)"
+  />
+  <TokenRow token="--fs-modal-min-height" value="var(--fs-spacing-5)" />
+  <TokenRow token="--fs-modal-margin" value="auto" />
+  <TokenRow token="--fs-modal-border-radius" value="var(--fs-spacing-0)" />
+  <TokenDivider />
+  <TokenRow token="--fs-modal-width-tablet" value="calc(100vw / 3)" />
+  <TokenRow
+    token="--fs-modal-min-width-tablet"
+    value="calc(var(--fs-grid-breakpoint-desktop) / 3)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-modal-transition-timing"
+    value="var(--fs-transition-timing)"
+  />
+  <TokenRow token="--fs-modal-transition-property" value="transform" />
+  <TokenRow token="--fs-modal-transition-in-function" value="ease-in" />
+  <TokenRow token="--fs-modal-transition-out-function" value="ease-out" />
+</TokenTable>
+
+---
+
+## Use Cases
+
+<section className="sbdocs-list">
+  <ul className="sbdocs-ul-row">
+    <li>
+      <div>
+        <UIProvider>
+          <RegionalizationModalContent onClose={() => {}} />
+        </UIProvider>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationModal</h3>
+        <p>
+          It's the modal that, trigged by <code>RegionalizationButton</code> or{' '}
+          <code>RegionalizationBar</code>, shows the user the{' '}
+          <code>RegionalizationInput</code> search.
+        </p>
+        <ButtonLink
+          variant="tertiary"
+          href="../?path=/docs/features-regionalization-regionalizationmodal--overview"
+          data-fs-button-size="small"
+        >
+          See more
+          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+        </ButtonLink>
+      </article>
+    </li>
+  </ul>
+</section>

package/src/components/ui/Modal/Modal.tsx

@@ -0,0 +1,43 @@
+import type { ModalProps as UIModalProps } from '@faststore/ui'
+import { Modal as UIModal } from '@faststore/ui'
+import type { ReactNode } from 'react'
+
+import { useUI } from 'src/sdk/ui/Provider'
+import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
+
+import styles from './modal.module.scss'
+
+export type ModalChildrenProps = {
+  fade: 'in' | 'out'
+  fadeOut: () => void
+  fadeIn: () => void
+}
+
+type ModalChildrenFunction = (props: ModalChildrenProps) => ReactNode
+
+export type ModalProps = Omit<UIModalProps, 'isOpen' | 'children'> & {
+  children: ModalChildrenFunction | ReactNode
+}
+
+function Modal({ className, children, ...props }: ModalProps) {
+  const { closeModal } = useUI()
+  const { fade, fadeOut, fadeIn } = useFadeEffect()
+
+  return (
+    <UIModal
+      onDismiss={fadeOut}
+      onTransitionEnd={() => fade === 'out' && closeModal()}
+      data-fs-modal
+      data-fs-modal-state={fade}
+      className={`${styles.fsModal} ${className}`}
+      {...props}
+      isOpen
+    >
+      {typeof children === 'function'
+        ? children({ fade, fadeOut, fadeIn })
+        : children}
+    </UIModal>
+  )
+}
+
+export default Modal

package/src/components/ui/Modal/index.ts

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

package/src/components/ui/Modal/modal.module.scss

@@ -0,0 +1,46 @@
+@import "src/styles/scaffold";
+
+.fs-modal {
+  // --------------------------------------------------------
+  // Design Tokens for Modal
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-modal-position-top                          : 30vh;
+  --fs-modal-position-right                        : var(--fs-spacing-4);
+  --fs-modal-position-left                         : var(--fs-spacing-4);
+  --fs-modal-max-width                             : calc(var(--fs-grid-breakpoint-desktop) / 3);
+  --fs-modal-min-height                            : var(--fs-spacing-5);
+  --fs-modal-margin                                : auto;
+
+  --fs-modal-width-tablet                          : calc(100vw / 3);
+  --fs-modal-min-width-tablet                      : calc(var(--fs-grid-breakpoint-desktop) / 3);
+
+  --fs-modal-transition-timing                     : var(--fs-transition-timing);
+  --fs-modal-transition-property                   : transform;
+  --fs-modal-transition-in-function                : ease-in;
+  --fs-modal-transition-out-function               : ease-in;
+
+  position: fixed;
+  top: var(--fs-modal-position-top);
+  right: var(--fs-modal-position-right);
+  left: var(--fs-modal-position-left);
+  max-width: var(--fs-modal-max-width);
+  min-height: var(--fs-modal-min-height);
+  margin: var(--fs-modal-margin);
+
+  @include media(">=tablet") {
+    width: var(--fs-modal-width-tablet);
+    min-width: var(--fs-modal-min-width-tablet);
+  }
+
+  &[data-fs-modal-state="in"] {
+    transition: var(--fs-modal-transition-property) var(--fs-modal-transition-timing) var(--fs-modal-transition-in-function);
+    transform: translate3d(0, 0, 0);
+  }
+
+  &[data-fs-modal-state="out"] {
+    transition: var(--fs-modal-transition-property) var(--fs-modal-transition-timing) var(--fs-modal-transition-in-function);
+    transform: translate3d(0, 50%, 0);
+  }
+}

package/src/components/ui/Price/Price.stories.mdx

@@ -0,0 +1,194 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import Price from '.'
+import { TokenTable, TokenRow } from 'src/../.storybook/components'
+
+<Meta
+  title="Atoms/Price"
+  component={Price}
+  argTypes={{
+    value: {
+      type: {
+        name: 'number',
+      },
+      description: '`number`',
+      defaultValue: 100,
+    },
+    SRText: {
+      defaultValue: 'Price:',
+    },
+    variant: {
+      description: 'The current variant for prices.',
+      options: ['installment', 'listing', 'savings', 'selling', 'spot'],
+      control: { type: 'select' },
+    },
+    formatter: {
+      table: { disable: true },
+    },
+  }}
+/>
+
+export const Template = (args) => <Price {...args} />
+
+<header>
+
+# Price
+
+Prices are used to display the price of a given product, discount and total values.
+
+</header>
+
+## Overview
+
+The `Price` component uses [FastStore UI Price](https://www.faststore.dev/reference/ui/atoms/Price) as base.
+
+<Canvas>
+  <Story name="overview-default">{Template.bind({})}</Story>
+  <Story
+    name="overview-installment"
+    args={{
+      variant: 'installment',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-listing"
+    args={{
+      variant: 'listing',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-savings"
+    args={{
+      variant: 'savings',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-selling"
+    args={{
+      variant: 'selling',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-spot"
+    args={{
+      variant: 'spot',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+`import Price from '../components/ui/Price'`
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      variant: '',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+---
+
+## Variations
+
+### Installment
+
+<Canvas>
+  <Story
+    name="installment"
+    args={{
+      variant: 'installment',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Listing
+
+<Canvas>
+  <Story
+    name="listing"
+    args={{
+      variant: 'listing',
+      SRText: 'Original price:',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-price-listing-color"
+    value="var(--fs-color-text-light)"
+    isColor
+  />
+  <TokenRow token="--fs-price-listing-text-decoration" value="line-through" />
+</TokenTable>
+
+### Savings
+
+<Canvas>
+  <Story
+    name="savings"
+    args={{
+      variant: 'savings',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Selling
+
+<Canvas>
+  <Story
+    name="selling"
+    args={{
+      variant: 'selling',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Spot
+
+<Canvas>
+  <Story
+    name="spot"
+    args={{
+      variant: 'spot',
+      SRText: 'Sale price:',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-price-spot-margin-left" value="var(--fs-spacing-1)" />
+  <TokenRow
+    token="--fs-price-spot-font-weight"
+    value="var(--fs-text-weight-bold)"
+  />
+</TokenTable>

package/src/components/ui/Price/Price.tsx

@@ -0,0 +1,32 @@
+import { Price as UIPrice } from '@faststore/ui'
+import { memo } from 'react'
+import type { PriceProps } from '@faststore/ui'
+
+import SROnly from '../SROnly'
+import styles from './price.module.scss'
+
+type Props = PriceProps & {
+  /**
+   * Text for the screen readers only
+   */
+  SRText: string
+  /**
+   * Other classes that might be applied
+   */
+  classes?: string
+}
+
+function Price({ classes = '', SRText, ...props }: Props) {
+  return (
+    <>
+      <SROnly text={SRText} />
+      <UIPrice
+        data-fs-price
+        className={`${styles.fsPrice} ${classes}`}
+        {...props}
+      />
+    </>
+  )
+}
+
+export default memo(Price)

package/src/components/ui/Price/index.ts

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

package/src/components/ui/Price/price.module.scss

@@ -0,0 +1,27 @@
+.fs-price {
+  // --------------------------------------------------------
+  // Design Tokens for Price
+  // --------------------------------------------------------
+
+  // Listing
+  --fs-price-listing-color           : var(--fs-color-text-light);
+  --fs-price-listing-text-decoration : line-through;
+
+  // Spot
+  --fs-price-spot-margin-left        : var(--fs-spacing-1);
+  --fs-price-spot-font-weight        : var(--fs-text-weight-bold);
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-variant="listing"] {
+    color: var(--fs-price-listing-color);
+    text-decoration: var(--fs-price-listing-text-decoration);
+  }
+
+  &[data-variant="spot"] {
+    margin-left: var(--fs-price-spot-margin-left);
+    font-weight: var(--fs-price-spot-font-weight);
+  }
+}