@faststore/core 0.3.16 → 0.3.17

package/src/components/ui/Dropdown/DropdownMenu.stories.mdx

@@ -1,115 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Dropdown, { DropdownButton, DropdownMenu, DropdownItem } from '.'
-import Icon from '../Icon'
-
-import style from 'src/components/ui/Button/button.module.scss'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta title="Molecules/Dropdown/DropdownMenu" component={DropdownMenu} />
-
-export const Template = (args) => (
-  <Dropdown>
-    <DropdownButton
-      className={style.fsButton}
-      data-fs-button-variant="tertiary"
-    >
-      <Icon name="CaretDown" width="18" height="18" weight="bold" />
-      <span>Dropdown Menu</span>
-    </DropdownButton>
-    <DropdownMenu {...args}>
-      <DropdownItem>Dropdown Item 1</DropdownItem>
-      <DropdownItem>Dropdown Item 2</DropdownItem>
-      <DropdownItem>Dropdown Item 3</DropdownItem>
-    </DropdownMenu>
-  </Dropdown>
-)
-
-export const TemplateSmall = (args) => (
-  <Dropdown>
-    <DropdownButton
-      className={style.fsButton}
-      data-fs-button-variant="tertiary"
-    >
-      <Icon name="CaretDown" width="18" height="18" weight="bold" />
-      <span>Dropdown Menu Small</span>
-    </DropdownButton>
-    <DropdownMenu size="small">
-      <DropdownItem>Dropdown Item 1</DropdownItem>
-      <DropdownItem>Dropdown Item 2</DropdownItem>
-      <DropdownItem>Dropdown Item 3</DropdownItem>
-    </DropdownMenu>
-  </Dropdown>
-)
-
-<header>
-
-# Dropdown Menu
-
-Displays a set of actions/items to the user, usually used to show a menu of options.
-
-</header>
-
-## Overview
-
-The `DropdownMenu` is part of [Dropdown](?path=/docs/molecules-dropdown-default--default-story) component.
-
-<Canvas>
-  <Story name="overview-default">{Template.bind({})}</Story>
-  <Story name="overview-small">{TemplateSmall.bind({})}</Story>
-</Canvas>
-
----
-
-## Usage
-
-`import Dropdown, { DropdownButton, DropdownMenu, DropdownItem } from '../components/ui/Dropdown'`
-
-<Canvas>
-  <Story name="default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-dropdown-menu-bkg-color"
-    value="var(--fs-color-tertiary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-dropdown-menu-border-radius"
-    value="var(--fs-border-radius)"
-  />
-  <TokenRow
-    token="--fs-dropdown-menu-box-shadow"
-    value="var(--fs-shadow-hover)"
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Small
-
-<Canvas>
-  <Story name="dropdown-menu-small">{TemplateSmall.bind({})}</Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-dropdown-item-small-min-height" value="1.75rem" />
-  <TokenRow
-    token="--fs-dropdown-item-small-padding"
-    value="var(--fs-spacing-0) var(--fs-spacing-2) var(--fs-spacing-0) var(--fs-spacing-1)"
-  />
-  <TokenRow
-    token="--fs-dropdown-item-small-text-size"
-    value="var(--fs-text-size-1)"
-  />
-</TokenTable>

package/src/components/ui/Dropdown/DropdownMenu.tsx

@@ -1,34 +0,0 @@
-import { DropdownMenu as UIDropdownMenu } from '@faststore/ui'
-import type { DropdownMenuProps } from '@faststore/ui'
-
-import styles from './dropdown.module.scss'
-
-export type Size = 'small' | 'regular'
-
-export type Props = DropdownMenuProps & {
-  /**
-   * Specifies the size variant
-   */
-  size?: Size
-}
-
-function DropdownMenu({
-  children,
-  size = 'regular',
-  testId = 'store-dropdown-menu',
-  ...otherProps
-}: Props) {
-  return (
-    <UIDropdownMenu
-      data-fs-dropdown-menu
-      data-fs-dropdown-menu-size={size}
-      className={styles.fsDropdownMenu}
-      data-testid={testId}
-      {...otherProps}
-    >
-      {children}
-    </UIDropdownMenu>
-  )
-}
-
-export default DropdownMenu

package/src/components/ui/Dropdown/dropdown.module.scss

