@faststore/ui 2.0.2-alpha.0 → 2.0.4-alpha.0

package/src/components/atoms/Radio/Radio.stories.mdx

@@ -0,0 +1,101 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { Radio, Label } from '@faststore/components'
+
+<Meta
+  title="Atoms/Radio"
+  component={Radio}
+  argTypes={{
+    disabled: {
+      type: {
+        name: 'boolean',
+      },
+      description: 'Disabled this input. <br/> `boolean`',
+      defaultValue: false,
+    },
+    testId: {
+      table: {
+        disable: true,
+      },
+    },
+  }}
+/>
+
+export const Template = (args) => (
+  <>
+    <Radio {...args} onChange={() => {}} />
+    <Label htmlFor="radio-default">Radio</Label>
+  </>
+)
+
+<header>
+
+# Radio
+
+Radios allow users to select one option from a set.
+
+</header>
+
+## Overview
+
+<Canvas>
+  <Story
+    name="overview-default-1"
+    args={{
+      id: 'overview-radio-default-1',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-default-2"
+    args={{
+      id: 'overview-radio-default-2',
+      checked: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-default-3"
+    args={{
+      id: 'overview-radio-default-3',
+      disabled: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-default-4"
+    args={{
+      id: 'overview-radio-default-4',
+      disabled: true,
+      checked: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+```jsx
+import Radio from '@faststore/ui'
+// Styles
+import '@faststore/ui/src/components/atoms/Radio/styles.scss'
+```
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      id: 'radio-default',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />

package/src/components/atoms/Radio/styles.scss

@@ -0,0 +1,108 @@
+[data-fs-radio] {
+  // --------------------------------------------------------
+  // Design Tokens for radio
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-radio-width                        : 1.25rem;
+  --fs-radio-height                       : var(--fs-radio-width);
+
+  --fs-radio-border-width                 : var(--fs-border-width);
+  --fs-radio-border-radius                : var(--fs-border-radius-circle);
+  --fs-radio-border-color                 : var(--fs-border-color);
+  --fs-radio-border-color-hover           : var(--fs-border-color-hover);
+
+  --fs-radio-transition                   : border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function);
+
+  --fs-radio-bkg-color-hover              : var(--fs-color-primary-bkg-light);
+  --fs-radio-shadow-hover                 : 0 0 0 var(--fs-radio-border-width) var(--fs-border-color-active);
+
+  // Knob
+  --fs-radio-knob-width                   : var(--fs-spacing-1);
+  --fs-radio-knob-height                  : var(--fs-radio-knob-width);
+  --fs-radio-knob-bkg-color               : var(--fs-color-body-bkg);
+  --fs-radio-knob-disabled-bkg-color      : var(--fs-color-neutral-5);
+
+  // Checked
+  --fs-radio-checked-bkg-color            : var(--fs-color-primary-bkg);
+  --fs-radio-checked-bkg-color-hover      : var(--fs-color-primary-bkg-hover);
+
+  // Disabled
+  --fs-radio-disabled-bkg-color           : var(--fs-color-disabled-bkg);
+  --fs-radio-disabled-border-width        : var(--fs-radio-border-width);
+  --fs-radio-disabled-border-color        : var(--fs-border-color-disabled);
+  --fs-radio-disabled-text-color          : var(--fs-color-disabled-text);
+
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--fs-radio-width);
+  height: var(--fs-radio-height);
+  cursor: pointer;
+  border: var(--fs-radio-border-width) solid var(--fs-radio-border-color);
+  border-radius: var(--fs-radio-border-radius);
+  outline: none;
+  transition: var(--fs-radio-transition);
+  appearance: none;
+
+  @include input-focus-ring;
+
+  &::before {
+    width: var(--fs-radio-knob-width);
+    height: var(--fs-radio-knob-height);
+    pointer-events: none;
+    content: "";
+    background-color: var(--fs-radio-knob-bkg-color);
+    border-radius: var(--fs-radio-border-radius);
+    opacity: 0;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--fs-radio-bkg-color-hover);
+  }
+
+  &:hover:not(:disabled):not(:focus-visible):not(:focus) {
+    border-color: var(--fs-radio-border-color-hover);
+    box-shadow: var(--fs-radio-shadow-hover);
+  }
+
+  &:checked {
+    background-color: var(--fs-radio-checked-bkg-color);
+    border: none;
+
+    &::before {
+      opacity: 1;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--fs-radio-checked-bkg-color-hover);
+    }
+
+    &:hover:not(:disabled):not(:focus-visible):not(:focus) {
+      box-shadow: none;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--fs-radio-disabled-bkg-color);
+    border: var(--fs-radio-disabled-border-width) solid var(--fs-radio-disabled-border-color);
+
+    &::before {
+      background-color: var(--fs-radio-knob-disabled-bkg-color);
+    }
+
+    &:checked {
+      &::before {
+        background-color: var(--fs-radio-knob-disabled-bkg-color);
+      }
+    }
+
+    + label {
+      color: var(--fs-radio-disabled-text-color);
+      cursor: not-allowed;
+    }
+  }
+};

package/src/{atoms → components/atoms}/Select/stories/Select.stories.tsx

@@ -1,7 +1,7 @@
 import type { Story } from '@storybook/react'
 import React from 'react'
 
-import type { ComponentArgTypes } from '../../../typings/utils'
+import type { ComponentArgTypes } from '../../../../typings/utils'
 import type { SelectProps } from '../Select'
 import Component from '../Select'
 import mdx from './Select.mdx'

package/src/{atoms → components/atoms}/Slider/stories/Slider.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, Story } from '@storybook/react'
 import React from 'react'
 
-import type { ComponentArgTypes } from '../../../typings/utils'
+import type { ComponentArgTypes } from '../../../../typings/utils'
 import type { SliderProps } from '../Slider'
 import Component from '../Slider'
 import mdx from './Slider.mdx'

package/src/{atoms → components/atoms}/TextArea/stories/TextArea.stories.tsx

@@ -4,7 +4,7 @@ import type { Story, Meta } from '@storybook/react'
 import Component from '../TextArea'
 import type { TextAreaProps } from '../TextArea'
 import mdx from './TextArea.mdx'
-import type { ComponentArgTypes } from '../../../typings/utils'
+import type { ComponentArgTypes } from '../../../../typings/utils'
 
 const TextAreaTemplate: Story<TextAreaProps> = (props) => (
   <Component {...props} aria-label="Textarea" />

package/src/{molecules → components/molecules}/Accordion/AccordionButton.tsx

@@ -1,12 +1,12 @@
-import type { ButtonHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
-import Button from '../../atoms/Button'
 import { useAccordion } from './Accordion'
 import { useAccordionItem } from './AccordionItem'
 
-export interface AccordionButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
+import { Button } from '@faststore/components'
+import type { ButtonProps } from '@faststore/components'
+
+export interface AccordionButtonProps extends ButtonProps {
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */

package/src/{molecules → components/molecules}/Accordion/AccordionItem.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, forwardRef, createContext } from 'react'
 import type { ElementType, FC, HTMLAttributes, ReactElement } from 'react'
-import type { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../../typings'
+import type { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../../../typings'
 
 interface AccordionItemContext {
   index: number

package/src/{molecules → components/molecules}/Accordion/stories/Accordion.stories.tsx

@@ -7,7 +7,7 @@ import AccordionButton from '../AccordionButton'
 import AccordionPanel from '../AccordionPanel'
 import type { AccordionProps } from '..'
 import mdx from './Accordion.mdx'
-import { Icon } from '../../..'
+import { Icon } from '../../../../'
 
 const Caret = () => (
   <svg

package/src/{molecules → components/molecules}/AggregateRating/stories/AggregateRating.stories.tsx

@@ -2,7 +2,7 @@ import type { Story } from '@storybook/react'
 import type { FC } from 'react'
 import React from 'react'
 
-import type { ComponentArgTypes } from '../../../typings/utils'
+import type { ComponentArgTypes } from '../../../../typings/utils'
 import type { AggregateRatingProps, RatingItemProps } from '../AggregateRating'
 import Component from '../AggregateRating'
 import mdx from './AggregateRating.mdx'

package/src/{molecules → components/molecules}/Alert/stories/Alert.stories.tsx

@@ -3,9 +3,9 @@ import React from 'react'
 
 import type { AlertProps } from '../Alert'
 import Component from '../Alert'
-import ShoppingCartIcon from '../../../atoms/Icon/stories/assets/ShoppingCart'
+import { ShoppingCart } from '../../../../assets'
 import mdx from './Alert.mdx'
-import { Icon } from '../../..'
+import { Icon } from '../../../../'
 
 const AlertTemplate: Story<AlertProps> = ({ children }) => (
   <Component>{children}</Component>
@@ -20,7 +20,7 @@ export const AlertWithIcon = AlertTemplate.bind({})
 AlertWithIcon.args = {
   children: (
     <>
-      <Icon component={<ShoppingCartIcon />} />
+      <Icon component={<ShoppingCart />} />
       <span>Alert</span>
     </>
   ),

package/src/{molecules → components/molecules}/Banner/stories/Banner.stories.tsx

@@ -6,7 +6,7 @@ import BannerImage from '../BannerImage'
 import BannerContent from '../BannerContent'
 import BannerLink from '../BannerLink'
 import type { BannerProps } from '../Banner'
-import { Icon } from '../../..'
+import { Icon } from '../../../../'
 import mdx from './Banner.mdx'
 
 const RightArrow = () => (

package/src/{molecules → components/molecules}/Breadcrumb/stories/Breadcrumb.stories.tsx

@@ -1,7 +1,7 @@
 import type { Story } from '@storybook/react'
 import React from 'react'
 
-import type { ComponentArgTypes } from '../../../typings/utils'
+import type { ComponentArgTypes } from '../../../../typings/utils'
 import type { BreadcrumbProps } from '../Breadcrumb'
 import Component from '../Breadcrumb'
 import mdx from './Breadcrumb.mdx'

package/src/{molecules → components/molecules}/Bullets/Bullets.tsx

@@ -1,7 +1,7 @@
 import type { HTMLAttributes, MouseEvent } from 'react'
 import React, { forwardRef, useMemo } from 'react'
 
-import Button from '../../atoms/Button'
+import { Button } from '@faststore/components'
 
 export interface BulletsProps
   extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role'> {

package/src/{molecules → components/molecules}/Bullets/stories/Bullets.stories.tsx

@@ -1,7 +1,7 @@
 import type { Story } from '@storybook/react'
 import React, { useEffect, useState } from 'react'
 
-import type { ComponentArgTypes } from '../../../typings/utils'
+import type { ComponentArgTypes } from '../../../../typings/utils'
 import type { BulletsProps } from '../Bullets'
 import Component from '../Bullets'
 import mdx from './Bullets.mdx'

package/src/{molecules → components/molecules}/Card/stories/Card.stories.tsx

@@ -1,14 +1,14 @@
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
 import React from 'react'
 
 // Atoms
-import Icon from '../../../atoms/Icon'
+import { Icon } from '@faststore/components'
 // Card components
+import type { CardProps } from '../Card'
 import CardComponent from '../Card'
-import CardImage from '../CardImage'
-import CardContent from '../CardContent'
 import CardActions from '../CardActions'
-import type { CardProps } from '../Card'
+import CardContent from '../CardContent'
+import CardImage from '../CardImage'
 import mdx from './Card.mdx'
 
 const RightArrow = () => (

package/src/{molecules → components/molecules}/Carousel/Carousel.tsx

@@ -10,9 +10,9 @@ import type { SwipeableProps } from 'react-swipeable'
 
 import { RightArrowIcon, LeftArrowIcon } from './Arrows'
 import CarouselItem from './CarouselItem'
-import useSlider from '../../hooks/useSlider/useSlider'
+import useSlider from '../../../hooks/useSlider/useSlider'
 import Bullets from '../Bullets'
-import IconButton from '../IconButton'
+import { IconButton } from '../../../index'
 
 const createTransformValues = (infinite: boolean, totalItems: number) => {
   const transformMap: Record<number, number> = {}

package/src/{molecules → components/molecules}/Carousel/CarouselItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import type { CSSProperties, PropsWithChildren, HTMLAttributes } from 'react'
-import type { SliderState } from '../../hooks/useSlider/useSlider'
+import type { SliderState } from '../../../hooks/useSlider/useSlider'
 
 import useSlideVisibility from './hooks/useSlideVisibility'
 

package/src/{molecules → components/molecules}/Carousel/stories/Carousel.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { Story } from '@storybook/react'
 
-import type { ComponentArgTypes } from '../../../typings/utils'
+import type { ComponentArgTypes } from '../../../../typings/utils'
 import Component from '../Carousel'
 import type { CarouselProps } from '../Carousel'
 import mdx from './Carousel.mdx'

package/src/{molecules → components/molecules}/CartItem/stories/CartItem.stories.tsx

@@ -8,7 +8,7 @@ import CartItem, {
   CartItemSummary,
   CartItemTitle,
 } from '../'
-import { Button, Price, QuantitySelector } from '../../../'
+import { Button, Price, QuantitySelector } from '../../../../'
 import mdx from './CartItem.mdx'
 
 import type { Meta, Story } from '@storybook/react'

package/src/components/molecules/CheckboxField/CheckboxField.stories.mdx

@@ -0,0 +1,38 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { CheckboxField } from '@faststore/components'
+
+<Meta title="Molecules/CheckboxField" component={CheckboxField} argTypes={{}} />
+
+export const Template = (args) => (
+  <CheckboxField id="checkbox-field" label="CheckboxField" />
+)
+
+<header>
+
+# CheckboxField
+
+CheckboxField is composed of a Checkbox input and its corresponding Label. It allows users to select one option from a set.
+
+</header>
+
+## Usage
+
+```jsx
+import CheckboxField from '@faststore/ui'
+// Styles
+import '@faststore/ui/src/components/molecules/CheckboxField/styles.scss'
+```
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      id: 'checkbox-default',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />

package/src/components/molecules/CheckboxField/styles.scss

@@ -0,0 +1,12 @@
+[data-fs-checkbox-field] {
+  // --------------------------------------------------------
+  // Design Tokens for Checkbox Field
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-checkbox-field-gap : var(--fs-spacing-1);
+
+  display: flex;
+  align-items: center;
+  column-gap: var(--fs-checkbox-field-gap);
+};