@faststore/core 22.42.6

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

@@ -0,0 +1,268 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import Checkbox from '.'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Atoms/Checkbox"
+  component={Checkbox}
+  argTypes={{
+    disabled: {
+      type: {
+        name: 'boolean',
+      },
+      description: '`boolean`',
+      defaultValue: false,
+    },
+    partial: {
+      type: {
+        name: 'boolean',
+      },
+      defaultValue: false,
+    },
+  }}
+/>
+
+export const Template = ({ id, ...args }) => (
+  <div style={{ display: 'flex' }}>
+    <Checkbox id={id} {...args} onChange={() => {}} />
+    <label htmlFor={id} style={{ paddingLeft: '1rem' }}>
+      label
+    </label>
+  </div>
+)
+
+<header>
+
+# Checkbox
+
+An input Checkbox that is commonly used on Filter component.
+
+</header>
+
+## Overview
+
+The `Checkbox` component uses [FastStore UI Checkbox](https://www.faststore.dev/reference/ui/atoms/Checkbox) as base.
+
+<Canvas>
+  <Story
+    name="overview-default"
+    args={{
+      id: 'overview-checkbox-default',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-checked"
+    args={{
+      id: 'overview-checkbox-checked',
+      checked: true,
+      disabled: false,
+      partial: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-partial"
+    args={{
+      id: 'overview-checkbox-partial',
+      partial: true,
+      disabled: false,
+      checked: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-disabled"
+    args={{
+      id: 'overview-checkbox-disabled',
+      disabled: true,
+      checked: false,
+      partial: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+`import Checkbox from '../components/ui/Checkbox'`
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      id: 'checkbox-default',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow token="--fs-checkbox-width" value="1.25rem" />
+  <TokenRow token="--fs-checkbox-height" value="var(--fs-checkbox-width)" />
+  <TokenDivider />
+  <TokenRow token="--fs-checkbox-border-width" value="var(--fs-border-width)" />
+  <TokenRow
+    token="--fs-checkbox-border-radius"
+    value="var(--fs-border-radius)"
+  />
+  <TokenRow
+    token="--fs-checkbox-border-color"
+    value="var(--fs-border-color)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-border-color-hover"
+    value="var(--fs-border-color-active)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-checkbox-transition"
+    value="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)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-checkbox-bkg-color-hover"
+    value="var(--fs-color-primary-bkg-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-shadow-hover"
+    value="0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active)"
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### Checked
+
+<Canvas>
+  <Story
+    name="checked"
+    args={{
+      id: 'checkbox-checked',
+      checked: true,
+      disabled: false,
+      partial: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-checkbox-checked-bkg-color"
+    value="var(--fs-color-primary-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-checked-bkg-color-hover"
+    value="var(--fs-color-primary-bkg-hover)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-checked-border-color-hover"
+    value="var((--fs-border-color-hover)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-checked-shadow-hover"
+    value="0 0 0 var(--fs-checkbox-border-width)
+          var(--fs-checkbox-checked-border-color-hover)"
+  />
+</TokenTable>
+
+### Disabled
+
+<Canvas>
+  <Story
+    name="disabled"
+    args={{
+      id: 'checkbox-disabled',
+      disabled: true,
+      checked: false,
+      partial: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-checkbox-disabled-bkg-color"
+    value="var(--fs-color-disabled-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-disabled-border-width"
+    value="var(--fs-checkbox-border-width)"
+  />
+  <TokenRow
+    token="--fs-checkbox-disabled-border-color"
+    value="var(--fs-border-color-disabled)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-disabled-text-color"
+    value="var(--fs-color-disabled-text)"
+    isColor
+  />
+</TokenTable>
+
+### Partial
+
+<Canvas>
+  <Story
+    name="partial"
+    args={{
+      id: 'checkbox-partial',
+      partial: true,
+      disabled: false,
+      checked: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-checkbox-partial-bkg-color"
+    value="var(--fs-color-body-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-partial-border-width"
+    value="var(--fs-checkbox-border-width)"
+  />
+  <TokenRow
+    token="--fs-checkbox-partial-border-color"
+    value="var(--fs-color-primary-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-partial-bkg-color-hover"
+    value="var(--fs-color-primary-bkg-light)"
+    isColor
+  />
+</TokenTable>

package/src/components/ui/Checkbox/Checkbox.tsx

@@ -0,0 +1,20 @@
+import { Checkbox as UICheckbox } from '@faststore/ui'
+import type { CheckboxProps as UICheckboxProps } from '@faststore/ui'
+
+import styles from './checkbox.module.scss'
+
+export type CheckboxProps = {
+  partial?: boolean
+} & UICheckboxProps
+
+function Checkbox({ partial, ...otherProps }: CheckboxProps) {
+  return (
+    <UICheckbox
+      className={styles.fsCheckbox}
+      data-fs-checkbox-partial={partial}
+      {...otherProps}
+    />
+  )
+}
+
+export default Checkbox

package/src/components/ui/Checkbox/checkbox.module.scss

@@ -0,0 +1,157 @@
+@import "src/styles/scaffold";
+
+.fs-checkbox {
+  // --------------------------------------------------------
+  // Design Tokens for Checkbox
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-checkbox-width                        : 1.25rem;
+  --fs-checkbox-height                       : var(--fs-checkbox-width);
+
+  --fs-checkbox-border-width                 : var(--fs-border-width);
+  --fs-checkbox-border-radius                : var(--fs-border-radius);
+  --fs-checkbox-border-color                 : var(--fs-border-color);
+  --fs-checkbox-border-color-hover           : var(--fs-border-color-active);
+
+  --fs-checkbox-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-checkbox-bkg-color-hover              : var(--fs-color-primary-bkg-light);
+  --fs-checkbox-shadow-hover                 : 0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active);
+
+  // Checked
+  --fs-checkbox-checked-bkg-color            : var(--fs-color-primary-bkg);
+  --fs-checkbox-checked-bkg-color-hover      : var(--fs-color-primary-bkg-hover);
+  --fs-checkbox-checked-border-color-hover   : var(--fs-border-color-hover);
+  --fs-checkbox-checked-shadow-hover         : 0 0 0 var(--fs-checkbox-border-width) var(--fs-checkbox-checked-border-color-hover);
+
+  // Disabled
+  --fs-checkbox-disabled-bkg-color           : var(--fs-color-disabled-bkg);
+  --fs-checkbox-disabled-border-width        : var(--fs-checkbox-border-width);
+  --fs-checkbox-disabled-border-color        : var(--fs-border-color-disabled);
+  --fs-checkbox-disabled-text-color          : var(--fs-color-disabled-text);
+
+  // Partial
+  --fs-checkbox-partial-bkg-color            : var(--fs-color-body-bkg);
+  --fs-checkbox-partial-bkg-color-hover      : var(--fs-color-primary-bkg-light);
+  --fs-checkbox-partial-border-width         : var(--fs-checkbox-border-width);
+  --fs-checkbox-partial-border-color         : var(--fs-color-primary-bkg);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fs-checkbox-width);
+  height: var(--fs-checkbox-height);
+  cursor: pointer;
+  border: var(--fs-checkbox-border-width) solid var(--fs-checkbox-border-color);
+  border-radius: var(--fs-checkbox-border-radius);
+  outline: none;
+  transition: var(--fs-checkbox-transition);
+  appearance: none;
+
+  @include input-focus-ring;
+
+  &::before {
+    position: absolute;
+    top: 0.188rem;
+    width: 0.375rem;
+    height: 0.625rem;
+    content: "";
+    border: var(--fs-border-width-thick) solid var(--fs-color-text-inverse);
+    border-top: 0;
+    border-left: 0;
+    border-radius: var(--fs-border-width);
+    opacity: 0;
+    transform: rotate(45deg);
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--fs-checkbox-bkg-color-hover);
+  }
+
+  &:hover:not(:disabled):not(:focus-visible):not(:focus) {
+    border-color: var(--fs-checkbox-border-color-hover);
+    box-shadow: var(--fs-checkbox-shadow-hover);
+  }
+
+  &:checked {
+    background-color: var(--fs-checkbox-checked-bkg-color);
+    border: none;
+
+    &::before {
+      opacity: 1;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--fs-checkbox-checked-bkg-color-hover);
+    }
+
+    &:hover:not(:disabled):not(:focus-visible):not(:focus) {
+      border-color: var(--fs-checkbox-checked-border-color-hover);
+      box-shadow: var(--fs-checkbox-checked-shadow-hover);
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--fs-checkbox-disabled-bkg-color);
+    border: var(--fs-checkbox-disabled-border-width) solid var(--fs-checkbox-disabled-border-color);
+
+    &::before {
+      border-color: var(--fs-checkbox-disabled-border-color);
+    }
+
+    &:hover {
+      background-color: var(--fs-checkbox-disabled-bkg-color);
+      border: var(--fs-checkbox-disabled-border-width) solid var(--fs-checkbox-disabled-border-color);
+      box-shadow: none;
+
+      &::before {
+        border-color: var(--fs-checkbox-disabled-border-color);
+      }
+    }
+
+    + label {
+      color: var(--fs-checkbox-disabled-text-color);
+    }
+  }
+
+  &[data-fs-checkbox-partial="true"] {
+    background-color: var(--fs-checkbox-partial-bkg-color);
+    border: var(--fs-checkbox-partial-border-width) solid var(--fs-checkbox-partial-border-color);
+
+    &::before {
+      position: absolute;
+      top: auto;
+      width: 0.625rem;
+      height: 0;
+      content: "";
+      border-width: 0;
+      border-bottom: var(--fs-checkbox-border-width) solid var(--fs-color-primary-bkg);
+      border-radius: var(--fs-border-width);
+      opacity: 1;
+      transform: rotate(0deg);
+    }
+
+    &:checked {
+      &:hover:not(:disabled) {
+        background-color: var(--fs-checkbox-partial-bkg-color-hover);
+      }
+    }
+
+    &:hover {
+      background-color: var(--fs-checkbox-partial-bkg-color-hover);
+      box-shadow: var(--fs-checkbox-shadow-hover);
+    }
+
+    &:disabled {
+      background-color: var(--fs-checkbox-disabled-bkg-color);
+      border: var(--fs-checkbox-disabled-border-width) solid var(--fs-checkbox-disabled-border-color);
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+export { default } from './Checkbox'
+export type { CheckboxProps } from './Checkbox'

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

@@ -0,0 +1,232 @@
+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/Overview" />
+
+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</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>
+)
+
+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 Small</span>
+    </DropdownButton>
+    <DropdownMenu size="small">
+      <DropdownItem>Dropdown Item 1</DropdownItem>
+      <DropdownItem>Dropdown Item 2</DropdownItem>
+      <DropdownItem>Dropdown Item 3</DropdownItem>
+    </DropdownMenu>
+  </Dropdown>
+)
+
+export const TemplateWithIconSmall = (args) => (
+  <Dropdown>
+    <DropdownButton
+      className={style.fsButton}
+      data-fs-button-variant="tertiary"
+    >
+      <Icon name="CaretDown" width="18" height="18" weight="bold" />
+      <span>Dropdown Small Item w/ Icon</span>
+    </DropdownButton>
+    <DropdownMenu size="small">
+      <DropdownItem
+        icon={<Icon name="ArrowElbowDownRight" width={18} height={18} />}
+      >
+        Item 1
+      </DropdownItem>
+      <DropdownItem
+        icon={<Icon name="ArrowElbowDownRight" width={18} height={18} />}
+      >
+        Item 2
+      </DropdownItem>
+      <DropdownItem
+        icon={<Icon name="ArrowElbowDownRight" width={18} height={18} />}
+      >
+        Item 3
+      </DropdownItem>
+    </DropdownMenu>
+  </Dropdown>
+)
+
+<header>
+
+# Dropdown
+
+Displays a set of actions/items to the user, usually used to show a menu of options.
+
+</header>
+
+## Overview
+
+The `Dropdown` component uses [FastStore UI Dropdown](https://www.faststore.dev/reference/ui/molecules) as base.
+
+<!-- Dropdown documentation is currently missing on faststore.dev -->
+
+<Canvas>
+  <Story name="overview-default">{Template.bind({})}</Story>
+  <Story name="overview-default-icon">{TemplateWithIcon.bind({})}</Story>
+  <Story name="overview-small">{TemplateSmall.bind({})}</Story>
+  <Story name="overview-small-icon">{TemplateWithIconSmall.bind({})}</Story>
+</Canvas>
+
+---
+
+## Usage
+
+`import Dropdown, { DropdownButton, DropdownMenu, DropdownItem } from '../components/ui/Dropdown'`
+
+<Canvas>
+  <Story name="default">{Template.bind({})}</Story>
+</Canvas>
+
+---
+
+## Compound Components
+
+<section className="sbdocs-section">
+  <article>
+    <div style={{ height: '225px' }}>
+      <a href="?path=/docs/molecules-dropdown-dropdownmenu--default-story"><img src="https://vtexhelp.vtexassets.com/assets/docs/src/dropdown-menu-example___04945d62ffacf3021e59361ccf558430.png"/></a>
+    </div>
+    <article className="sbdocs-section-text">
+      <h3>Dropdown Menu</h3>
+      <p>
+        Displays a set of actions/items to the user, usually used to show a menu of options.
+      </p>
+    </article>
+
+  </article>
+  <article>
+    <div style={{ height: '225px' }}>
+      <a href="?path=/docs/molecules-dropdown-dropdownitem--default-story"><img width="245px" src="https://vtexhelp.vtexassets.com/assets/docs/src/dropdown-item-example___30ebe9491ad7db1230ac9e3a7729d9be.png"/></a>
+    </div>
+    <article className="sbdocs-section-text">
+      <h3>Dropdown Item</h3>
+      <p>An item of a set of items on <code>DropdownMenu</code>.</p>
+    </article>
+  </article>
+</section>
+
+---
+
+## Accessibility
+
+### Keyboard Interactions
+
+<section>
+  <table className="sbdocs-table-free">
+    <thead>
+      <tr>
+        <th>Key</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <code>Enter</code>
+        </td>
+        <td>
+          When focusing on <code>DropdownButton</code>, the Dropdown menu opens
+          and focuses the first <code>DropdownItem</code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code>ArrowDown</code>
+        </td>
+        <td>
+          When focusing on an item, moves focus to the next{' '}
+          <code>DropdownItem</code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code>ArrowUp</code>
+        </td>
+        <td>
+          When focusing on an item, moves focus to the previous{' '}
+          <code>DropdownItem</code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code>Escape</code>
+        </td>
+        <td>
+          Closes <code>DropdownMenu</code> and moves focus to{' '}
+          <code>DropdownButton</code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code>Home</code>
+        </td>
+        <td>
+          When <code>DropdownMenu</code> is open, move focus to the first{' '}
+          <code>DropdownItem</code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code>End</code>
+        </td>
+        <td>
+          When <code>DropdownMenu</code> is open, move focus to the last{' '}
+          <code>DropdownItem</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</section>

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

@@ -0,0 +1,12 @@
+import { Dropdown as UIDropdown } from '@faststore/ui'
+import type { DropdownProps } from '@faststore/ui'
+
+const Dropdown = ({ children, ...otherProps }: DropdownProps) => {
+  return (
+    <UIDropdown data-fs-dropdown {...otherProps}>
+      {children}
+    </UIDropdown>
+  )
+}
+
+export default Dropdown