@faststore/core 22.42.6

package/src/components/ui/SkuSelector/sku-selector.module.scss

@@ -0,0 +1,172 @@
+@import "src/styles/scaffold";
+
+@mixin sku-selector-focus-ring {
+  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
+    @supports (-webkit-appearance:none) {
+      // Use `focus` instead of `focus-visible` due to Safari's lack of support
+      &:focus + span {
+        border-color: var(--fs-border-color-active);
+        border-width: var(--fs-border-width-thick);
+
+        @include focus-ring;
+      }
+    }
+  }
+
+  &:focus-visible + span {
+    border-color: var(--fs-border-color-active);
+    border-width: var(--fs-border-width-thick);
+
+    @include focus-ring;
+  }
+}
+
+.fs-sku-selector {
+  // --------------------------------------------------------
+  // Design Tokens for Sku Selector
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-sku-selector-row-gap                      : var(--fs-spacing-1);
+  --fs-sku-selector-column-gap                   : var(--fs-sku-selector-row-gap);
+  --fs-sku-selector-text-size                    : var(--fs-text-size-1);
+
+  // Title
+  --fs-sku-selector-title-margin-bottom          : var(--fs-spacing-0);
+
+  // Option
+  --fs-sku-selector-option-width                 : var(--fs-spacing-7);
+  --fs-sku-selector-option-height                : var(--fs-sku-selector-option-width);
+  --fs-sku-selector-option-bkg-color-hover       : var(--fs-color-primary-bkg-light);
+
+  --fs-sku-selector-option-border-width          : var(--fs-border-width-thick);
+  --fs-sku-selector-option-border-color          : var(--fs-color-neutral-7);
+  --fs-sku-selector-option-border-radius         : var(--fs-border-radius);
+  --fs-sku-selector-option-border-color-hover    : var(--fs-border-color-active);
+
+  --fs-sku-selector-option-checked-border-width  : var(--fs-sku-selector-option-border-width);
+  --fs-sku-selector-option-checked-border-color  : var(--fs-sku-selector-option-border-color-hover);
+  --fs-sku-selector-option-checked-box-shadow    : 0 0 0 var(--fs-border-width-thickest) var(--fs-color-focus-ring-outline);
+  --fs-sku-selector-option-checked-bkg-color     : var(--fs-sku-selector-option-bkg-color-hover);
+
+  --fs-sku-selector-option-disabled-width        : var(--fs-border-width);
+  --fs-sku-selector-option-disabled-color        : var(--fs-color-disabled-text);
+  --fs-sku-selector-option-disabled-border-color : var(--fs-border-color-disabled);
+  --fs-sku-selector-option-disabled-bkg-color    : var(--fs-sku-selector-option-disabled-border-color);
+
+  --fs-sku-selector-option-transition-timing     : var(--fs-transition-timing);
+  --fs-sku-selector-option-transition-function   : ease;
+
+  // Image
+  --fs-sku-selector-image-width                  : var(--fs-spacing-6);
+  --fs-sku-selector-image-height                 : var(--fs-sku-selector-image-width);
+  --fs-sku-selector-image-border-radius          : var(--fs-border-radius-small);
+
+  --fs-sku-selector-image-transition-timing      : var(--fs-sku-selector-option-transition-timing);
+  --fs-sku-selector-image-transition-function    : var(--fs-sku-selector-option-transition-function);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: var(--fs-sku-selector-row-gap);
+  column-gap: var(--fs-sku-selector-column-gap);
+  font-size: var(--fs-sku-selector-text-size);
+
+  [data-fs-sku-selector-title] {
+    width: 100%;
+    margin-bottom: var(--fs-sku-selector-title-margin-bottom);
+  }
+
+  [data-fs-radio-option] {
+    position: relative;
+    width: var(--fs-sku-selector-option-width);
+    height: var(--fs-sku-selector-option-height);
+
+    span {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      border: var(--fs-border-width) solid var(--fs-sku-selector-option-border-color);
+      border-radius: var(--fs-sku-selector-option-border-radius);
+      box-shadow: 0;
+      transition: box-shadow var(--fs-sku-selector-option-transition-timing) var(--fs-sku-selector-option-transition-function), background-color var(--fs-sku-selector-option-transition-timing) var(--fs-sku-selector-option-transition-function);
+    }
+
+    [data-fs-sku-selector-option] {
+      position: absolute;
+      z-index: var(--fs-z-index-top);
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+
+      @include sku-selector-focus-ring;
+
+      &:hover:not(:disabled):not(:checked) + span {
+        border-color: var(--fs-sku-selector-option-border-color-hover);
+        border-width: var(--fs-sku-selector-option-border-width);
+      }
+
+      &:checked + span {
+        border-color: var(--fs-sku-selector-option-checked-border-color);
+        border-width: var(--fs-sku-selector-option-checked-border-width);
+        box-shadow: var(--fs-sku-selector-option-checked-box-shadow);
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+
+        + span {
+          overflow: hidden;
+          color: var(--fs-sku-selector-option-disabled-color);
+          border-color: var(--fs-sku-selector-option-disabled-border-color);
+
+          &::after {
+            position: absolute;
+            width: var(--fs-sku-selector-option-disabled-width);
+            height: 160%;
+            content: "";
+            background-color: var(--fs-sku-selector-option-disabled-bkg-color);
+            transform: rotate(45deg);
+            transform-origin: center;
+          }
+        }
+      }
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-sku-selector-variant="label"] [data-fs-sku-selector-option] {
+    &:hover:not(:disabled) + span { background-color: var(--fs-sku-selector-option-bkg-color-hover); }
+
+    &:checked + span { background-color: var(--fs-sku-selector-option-checked-bkg-color); }
+  }
+
+  &[data-fs-sku-selector-variant="image"] {
+    [data-fs-sku-selector-option-image] {
+      width: var(--fs-sku-selector-image-width);
+      height: var(--fs-sku-selector-image-height);
+      border-radius: var(--fs-sku-selector-image-border-radius);
+      transition: transform var(--fs-sku-selector-image-transition-timing) var(--fs-sku-selector-image-transition-function);
+      transform-origin: center center;
+    }
+
+    [data-fs-sku-selector-option] {
+      &:hover:not(:disabled):not(:checked) + span [data-fs-sku-selector-option-image] {
+        transform: scale(.95);
+      }
+
+      &:checked + span [data-fs-sku-selector-option-image] {
+        transform: scale(.85);
+      }
+    }
+  }
+}

package/src/components/ui/SkuSelector/skuVariants.ts

@@ -0,0 +1,59 @@
+import type { NextRouter } from 'next/router'
+
+export type SkuVariantsByName = Record<
+  string,
+  Array<{ alt: string; src: string; label: string; value: string }>
+>
+
+export function getSkuSlug(
+  slugsMap: Record<string, string>,
+  selectedVariations: Record<string, string>,
+  dominantVariation: string
+) {
+  const slugsMapKey = Object.entries(selectedVariations).flat().join('-')
+
+  if (slugsMapKey in slugsMap) {
+    return slugsMap[slugsMapKey]
+  }
+
+  const possibleVariants = Object.keys(slugsMap)
+
+  const firstVariationForDominantValue = possibleVariants.find((slug) =>
+    slug.includes(
+      `${dominantVariation}-${selectedVariations[dominantVariation]}`
+    )
+  )
+
+  return slugsMap[firstVariationForDominantValue ?? possibleVariants[0]]
+}
+
+export function navigateToSku({
+  router,
+  slugsMap,
+  dominantSku,
+  selectorsState,
+  updatedVariationName,
+  updatedVariationValue,
+}: {
+  router: NextRouter
+  dominantSku: string
+  slugsMap: Record<string, string>
+  selectorsState: Record<string, string>
+  updatedVariationName: string
+  updatedVariationValue: string
+}) {
+  const whereTo = `/${getSkuSlug(
+    slugsMap,
+    {
+      ...selectorsState,
+      [updatedVariationName]: updatedVariationValue,
+    },
+    dominantSku
+  )}/p`
+
+  if (whereTo === window.location.pathname) {
+    return
+  }
+
+  router.push(whereTo)
+}

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

@@ -0,0 +1,285 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { SearchProvider, useSearch } from '@faststore/sdk'
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
+import { useCart } from 'src/sdk/cart'
+
+import { NavbarSlider } from 'src/components/common/Navbar'
+
+import Icon from 'src/components/ui/Icon'
+import CartToggle from 'src/components/cart/CartToggle'
+import CartSidebar from 'src/components/cart/CartSidebar'
+
+import { cartItem } from 'src/../.storybook/mocks/cart-sidebar'
+import { facets as facetsMock } from 'src/../.storybook/mocks/filter-slider'
+
+import storeConfig from 'store.config'
+
+import { validateSession } from 'src/sdk/session'
+import { useFilter } from 'src/components/search/Filter/useFilter'
+
+import Button, { ButtonBuy } from 'src/components/ui/Button'
+import { FilterSlider } from 'src/components/search/Filter'
+
+import SlideOver from '.'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+  SectionList,
+  SectionItem,
+} from 'src/../.storybook/components'
+
+<Meta component={SlideOver} title="Organisms/SlideOver" />
+
+export function SlideOverTemplate() {
+  const { cart: displayCart, closeCart } = useUI()
+  const { fade, fadeOut } = useFadeEffect()
+  return (
+    <SlideOver
+      fade={fade}
+      isOpen={displayCart}
+      onDismiss={fadeOut}
+      size="partial"
+      direction="rightSide"
+      onTransitionEnd={() => fade === 'out' && closeCart()}
+    >
+      <header
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '1rem',
+        }}
+      >
+        <div>
+          <p className="text__lead">SlideOver</p>
+        </div>
+        <Button
+          aria-label="Close"
+          icon={<Icon name="X" width={32} height={32} />}
+          onClick={fadeOut}
+        />
+      </header>
+      <main
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '1rem',
+          height: '100%',
+        }}
+      >
+        <p
+          style={{
+            margin: 'auto',
+          }}
+        >
+          A generic <code>SlideOver</code> component.
+        </p>
+      </main>
+    </SlideOver>
+  )
+}
+
+export const Template = () => {
+  const { cart: displayCart, openCart } = useUI()
+  const { fade, fadeOut } = useFadeEffect()
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Button
+        variant="tertiary"
+        icon={<Icon name="List" width={16} height={16} weight="bold" />}
+        iconPosition="left"
+        aria-label="Open SlideOver"
+        onClick={openCart}
+      >
+        Open SlideOver
+      </Button>
+      {displayCart && <SlideOverTemplate />}
+    </div>
+  )
+}
+
+export const TemplateNavbarSlider = () => {
+  const { openNavbar, navbar: displayNavbar } = useUI()
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Button
+        variant="tertiary"
+        icon={<Icon name="List" width={16} height={16} weight="bold" />}
+        iconPosition="left"
+        aria-label="Open Menu"
+        onClick={openNavbar}
+      >
+        Open Menu
+      </Button>
+      {displayNavbar && <NavbarSlider />}
+    </div>
+  )
+}
+
+export const TemplateCartSidebar = () => {
+  const { cart: displayCart } = useUI()
+  const { addItem } = useCart()
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <CartToggle />
+      <ButtonBuy
+        style={{ marginLeft: '12px' }}
+        onClick={() => addItem(cartItem)}
+      >
+        Add item to Cart
+      </ButtonBuy>
+      {displayCart && <CartSidebar />}
+    </div>
+  )
+}
+
+export const TemplateFilter = () => {
+  const filter = useFilter(facetsMock)
+  const { state, setState } = useSearch()
+  const { filter: displayFilter, openFilter } = useUI()
+  const { facets, expanded, dispatch } = filter
+  return (
+    <>
+      <Button
+        variant="tertiary"
+        icon={
+          <Icon name="FadersHorizontal" width={16} height={16} weight="bold" />
+        }
+        iconPosition="left"
+        aria-label="Open Filters"
+        onClick={openFilter}
+      >
+        Open Filters
+      </Button>
+      {displayFilter && <FilterSlider {...filter} />}
+    </>
+  )
+}
+
+export const TemplateProvider = ({ children }) => {
+  return (
+    <UIProvider>
+      <SearchProvider onChange={() => ({})}>{children}</SearchProvider>
+    </UIProvider>
+  )
+}
+
+<header>
+
+# Slide Over
+
+This component represents an aditional session that complements the screen's information.
+
+</header>
+
+## Overview
+
+Usually used on [NavbarSlider](?path=/docs/organisms-navbar-navbarslider--overview-default), [FilterSlider](?path=/docs/organisms-filter-filterslider--default-story), and [CartSidebar](?path=/docs/organisms-cartsidebar--overview-default) components.
+
+---
+
+## Usage
+
+`import SlideOver from 'src/components/ui/SlideOver'`
+
+<Canvas>
+  <Story name="default">
+    <TemplateProvider>
+      <Template />
+    </TemplateProvider>
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-slide-over-bkg-color"
+    value="var(--fs-color-body-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-slide-over-transition-timing"
+    value="var(--fs-transition-timing)"
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### Partial
+
+<TokenTable>
+  <TokenRow
+    token="--fs-slide-over-partial-gap"
+    value="calc(2 * var(--fs-grid-padding))"
+  />
+  <TokenRow
+    token="--fs-slide-over-partial-width-mobile"
+    value="calc(100vw - var(--fs-slide-over-partial-gap))"
+  />
+  <TokenRow
+    token="--fs-slide-over-partial-width-notebook"
+    value="calc(100% / 3)"
+  />
+  <TokenRow
+    token="--fs-slide-over-partial-max-width-notebook"
+    value="calc(var(--fs-grid-breakpoint-notebook) / 3)"
+  />
+</TokenTable>
+
+---
+
+## Use Cases
+
+<SectionList>
+  <SectionItem
+    title="Navbar Slider"
+    actionPath="../?path=/docs/organisms-navbar-navbarslider--overview-default"
+    description={
+      <>
+        An implementation of the <code>SlideOver</code> that represents the
+        menu.
+      </>
+    }
+  >
+    <TemplateProvider>
+      <TemplateNavbarSlider />
+    </TemplateProvider>
+  </SectionItem>
+  <SectionItem
+    title="Cart Sidebar"
+    actionPath="../?path=/docs/organisms-cartsidebar--overview-default"
+    description={
+      <>
+        An implementation of the <code>SlideOver</code> that represents the
+        summary of items added to the cart along with detailed information, and
+        checkout option.
+      </>
+    }
+  >
+    <TemplateProvider>
+      <TemplateCartSidebar />
+    </TemplateProvider>
+  </SectionItem>
+  <SectionItem
+    title="Filter Slider"
+    actionPath="../?path=/docs/organisms-filter-filterslider--default-story"
+    description={
+      <>
+        An implementation of the <code>SlideOver</code> that represents the
+        mobile <code>Filter</code> view.
+      </>
+    }
+  >
+    <TemplateProvider>
+      <TemplateFilter />
+    </TemplateProvider>
+  </SectionItem>
+</SectionList>