@@ -1,101 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-dropdown-menu {
-  // --------------------------------------------------------
-  // Design Tokens for Dropdown Menu
-  // --------------------------------------------------------
-
-  // Default properties
-
-  --fs-dropdown-menu-bkg-color             : var(--fs-color-tertiary-bkg);
-  --fs-dropdown-menu-border-radius         : var(--fs-border-radius);
-  --fs-dropdown-menu-box-shadow            : var(--fs-shadow-hover);
-
-  // Item
-  --fs-dropdown-item-min-height            : 2.375rem;
-  --fs-dropdown-item-padding               : var(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1) var(--fs-spacing-1);
-
-  --fs-dropdown-item-text-size             : var(--fs-text-size-base);
-  --fs-dropdown-item-text-weight           : var(--fs-text-weight-regular);
-
-  --fs-dropdown-item-color                 : var(--fs-color-link);
-  --fs-dropdown-item-bkg-color             : var(--fs-color-tertiary-bkg-light);
-  --fs-dropdown-item-bkg-color-hover       : var(--fs-color-primary-bkg-light);
-
-  --fs-dropdown-item-border-bottom-color   : var(--fs-border-color-light);
-
-  // Icon
-  --fs-dropdown-item-icon-min-width         : 1.125rem;
-  --fs-dropdown-item-icon-margin-right      : var(--fs-spacing-0);
-  --fs-dropdown-item-icon-margin-top        : calc(-1 * var(--fs-spacing-1));
-
-  // Small
-  --fs-dropdown-item-small-min-height       : 1.75rem;
-  --fs-dropdown-item-small-padding          : var(--fs-spacing-0) var(--fs-spacing-2) var(--fs-spacing-0) var(--fs-spacing-1);
-  --fs-dropdown-item-small-text-size        : var(--fs-text-size-1);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-top: var(--fs-spacing-0);
-  overflow: hidden;
-  background: var(--fs-dropdown-menu-bkg-color);
-  border-radius: var(--fs-dropdown-menu-border-radius);
-  box-shadow: var(--fs-dropdown-menu-box-shadow);
-
-  [data-fs-dropdown-item] {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: var(--fs-dropdown-item-min-height);
-    padding: var(--fs-dropdown-item-padding);
-    overflow: hidden;
-    font-size: var(--fs-dropdown-item-text-size);
-    font-weight: var(--fs-dropdown-item-text-weight);
-    color: var(--fs-dropdown-item-color);
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: pointer;
-    background-color: var(--fs-dropdown-item-bkg-color);
-    border-width: 0;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid var(--fs-dropdown-item-border-bottom-color);
-    }
-
-    @include media(">=notebook") {
-      &:focus, &:hover {
-        text-decoration: underline;
-        background-color: var(--fs-dropdown-item-bkg-color-hover);
-        outline: none;
-      }
-    }
-
-    [data-fs-dropdown-item-icon] {
-      display: flex;
-      min-width: var(--fs-dropdown-item-icon-min-width);
-      margin-right: var(--fs-dropdown-item-icon-margin-right);
-    }
-  }
-
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-dropdown-menu-size="small"] {
-    [data-fs-dropdown-item] {
-      min-height: var(--fs-dropdown-item-small-min-height);
-      padding: var(--fs-dropdown-item-small-padding);
-      font-size: var(--fs-dropdown-item-small-text-size);
-    }
-  }
-
-  [data-fs-breadcrumb-dropdown-item] [data-fs-dropdown-item-icon] {
-    margin-top: var(--fs-dropdown-item-icon-margin-top);
-  }
-}

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

@@ -1,4 +0,0 @@
-export { default } from './Dropdown'
-export { default as DropdownButton } from './DropdownButton'
-export { default as DropdownMenu } from './DropdownMenu'
-export { default as DropdownItem } from './DropdownItem'

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

