@faststore/core 22.42.6

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

@@ -0,0 +1,20 @@
+import { DropdownButton as UIDropdownButton } from '@faststore/ui'
+import type { DropdownButtonProps } from '@faststore/ui'
+
+function DropdownButton({
+  children,
+  testId = 'store-dropdown-button',
+  ...otherProps
+}: DropdownButtonProps) {
+  return (
+    <UIDropdownButton
+      data-fs-dropdown-button
+      data-testid={testId}
+      {...otherProps}
+    >
+      {children}
+    </UIDropdownButton>
+  )
+}
+
+export default DropdownButton

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

@@ -0,0 +1,139 @@
+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/DropdownItem" component={DropdownItem} />
+
+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 Item</span>
+    </DropdownButton>
+    <DropdownMenu {...args}>
+      <DropdownItem>Dropdown Item 1</DropdownItem>
+      <DropdownItem>Dropdown Item 2</DropdownItem>
+      <DropdownItem>Dropdown Item 3</DropdownItem>
+    </DropdownMenu>
+  </Dropdown>
+)
+
+export const TemplateWithIcon = (args) => (
+  <Dropdown>
+    <DropdownButton
+      className={style.fsButton}
+      data-fs-button-variant="tertiary"
+    >
+      <Icon name="CaretDown" width="18" height="18" weight="bold" />
+      <span>Dropdown Item w/ Icon</span>
+    </DropdownButton>
+    <DropdownMenu {...args}>
+      <DropdownItem icon={<Icon name="User" width={24} height={24} />}>
+        My Account
+      </DropdownItem>
+      <DropdownItem icon={<Icon name="Calendar" width={24} height={24} />}>
+        My Orders
+      </DropdownItem>
+      <DropdownItem icon={<Icon name="Gift" width={24} height={24} />}>
+        Gifts
+      </DropdownItem>
+    </DropdownMenu>
+  </Dropdown>
+)
+
+<header>
+
+# Dropdown Item
+
+An item of a set of items on `DropdownMenu`.
+
+</header>
+
+## Overview
+
+The `DropdownItem` is part of [Dropdown](?path=/docs/molecules-dropdown-default--default-story) component.
+
+<Canvas>
+  <Story name="overview-default">{Template.bind({})}</Story>
+  <Story name="overview-icon">{TemplateWithIcon.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-item-min-height" value="2.375rem" />
+  <TokenRow
+    token="--fs-dropdown-item-padding"
+    value="var(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1) var(--fs-spacing-1)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-dropdown-item-text-size"
+    value="var(--fs-text-size-base)"
+  />
+  <TokenRow
+    token="--fs-dropdown-item-text-weight"
+    value="var(--fs-text-weight-regular)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-dropdown-item-color"
+    value="var(--fs-color-link)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-dropdown-item-bkg-color"
+    value="var(--fs-color-tertiary-bkg-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-dropdown-item-bkg-color-hover"
+    value="var(--fs-color-primary-bkg-light)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-dropdown-item-border-bottom-color"
+    value="var(--fs-border-color-light)"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Dropdown Item with Icon
+
+<TokenTable>
+  <TokenRow token="--fs-dropdown-item-icon-min-width" value="1.125rem" />
+  <TokenRow
+    token="--fs-dropdown-item-icon-margin-right"
+    value="var(--fs-spacing-0)"
+  />
+  <TokenRow
+    token="--fs-dropdown-item-icon-margin-top"
+    value="calc(-1 * var(--fs-spacing-1))"
+  />
+</TokenTable>

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

@@ -0,0 +1,26 @@
+import type { DropdownItemProps } from '@faststore/ui'
+import { DropdownItem as UIDropdownItem, Icon as UIIcon } from '@faststore/ui'
+import type { ReactNode } from 'react'
+
+export type Props = DropdownItemProps & {
+  /**
+   * Icon component for additional customization
+   */
+  icon?: ReactNode
+}
+
+function DropdownItem({
+  children,
+  icon,
+  testId = 'store-dropdown-item',
+  ...otherProps
+}: Props) {
+  return (
+    <UIDropdownItem data-fs-dropdown-item data-testid={testId} {...otherProps}>
+      {icon && <UIIcon component={icon} data-fs-dropdown-item-icon />}
+      {children}
+    </UIDropdownItem>
+  )
+}
+
+export default DropdownItem

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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,101 @@
+@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

@@ -0,0 +1,4 @@
+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/EmptyState/EmptyState.stories.mdx

@@ -0,0 +1,146 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+
+import { TokenTable, TokenRow } from 'src/../.storybook/components'
+
+import Button from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+import { ButtonLink } from 'src/components/ui/Button'
+
+import EmptyState from '.'
+
+<Meta component={EmptyState} title="Organisms/EmptyState" />
+
+export const Template = (args) => (
+  <EmptyState {...args}>Nothing to display</EmptyState>
+)
+
+<header>
+
+# Empty State
+
+This component represents an empty state, usually used on `EmptyCart` and `EmptyGallery` components.
+
+</header>
+
+## Usage
+
+`import EmptyState from 'src/components/ui/EmptyState'`
+
+<Canvas>
+  <Story name="default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow token="--fs-empty-state-height" value="100%" />
+  <TokenRow token="--fs-empty-state-min-height" value="50vh" />
+  <TokenRow token="--fs-empty-state-padding" value="0 var(--fs-spacing-8)" />
+  <TokenRow
+    token="--fs-empty-state-bkg-color"
+    value="var(--fs-color-neutral-bkg)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Title
+
+<TokenTable>
+  <TokenRow
+    token="--fs-empty-state-title-margin-bottom"
+    value="var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-empty-state-title-color"
+    value="var(--fs-color-disabled-text)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-empty-state-title-size"
+    value="var(--fs-text-size-lead)"
+  />
+</TokenTable>
+
+### Link
+
+<TokenTable>
+  <TokenRow token="--fs-empty-state-link-min-width" value="11.875rem" />
+</TokenTable>
+
+---
+
+## Variants
+
+### Rounded
+
+<TokenTable>
+  <TokenRow
+    token="--fs-empty-state-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+---
+
+## Use Cases
+
+### EmptyCart
+
+export const TemplateEmptyCart = () => (
+  <EmptyState>
+    <header data-fs-empty-state-title>
+      <Icon name="ShoppingCart" width={56} height={56} weight="thin" />
+      <p>Your Cart is empty</p>
+    </header>
+    <Button variant="secondary">Start Shopping</Button>
+  </EmptyState>
+)
+
+An implementation of the `EmptyState` that represents the Cart with no items.
+
+<Canvas>
+  <Story name="default-empty-cart">{TemplateEmptyCart.bind({})}</Story>
+</Canvas>
+
+### EmptyGallery
+
+export const TemplateEmptyGallery = (args) => {
+  return (
+    <EmptyState variant="rounded">
+      <header data-fs-empty-state-title>
+        <Icon name="CircleWavyWarning" width={56} height={56} weight="thin" />
+        <p>Nothing matches with your search</p>
+      </header>
+      <ButtonLink
+        data-fs-empty-state-link
+        href="#"
+        variant="secondary"
+        icon={
+          <Icon name="CircleWavyWarning" width={18} height={18} weight="bold" />
+        }
+        iconPosition="left"
+      >
+        Browse Offers
+      </ButtonLink>
+      <ButtonLink
+        data-fs-empty-state-link
+        href="#"
+        variant="secondary"
+        icon={<Icon name="RocketLaunch" width={18} height={18} weight="bold" />}
+        iconPosition="left"
+      >
+        Just Arrived
+      </ButtonLink>
+    </EmptyState>
+  )
+}
+
+An implementation of the `EmptyState` that represents a Gallery with no items.
+
+<Canvas>
+  <Story name="default-empty-gallery">{TemplateEmptyGallery.bind({})}</Story>
+</Canvas>

package/src/components/ui/EmptyState/EmptyState.tsx

@@ -0,0 +1,26 @@
+import type { PropsWithChildren } from 'react'
+
+import styles from './empty-state.module.scss'
+
+type Variant = 'default' | 'rounded'
+
+interface Props {
+  variant?: Variant
+}
+
+function EmptyState({
+  children,
+  variant = 'default',
+}: PropsWithChildren<Props>) {
+  return (
+    <section
+      className={styles.fsEmptyState}
+      data-fs-empty-state
+      data-fs-empty-state-variant={variant}
+    >
+      {children}
+    </section>
+  )
+}
+
+export default EmptyState

package/src/components/ui/EmptyState/empty-state.module.scss

@@ -0,0 +1,63 @@
+@import "src/styles/scaffold";
+
+.fs-empty-state {
+  // --------------------------------------------------------
+  // Design Tokens for EmptyState
+  // --------------------------------------------------------
+  --fs-empty-state-height               : 100%;
+  --fs-empty-state-min-height           : 50vh;
+  --fs-empty-state-padding              : 0 var(--fs-spacing-8);
+  --fs-empty-state-bkg-color            : var(--fs-color-neutral-bkg);
+
+  // Title
+  --fs-empty-state-title-margin-bottom  : var(--fs-spacing-2);
+  --fs-empty-state-title-color          : var(--fs-color-disabled-text);
+  --fs-empty-state-title-size           : var(--fs-text-size-lead);
+
+  // Link
+  --fs-empty-state-link-min-width       : 11.875rem;
+
+  // Rounded
+  --fs-empty-state-border-radius        : var(--fs-border-radius);
+
+  // Default properties
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--fs-spacing-3);
+  justify-content: center;
+  height: var(--fs-empty-state-height);
+  min-height: var(--fs-empty-state-min-height);
+  padding: var(--fs-empty-state-padding);
+  background-color: var(--fs-empty-state-bkg-color);
+
+  @include media(">=notebook") {
+    align-items: center;
+  }
+
+  > [data-fs-empty-state-title] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-spacing-1);
+    align-items: center;
+    justify-content: center;
+    margin-bottom: var(--fs-empty-state-title-margin-bottom);
+    color: var(--fs-empty-state-title-color);
+
+    p {
+      font-size: var(--fs-empty-state-title-size);
+      text-align: center;
+    }
+  }
+
+  [data-fs-empty-state-link] {
+    min-width: var(--fs-empty-state-link-min-width);
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-empty-state-variant="rounded"] {
+    border-radius: var(--fs-empty-state-border-radius);
+  }
+}

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

@@ -0,0 +1 @@
+export { default } from './EmptyState'