@faststore/core 22.42.6

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

@@ -0,0 +1,192 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import PriceRange from '.'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+  BestPractices,
+  BestPracticesRule,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Molecules/PriceRange"
+  argTypes={{
+    min: { control: { disable: true } },
+    max: { control: { disable: true } },
+    testId: {
+      table: {
+        disable: true,
+      },
+    },
+    className: {
+      table: {
+        disable: true,
+      },
+    },
+    onChange: {
+      table: {
+        disable: true,
+      },
+    },
+    variant: {
+      table: {
+        disable: true,
+      },
+    },
+    step: {
+      control: 'number',
+      table: { type: 'number', summary: 10 },
+    },
+  }}
+  component={PriceRange}
+/>
+
+export const defaultArgs = {
+  min: {
+    absolute: 0,
+    selected: 0,
+  },
+  max: {
+    absolute: 12400,
+    selected: 12400,
+  },
+}
+
+export const Template = (args) => {
+  return (
+    <PriceRange {...defaultArgs} {...args} />
+  )
+}
+
+<header>
+
+# Price Range
+
+PriceRange allows you to implement filters on PLP so users have a high control over product prices.
+
+</header>
+
+## Overview
+
+The `PriceRange` component uses [FastStore UI Price Range](https://www.faststore.dev/reference/ui/molecules/PriceRange) as base.
+
+---
+
+## Usage
+
+`import PriceRange from '../components/ui/PriceRange'`
+
+<Canvas isColumn>
+  <Story name="overview-default" args={defaultArgs}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="overview-default" />
+
+<TokenTable>
+  <TokenRow token="--fs-price-range-height" value="var(--fs-spacing-2)" />
+  <TokenRow
+    token="--fs-price-range-border-radius"
+    value="var(--fs-border-radius-pill)"
+  />
+  <TokenRow
+    token="--fs-price-range-margin-bottom"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-price-range-transition-function"
+    value="var(--fs-transition-function)"
+  />
+  <TokenRow
+    token="--fs-price-range-transition-property"
+    value="varvar(--fs-transition-property)"
+  />
+  <TokenRow
+    token="--fs-price-range-transition-timing"
+    value="var(--fs-transition-timing)"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Slider
+
+<TokenTable>
+  <TokenRow
+    token="--fs-price-range-slider-bkg-color"
+    value="var(--fs-color-neutral-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-price-range-slider-selection-bkg-color"
+    value="var(--fs-color-primary-bkg-light-active)"
+    isColor
+  />
+</TokenTable>
+
+### Value Label
+
+<TokenTable>
+  <TokenRow
+    token="--fs-price-range-value-label-bottom"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenRow
+    token="--fs-price-range-value-label-bkg-color"
+    value="var(--fs-color-body-bkg)"
+    isColor
+  />
+</TokenTable>
+
+### Absolute Values
+
+<TokenTable>
+  <TokenRow
+    token="--fs-price-range-absolute-values-text-color"
+    value="var(--fs-color-disabled-text)"
+    isColor
+  />
+</TokenTable>
+
+### Thumb
+
+<TokenTable>
+  <TokenRow token="--fs-price-range-thumb-size" value="var(--fs-spacing-4)" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-price-range-thumb-bkg-color"
+    value="var(--fs-color-primary-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-price-range-thumb-bkg-color-hover"
+    value="var(--fs-color-primary-bkg-hover)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-price-range-thumb-border-radius"
+    value="var(--fs-border-radius-circle)"
+  />
+  <TokenRow
+    token="--fs-price-range-thumb-border-color"
+    value="var(--fs-price-range-thumb-bkg-color)"
+    globalValue="var(--fs-color-primary-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-price-range-thumb-border-color-hover"
+    value="var(--fs-price-range-thumb-bkg-color-hover)"
+    globalValue="var(--fs-color-primary-bkg-hover)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-price-range-thumb-border-width"
+    value="var(--fs-border-width)"
+  />
+</TokenTable>

package/src/components/ui/PriceRange/PriceRange.tsx

@@ -0,0 +1,138 @@
+import { useState, useRef } from 'react'
+import { PriceRange as UIPriceRange } from '@faststore/ui'
+import type { PriceRangeProps } from '@faststore/ui'
+
+import {
+  usePriceFormatter,
+  useFormattedPrice,
+} from 'src/sdk/product/useFormattedPrice'
+
+import styles from './price-range.module.scss'
+import InputText from '../InputText'
+
+type Props = Omit<
+  PriceRangeProps,
+  'formatter' | 'minValueLabelComponent' | 'maxValueLabelComponent'
+>
+
+function PriceRange({ min, max, onEnd, step = 10, ...otherProps }: Props) {
+  const formatter = usePriceFormatter({ decimals: false })
+  const minAbsoluteFormatted = useFormattedPrice(Math.round(min.absolute))
+  const maxAbsoluteFormatted = useFormattedPrice(Math.ceil(max.absolute))
+
+  const inputMinRef = useRef<HTMLInputElement>(null)
+  const inputMaxRef = useRef<HTMLInputElement>(null)
+  const priceRangeRef = useRef<{
+    setPriceRangeValues: (values: { min: number; max: number }) => void
+  }>()
+
+  const [inputMinError, setInputMinError] = useState<string>()
+  const [inputMaxError, setInputMaxError] = useState<string>()
+  const [priceRange, setPriceRange] = useState<{ min: number; max: number }>({
+    min: Math.round(min.selected),
+    max: Math.ceil(max.selected),
+  })
+
+  function onChangePriceRange(value: { min: number; max: number }) {
+    setInputMinError(undefined)
+    setInputMaxError(undefined)
+    setPriceRange({ min: value.min, max: value.max })
+
+    if (inputMinRef.current?.value) {
+      inputMinRef.current.value = String(value.min)
+    }
+
+    if (inputMaxRef.current?.value) {
+      inputMaxRef.current.value = String(value.max)
+    }
+  }
+
+  function onChangeInputMin(value: string) {
+    setInputMinError(undefined)
+
+    if (Number(value) < min.absolute) {
+      return
+    }
+
+    if (Number(value) > priceRange.max) {
+      setInputMinError(`Min price can't be greater than max`)
+    }
+
+    setPriceRange({ ...priceRange, min: Number(value) })
+    priceRangeRef.current?.setPriceRangeValues({
+      ...priceRange,
+      min: Number(value),
+    })
+  }
+
+  function onChangeInputMax(value: string) {
+    setInputMaxError(undefined)
+
+    if (Number(value) > max.absolute) {
+      return
+    }
+
+    if (Number(value) < priceRange.min) {
+      setInputMaxError(`Max price can't be smaller than min`)
+    }
+
+    setPriceRange({ ...priceRange, max: Number(value) })
+    priceRangeRef.current?.setPriceRangeValues({
+      ...priceRange,
+      max: Number(value),
+    })
+  }
+
+  return (
+    <div className={styles.fsPriceRange} data-fs-price-range>
+      <div data-fs-price-range-absolute-values>
+        <span>{minAbsoluteFormatted}</span>
+        <span>{maxAbsoluteFormatted}</span>
+      </div>
+      <UIPriceRange
+        ref={priceRangeRef}
+        min={min}
+        max={max}
+        formatter={formatter}
+        className={styles.fsPriceRange}
+        onEnd={(value) => {
+          onEnd?.(value)
+          onChangePriceRange(value)
+        }}
+        {...otherProps}
+      />
+      <div data-fs-price-range-inputs>
+        <InputText
+          id="price-range-min"
+          step={step}
+          label="Min"
+          type="number"
+          inputMode="numeric"
+          error={inputMinError}
+          inputRef={inputMinRef}
+          min={Math.round(min.absolute)}
+          max={Math.ceil(priceRange.max)}
+          value={Math.round(priceRange.min)}
+          onChange={(e) => onChangeInputMin(e.target.value)}
+          onBlur={() => !inputMinError && onEnd?.(priceRange)}
+        />
+        <InputText
+          id="price-range-max"
+          label="Max"
+          step={step}
+          type="number"
+          inputMode="numeric"
+          error={inputMaxError}
+          inputRef={inputMaxRef}
+          max={Math.ceil(max.absolute)}
+          min={Math.round(priceRange.min)}
+          value={Math.ceil(priceRange.max)}
+          onChange={(e) => onChangeInputMax(e.target.value)}
+          onBlur={() => !inputMaxError && onEnd?.(priceRange)}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default PriceRange

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

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

package/src/components/ui/PriceRange/price-range.module.scss

@@ -0,0 +1,176 @@
+.fs-price-range {
+  // --------------------------------------------------------
+  // Design Tokens for Price Range
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-price-range-height                     : var(--fs-spacing-2);
+  --fs-price-range-border-radius              : var(--fs-border-radius-pill);
+  --fs-price-range-margin-bottom              : var(--fs-spacing-3);
+
+  --fs-price-range-transition-function        : var(--fs-transition-function);
+  --fs-price-range-transition-property        : var(--fs-transition-property);
+  --fs-price-range-transition-timing          : var(--fs-transition-timing);
+
+  // Slider
+  --fs-price-range-slider-bkg-color           : var(--fs-color-neutral-bkg);
+  --fs-price-range-slider-selection-bkg-color : var(--fs-color-primary-bkg-light-active);
+
+  // Value Label
+  --fs-price-range-value-label-bottom         : var(--fs-spacing-3);
+  --fs-price-range-value-label-bkg-color      : var(--fs-color-body-bkg);
+
+  // Absolute Values
+  --fs-price-range-absolute-values-text-color : var(--fs-color-disabled-text);
+
+  // Thumb
+  --fs-price-range-thumb-size                 : var(--fs-spacing-4);
+  --fs-price-range-thumb-bkg-color            : var(--fs-color-primary-bkg);
+  --fs-price-range-thumb-bkg-color-hover      : var(--fs-color-primary-bkg-hover);
+  --fs-price-range-thumb-border-radius        : var(--fs-border-radius-circle);
+  --fs-price-range-thumb-border-color         : var(--fs-price-range-thumb-bkg-color);
+  --fs-price-range-thumb-border-color-hover   : var(--fs-price-range-thumb-bkg-color-hover);
+  --fs-price-range-thumb-border-width         : var(--fs-border-width);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  [data-fs-slider] {
+    position: relative;
+    width: 100%;
+    height: var(--fs-price-range-height);
+    margin-bottom: var(--fs-price-range-margin-bottom);
+    background-color: var(--fs-price-range-slider-bkg-color);
+    border-radius: var(--fs-price-range-border-radius);
+  }
+
+  [data-slider-range] {
+    position: absolute;
+    height: var(--fs-price-range-height);
+    background-color: var(--fs-price-range-slider-selection-bkg-color);
+    border-radius: var(--fs-price-range-border-radius);
+  }
+
+  [data-price-range-value-label="min"],
+  [data-price-range-value-label="max"] {
+    bottom: var(--fs-price-range-value-label-bottom);
+    padding: var(--fs-spacing-1);
+    background-color: var(--fs-price-range-value-label-bkg-color);
+    opacity: 0;
+    transition: opacity var(--fs-price-range-transition-timing) var(--fs-price-range-transition-function);
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  [data-price-range-value-label="min"] {
+    text-align: left;
+    transform: translateX(-1rem);
+  }
+
+  [data-price-range-value-label="max"] {
+    text-align: right;
+    transform: translateX(calc(-100% + 1.25rem));
+  }
+
+  // Thumb styles for Webkit based browsers (Chrome, Edge)
+  [data-slider-thumb],
+  [data-slider-thumb]::-webkit-slider-thumb {
+    width: var(--fs-price-range-thumb-size);
+    height: var(--fs-price-range-thumb-size);
+    pointer-events: auto;
+    cursor: col-resize;
+    background-color: var(--fs-price-range-thumb-bkg-color);
+    border: var(--fs-price-range-thumb-border-width) solid var(--fs-price-range-thumb-border-color);
+    border-radius: var(--fs-price-range-thumb-border-radius);
+    -webkit-tap-highlight-color: transparent;
+    appearance: none;
+    transition: var(--fs-price-range-transition-property) var(--fs-price-range-transition-timing) var(--fs-price-range-transition-function);
+
+    &:hover {
+      background-color: var(--fs-price-range-thumb-bkg-color-hover);
+      border-color: var(--fs-price-range-thumb-border-color-hover);
+    }
+  }
+
+  // Thumb styles for Mozilla
+  [data-slider-thumb]::-moz-range-thumb {
+    width: var(--fs-price-range-thumb-size);
+    height: var(--fs-price-range-thumb-size);
+    pointer-events: auto;
+    cursor: col-resize;
+    background-color: var(--fs-price-range-thumb-bkg-color);
+    border: var(--fs-price-range-thumb-border-width) solid var(--fs-price-range-thumb-border-color);
+    border-radius: var(--fs-price-range-thumb-radius);
+  }
+
+  [data-slider-thumb] {
+    position: absolute;
+    width: inherit;
+    height: 0;
+    margin: calc(var(--fs-price-range-height) / 2) 0;
+    pointer-events: none;
+    border: none;
+  }
+
+  [data-slider-thumb="left"] {
+    z-index: 1;
+
+    &:hover + [data-price-range-value-label="min"] {
+      opacity: 1;
+    }
+  }
+
+  [data-slider-thumb="right"] {
+    z-index: 2;
+
+    &:hover + [data-price-range-value-label="max"] {
+      opacity: 1;
+    }
+  }
+
+  [data-price-range-values] {
+    display: flex;
+    justify-content: space-between;
+    margin-top: var(--fs-spacing-3);
+    margin-bottom: var(--fs-spacing-3);
+  }
+
+  [data-fs-price-range-inputs] {
+    display: flex;
+
+    [data-fs-input-text] {
+      width: 50%;
+
+      input:hover,
+      input:focus-visible,
+      input:focus {
+        z-index: 1;
+        + label { z-index: 1; }
+      }
+
+      &:first-of-type {
+        margin-right: -1px;
+
+        input {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+
+      &:last-of-type input {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+
+  [data-fs-price-range-absolute-values] {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--fs-spacing-2);
+    color: var(--fs-price-range-absolute-values-text-color);
+  }
+}

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

@@ -0,0 +1,107 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { DiscountBadge } from 'src/components/ui/Badge'
+import ProductTitle from '.'
+import { TokenTable, TokenRow } from 'src/../.storybook/components'
+
+<Meta
+  title="Molecules/ProductTitle"
+  component={ProductTitle}
+  argTypes={{
+    title: {
+      control: { type: 'radio' },
+      options: [
+        '<h1>Apple Magic Mouse</h1>',
+        '<h2>Apple Magic Mouse</h2>',
+        '<h3>Apple Magic Mouse</h3>',
+      ],
+      mapping: {
+        '<h1>Apple Magic Mouse</h1>': <h1>Apple Magic Mouse</h1>,
+        '<h2>Apple Magic Mouse</h2>': <h2>Apple Magic Mouse</h2>,
+        '<h3>Apple Magic Mouse</h3>': <h3>Apple Magic Mouse</h3>,
+      },
+      defaultValue: '<h1>Apple Magic Mouse</h1>',
+    },
+    label: {
+      control: { type: 'radio' },
+      options: [
+        '<DiscountBadge listPrice={100} spotPrice={90} big />',
+        '<DiscountBadge listPrice={100} spotPrice={70} big />',
+        '<DiscountBadge listPrice={100} spotPrice={10} big />',
+      ],
+      mapping: {
+        '<DiscountBadge listPrice={100} spotPrice={90} big />': (
+          <DiscountBadge listPrice={100} spotPrice={90} big />
+        ),
+        '<DiscountBadge listPrice={100} spotPrice={70} big />': (
+          <DiscountBadge listPrice={100} spotPrice={70} big />
+        ),
+        '<DiscountBadge listPrice={100} spotPrice={10} big />': (
+          <DiscountBadge listPrice={100} spotPrice={10} big />
+        ),
+      },
+      defaultValue: '<DiscountBadge listPrice={100} spotPrice={90} big />',
+    },
+    refNumber: {
+      defaultValue: '99995945',
+    },
+  }}
+/>
+
+export const Template = (args) => <ProductTitle {...args} />
+
+<header>
+
+# Product Title
+
+The product title that is commonly used on Product Details Page (PDP).
+
+</header>
+
+## Usage
+
+`import ProductTitle from '../components/ui/ProductTitle'`
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-product-title-text-size"
+    value="var(--fs-text-size-title-product)"
+  />
+  <TokenRow
+    token="--fs-product-title-text-weight"
+    value="var(--fs-text-weight-regular)"
+  />
+  <TokenRow token="--fs-product-title-line-height" value="1.12" />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Addendum
+
+<TokenTable>
+  <TokenRow
+    token="--fs-product-title-addendum-margin-top"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenRow
+    token="--fs-product-title-addendum-color"
+    value="var(--fs-color-text-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-product-title-addendum-size"
+    value="var(--fs-text-size-1)"
+  />
+  <TokenRow
+    token="--fs-product-title-addendum-line-height"
+    value="1.7"
+  />
+</TokenTable>

package/src/components/ui/ProductTitle/ProductTitle.tsx

@@ -0,0 +1,11 @@
+import { memo } from 'react'
+import type { ProductTitleProps } from '@faststore/ui'
+import { ProductTitle as UIProductTitle } from '@faststore/ui'
+
+import styles from './product-title.module.scss'
+
+function ProductTitle({ ...otherProps }: ProductTitleProps) {
+  return <UIProductTitle className={styles.fsProductTitle} {...otherProps} />
+}
+
+export default memo(ProductTitle)

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

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

package/src/components/ui/ProductTitle/product-title.module.scss

@@ -0,0 +1,48 @@
+@import "src/styles/scaffold";
+
+.fs-product-title {
+  // --------------------------------------------------------
+  // Design Tokens for ProductTitle
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-product-title-text-size            : var(--fs-text-size-title-product);
+  --fs-product-title-text-weight          : var(--fs-text-weight-regular);
+  --fs-product-title-line-height          : 1.12;
+
+  --fs-product-title-addendum-margin-top  : var(--fs-spacing-3);
+  --fs-product-title-addendum-color       : var(--fs-color-text-light);
+  --fs-product-title-addendum-size        : var(--fs-text-size-1);
+  --fs-product-title-addendum-line-height : 1.7;
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  [data-fs-product-title-header] {
+    display: flex;
+    column-gap: var(--fs-spacing-2);
+    justify-content: space-between;
+
+    // Title prop
+    &:first-child {
+      font-size: var(--fs-product-title-text-size);
+      font-weight: var(--fs-product-title-text-weight);
+      line-height: var(--fs-product-title-line-height);
+    }
+
+    [data-fs-badge] { white-space: nowrap; }
+
+    @include media(">=tablet", "<notebook") {
+      flex-direction: column;
+      row-gap: var(--fs-spacing-3);
+    }
+  }
+
+  [data-fs-product-title-addendum] {
+    margin-top: var(--fs-product-title-addendum-margin-top);
+    font-size: var(--fs-product-title-addendum-size);
+    line-height: var(--fs-product-title-addendum-line-height);
+    color: var(--fs-product-title-addendum-color);
+  }
+}