@faststore/ui 2.0.3-alpha.0 → 2.0.5-alpha.0

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

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react'
 import type { Meta, Story } from '@storybook/react'
 
 import { Caret } from './assets/Caret'
-import Button from '../../../atoms/Button'
+import { Button } from '@faststore/components'
 import type { DropdownProps } from '..'
 import Dropdown, { DropdownButton, DropdownItem, DropdownMenu } from '..'
 import mdx from './Dropdown.mdx'

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

@@ -1,10 +1,11 @@
 import type { Story } from '@storybook/react'
 import React, { useState } from 'react'
 
-import { Button, Checkbox, Input, Label } from '../../..'
+import { Button, Input } from '../../../../'
 import type { FormProps } from '../Form'
 import Component from '../Form'
 import mdx from './Form.mdx'
+import { Checkbox, Label } from '@faststore/components'
 
 const FormTemplate: Story<FormProps> = ({ testId }) => {
   const [name, setName] = useState<string>()

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

@@ -1,8 +1,7 @@
+import type { HTMLAttributes, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
-import type { HTMLAttributes } from 'react'
-import type { ReactNode } from 'react'
 
-import Icon from '../../atoms/Icon'
+import { Icon } from '@faststore/components'
 
 export interface GiftProps extends HTMLAttributes<HTMLDivElement> {
   /**

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

@@ -1,7 +1,7 @@
 import type { Story, Meta } from '@storybook/react'
 import React, { useMemo } from 'react'
 
-import Badge from '../../../atoms/Badge/Badge'
+import Badge from '@faststore/components'
 import Price from '../../../atoms/Price/Price'
 // Gift components
 import GiftComponent from '../Gift'

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

@@ -0,0 +1,47 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { IconButton } from '@faststore/components'
+import { ShoppingCart } from '../../../assets'
+
+<Meta
+  title="Molecules/IconButton"
+  component={IconButton}
+  argTypes={{
+    variant: {
+      options: ['primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'Specifies the component color variant.',
+    },
+  }}
+/>
+
+export const Template = ({ args }) => (
+  <IconButton icon={<ShoppingCart />} aria-label="Buy" />
+)
+
+<header>
+
+# IconButton
+
+</header>
+
+## Usage
+
+```jsx
+import { IconButton } from '@faststore/ui'
+// Styles
+import '@faststore/ui/src/components/atoms/Button/styles.scss'
+```
+
+<Canvas>
+  <Story
+    name="default"
+    args={{ id: 'icon-button-default', variant: 'secondary' }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+This component inherits [Button](?path=/docs/atoms-button--button#css-selectors) css selectors & styles.

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

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 
-import Button from '../../atoms/Button'
-import type { ButtonProps } from '../../atoms/Button'
+import { Button } from '@faststore/components'
+import type { ButtonProps } from '@faststore/components'
 import Spinner from '../../atoms/Spinner'
 
 export interface LoadingButtonProps extends ButtonProps {
@@ -21,12 +21,7 @@ const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
     ref
   ) {
     return (
-      <Button
-        ref={ref}
-        data-fs-loading-button
-        testId={testId}
-        {...otherProps}
-      >
+      <Button ref={ref} data-fs-loading-button testId={testId} {...otherProps}>
         {loading ? <Spinner /> : children}
       </Button>
     )

package/src/{molecules → components/molecules}/LoadingButton/stories/LoadingButton.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 { LoadingButtonProps } from '../LoadingButton'
 import Component from '../LoadingButton'
 import mdx from './LoadingButton.mdx'

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

@@ -7,9 +7,9 @@ import type {
 import React from 'react'
 import { createPortal } from 'react-dom'
 
-import Overlay from '../../atoms/Overlay'
-import ModalContent from './ModalContent'
+import { Overlay } from '@faststore/components'
 import type { ModalContentProps } from './ModalContent'
+import ModalContent from './ModalContent'
 
 export interface ModalProps extends ModalContentProps {
   /**
@@ -67,7 +67,6 @@ const Modal = ({
   return isOpen
     ? createPortal(
         <Overlay
-          data-modal-overlay
           onClick={handleBackdropClick}
           onKeyDown={handleBackdropKeyDown}
         >

package/src/{molecules → components/molecules}/Modal/stories/Modal.mdx

@@ -15,6 +15,4 @@ import Modal from '../Modal'
 
 ```css
 [data-fs-modal-content] {}
-
-[data-modal-overlay] {}
 ```

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

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react'
 import type { Meta, Story } from '@storybook/react'
 
 import type { ModalProps } from '..'
-import Button from '../../../atoms/Button'
+import { Button } from '@faststore/components'
 import Component from '../Modal'
 import mdx from './Modal.mdx'
 

package/src/{molecules → components/molecules}/PriceRange/stories/PriceRange.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 { PriceRangeProps } from '../PriceRange'
 import Component from '../PriceRange'
 import mdx from './PriceRange.mdx'

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

@@ -3,8 +3,7 @@ import React from 'react'
 
 // Atoms
 import Price from '../../../atoms/Price'
-import Badge from '../../../atoms/Badge'
-import Button from '../../../atoms/Button'
+import { Badge, Button } from '@faststore/components'
 // Card components
 import ProductCardComponent from '../ProductCard'
 import ProductCardImage from '../ProductCardImage'

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

@@ -4,12 +4,12 @@ import React from 'react'
 import type { ProductTitleProps } from '../ProductTitle'
 import Component from '../ProductTitle'
 import mdx from './ProductTitle.mdx'
-import Badge from '../../../atoms/Badge'
+import Badge from '@faststore/components'
 
 const ProductTitleTemplate: Story<ProductTitleProps> = () => (
-  <Component 
+  <Component
     title={<h1>Apple Magic Mouse</h1>}
-    refNumber='99995945'
+    refNumber="99995945"
     label={<Badge>90%</Badge>}
   />
 )

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

@@ -3,8 +3,8 @@ import React, { forwardRef } from 'react'
 
 import type { InputProps } from '../../atoms/Input'
 import Input from '../../atoms/Input'
-import type { IconButtonProps } from '../IconButton'
-import IconButton from '../IconButton'
+import type { IconButtonProps } from '../../../index'
+import { IconButton } from '../../../index'
 
 export interface QuantitySelectorProps
   extends InputHTMLAttributes<HTMLDivElement> {

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

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

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

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

package/src/{molecules → components/molecules}/RadioGroup/RadioOption.tsx

@@ -1,7 +1,7 @@
 import type { InputHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
-import Radio from '../../atoms/Radio'
+import { Radio } from '@faststore/components'
 import { useRadioGroup } from './useRadioGroup'
 
 export interface RadioOptionProps

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

@@ -4,10 +4,9 @@ import type {
   InputHTMLAttributes,
   ReactNode,
 } from 'react'
-import React, { useImperativeHandle, forwardRef, useRef } from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 
-import Button from '../../atoms/Button'
-import Icon from '../../atoms/Icon'
+import { Icon, Button } from '@faststore/components'
 import Input from '../../atoms/Input'
 import Form from '../Form'
 

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

@@ -5,7 +5,7 @@ import type { SearchInputProps } from '../SearchInput'
 import Component from '../SearchInput'
 import mdx from './SearchInput.mdx'
 import Icon from './assets/CustomIcon'
-import type { ComponentArgTypes } from '../../../typings/utils'
+import type { ComponentArgTypes } from '../../../../typings/utils'
 
 const DefaultTemplate: Story<SearchInputProps> = ({
   onSubmit,

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

@@ -1,6 +1,7 @@
+import type { ChangeEventHandler, HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import type { HTMLAttributes, ChangeEventHandler } from 'react'
-import { Label, RadioGroup } from '../..'
+import { Label } from '@faststore/components'
+import RadioGroup from '../RadioGroup'
 
 interface SkuProps {
   /**

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

@@ -1,6 +1,6 @@
 import type { Story, Meta } from '@storybook/react'
 import React from 'react'
-import { RadioOption } from '../../..'
+import { RadioOption } from '../../../../'
 
 import type { SkuSelectorProps } from '../SkuSelector'
 import Component from '../SkuSelector'

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

@@ -0,0 +1,31 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { Tag } from '@faststore/components'
+
+<Meta title="Molecules/Tag" component={Tag} argTypes={{}} />
+
+export const Template = (args) => (
+  <Tag label="Label" variant="warning" onClose={() => {}} />
+)
+
+<header>
+
+# Tag
+
+Tags are an interactive `Badge.` By default, its have a close button.
+
+</header>
+
+## Usage
+
+```jsx
+import { Tag } from '@faststore/ui'
+// Styles
+import '@faststore/ui/src/components/molecules/Tag/styles.scss'
+```
+
+<Canvas>
+  <Story name="default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="default" />

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

@@ -0,0 +1,99 @@
+[data-fs-tag] {
+  // --------------------------------------------------------
+  // Design Tokens for Tag
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-tag-text-color                     : var(--fs-color-text);
+
+  // Icon
+  --fs-tag-icon-size                      : var(--fs-spacing-3);
+  --fs-tag-icon-stroke-width              : var(--fs-spacing-4);
+
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  [data-fs-badge-wrapper] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-right: var(--fs-spacing-6);
+    line-height: initial;
+  }
+
+  [data-fs-tag-icon-button] {
+    position: absolute;
+    right: calc(-1 * var(--fs-spacing-1));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--fs-control-tap-size);
+    height: var(--fs-control-tap-size);
+    color: var(--fs-tag-text-color);
+
+    > span {
+      border: var(--fs-border-width) solid transparent;
+      border-radius: var(--fs-border-radius-circle);
+      padding: 3px;
+      transition: var(--fs-badge-transition-property) var(--fs-badge-transition-timing) var(--fs-badge-transition-function);
+    }
+
+    &:hover > span, &:focus > span {
+      filter: brightness(0.90);
+    }
+
+    &:focus > span {
+      border: var(--fs-border-width) solid var(--fs-tag-text-color);
+    }
+
+    svg {
+      width: var(--fs-tag-icon-size);
+      height: var(--fs-tag-icon-size);
+      stroke-width: var(--fs-tag-icon-stroke-width);
+      color: var(--fs-tag-text-color);
+      vertical-align: middle;
+    }
+  }
+
+  &[data-fs-badge-size="big"] [data-fs-tag-label] {
+    padding-top: 1px;
+    margin-right: var(--fs-spacing-4);
+  }
+
+  &[data-fs-badge-variant="warning"] {
+    [data-fs-tag-icon-button] > span {
+      background-color: var(--fs-badge-warning-bkg-color);
+    }
+  }
+
+  &[data-fs-badge-variant="highlighted"] {
+    [data-fs-tag-icon-button] > span {
+      background-color: var(--fs-badge-highlighted-bkg-color);
+    }
+  }
+
+  &[data-fs-badge-variant="neutral"] {
+    [data-fs-tag-icon-button] > span {
+      background-color: var(--fs-badge-neutral-bkg-color);
+    }
+  }
+
+  &[data-fs-badge-variant="info"] {
+    [data-fs-tag-icon-button] > span {
+      background-color: var(--fs-badge-info-bkg-color);
+    }
+  }
+
+  &[data-fs-badge-variant="danger"] {
+    [data-fs-tag-icon-button] > span {
+      background-color: var(--fs-badge-danger-bkg-color);
+    }
+  }
+
+  &[data-fs-badge-variant="success"] {
+    [data-fs-tag-icon-button] > span {
+      background-color: var(--fs-badge-success-bkg-color);
+    }
+  }
+}

package/src/{organisms → components/organisms}/Hero/stories/Hero.stories.tsx

@@ -5,7 +5,7 @@ import HeroComponent from '../Hero'
 import HeroImage from '../HeroImage'
 import HeroHeading from '../HeroHeading'
 import type { HeroProps } from '../Hero'
-import { Icon } from '../../..'
+import { Icon } from '../../../../'
 import mdx from './Hero.mdx'
 
 const RightArrow = () => (