package/src/components/ui/SlideOver/SlideOver.tsx

@@ -0,0 +1,58 @@
+import { Modal as UIModal } from '@faststore/ui'
+import type { HTMLAttributes, ReactNode } from 'react'
+
+import styles from './slide-over.module.scss'
+
+type Direction = 'leftSide' | 'rightSide'
+type WidthSize = 'full' | 'partial'
+
+interface SlideOverProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A boolean value that represents the state of the SlideOver
+   */
+  isOpen: boolean
+  /**
+   * Represents the side that the SlideOver comes from.
+   */
+  direction: Direction
+  /**
+   * Represents the size of the SlideOver.
+   */
+  size: WidthSize
+  children: ReactNode
+  /**
+   * Represents the fade effect of the SlideOver.
+   */
+  fade: 'in' | 'out'
+  /**
+   * This function is called whenever the user clicks outside
+   * the modal content
+   */
+  onDismiss?: () => void
+}
+
+function SlideOver({
+  isOpen,
+  direction = 'leftSide',
+  size = 'full',
+  fade = 'out',
+  children,
+  className,
+  ...otherProps
+}: SlideOverProps) {
+  return (
+    <UIModal
+      className={`${styles.fsSlideOver} ${className}`}
+      isOpen={isOpen}
+      data-fs-slide-over
+      data-fs-slide-over-direction={direction}
+      data-fs-slide-over-size={size}
+      data-fs-slide-over-state={fade}
+      {...otherProps}
+    >
+      {children}
+    </UIModal>
+  )
+}
+
+export default SlideOver

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

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

