@faststore/core 2.0.121-alpha.0 → 2.0.122-alpha.0

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

@@ -1,643 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
-
-import { Button, BuyButton, LinkButton } from '@faststore/ui'
-import Icon from 'src/components/ui/Icon'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-  SectionList,
-  SectionItem,
-  BestPractices,
-  BestPracticesRule,
-} from 'src/../.storybook/components'
-
-<Meta
-  argTypes={{
-    icon: { control: { disable: true } },
-  }}
-  component={Button}
-  title="Atoms/Button"
-/>
-
-export const Template = (args) => <Button {...args}>Button</Button>
-export const TemplateIcon = (args) => <Button {...args} />
-
-<header>
-
-# Button
-
-This component allows users to take actions, make choices or trigger an event with a single tap.
-
-</header>
-
-- [Overview](#overview)
-- [Usage](#usage)
-- [Nested Elements](#nested-elements)
-- [Hierarchy](#hierarchy)
-- [Variants](#variants)
-- [Related Components](#related-components)
-
-## Overview <a id="overview" />
-
-The `Button` component uses [FastStore UI Button](https://www.faststore.dev/reference/ui/atoms/Button) as base.
-
-<Canvas>
-  <Story name="Overview">
-    <Button variant="primary">Primary Button</Button>
-    <Button variant="secondary" style={{ marginLeft: 20 }}>
-      Secondary Button
-    </Button>
-    <Button variant="tertiary" style={{ marginLeft: 20 }}>
-      Tertiary Button
-    </Button>
-  </Story>
-</Canvas>
-
----
-
-## Usage <a id="usage" />
-
-`import Button from 'src/components/ui/Button'`
-
-export const Usage = ({ inverse, ...args }) => {
-  return inverse ? (
-    <div style={{ marginBottom: 10, padding: 10, backgroundColor: '#171a1c' }}>
-      <Button inverse {...args}>
-        Button
-      </Button>
-    </div>
-  ) : (
-    <Button {...args}>Button</Button>
-  )
-}
-
-<Canvas>
-  <Story
-    name="Button"
-    args={{
-      variant: 'primary',
-      iconPosition: 'right',
-      icon: <Icon name="ShoppingCart" width="18" height="18" weight="bold" />,
-    }}
-  >
-    {Usage.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Button" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-button-padding"
-    value="calc(var(--fs-spacing-1) - (var(--fs-button-border-width) * 2)) var(--fs-spacing-3)"
-  />
-  <TokenRow token="--fs-button-height" value="var(--fs-control-tap-size)" />
-  <TokenRow token="--fs-button-gap" value="var(--fs-spacing-2)" />
-  <TokenDivider />
-  <TokenRow token="--fs-button-shadow" value="var(--fs-shadow)" />
-  <TokenRow token="--fs-button-shadow-hover" value="var(--fs-button-shadow)" />
-  <TokenDivider />
-  <TokenRow token="--fs-button-border-radius" value="var(--fs-border-radius)" />
-  <TokenRow
-    token="--fs-button-border-width"
-    value="var(--fs-border-width-thick)"
-  />
-  <TokenRow token="--fs-button-border-color" value="transparent" isColor />
-  <TokenDivider />
-  <TokenRow token="--fs-button-text-size" value="var(--fs-text-size-base)" />
-  <TokenRow
-    token="--fs-button-text-weight"
-    value="var(--fs-text-weight-bold)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-button-transition-function"
-    value="var(--fs-transition-function)"
-  />
-  <TokenRow
-    token="--fs-button-transition-property"
-    value="var(--fs-transition-property)"
-  />
-  <TokenRow
-    token="--fs-button-transition-timing"
-    value="var(--fs-transition-timing)"
-  />
-</TokenTable>
-
----
-
-## Nested Elements <a id="nested-elements" />
-
-### Icon
-
-<Canvas>
-  <Story
-    name="Icon"
-    args={{
-      variant: 'primary',
-      iconPosition: 'right',
-      icon: <Icon name="User" width="18" height="18" weight="bold" />,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-button-icon-padding" value="0 var(--fs-spacing-1)" />
-</TokenTable>
-
----
-
-## Hierarchy <a id="hierarchy" />
-
-### Primary
-
-<Canvas>
-  <Story name="Primary" args={{ variant: 'primary' }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-button-primary-text-color"
-    value="var(--fs-color-primary-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-primary-text-color-hover"
-    value="var(--fs-button-primary-text-color)"
-    isColor
-    globalValue="var(--fs-color-primary-text)"
-  />
-  <TokenRow
-    token="--fs-button-primary-text-color-active"
-    value="var(--fs-button-primary-text-color)"
-    isColor
-    globalValue="var(--fs-color-primary-text)"
-  />
-  <TokenRow
-    token="--fs-button-primary-bkg-color"
-    value="var(--fs-color-primary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-primary-bkg-color-hover"
-    value="var(--fs-color-primary-bkg-hover)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-primary-bkg-color-active"
-    value="var(--fs-color-primary-bkg-active)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-primary-border-color"
-    value="transparent"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-primary-border-color-hover"
-    value="var(--fs-button-primary-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-primary-border-color-active"
-    value="var(--fs-button-primary-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-primary-shadow-hover"
-    value="var(--fs-button-shadow-hover)"
-  />
-</TokenTable>
-
-### Primary Inverse
-
-<Canvas style={{ backgroundColor: '#171a1c' }}>
-  <Story name="Primary Inverse" args={{ inverse: true, variant: 'primary' }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-button-primary-inverse-text-color"
-    value="var(--fs-button-primary-bkg-color)"
-    isColor
-    globalValue="var(--fs-color-primary-bkg)"
-  />
-  <TokenRow
-    token="--fs-button-primary-inverse-text-color-hover"
-    value="var(--fs-button-primary-bkg-color)"
-    isColor
-    globalValue="var(--fs-color-primary-bkg)"
-  />
-  <TokenRow
-    token="--fs-button-primary-inverse-text-color-active"
-    value="var(--fs-button-primary-bkg-color)"
-    isColor
-    globalValue="var(--fs-color-primary-bkg)"
-  />
-  <TokenRow
-    token="--fs-button-primary-inverse-bkg-color"
-    value="var(--fs-button-primary-text-color)"
-    isColor
-    globalValue="var(--fs-color-primary-text)"
-  />
-  <TokenRow
-    token="--fs-button-primary-inverse-bkg-color-hover"
-    value="var(--fs-color-primary-bkg-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-primary-inverse-bkg-color-active"
-    value="var(--fs-color-primary-bkg-light-active)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-primary-inverse-border-color"
-    value="var(--fs-button-primary-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-primary-inverse-border-color-hover"
-    value="var(--fs-button-primary-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-primary-inverse-border-color-active"
-    value="var(--fs-button-primary-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-primary-inverse-shadow-hover"
-    value="var(--fs-button-shadow-hover)"
-  />
-</TokenTable>
-
-### Secondary
-
-<Canvas>
-  <Story name="Secondary" args={{ variant: 'secondary' }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-button-secondary-text-color"
-    value="var(--fs-color-secondary-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-secondary-text-color-hover"
-    value="var(--fs-color-text-inverse)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-secondary-text-color-active"
-    value="var(--fs-button-secondary-text-color-hover)"
-    isColor
-    globalValue="var(--fs-color-text-inverse)"
-  />
-  <TokenRow
-    token="--fs-button-secondary-bkg-color"
-    value="var(--fs-color-secondary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-secondary-bkg-color-hover"
-    value="var(--fs-color-secondary-bkg-hover)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-secondary-bkg-color-active"
-    value="var(--fs-color-secondary-bkg-active)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-secondary-border-color"
-    value="var(--fs-button-secondary-text-color)"
-    isColor
-    globalValue="var(--fs-color-secondary-text)"
-  />
-  <TokenRow
-    token="--fs-button-secondary-border-color-hover"
-    value="var(--fs-button-secondary-bkg-color-hover)"
-    isColor
-    globalValue="var(--fs-color-secondary-bkg-hover)"
-  />
-  <TokenRow
-    token="--fs-button-secondary-border-color-active"
-    value="var(--fs-button-secondary-bkg-color-active)"
-    isColor
-    globalValue="var(--fs-color-secondary-bkg-active)"
-  />
-  <TokenRow
-    token="--fs-button-secondary-shadow-hover"
-    value="var(--fs-button-shadow-hover)"
-  />
-</TokenTable>
-
-### Secondary Inverse
-
-<Canvas style={{ backgroundColor: '#171a1c' }}>
-  <Story
-    name="Secondary Inverse"
-    args={{ inverse: true, variant: 'secondary' }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-button-secondary-inverse-text-color"
-    value="var(--fs-button-secondary-text-color-hover)"
-    isColor
-    globalValue="var(--fs-color-text-inverse)"
-  />
-  <TokenRow
-    token="--fs-button-secondary-inverse-text-color-hover"
-    value="var(--fs-button-secondary-text-color)"
-    isColor
-    globalValue="var(--fs-color-secondary-text)"
-  />
-  <TokenRow
-    token="--fs-button-secondary-inverse-text-color-active"
-    value="var(--fs-button-secondary-inverse-text-color-hover)"
-    isColor
-    globalValue="var(--fs-color-secondary-text)"
-  />
-  <TokenRow
-    token="--fs-button-secondary-inverse-bkg-color"
-    value="var(--fs-button-secondary-bkg-color)"
-    isColor
-    globalValue="var(--fs-color-secondary-bkg)"
-  />
-  <TokenRow
-    token="--fs-button-secondary-inverse-bkg-color-hover"
-    value="var(--fs-button-secondary-text-color-hover)"
-    isColor
-    globalValue="var(--fs-color-text-inverse)"
-  />
-  <TokenRow
-    token="--fs-button-secondary-inverse-bkg-color-active"
-    value="var(--fs-color-secondary-bkg-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-secondary-inverse-border-color"
-    value="var(--fs-button-secondary-inverse-text-color)"
-    isColor
-    globalValue="var(--fs-color-text-inverse)"
-  />
-  <TokenRow
-    token="--fs-button-secondary-inverse-border-color-hover"
-    value="var(--fs-button-secondary-inverse-bkg-color-hover)"
-    isColor
-    globalValue="var(--fs-color-text-inverse)"
-  />
-  <TokenRow
-    token="--fs-button-secondary-inverse-border-color-active"
-    value="var(--fs-button-secondary-inverse-bkg-color-hover)"
-    isColor
-    globalValue="var(--fs-color-secondary-bkg-light)"
-  />
-  <TokenRow
-    token="--fs-button-secondary-inverse-shadow-hover"
-    value="var(--fs-button-shadow-hover)"
-  />
-</TokenTable>
-
-### Tertiary
-
-<Canvas>
-  <Story name="Tertiary" args={{ variant: 'tertiary' }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-button-tertiary-text-color"
-    value="var(--fs-color-tertiary-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-tertiary-text-color-hover"
-    value="var(--fs-button-tertiary-text-color)"
-    isColor
-    globalValue="var(--fs-color-tertiary-text)"
-  />
-  <TokenRow
-    token="--fs-button-tertiary-text-color-active"
-    value="var(--fs-button-primary-bkg-color)"
-    isColor
-    globalValue="var(--fs-color-primary-bkg)"
-  />
-  <TokenRow
-    token="--fs-button-tertiary-bkg-color"
-    value="var(--fs-color-tertiary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-tertiary-bkg-color-hover"
-    value="var(--fs-color-tertiary-bkg-hover)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-tertiary-bkg-color-active"
-    value="var(--fs-color-tertiary-bkg-active)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-tertiary-border-color"
-    value="transparent"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-tertiary-border-color-hover"
-    value="var(--fs-button-tertiary-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-tertiary-border-color-active"
-    value="var(--fs-button-tertiary-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-tertiary-shadow-hover"
-    value="var(--fs-button-shadow-hover)"
-  />
-</TokenTable>
-
-### Tertiary Inverse
-
-<Canvas style={{ backgroundColor: '#171a1c' }}>
-  <Story name="Tertiary Inverse" args={{ inverse: true, variant: 'tertiary' }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-button-tertiary-inverse-text-color"
-    value="var(--fs-button-secondary-text-color-hover)"
-    isColor
-    globalValue="var(--fs-color-text-inverse)"
-  />
-  <TokenRow
-    token="--fs-button-tertiary-inverse-text-color-hover"
-    value="var(--fs-button-secondary-text-color-hover)"
-    isColor
-    globalValue="var(--fs-color-text-inverse)"
-  />
-  <TokenRow
-    token="--fs-button-tertiary-inverse-text-color-active"
-    value="var(--fs-button-secondary-text-color-hover)"
-    isColor
-    globalValue="var(--fs-color-text-inverse)"
-  />
-  <TokenRow
-    token="--fs-button-tertiary-inverse-bkg-color"
-    value="var(--fs-button-secondary-inverse-bkg-color)"
-    isColor
-    globalValue="var(--fs-color-secondary-bkg)"
-  />
-  <TokenRow
-    token="--fs-button-tertiary-inverse-bkg-color-hover"
-    value="var(--fs-button-primary-bkg-color-hover)"
-    isColor
-    globalValue="var(--fs-color-primary-bkg-hover)"
-  />
-  <TokenRow
-    token="--fs-button-tertiary-inverse-bkg-color-active"
-    value="var(--fs-button-primary-bkg-color-active)"
-    isColor
-    globalValue="var(--fs-color-primary-bkg-active)"
-  />
-  <TokenRow
-    token="--fs-button-tertiary-inverse-border-color"
-    value="var(--fs-button-tertiary-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-tertiary-inverse-border-color-hover"
-    value="var(--fs-button-tertiary-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-tertiary-inverse-border-color-active"
-    value="var(--fs-button-tertiary-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-tertiary-inverse-shadow-hover"
-    value="var(--fs-button-shadow-hover)"
-  />
-</TokenTable>
-
----
-
-## Variants <a id="variants" />
-
-### Disabled
-
-<Canvas>
-  <Story name="Disabled" args={{ variant: 'primary', disabled: true }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-button-disabled-bkg-color"
-    value="var(--fs-color-disabled-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-disabled-text-color"
-    value="var(--fs-color-disabled-text)"
-    isColor
-  />
-</TokenTable>
-
-### Small
-
-<Canvas>
-  <Story name="Small" args={{ size: 'small', variant: 'primary' }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-button-small-padding"
-    value="var(--fs-spacing-0) var(--fs-spacing-1)"
-  />
-  <TokenRow token="--fs-button-small-min-height" value="var(--fs-spacing-5)" />
-  <TokenRow token="--fs-button-small-gap" value="var(--fs-spacing-1)" />
-</TokenTable>
-
----
-
-## Related Components <a id="related-components" />
-
-<SectionList grid="grid">
-  <SectionItem
-    title="Button Icon"
-    description="A button which content is only an icon, without any label."
-  >
-    <div data-fs-button style={{ backgroundColor: 'white', borderRadius: 2 }}>
-      <Button
-        aria-label="Set location"
-        icon={<Icon name="MapPin" width={32} height={32} color="black" />}
-      />
-    </div>
-  </SectionItem>
-  <SectionItem
-    title="Button Buy"
-    description="A button with the intent of directly sending the user to the checkout/cart step."
-  >
-    <BuyButton>Button Buy</BuyButton>
-  </SectionItem>
-  <SectionItem
-    title="Button Link"
-    description="A button that acts as a link to navigate users between pages."
-  >
-    <LinkButton href="/">Button Link</LinkButton>
-  </SectionItem>
-</SectionList>
-
----
-
-<BestPractices>
-  <BestPracticesRule
-    recommendedUsage={
-      <div data-fs-button style={{ backgroundColor: 'white', borderRadius: 2 }}>
-        <Button
-          aria-label="Open menu"
-          icon={<Icon name="List" width={32} height={32} color="black" />}
-        />
-      </div>
-    }
-    recommendedDescription={
-      <>
-        For cases when the button doesn't have label, use{' '}
-        <code>aria-label</code> to describe its action for accessibility
-        purposes.
-      </>
-    }
-    discouragedUsage={<Button variant="primary">Button</Button>}
-    discouragedDescription={
-      <>
-        Avoid using <code>aria-label</code> when the button already has a label.
-      </>
-    }
-  />
-</BestPractices>

package/src/components/ui/Button/button.module.scss

@@ -1,11 +0,0 @@
-.fs-button {
-  // --------------------------------------------------------
-  // Design Tokens for Buttons
-  // --------------------------------------------------------
-
-  &[data-fs-button-link] {
-    &:hover { text-decoration: none; }
-
-    &[data-button-disabled="true"] { pointer-events: none; }
-  }
-}