@faststore/core 22.42.6

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

@@ -0,0 +1,246 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+
+import QuantitySelector from '.'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Molecules/QuantitySelector"
+  component={QuantitySelector}
+  argTypes={{
+    max: {
+      type: {
+        name: 'number',
+      },
+      defaultValue: 10,
+    },
+    min: {
+      type: {
+        name: 'number',
+      },
+      defaultValue: 1,
+    },
+    initial: {
+      type: {
+        name: 'number',
+      },
+      defaultValue: 5,
+    },
+    disabled: {
+      type: {
+        name: 'boolean',
+      },
+      defaultValue: false,
+    },
+  }}
+/>
+
+export const Template = (args) => <QuantitySelector {...args} />
+
+<header>
+
+# Quantity Selector
+
+It's a component that shows a quantity selector, commonly used to add a product to the shopping cart.
+
+</header>
+
+## Overview
+
+The `QuantitySelector` component uses [FastStore UI QuantitySelector](https://www.faststore.dev/reference/ui/molecules/QuantitySelector) as base.
+
+<Canvas>
+  <Story name="Overview-QuantitySelector">{Template.bind({})}</Story>
+  <Story
+    name="Overview-Disabled"
+    args={{
+      disabled: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+`import QuantitySelector from '../components/sections/QuantitySelector'`
+
+<Canvas>
+  <Story name="QuantitySelector">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="QuantitySelector" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-qty-selector-width"
+    value="calc(var(--fs-control-tap-size) * 2.7)"
+  />
+  <TokenRow
+    token="--fs-qty-selector-height"
+    value="calc(var(--fs-control-tap-size) + (var(--fs-qty-selector-border-width) * 2))"
+  />
+  <TokenDivider />
+  <TokenRow token="--fs-qty-selector-shadow" value="none" />
+  <TokenRow
+    token="--fs-qty-selector-shadow-hover"
+    value="0 0 0 var(--fs-border-width) var(--fs-border-color-active)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-qty-selector-bkg-color"
+    value="var(--fs-color-body-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-qty-selector-bkg-color-hover"
+    value="var(--fs-qty-selector-bkg-color)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-qty-selector-border-radius"
+    value="var(--fs-border-radius)"
+  />
+  <TokenRow
+    token="--fs-qty-selector-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-qty-selector-border-width-hover"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-qty-selector-border-color"
+    value="var(--fs-border-color)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-qty-selector-border-color-hover"
+    value="var(--fs-border-color-active)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-qty-selector-transition-function"
+    value="var(--fs-transition-function)"
+  />
+  <TokenRow
+    token="--fs-qty-selector-transition-property"
+    value="var(--fs-transition-property)"
+  />
+  <TokenRow
+    token="--fs-qty-selector-transition-timing  "
+    value="var(--fs-transition-timing)"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Text
+
+<TokenTable>
+  <TokenRow
+    token="--fs-qty-selector-text-size"
+    value="var(--fs-text-size-base)"
+  />
+  <TokenRow
+    token="--fs-qty-selector-text-color"
+    value="var(--fs-color-text)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-qty-selector-text-color-hover"
+    value="var(--fs-qty-selector-text-color)"
+    isColor
+  />
+</TokenTable>
+
+### Icon
+
+<TokenTable>
+  <TokenRow
+    token="--fs-qty-selector-icon-color"
+    value="var(--fs-color-link)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-qty-selector-icon-color-hover"
+    value="var(--fs-border-color-active)"
+    isColor
+  />
+</TokenTable>
+
+### Button
+
+<TokenTable>
+  <TokenRow token="--fs-qty-selector-button-shadow" value="none" />
+  <TokenRow token="--fs-qty-selector-button-shadow-hover" value="none" />
+  <TokenRow token="--fs-qty-selector-button-bkg-color" value="transparent" />
+  <TokenRow
+    token="--fs-qty-selector-button-bkg-color-hover"
+    value="var(--fs-color-primary-bkg-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-qty-selector-button-bkg-color-focus"
+    value="var(--fs-qty-selector-button-bkg-color-hover)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-qty-selector-button-border-radius"
+    value="var(--fs-qty-selector-border-radius)"
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### Disabled
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      disabled: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-qty-selector-disabled-bkg-color"
+    value="var(--fs-color-disabled-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-qty-selector-disabled-text-color"
+    value="var(--fs-color-disabled-text)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-qty-selector-disabled-icon-color"
+    value="var(--fs-border-color-light-disabled)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-qty-selector-disabled-border-color"
+    value="var(--fs-qty-selector-disabled-bkg-color)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-qty-selector-disabled-button-bkg-color"
+    value="var(--fs-qty-selector-button-bkg-color-hover)"
+    isColor
+  />
+</TokenTable>

package/src/components/ui/QuantitySelector/QuantitySelector.tsx

@@ -0,0 +1,103 @@
+import { QuantitySelector as UIQuantitySelector } from '@faststore/ui'
+import { memo, useEffect, useState } from 'react'
+
+import Icon from 'src/components/ui/Icon'
+
+import styles from './quantity-selector.module.scss'
+
+interface QuantitySelectorProps {
+  /**
+   * The maximum value the quantity selector can receive
+   */
+  max?: number
+  /**
+   * The minimum value the quantity selector can receive
+   */
+  min?: number
+  /**
+   * The initial value for quantity selector
+   */
+  initial?: number
+  /**
+   * Specifies that the whole quantity selector component should be disabled.
+   */
+  disabled?: boolean
+  /**
+   * Event emitted when value is changed
+   */
+  onChange?: (value: number) => void
+}
+
+export function QuantitySelector({
+  max,
+  min = 1,
+  initial,
+  disabled = false,
+  onChange,
+}: QuantitySelectorProps) {
+  const [quantity, setQuantity] = useState<number>(initial ?? min)
+  const isLeftDisabled = quantity === min
+  const isRightDisabled = quantity === max
+
+  const changeQuantity = (increaseValue: number) => {
+    const quantityValue = validateQuantityBounds(quantity + increaseValue)
+
+    onChange?.(quantityValue)
+    setQuantity(quantityValue)
+  }
+
+  const increase = () => changeQuantity(1)
+
+  const decrease = () => changeQuantity(-1)
+
+  function validateQuantityBounds(n: number): number {
+    const maxValue = min ? Math.max(n, min) : n
+
+    return max ? Math.min(maxValue, max) : maxValue
+  }
+
+  function validateInput(e: React.FormEvent<HTMLInputElement>) {
+    const val = e.currentTarget.value
+
+    if (!Number.isNaN(Number(val))) {
+      setQuantity(() => {
+        const quantityValue = validateQuantityBounds(Number(val))
+
+        onChange?.(quantityValue)
+
+        return quantityValue
+      })
+    }
+  }
+
+  useEffect(() => {
+    initial && setQuantity(initial)
+  }, [initial])
+
+  return (
+    <UIQuantitySelector
+      data-fs-quantity-selector={disabled ? 'disabled' : 'true'}
+      className={styles.fsQuantitySelector}
+      quantity={quantity}
+      leftButtonProps={{
+        onClick: decrease,
+        disabled: isLeftDisabled || disabled,
+        icon: <Icon name="Minus" width={16} height={16} weight="bold" />,
+        testId: 'store-quantity-selector-left',
+      }}
+      rightButtonProps={{
+        onClick: increase,
+        disabled: isRightDisabled || disabled,
+        icon: <Icon name="Plus" width={16} height={16} weight="bold" />,
+        testId: 'store-quantity-selector-right',
+      }}
+      inputProps={{
+        onChange: validateInput,
+        readOnly: false,
+        disabled,
+      }}
+    />
+  )
+}
+
+export default memo(QuantitySelector)

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

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

package/src/components/ui/QuantitySelector/quantity-selector.module.scss

@@ -0,0 +1,160 @@
+@import "src/styles/scaffold";
+
+.fs-quantity-selector {
+  // --------------------------------------------------------
+  // Design Tokens for Quantity Selector
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-qty-selector-width                     : calc(var(--fs-control-tap-size) * 2.7);
+  --fs-qty-selector-height                    : calc(var(--fs-control-tap-size) + (var(--fs-qty-selector-border-width) * 2));
+
+  --fs-qty-selector-shadow                    : none;
+  --fs-qty-selector-shadow-hover              : 0 0 0 var(--fs-border-width) var(--fs-border-color-active);
+
+  --fs-qty-selector-bkg-color                 : var(--fs-color-body-bkg);
+  --fs-qty-selector-bkg-color-hover           : var(--fs-qty-selector-bkg-color);
+
+  --fs-qty-selector-text-size                 : var(--fs-text-size-base);
+  --fs-qty-selector-text-color                : var(--fs-color-text);
+  --fs-qty-selector-text-color-hover          : var(--fs-qty-selector-text-color);
+
+  --fs-qty-selector-icon-color                : var(--fs-color-link);
+  --fs-qty-selector-icon-color-hover          : var(--fs-border-color-active);
+
+  --fs-qty-selector-border-radius             : var(--fs-border-radius);
+  --fs-qty-selector-border-width              : var(--fs-border-width);
+  --fs-qty-selector-border-width-hover        : var(--fs-border-width);
+  --fs-qty-selector-border-color              : var(--fs-border-color);
+  --fs-qty-selector-border-color-hover        : var(--fs-border-color-active);
+
+  --fs-qty-selector-button-shadow             : none;
+  --fs-qty-selector-button-shadow-hover       : none;
+  --fs-qty-selector-button-bkg-color          : transparent;
+  --fs-qty-selector-button-bkg-color-hover    : var(--fs-color-primary-bkg-light);
+  --fs-qty-selector-button-bkg-color-focus    : var(--fs-qty-selector-button-bkg-color-hover);
+  --fs-qty-selector-button-border-radius      : var(--fs-qty-selector-border-radius);
+
+  --fs-qty-selector-transition-function       : var(--fs-transition-function);
+  --fs-qty-selector-transition-property       : var(--fs-transition-property);
+  --fs-qty-selector-transition-timing         : var(--fs-transition-timing);
+
+  // Disabled properties
+  --fs-qty-selector-disabled-bkg-color        : var(--fs-color-disabled-bkg);
+  --fs-qty-selector-disabled-text-color       : var(--fs-color-disabled-text);
+  --fs-qty-selector-disabled-icon-color       : var(--fs-border-color-light-disabled);
+  --fs-qty-selector-disabled-border-color     : var(--fs-qty-selector-disabled-bkg-color);
+  --fs-qty-selector-disabled-button-bkg-color : var(--fs-qty-selector-button-bkg-color-hover);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: var(--fs-qty-selector-width);
+  height: var(--fs-qty-selector-height);
+  border-radius: var(--fs-qty-selector-border-radius);
+  box-shadow: var(--fs-qty-selector-shadow);
+
+  [data-fs-icon] {
+    margin: 0;
+    line-height: 0;
+    color: var(--fs-qty-selector-icon-color);
+  }
+
+  [data-quantity-selector-input] {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    font-size: var(--fs-qty-selector-text-size);
+    color: var(--fs-qty-selector-text-color);
+    text-align: center;
+    background-color: var(--fs-qty-selector-bkg-color);
+    border: var(--fs-qty-selector-border-width) solid var(--fs-qty-selector-border-color);
+    border-radius: var(--fs-qty-selector-border-radius);
+    transition:
+      var(--fs-qty-selector-transition-property)
+      var(--fs-qty-selector-transition-timing)
+      var(--fs-qty-selector-transition-function);
+
+    @include input-focus-ring;
+  }
+
+  [data-quantity-selector-button] {
+    position: absolute;
+    min-width: var(--fs-control-tap-size);
+    height: 100%;
+    min-height: var(--fs-control-tap-size);
+    padding: var(--fs-spacing-1);
+    background-color: var(--fs-qty-selector-button-bkg-color);
+    border: 0;
+    border-radius: var(--fs-qty-selector-button-border-radius);
+
+    [data-fs-icon] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      border-radius: var(--fs-qty-selector-button-border-radius);
+      box-shadow: var(--fs-qty-selector-button-shadow);
+      transition:
+        var(--fs-qty-selector-transition-property)
+        var(--fs-qty-selector-transition-timing)
+        var(--fs-qty-selector-transition-function);
+    }
+
+    &:first-of-type { left: 0; }
+
+    &:last-of-type { right: 0; }
+
+    &:hover:not(:disabled) [data-fs-icon] {
+      background-color: var(--fs-qty-selector-button-bkg-color-hover);
+      box-shadow: var(--fs-qty-selector-button-shadow-hover);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+
+      [data-fs-icon] {
+        color: var(--fs-qty-selector-disabled-icon-color);
+      }
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      [data-fs-icon] {
+        @include focus-ring;
+
+        background-color: var(--fs-qty-selector-button-bkg-color-focus);
+      }
+    }
+  }
+
+  &:hover {
+    [data-quantity-selector-input]:not(:disabled):not(:focus) {
+      color: var(--fs-qty-selector-text-color-hover);
+      background-color: var(--fs-qty-selector-bkg-color-hover);
+      border-color: var(--fs-qty-selector-border-color-hover);
+      border-width: var(--fs-qty-selector-border-width-hover);
+      box-shadow: var(--fs-qty-selector-shadow-hover);
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-quantity-selector="disabled"] {
+    [data-quantity-selector-input] {
+      background-color: var(--fs-qty-selector-disabled-bkg-color);
+      border-color: var(--fs-qty-selector-disabled-border-color);
+    }
+    [data-quantity-selector-button]:hover [data-fs-icon] { background-color: transparent; }
+  }
+}