@@ -1,99 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Gift from '.'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-import { product } from 'src/../.storybook/mocks'
-
-<Meta
-  title="Molecules/Gift"
-  argTypes={{
-    icon: { control: { disable: true } },
-  }}
-  component={Gift}
-/>
-
-export const Template = (args) => <Gift product={product} {...args} />
-
-<header>
-
-# Gift
-
-It displays an additional item to purchase as a gift.
-
-</header>
-
-## Overview
-
-The `Gift` component uses [FastStore UI Gift](https://www.faststore.dev/reference/ui/molecules) as base.
-
----
-
-## Usage
-
-`import Gift from '../components/ui/Gift'`
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />
-
-<TokenTable>
-  <TokenRow token="--fs-gift-height" value="var(--fs-spacing-12)" />
-  <TokenDivider />
-  <TokenRow token="--fs-gift-border-width" value="var(--fs-border-width)" />
-  <TokenRow
-    token="--fs-gift-border-color"
-    value="var(--fs-border-color-light)"
-    isColor
-  />
-  <TokenRow token="--fs-gift-border-radius" value="var(--fs-border-radius)" />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Content
-
-<TokenTable>
-  <TokenRow
-    token="--fs-gift-content-padding"
-    value="var(--fs-gift-gap) var(--fs-gift-gap) var(--fs-gift-gap) 0"
-  />
-  <TokenRow token="--fs-gift-content-row-gap" value="var(--fs-spacing-0)" />
-</TokenTable>
-
-### Title
-
-<TokenTable>
-  <TokenRow token="--fs-gift-title-line-height" value="1.25" />
-  <TokenRow token="--fs-gift-title-size" value="var(--fs-text-size-body)" />
-  <TokenRow
-    token="--fs-gift-title-color"
-    value="var(--fs-color-text)"
-    isColor
-  />
-</TokenTable>
-
-### Icon
-
-<TokenTable>
-  <TokenRow token="--fs-gift-icon-size" value="1.75rem" />
-  <TokenRow token="--fs-gift-icon-padding" value="var(--fs-spacing-0)" />
-  <TokenRow
-    token="--fs-gift-icon-color"
-    value="var(--fs-gift-title-color)"
-    globalValue="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-gift-icon-bkg-color"
-    value="var(--fs-color-body-bkg)"
-    isColor
-  />
-</TokenTable>

package/src/components/ui/Gift/gift.module.scss

@@ -1,94 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-gift {
-  // --------------------------------------------------------
-  // Design Tokens for Gift
-  // --------------------------------------------------------
-
-  // Default properties
-
-  --fs-gift-height                         : var(--fs-spacing-12);
-
-  --fs-gift-border-width                   : var(--fs-border-width);
-  --fs-gift-border-color                   : var(--fs-border-color-light);
-  --fs-gift-border-radius                  : var(--fs-border-radius);
-
-  // Content
-  --fs-gift-content-padding                : var(--fs-spacing-1) var(--fs-spacing-2);
-  --fs-gift-content-row-gap                : var(--fs-spacing-0);
-
-  // Title
-  --fs-gift-title-line-height              : 1.25;
-  --fs-gift-title-size                     : var(--fs-text-size-body);
-  --fs-gift-title-color                    : var(--fs-color-text);
-
-  // Icon
-  --fs-gift-icon-size                      : 1.75rem; // 28px
-  --fs-gift-icon-padding                   : var(--fs-spacing-0);
-  --fs-gift-icon-color                     : var(--fs-gift-title-color);
-  --fs-gift-icon-bkg-color                 : var(--fs-color-body-bkg);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  position: relative;
-
-  [data-fs-gift-wrapper] {
-    display: grid;
-    grid-template-columns: var(--fs-gift-height) repeat(4, 1fr);
-    align-items: flex-start;
-    height: var(--fs-gift-height);
-    overflow: hidden;
-    border: var(--fs-gift-border-width) solid var(--fs-gift-border-color);
-    border-radius: var(--fs-gift-border-radius);
-  }
-
-  [data-fs-gift-image] {
-    height: 100%;
-    overflow: hidden;
-
-    img {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  [data-fs-gift-content] {
-    display: grid;
-    grid-column: 2 / span 4;
-    row-gap: var(--fs-gift-content-row-gap);
-    padding: var(--fs-gift-content-padding);
-  }
-
-  [data-fs-gift-product-title] {
-    font-size: var(--fs-gift-title-size);
-    line-height: var(--fs-gift-title-line-height);
-    color: var(--fs-gift-title-color);
-
-    @include truncate-title;
-  }
-
-  [data-fs-gift-product-summary] {
-    display: flex;
-    align-items: center;
-
-    [data-fs-badge] {
-      margin-left: var(--fs-spacing-1);
-    }
-  }
-
-  [data-fs-gift-icon] {
-    position: absolute;
-    top: calc(-1 * var(--fs-gift-icon-size) / 2);
-    left: calc(-1 * var(--fs-gift-icon-size) / 2);
-    width: var(--fs-gift-icon-size);
-    height: var(--fs-gift-icon-size);
-    padding: var(--fs-gift-icon-padding);
-    color: var(--fs-gift-icon-color);
-    background-color: var(--fs-gift-icon-bkg-color);
-    border: var(--fs-gift-border-width) solid var(--fs-gift-border-color);
-    border-radius: var(--fs-border-radius-circle);
-  }
-}

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

@@ -1,192 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import PriceRange from '.'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-  BestPractices,
-  BestPracticesRule,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Molecules/PriceRange"
-  argTypes={{
-    min: { control: { disable: true } },
-    max: { control: { disable: true } },
-    testId: {
-      table: {
-        disable: true,
-      },
-    },
-    className: {
-      table: {
-        disable: true,
-      },
-    },
-    onChange: {
-      table: {
-        disable: true,
-      },
-    },
-    variant: {
-      table: {
-        disable: true,
-      },
-    },
-    step: {
-      control: 'number',
-      table: { type: 'number', summary: 10 },
-    },
-  }}
-  component={PriceRange}
-/>
-
-export const defaultArgs = {
-  min: {
-    absolute: 0,
-    selected: 0,
-  },
-  max: {
-    absolute: 12400,
-    selected: 12400,
-  },
-}
-
-export const Template = (args) => {
-  return (
-    <PriceRange {...defaultArgs} {...args} />
-  )
-}
-
-<header>
-
-# Price Range
-
-PriceRange allows you to implement filters on PLP so users have a high control over product prices.
-
-</header>
-
-## Overview
-
-The `PriceRange` component uses [FastStore UI Price Range](https://www.faststore.dev/reference/ui/molecules/PriceRange) as base.
-
----
-
-## Usage
-
-`import PriceRange from '../components/ui/PriceRange'`
-
-<Canvas isColumn>
-  <Story name="overview-default" args={defaultArgs}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="overview-default" />
-
-<TokenTable>
-  <TokenRow token="--fs-price-range-height" value="var(--fs-spacing-2)" />
-  <TokenRow
-    token="--fs-price-range-border-radius"
-    value="var(--fs-border-radius-pill)"
-  />
-  <TokenRow
-    token="--fs-price-range-margin-bottom"
-    value="var(--fs-spacing-3)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-price-range-transition-function"
-    value="var(--fs-transition-function)"
-  />
-  <TokenRow
-    token="--fs-price-range-transition-property"
-    value="varvar(--fs-transition-property)"
-  />
-  <TokenRow
-    token="--fs-price-range-transition-timing"
-    value="var(--fs-transition-timing)"
-  />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Slider
-
-<TokenTable>
-  <TokenRow
-    token="--fs-price-range-slider-bkg-color"
-    value="var(--fs-color-neutral-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-price-range-slider-selection-bkg-color"
-    value="var(--fs-color-primary-bkg-light-active)"
-    isColor
-  />
-</TokenTable>
-
-### Value Label
-
-<TokenTable>
-  <TokenRow
-    token="--fs-price-range-value-label-bottom"
-    value="var(--fs-spacing-3)"
-  />
-  <TokenRow
-    token="--fs-price-range-value-label-bkg-color"
-    value="var(--fs-color-body-bkg)"
-    isColor
-  />
-</TokenTable>
-
-### Absolute Values
-
-<TokenTable>
-  <TokenRow
-    token="--fs-price-range-absolute-values-text-color"
-    value="var(--fs-color-disabled-text)"
-    isColor
-  />
-</TokenTable>
-
-### Thumb
-
-<TokenTable>
-  <TokenRow token="--fs-price-range-thumb-size" value="var(--fs-spacing-4)" />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-price-range-thumb-bkg-color"
-    value="var(--fs-color-primary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-price-range-thumb-bkg-color-hover"
-    value="var(--fs-color-primary-bkg-hover)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-price-range-thumb-border-radius"
-    value="var(--fs-border-radius-circle)"
-  />
-  <TokenRow
-    token="--fs-price-range-thumb-border-color"
-    value="var(--fs-price-range-thumb-bkg-color)"
-    globalValue="var(--fs-color-primary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-price-range-thumb-border-color-hover"
-    value="var(--fs-price-range-thumb-bkg-color-hover)"
-    globalValue="var(--fs-color-primary-bkg-hover)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-price-range-thumb-border-width"
-    value="var(--fs-border-width)"
-  />
-</TokenTable>