@faststore/core 0.3.15 → 0.3.17

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

@@ -1,164 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Alert from '.'
-import Icon from '../Icon'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-  BestPractices,
-  BestPracticesRule,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Molecules/Alert"
-  argTypes={{
-    icon: { control: { disable: true } },
-  }}
-  component={Alert}
-/>
-
-export const Template = (args) => (
-  <Alert {...args}>Free shipping starts at $300</Alert>
-)
-
-<header>
-
-# Alert
-
-Alerts display short messages related to the behavior of a system, feature or page.
-
-</header>
-
-## Overview
-
-The `Alert` component uses [FastStore UI Alert](https://www.faststore.dev/reference/ui/molecules/Alert) as base.
-
-<Canvas isColumn>
-  <Story
-    name="overview-default"
-    args={{
-      icon: <Icon name="Truck" width={24} height={24} />,
-      link: { text: 'Buy now', to: '/' },
-      dismissible: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story name="overview-clean">{Template.bind({})}</Story>
-</Canvas>
-
----
-
-## Usage
-
-`import Alert from '../components/ui/Alert'`
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      icon: <Icon name="Truck" width={24} height={24} />,
-      link: { text: 'Buy now', to: '/' },
-      dismissible: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-<TokenTable>
-  <TokenRow token="--fs-alert-height" value="var(--fs-spacing-7)" />
-  <TokenRow token="--fs-alert-padding-left" value="var(--fs-spacing-3)" />
-  <TokenRow
-    token="--fs-alert-padding-right"
-    value="var(--fs-alert-padding-left)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-alert-bkg-color"
-    value="var(--fs-color-highlighted-bkg)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-alert-text-color"
-    value="var(--fs-color-highlighted-text)"
-    isColor
-  />
-  <TokenRow token="--fs-alert-text-size" value="var(--fs-text-size-1)" />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Link
-
-<TokenTable>
-  <TokenRow
-    token="--fs-alert-link-color"
-    value="var(--fs-alert-text-color)"
-    globalValue="var(--fs-color-highlighted-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-alert-link-color-visited"
-    value="var(--fs-alert-text-color)"
-    globalValue="var(--fs-color-highlighted-text)"
-    isColor
-  />
-</TokenTable>
-
-### Button
-
-<TokenTable>
-  <TokenRow
-    token="--fs-alert-button-text-color"
-    value="var(--fs-alert-text-color)"
-    globalValue="var(--fs-color-highlighted-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-alert-button-bkg-color"
-    value="var(--fs-alert-bkg-color)"
-    globalValue="var(--fs-color-highlighted-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-alert-button-border-radius"
-    value="var(--fs-border-radius)"
-  />
-</TokenTable>
-
----
-
-<BestPractices>
-  <BestPracticesRule
-    recommendedUsage={
-      <Alert
-        icon={<Icon name="ShieldCheck" width={24} height={24} />}
-        link={{ text: 'Buy Now', to: '/' }}
-        dismissible
-      >
-        Free shipping starts at $300
-      </Alert>
-    }
-    recommendedDescription="Write short messages to inform about the behavior of a system, feature, or page. Consider using 30 to 40 characters max."
-    discouragedUsage={
-      <Alert
-        icon={<Icon name="ShieldCheck" width={24} height={24} />}
-        link={{ text: 'Really long link to add here', to: '/' }}
-        dismissible
-      >
-        Alert with a veeeery long description lorem ipsum dolor sit amet,
-        consectetur adipiscing elit. Donec sollicitudin erat non felis feugiat
-        porta. Nam vitae turpis metus. Maecenas feugiat justo tristique libero
-        ultricies.
-      </Alert>
-    }
-    discouragedDescription="Don't use long texts. Important information can be lost."
-  />
-</BestPractices>

package/src/components/ui/Alert/Alert.tsx

@@ -1,81 +0,0 @@
-import {
-  Alert as UIAlert,
-  Icon as UIIcon,
-  Button as UIButton,
-} from '@faststore/ui'
-import { useCallback } from 'react'
-import type { ReactNode, MouseEvent } from 'react'
-import type { AlertProps } from '@faststore/ui'
-
-import Link from 'src/components/ui/Link'
-import Icon from 'src/components/ui/Icon'
-
-import styles from './alert.module.scss'
-
-export type Props = AlertProps & {
-  /**
-   * Icon component for additional customization
-   */
-  icon?: ReactNode
-  /**
-   * Enables dismissible feature
-   */
-  dismissible?: boolean
-  /**
-   * The href and label used at the link
-   */
-  link?: {
-    to: string
-    text: string
-  }
-  onClose?: (event: MouseEvent<HTMLElement>) => void
-}
-
-function Alert({
-  children,
-  icon,
-  dismissible,
-  link,
-  onClose,
-  ...otherProps
-}: Props) {
-  const handleClose = useCallback(
-    (event: MouseEvent<HTMLElement>) => {
-      if (event.defaultPrevented) {
-        return
-      }
-
-      onClose?.(event)
-    },
-    [onClose]
-  )
-
-  return (
-    <UIAlert
-      data-fs-alert
-      data-fs-alert-dismissible={dismissible}
-      className={styles.fsAlert}
-      {...otherProps}
-    >
-      {icon && <UIIcon component={icon} />}
-
-      <p data-fs-alert-content>{children}</p>
-
-      {link && (
-        <Link data-fs-alert-link variant="inline" href={link.to}>
-          {link.text}
-        </Link>
-      )}
-
-      {dismissible && (
-        <UIButton data-fs-alert-button aria-label="Close" onClick={handleClose}>
-          <span>
-            <Icon name="X" width={18} height={18} weight="bold" />
-          </span>
-        </UIButton>
-      )}
-    </UIAlert>
-  )
-}
-
-export default Alert

package/src/components/ui/Alert/alert.module.scss

@@ -1,93 +0,0 @@
-.fs-alert {
-  // --------------------------------------------------------
-  // Design Tokens for Toast
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-alert-height                       : var(--fs-spacing-7);
-  --fs-alert-padding-left                 : var(--fs-spacing-3);
-  --fs-alert-padding-right                : var(--fs-alert-padding-left);
-
-  --fs-alert-bkg-color                    : var(--fs-color-highlighted-bkg);
-
-  --fs-alert-text-color                   : var(--fs-color-highlighted-text);
-  --fs-alert-text-size                    : var(--fs-text-size-1);
-
-  // Link
-  --fs-alert-link-color                   : var(--fs-alert-text-color);
-  --fs-alert-link-color-visited           : var(--fs-alert-text-color);
-
-  // Button
-  --fs-alert-button-text-color            : var(--fs-alert-text-color);
-  --fs-alert-button-bkg-color             : var(--fs-alert-bkg-color);
-  --fs-alert-button-border-radius         : var(--fs-border-radius);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  display: flex;
-  align-items: center;
-  height: var(--fs-alert-height);
-  padding-right: var(--fs-alert-padding-right);
-  padding-left: var(--fs-alert-padding-left);
-  font-size: var(--fs-alert-text-size);
-  color: var(--fs-alert-text-color);
-  background-color: var(--fs-alert-bkg-color);
-
-  [data-fs-icon] {
-    padding-right: var(--fs-spacing-1);
-    margin: 0;
-  }
-
-  [data-fs-alert-content] {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  span { font-weight: var(--fs-text-weight-bold); }
-
-  [data-fs-alert-link] {
-    min-width: 0;
-    height: var(--fs-alert-height);
-    padding: 0 var(--fs-spacing-1);
-    overflow: hidden;
-    font-weight: var(--fs-text-weight-bold);
-    line-height: var(--fs-alert-height);
-    color: var(--fs-alert-link-color);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    &:visited { color: var(--fs-alert-link-color-visited); }
-  }
-
-  [data-fs-alert-button] {
-    min-width: var(--fs-control-tap-size);
-    height: 100%;
-    padding: var(--fs-spacing-0);
-    margin-left: auto;
-    color: var(--fs-alert-button-text-color);
-    background-color: var(--fs-alert-button-bkg-color);
-
-    > span {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      background-color: var(--fs-alert-button-bkg-color);
-      border-radius: var(--fs-alert-button-border-radius);
-    }
-
-    &:hover span { filter: brightness(0.95); }
-  }
-
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-alert-dismissible="true"] {
-    padding-right: 0;
-  }
-}

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

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

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

@@ -1,232 +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/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

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

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

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