@faststore/core 22.42.6

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

@@ -0,0 +1,685 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+
+import Button, { ButtonBuy, ButtonLink } from '.'
+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>
+
+### Counter
+
+<Canvas>
+  <Story
+    name="Counter"
+    args={{
+      icon: <Icon name="User" width="18" height="18" weight="bold" />,
+      counter: 3,
+    }}
+  >
+    {TemplateIcon.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-button-counter-size" value="var(--fs-spacing-3)" />
+  <TokenRow token="--fs-button-counter-padding" value="var(--fs-spacing-0)" />
+  <TokenRow
+    token="--fs-button-counter-text-size"
+    value="var(--fs-text-size-0)"
+  />
+  <TokenRow
+    token="--fs-button-counter-text-color"
+    value="var(--fs-color-text-inverse)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-button-counter-bkg-color"
+    value="var(--fs-color-link)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-button-counter-border-radius"
+    value="var(--fs-border-radius-pill)"
+  />
+  <TokenRow
+    token="--fs-button-counter-border-color"
+    value="var(--fs-color-body-bkg)"
+    isColor
+  />
+</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."
+  >
+    <ButtonBuy>Button Buy</ButtonBuy>
+  </SectionItem>
+  <SectionItem
+    title="Button Link"
+    description="A button that acts as a link to navigate users between pages."
+  >
+    <ButtonLink href="/">Button Link</ButtonLink>
+  </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>