package/src/components/ui/SlideOver/overlay.scss

@@ -0,0 +1,14 @@
+[data-modal-overlay] {
+  // --------------------------------------------------------
+  // Design Tokens for Overlay
+  // --------------------------------------------------------
+  --fs-overlay-bkg-color: rgb(0 0 0 / 20%);
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 3;
+  background-color: var(--fs-overlay-bkg-color);
+}

package/src/components/ui/SlideOver/slide-over.module.scss

@@ -0,0 +1,63 @@
+@import "src/styles/scaffold";
+
+.fs-slide-over {
+  // --------------------------------------------------------
+  // Design Tokens for Slide Over
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-slide-over-bkg-color                  : var(--fs-color-body-bkg);
+  --fs-slide-over-transition-timing          : var(--fs-transition-timing);
+
+  // Partial
+  --fs-slide-over-partial-gap                : calc(2 * var(--fs-grid-padding));
+  --fs-slide-over-partial-width-mobile       : calc(100vw - var(--fs-slide-over-partial-gap));
+
+  --fs-slide-over-partial-width-notebook     : calc(100% / 3);
+  --fs-slide-over-partial-max-width-notebook : calc(var(--fs-grid-breakpoint-notebook) / 3);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+  position: fixed;
+  height: 100vh;
+  background-color: var(--fs-slide-over-bkg-color);
+
+  &[data-fs-slide-over-size="full"] {
+    width: 100vw;
+  }
+
+  &[data-fs-slide-over-size="partial"] {
+    width: var(--fs-slide-over-partial-width-mobile);
+
+    @include media(">=notebook") {
+      width: var(--fs-slide-over-partial-width-notebook);
+      max-width: var(--fs-slide-over-partial-max-width-notebook);
+    }
+  }
+
+  &[data-fs-slide-over-state="in"] {
+    transition: transform var(--fs-slide-over-transition-timing) ease-in;
+    transform: translateX(0);
+  }
+
+  &[data-fs-slide-over-state="out"] {
+    transition: transform var(--fs-slide-over-transition-timing) ease-out;
+  }
+
+  &[data-fs-slide-over-direction="leftSide"] {
+    left: 0;
+
+    &[data-fs-slide-over-state="out"] {
+      transform: translateX(-100%);
+    }
+  }
+
+  &[data-fs-slide-over-direction="rightSide"] {
+    right: 0;
+
+    &[data-fs-slide-over-state="out"] {
+      transform: translateX(100%);
+    }
+  }
+}