@faststore/ui 1.11.8 → 1.11.20

package/src/molecules/SkuSelector/SkuSelector.tsx

@@ -0,0 +1,106 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes, ChangeEventHandler } from 'react'
+import { Label, RadioGroup } from '../..'
+
+interface SkuProps {
+  /**
+   * Alternative text description of the image.
+   */
+  alt?: string
+  /**
+   * Image URL.
+   */
+  src?: string
+  /**
+   * Label to describe the option when selected.
+   */
+  label: string
+  /**
+   * Current value for this option.
+   */
+  value: string
+  /**
+   * Specifies that this option should be disabled.
+   */
+  disabled?: boolean
+}
+
+// TODO: Add the 'color' variant back once the store supports naturally handling color SKUs.
+type Variant = 'label' | 'image'
+
+export interface SkuSelectorProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * ID of the current instance of the component.
+   */
+  id?: string
+  /**
+   * Specify which variant the component should handle.
+   */
+  variant: Variant
+  /**
+   * SKU options that should be rendered.
+   */
+  options: SkuProps[]
+  /**
+   * Section label for the SKU selector.
+   */
+  label?: string
+  /**
+   * Currently active variation's value.
+   */
+  activeValue: string
+  /**
+   * Function to be triggered when SKU option change.
+   */
+  onChange?: ChangeEventHandler<HTMLInputElement>
+}
+
+const SkuSelector = forwardRef<HTMLDivElement, SkuSelectorProps>(
+  function SkuSelector(
+    {
+      id,
+      label,
+      variant,
+      onChange,
+      testId = 'store-sku-selector',
+      activeValue,
+      children,
+      ...otherProps
+    },
+    ref
+  ) {
+    const radioGroupId = id ? `-${id}` : ''
+
+    return (
+      <div
+        ref={ref}
+        data-fs-sku-selector
+        data-testid={testId}
+        data-fs-sku-selector-variant={variant}
+        {...otherProps}
+      >
+        {label && (
+          <Label data-fs-sku-selector-title>
+            {label}: <strong>{activeValue}</strong>
+          </Label>
+        )}
+        <RadioGroup
+          selectedValue={activeValue}
+          name={`sku-selector-${variant}${radioGroupId}`}
+          onChange={(e) => {
+            onChange?.(e)
+          }}
+        >
+          {children}
+        </RadioGroup>
+      </div>
+    )
+  }
+)
+
+export default SkuSelector

package/src/molecules/SkuSelector/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './SkuSelector'
+export type { SkuSelectorProps } from './SkuSelector'

package/src/molecules/SkuSelector/stories/SkuSelector.mdx

@@ -0,0 +1,24 @@
+import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
+
+import SkuSelector from '../SkuSelector'
+
+# SkuSelector
+
+<Canvas>
+  <Story id="molecules-skuselector--sku-selector" />
+</Canvas>
+
+## Props
+
+<ArgsTable of={ SkuSelector } />
+
+## CSS Selectors
+
+```css
+[data-fs-sku-selector] {
+}
+[data-fs-sku-selector-variant='(label|image)'] {
+}
+[data-fs-sku-selector-title] {
+}
+```

package/src/molecules/SkuSelector/stories/SkuSelector.stories.tsx

@@ -0,0 +1,52 @@
+import type { Story, Meta } from '@storybook/react'
+import React from 'react'
+import { RadioOption } from '../../..'
+
+import type { SkuSelectorProps } from '../SkuSelector'
+import Component from '../SkuSelector'
+import mdx from './SkuSelector.mdx'
+
+const SkuSelectorTemplate: Story<SkuSelectorProps> = ({ testId }) => {
+  const activeValue = 'Pink'
+  const options = [
+    { label: 'Color Pink', value: 'Pink' },
+    { label: 'Color White', value: 'White' },
+  ]
+  const variant = 'label'
+
+  return (
+    <Component
+      testId={testId}
+      variant={variant}
+      options={options}
+      activeValue={activeValue}
+      label='Color'
+    >
+      {options.map((option, index) => {
+        return (
+          <RadioOption
+            data-fs-sku-selector-option
+            key={String(index)}
+            label={option.label}
+            value={option.value}
+            checked={option.value === activeValue}
+          >
+            <span>{option.value}</span>
+          </RadioOption>
+        )
+      })}
+    </Component>
+  )
+}
+
+export const SkuSelector = SkuSelectorTemplate.bind({})
+SkuSelector.storyName = 'SkuSelector'
+
+export default {
+  title: 'Molecules/SkuSelector',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta