@faststore/core 22.42.6

package/src/components/ui/ImageGallery/ImageGallery.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react'
+import type { HTMLAttributes } from 'react'
+
+import { Image } from 'src/components/ui/Image'
+import styles from 'src/components/ui/ImageGallery/image-gallery.module.scss'
+
+import { ImageGallerySelector, ImageZoom } from '.'
+
+export interface ImageElementData {
+  url: string
+  alternateName: string
+}
+
+interface ImageGalleryProps extends HTMLAttributes<HTMLDivElement> {
+  images: ImageElementData[]
+}
+
+function ImageGallery({ images, ...otherProps }: ImageGalleryProps) {
+  const [selectedImageIdx, setSelectedImageIdx] = useState(0)
+  const currentImage = images[selectedImageIdx]
+  const hasSelector = images.length > 1
+
+  return (
+    <section
+      data-fs-image-gallery={hasSelector ? 'with-selector' : 'without-selector'}
+      className={styles.fsImageGallery}
+      {...otherProps}
+    >
+      <ImageZoom>
+        <Image
+          src={currentImage.url}
+          alt={currentImage.alternateName}
+          sizes="(max-width: 804px) 25vw, 30vw"
+          width={804}
+          height={804 * (3 / 4)}
+          loading="eager"
+          fetchPriority="high"
+        />
+      </ImageZoom>
+      {hasSelector && (
+        <ImageGallerySelector
+          images={images}
+          currentImageIdx={selectedImageIdx}
+          onSelect={setSelectedImageIdx}
+        />
+      )}
+    </section>
+  )
+}
+
+export default ImageGallery

package/src/components/ui/ImageGallery/ImageGallerySelector.tsx

@@ -0,0 +1,116 @@
+import { useRef } from 'react'
+import { Button, IconButton } from '@faststore/ui'
+import { useInView } from 'react-intersection-observer'
+
+import Icon from 'src/components/ui/Icon'
+import { Image } from 'src/components/ui/Image'
+import styles from 'src/components/ui/ImageGallery/image-gallery-selector.module.scss'
+
+import type { ImageElementData } from './ImageGallery'
+
+interface Props {
+  images: ImageElementData[]
+  onSelect: React.Dispatch<React.SetStateAction<number>>
+  currentImageIdx: number
+}
+
+const SCROLL_MARGIN_VALUE = 400
+
+const moveScroll = (container: HTMLDivElement | null, value: number) => {
+  if (container) {
+    if (container.scrollHeight > container.clientHeight) {
+      // TODO: Temporary workaround for scroll-behavior with scrollTop – Safari 15.4) https://developer.apple.com/forums/thread/703294
+      container.style.overflow = 'auto'
+      window.requestAnimationFrame(() =>
+        container.scrollTo({ top: value, behavior: 'smooth' })
+      )
+      setTimeout(() => (container.style.overflow = 'hidden'), 2000)
+    } else {
+      container.scrollLeft += value
+    }
+  }
+}
+
+const hasScroll = (container: HTMLDivElement | null): boolean => {
+  if (container) {
+    return (
+      container.scrollHeight > container.clientHeight ||
+      container.scrollWidth > container.clientWidth
+    )
+  }
+
+  return false
+}
+
+function ImageGallerySelector({ images, onSelect, currentImageIdx }: Props) {
+  const elementsRef = useRef<HTMLDivElement>(null)
+  const elementHasScroll = hasScroll(elementsRef.current)
+  const { ref: firstImageRef, inView: firstImageInView } = useInView({
+    threshold: 1,
+  })
+
+  const { ref: lastImageRef, inView: lastImageInView } = useInView({
+    threshold: 1,
+  })
+
+  return (
+    <section
+      data-fs-image-gallery-selector
+      className={styles.fsImageGallerySelector}
+      aria-roledescription="carousel"
+      aria-label="Product images"
+    >
+      {elementHasScroll && !firstImageInView && (
+        <IconButton
+          data-fs-image-gallery-selector-control-button
+          aria-label="backward slide image selector"
+          icon={<Icon name="ArrowLeft" width={24} height={24} />}
+          onClick={() => moveScroll(elementsRef.current, -SCROLL_MARGIN_VALUE)}
+        />
+      )}
+      <div data-fs-image-gallery-selector-elements ref={elementsRef}>
+        {images.map((image, idx) => {
+          const ref =
+            idx === 0
+              ? firstImageRef
+              : idx === images.length - 1
+              ? lastImageRef
+              : null
+
+          return (
+            <Button
+              key={idx}
+              aria-label={`${image.alternateName} - Image ${idx + 1} of ${
+                images.length
+              }`}
+              onClick={() => onSelect(idx)}
+              data-fs-image-gallery-selector-thumbnail={
+                idx === currentImageIdx ? 'selected' : 'true'
+              }
+            >
+              <Image
+                ref={ref}
+                src={image.url}
+                alt={image.alternateName}
+                loading={idx === 0 ? 'eager' : 'lazy'}
+                sizes="(max-width: 72px) 25vw, 30vw"
+                width={72}
+                height={72}
+              />
+            </Button>
+          )
+        })}
+      </div>
+      {elementHasScroll && !lastImageInView && (
+        <IconButton
+          data-fs-image-gallery-selector-control-button
+          aria-label="forward slide image selector"
+          icon={<Icon name="ArrowLeft" width={24} height={24} />}
+          onClick={() => moveScroll(elementsRef.current, +SCROLL_MARGIN_VALUE)}
+        />
+      )}
+    </section>
+  )
+}
+
+export default ImageGallerySelector

