Sku Selector

The SkuSelector component is mainly used in Product Details Pages (PDPs) to display all the available variants for a given product.

Overview

This is a product related component, we recommend testing it using a product mock.

Example

Code

Color: Black

Size: 40

Color: Blue

Import

Import the component from @faststore/ui


_10import { SkuSelector } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:


_10@import '@faststore/ui/src/components/molecules/SkuSelector/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

Example

Code

Color: Black

Props

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).
id	`string`	ID of the current instance of the component.
availableVariations*	`Record<string, SkuOption[]>`	SKU options that should be rendered.
skuPropertyName*	`string`	Name of the SKU property that this selector is relative to.
activeVariations*	`Record<string, string>`	Currently active variation's value.
variant	`"label" \| "image" \| "color"`	Optional variant type, when is not passed the type is inferred based on options properties
linkProps	`Partial<LinkProps<LinkElementType>>`	Extends all Link Props.
getItemHref	`(option: SkuOption) => string`	Optional function to determines the href string.
slugsMap*	`Record<string, string>`	Maps property value combinations to their respective SKU's slug
ImageComponent	`FunctionComponent<{ src: string; alt: string; }>`	Function that returns a React component that will be used to render images.	`({ src, alt, ...otherProps }) => <img src={src} alt={alt} {...otherProps} />`

SkuOptions

Name	Type	Description
alt	`string`	Alternative text description of the image.
src	`string`	Label to describe the option when selected. This is mandatory if you want to use the `image` variant.
label*	`string`	Current value for this option.
value*	`string`	Specifies that this option should be disabled.
disabled	`boolean`	Specifies that this option should be disabled.
hexColor	`string`	Hex color code for this option. This is mandatory if you want to use the `color` variant.

Design Tokens

Local token	Default value/Global token linked
`--fs-sku-selector-row-gap`	`var(--fs-spacing-2)`
`--fs-sku-selector-column-gap`	`var(--fs-sku-selector-row-gap)`
`--fs-sku-selector-text-size`	`var(--fs-text-size-1)`

Nested Elements

Option

Local token	Default value/Global token linked
`--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-transition-timing`	`var(--fs-transition-timing)`
`--fs-sku-selector-option-transition-function`	`ease`

`--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)`

Variants

Image

Example

Code

Color: Black

Local token	Default value/Global token linked
`--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)`

Label

Example

Code

Size: 40

Color

Example

Code

Color: Blue

Local token	Default value/Global token linked
`--fs-sku-selector-color-width`	`var(--fs-sku-selector-image-width)`
`--fs-sku-selector-color-height`	`var(--fs-sku-selector-color-width)`
`--fs-sku-selector-color-border-radius`	`var(--fs-sku-selector-image-border-radius)`

Customization

data-fs-sku-selector

data-fs-sku-selector-variant= "image" | "label" | "color"

data-fs-sku-selector-title

data-fs-sku-selector-list

data-fs-sku-selector-disabled="true"

data-fs-sku-selector-checked="true"

data-fs-sku-selector-option

data-fs-sku-selector-option-image

data-fs-sku-selector-option-color