package/src/components/ui/ImageGallery/ImageZoom.tsx

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from 'react'
+
+interface ImageZoomProps {
+  helpMessage?: string
+  zoomFactor?: number
+}
+
+const ImageZoom = ({ children }: PropsWithChildren<ImageZoomProps>) => {
+  return <> {children} </>
+}
+
+export default ImageZoom

package/src/components/ui/ImageGallery/image-gallery-selector.module.scss

@@ -0,0 +1,131 @@
+@import "src/styles/scaffold";
+
+.fs-image-gallery-selector {
+  // --------------------------------------------------------
+  // Design Tokens for Image Gallery Selector
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-image-gallery-selector-max-height                        : 33.125rem;   // 530px
+
+  // Elements
+  --fs-image-gallery-selector-elements-gap                      : var(--fs-spacing-1);
+  --fs-image-gallery-selector-elements-gap-notebook             : var(--fs-spacing-2);
+  --fs-image-gallery-selector-elements-padding                  : var(--fs-spacing-0);
+
+  // Thumbnail
+  --fs-image-gallery-selector-thumbnail-width-mobile            : var(--fs-spacing-8);
+  --fs-image-gallery-selector-thumbnail-width-notebook          : var(--fs-spacing-10);
+  --fs-image-gallery-selector-thumbnail-border-radius           : var(--fs-border-radius);
+  --fs-image-gallery-selector-thumbnail-selected-border-color   : var(--fs-border-color-active);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-height: var(--fs-image-gallery-selector-max-height);
+
+  @include media(">=notebook") {
+    flex-direction: column;
+    grid-row: 1;
+    justify-content: space-between;
+  }
+
+  [data-fs-image-gallery-selector-elements] {
+    display: flex;
+    column-gap: var(--fs-image-gallery-selector-elements-gap);
+    padding: var(--fs-image-gallery-selector-elements-padding);
+    overflow-x: auto;
+    scroll-behavior: smooth;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @include media(">=notebook") {
+      flex-direction: column;
+      row-gap: var(--fs-image-gallery-selector-elements-gap-notebook);
+      overflow-y: hidden;
+    }
+  }
+
+  [data-fs-image-gallery-selector-thumbnail] {
+    flex-shrink: 0;
+    width: var(--fs-image-gallery-selector-thumbnail-width-mobile);
+    padding: 0;
+    overflow: hidden;
+    background-color: transparent;
+    border: var(--fs-border-width-thick) solid transparent;
+    border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius);
+    transition: all var(--fs-transition-timing) var(--fs-transition-function);
+
+    &:hover:not([data-fs-image-gallery-selector-thumbnail="selected"]) {
+      border-color: var(--fs-image-gallery-selector-thumbnail-selected-border-color);
+    }
+
+    &[data-fs-image-gallery-selector-thumbnail="selected"] {
+      border-color: var(--fs-image-gallery-selector-thumbnail-selected-border-color);
+      box-shadow: 0 0 0 var(--fs-border-width-thickest) var(--fs-color-focus-ring-outline);
+    }
+
+    [data-fs-image] {
+      border: var(--fs-border-width-thick) solid var(--fs-color-body-bkg);
+      border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius);
+    }
+
+    @include focus-ring-visible;
+
+    @include media(">=notebook") {
+      width: var(--fs-image-gallery-selector-thumbnail-width-notebook);
+    }
+  }
+
+  [data-fs-image-gallery-selector-control-button] {
+    position: absolute;
+    z-index: 1;
+    background: linear-gradient(90deg, var(--fs-color-body-bkg) 55%, transparent);
+    background-color: transparent;
+    border: none;
+
+    span {
+      display: flex;
+      height: fit-content;
+      padding: var(--fs-spacing-1);
+      background-color: var(--fs-control-bkg);
+      border-radius: var(--fs-border-radius-circle);
+      box-shadow: var(--fs-shadow);
+    }
+
+    @include media("<notebook") {
+      height: 100%;
+
+      &:first-child {
+        left: 0;
+      }
+
+      &:last-child {
+        right: 0;
+        transform: scaleX(-1);
+      }
+    }
+
+    @include media(">=notebook") {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      background: linear-gradient(180deg, var(--fs-color-body-bkg) 55%, transparent);
+
+      span {
+        transform: rotate(90deg);
+      }
+
+      &:last-child {
+        bottom: 0;
+        transform: scaleY(-1);
+      }
+    }
+  }
+}

package/src/components/ui/ImageGallery/image-gallery.module.scss

@@ -0,0 +1,56 @@
+@import "src/styles/scaffold";
+
+.fs-image-gallery {
+  // --------------------------------------------------------
+  // Design Tokens for Image Gallery
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-image-gallery-width                     : calc(100% + (2 * var(--fs-grid-padding)));
+
+  --fs-image-gallery-gap-mobile                : var(--fs-spacing-2);
+  --fs-image-gallery-gap-notebook              : var(--fs-spacing-3);
+
+  // Current Selected Image
+  --fs-image-gallery-current-border-radius     : var(--fs-border-radius);
+  --fs-image-gallery-current-height            : 33.125rem;   // 530px
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  left: calc(-1 * var(--fs-grid-padding));
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--fs-image-gallery-gap-mobile);
+  width: var(--fs-image-gallery-width);
+
+  @include media(">=tablet") {
+    left: 0;
+    width: 100%;
+
+    > [data-fs-image] {
+      grid-column: 2 / span 7;
+      border-radius: var(--fs-image-gallery-current-border-radius);
+    }
+  }
+
+  @include media(">=notebook") {
+    >[data-fs-image] {
+      height: var(--fs-image-gallery-current-height);
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-image-gallery="with-selector"] {
+    @include media(">=notebook") {
+      display: grid;
+      grid-template-columns: repeat(8, 1fr);
+      column-gap: var(--fs-image-gallery-gap-notebook);
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+export { default as ImageGallerySelector } from './ImageGallerySelector'
+export { default as ImageGallery } from './ImageGallery'
+export { default as ImageZoom } from './ImageZoom'
+export type { ImageElementData } from './ImageGallery'

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

@@ -0,0 +1,311 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import InputText from '.'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+  BestPractices,
+  BestPracticesRule,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Atoms/InputText"
+  component={InputText}
+  argTypes={{
+    actionable: {
+      type: { name: 'boolean' },
+    },
+    disabled: {
+      type: { name: 'boolean' },
+    },
+    id: {
+      type: { name: 'string', required: true },
+    },
+    inputRef: {
+      control: { disable: true },
+    },
+  }}
+/>
+
+export const Template = (args) => {
+  return <InputText {...args} />
+}
+
+<header>
+
+# Input Text
+
+Input Text are text fields used to get user inputs.
+
+</header>
+
+## Overview
+
+The `InputText` component uses [FastStore UI Input Text](https://www.faststore.dev/reference/ui/atoms/Input) as base.
+
+<Canvas isColumn>
+  <Story
+    name="overview-default"
+    args={{
+      id: 'overview-default',
+      label: 'Label',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-error"
+    args={{
+      id: 'overview-error',
+      label: 'Input w/ Error Message',
+      error: 'Error Message',
+      disabled: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-actionable"
+    args={{
+      id: 'overview-actionable',
+      label: 'Input w/ Action',
+      actionable: true,
+      disabled: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-actionable-error"
+    args={{
+      id: 'overview-actionable-error',
+      label: 'Input w/ Action and Error',
+      actionable: true,
+      error: 'Error Message',
+      disabled: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-disabled"
+    args={{
+      id: 'overview-disabled',
+      label: 'Input Disabled',
+      actionable: false,
+      disabled: true,
+      value: 'Input Text',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+`import InputText from '../components/ui/InputText'`
+
+<Canvas>
+  <Story
+    name="input-default"
+    args={{
+      id: 'input-default',
+      label: 'Label',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="input-default" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-input-padding"
+    value="var(--fs-spacing-2) var(--fs-spacing-2) 0"
+  />
+  <TokenRow token="--fs-input-height" value="var(--fs-control-tap-size)" />
+  <TokenDivider />
+  <TokenRow token="--fs-input-box-shadow" value="none" />
+  <TokenRow
+    token="--fs-input-box-shadow-hover"
+    value="0 0 0 var(--fs-border-width) var(--fs-border-color-active)"
+  />
+  <TokenDivider />
+  <TokenRow token="--fs-input-border-radius" value="var(--fs-border-radius)" />
+  <TokenRow token="--fs-input-border-width" value="var(--fs-border-width)" />
+  <TokenRow
+    token="--fs-input-border-color"
+    value="var(--fs-border-color)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-input-border-color-hover"
+    value="var(--fs-border-color-active)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-input-text-color"
+    value="var(--fs-color-text)"
+    isColor
+  />
+  <TokenRow token="--fs-input-text-size" value="var(--fs-text-size-body)" />
+  <TokenDivider />
+  <TokenRow token="--fs-input-line-height" value="1.25" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-input-transition-function"
+    value="var(--fs-transition-function)"
+  />
+  <TokenRow
+    token="--fs-input-transition-property"
+    value="var(--fs-transition-property)"
+  />
+  <TokenRow
+    token="--fs-input-transition-timing"
+    value="var(--fs-transition-timing)"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Label
+
+<TokenTable>
+  <TokenRow token="--fs-input-label-padding" value="0 var(--fs-spacing-2)" />
+  <TokenRow
+    token="--fs-input-label-color"
+    value="var(--fs-color-text-light)"
+    isColor
+  />
+  <TokenRow token="--fs-input-label-size" value="var(--fs-text-size-tiny)" />
+</TokenTable>
+
+---
+
+## Variants
+
+### Actionable
+
+<Canvas>
+  <Story
+    name="input-actionable"
+    args={{
+      id: 'input-actionable',
+      disabled: false,
+      label: 'Input w/ Action',
+      actionable: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Actionable w/ Error
+
+<Canvas>
+  <Story
+    name="input-actionable-error"
+    args={{
+      id: 'input-actionable-error',
+      disabled: false,
+      label: 'Input w/ Action and Error',
+      error: 'Error Message',
+      actionable: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Error
+
+<Canvas>
+  <Story
+    name="input-error"
+    args={{
+      id: 'input-error',
+      disabled: false,
+      label: 'Input w/ Error Message',
+      error: 'Error Message',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+   <TokenRow
+    token="--fs-input-error-message-margin-top"
+    value="var(--fs-spacing-0)"
+  />
+  <TokenRow
+    token="--fs-input-error-message-size"
+    value="var(--fs-text-size-legend)"
+  />
+  <TokenRow token="--fs-input-error-message-line-height" value="1.1" />
+  <TokenRow
+    token="--fs-input-error-message-color"
+    value="var(--fs-color-danger-text)"
+    isColor
+  />
+
+  <TokenDivider />
+  <TokenRow
+    token="--fs-input-error-border-color"
+    value="var(--fs-color-danger-border)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-input-error-box-shadow"
+    value="0 0 0 var(--fs-border-width) var(--fs-input-error-border-color)"
+  />
+  <TokenRow
+    token="--fs-input-error-focus-ring"
+    value="var(--fs-color-focus-ring-danger)"
+    isColor
+  />
+</TokenTable>
+
+### Disabled
+
+<Canvas>
+  <Story
+    name="input-disabled"
+    args={{
+      id: 'input-disabled',
+      disabled: true,
+      label: 'Disabled Input',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-input-disabled-bkg-color"
+    value="var(--fs-color-disabled-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-input-disabled-text-color"
+    value="var(--fs-color-disabled-text)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-input-disabled-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-input-disabled-border-color"
+    value="var(--fs-border-color)"
+    isColor
+  />
+</TokenTable>