@faststore/core 0.3.6 → 0.3.7

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

@@ -1,465 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { Badge } from '.'
-import { DiscountBadge } from '.'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-  SectionList,
-  SectionItem,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Molecules/Badge/Default"
-  component={Badge}
-  argTypes={{
-    onClose: { table: { disable: true } },
-    children: {
-      name: 'content',
-    },
-    variant: {
-      options: [
-        'info',
-        'highlighted',
-        'success',
-        'neutral',
-        'warning',
-        'danger',
-      ],
-      control: { type: 'radio' },
-    },
-  }}
-/>
-
-export const Template = ({ children, ...args }) => (
-  <Badge {...args}>{children}</Badge>
-)
-
-<header>
-
-# Badge
-
-Badges are status descriptors used to emphasize an item's state.
-
-</header>
-
-## Overview
-
-The `Badge` component uses [FastStore UI Badge](https://www.faststore.dev/reference/ui/atoms/Badge) as base.
-
-<Canvas className="sbdocs-vertically-center">
-  <Story
-    name="overview-neutral"
-    args={{
-      children: 'Neutral',
-      big: false,
-      actionable: false,
-      variant: 'neutral',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-info"
-    args={{
-      children: 'Info',
-      big: false,
-      actionable: false,
-      variant: 'info',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-highlighted"
-    args={{
-      children: 'Highlighted',
-      big: false,
-      actionable: false,
-      variant: 'highlighted',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-success"
-    args={{
-      children: 'Success',
-      big: false,
-      actionable: false,
-      variant: 'success',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-warning"
-    args={{
-      children: 'Warning',
-      big: false,
-      actionable: false,
-      variant: 'warning',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-danger"
-    args={{
-      children: 'Danger',
-      big: false,
-      actionable: false,
-      variant: 'danger',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-actionable"
-    args={{
-      children: 'Big & Actionable',
-      big: true,
-      actionable: true,
-      variant: 'success',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-`import Badge from '../components/ui/Badge'`
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      children: 'New arrival',
-      big: false,
-      actionable: false,
-      variant: 'info',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-badge-padding"
-    value="var(--fs-spacing-0) var(--fs-spacing-2)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-badge-border-radius"
-    value="var(--fs-border-radius-pill)"
-  />
-  <TokenRow token="--fs-badge-border-width" value="var(--fs-border-width)" />
-  <TokenRow token="--fs-badge-border-color" value="transparent" isColor />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-badge-bkg-color"
-    value="var(--fs-color-neutral-bkg)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-badge-text-color"
-    value="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow token="--fs-badge-text-size" value="var(--fs-text-size-tiny)" />
-  <TokenRow token="--fs-badge-text-weight" value="var(--fs-text-weight-bold)" />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-badge-transition-function"
-    value="var(--fs-transition-function)"
-  />
-  <TokenRow
-    token="--fs-badge-transition-property"
-    value="var(--fs-transition-property)"
-  />
-  <TokenRow
-    token="--fs-badge-transition-timing"
-    value="var(--fs-transition-timing)"
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Actionable
-
-<Canvas>
-  <Story
-    name="badge-actionable"
-    args={{
-      children: 'Badge Actionable',
-      big: true,
-      actionable: true,
-      variant: 'neutral',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Big
-
-<Canvas>
-  <Story
-    name="badge-big"
-    args={{
-      children: 'Badge Big',
-      big: true,
-      actionable: false,
-      variant: 'neutral',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-badge-big-text-size"
-    value="var(--fs-text-size-legend)"
-  />
-  <TokenRow
-    token="--fs-badge-big-padding"
-    value="var(--fs-spacing-1) var(--fs-spacing-2)"
-  />
-</TokenTable>
-
-### Neutral
-
-<Canvas>
-  <Story
-    name="badge-neutral"
-    args={{
-      children: 'Badge Neutral',
-      big: false,
-      actionable: false,
-      variant: 'neutral',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-badge-neutral-bkg-color"
-    value="var(--fs-color-neutral-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-neutral-text-color"
-    value="var(--fs-badge-text-color)"
-    globalValue="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-neutral-border-color"
-    value="var(--fs-color-neutral-bkg)"
-    isColor
-  />
-</TokenTable>
-
-### Success
-
-<Canvas>
-  <Story
-    name="badge-success"
-    args={{
-      children: 'Badge Success',
-      big: false,
-      actionable: false,
-      variant: 'success',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-badge-success-bkg-color"
-    value="var(--fs-color-success-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-success-text-color"
-    value="var(--fs-badge-text-color)"
-    globalValue="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-success-border-color"
-    value="var(--fs-color-success-bkg)"
-    isColor
-  />
-</TokenTable>
-
-### Highlighted
-
-<Canvas>
-  <Story
-    name="badge-highlighted"
-    args={{
-      children: 'Badge Highlighted',
-      big: false,
-      actionable: false,
-      variant: 'highlighted',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-badge-highlighted-bkg-color"
-    value="var(--fs-color-highlighted-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-highlighted-text-color"
-    value="var(--fs-color-highlighted-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-highlighted-border-color"
-    value="var(--fs-color-highlighted-bkg)"
-    isColor
-  />
-</TokenTable>
-
-### Info
-
-<Canvas>
-  <Story
-    name="badge-info"
-    args={{
-      children: 'Badge Info',
-      big: false,
-      actionable: false,
-      variant: 'info',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-badge-info-bkg-color"
-    value="var(--fs-color-info-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-info-text-color"
-    value="var(--fs-color-info-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-info-border-color"
-    value="var(--fs-color-info-bkg)"
-    isColor
-  />
-</TokenTable>
-
-### Warning
-
-<Canvas>
-  <Story
-    name="badge-warning"
-    args={{
-      children: 'Badge Warning',
-      big: false,
-      actionable: false,
-      variant: 'warning',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-badge-warning-bkg-color"
-    value="var(--fs-color-warning-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-warning-text-color"
-    value="var(--fs-color-warning-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-warning-border-color"
-    value="var(--fs-color-warning-bkg)"
-    isColor
-  />
-</TokenTable>
-
-### Danger
-
-<Canvas>
-  <Story
-    name="badge-danger"
-    args={{
-      children: 'Badge Danger',
-      big: false,
-      actionable: false,
-      variant: 'danger',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-badge-danger-bkg-color"
-    value="var(--fs-color-danger-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-danger-text-color"
-    value="var(--fs-badge-text-color)"
-    globalValue="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-danger-border-color"
-    value="var(--fs-color-danger-bkg)"
-    isColor
-  />
-</TokenTable>
-
----
-
-## Related Components
-
-<SectionList>
-  <SectionItem
-    title="Discount Badge"
-    actionPath="../?path=/docs/molecules-badge-discountbadge--overview-default"
-    description={
-      <>
-        A <code>Badge</code> used to show product discounts.
-      </>
-    }
-  >
-    <DiscountBadge listPrice="45" spotPrice="40" />
-  </SectionItem>
-</SectionList>

package/src/components/ui/Badge/Badge.tsx

@@ -1,76 +0,0 @@
-import { Badge as UIBadge } from '@faststore/ui'
-import type { ReactNode } from 'react'
-
-import Button from 'src/components/ui/Button'
-import Icon from 'src/components/ui/Icon'
-
-import styles from './badge.module.scss'
-
-export type BadgeVariants =
-  | 'info'
-  | 'highlighted'
-  | 'success'
-  | 'neutral'
-  | 'warning'
-  | 'danger'
-
-type ActionableBadge =
-  | {
-      actionable: true
-      onClose?: () => void
-    }
-  | {
-      actionable?: false
-      onClose?: never
-    }
-
-export type BadgeProps = {
-  /**
-   * Sets the component's size.
-   */
-  big?: boolean
-  /**
-   * Specifies the component variant.
-   */
-  variant?: BadgeVariants
-  children: ReactNode
-  onClose?: () => void
-  /**
-   * Adds a Close Button to the component.
-   */
-  actionable?: boolean
-} & ActionableBadge
-
-const Badge = ({
-  variant = 'neutral',
-  children,
-  onClose,
-  big = false,
-  actionable = false,
-  ...otherProps
-}: BadgeProps) => {
-  return (
-    <UIBadge
-      className={styles.fsBadge}
-      data-fs-badge={big ? 'big' : ''}
-      data-fs-badge-variant={variant}
-      data-fs-badge-actionable={actionable}
-      {...otherProps}
-    >
-      {actionable && (
-        <Button
-          aria-label="Remove"
-          data-fs-badge-button
-          onClick={onClose}
-          icon={<Icon name="X" width={18} height={18} weight="bold" />}
-          iconPosition="left"
-        />
-      )}
-      <div data-fs-badge-wrapper>
-        <span>{children}</span>
-      </div>
-    </UIBadge>
-  )
-}
-
-export default Badge

package/src/components/ui/Badge/DiscountBadge.stories.mdx

@@ -1,191 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { DiscountBadge } from '.'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta title="Molecules/Badge/DiscountBadge" component={DiscountBadge} />
-
-export const Template = (args) => <DiscountBadge {...args} />
-
-<header>
-
-# Discount Badge
-
-A custom `Badge` that display product's discounts. You can see its usage on [ProductCard](?path=/docs/molecules-productcard--overview-default).
-
-</header>
-
-## Overview
-
-The `DiscountBadge` component uses [Badge](?path=/docs/molecules-badge-default--overview-neutral) as base.
-
-<Canvas>
-  <Story
-    name="overview-default"
-    args={{
-      big: false,
-      listPrice: 45,
-      spotPrice: 40,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-discount-medium"
-    args={{
-      big: false,
-      listPrice: 65,
-      spotPrice: 40,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-discount-high"
-    args={{
-      big: false,
-      listPrice: 80,
-      spotPrice: 40,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-`import DiscountBadge from '../components/ui/DiscountBadge'`
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      big: false,
-      listPrice: 45,
-      spotPrice: 40,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
----
-
-## Variants
-
-### Low Discount
-
-<Canvas>
-  <Story
-    name="badge-discount-low"
-    args={{
-      big: false,
-      listPrice: 45,
-      spotPrice: 40,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-badge-discount-low-bkg-color"
-    value="var(--fs-badge-success-bkg-color)"
-    globalValue="var(--fs-color-success-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-discount-low-text-color"
-    value="var(--fs-badge-success-text-color)"
-    globalValue="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-discount-low-border-color"
-    value="var(--fs-badge-success-border-color)"
-    globalValue="var(--fs-color-success-bkg)"
-    isColor
-  />
-</TokenTable>
-
-### Medium Discount
-
-<Canvas>
-  <Story
-    name="badge-discount-medium"
-    args={{
-      big: false,
-      listPrice: 65,
-      spotPrice: 40,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-badge-discount-medium-bkg-color"
-    value="var(--fs-badge-warning-bkg-color)"
-    globalValue="var(--fs-color-warning-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-discount-medium-text-color"
-    value="var(--fs-badge-warning-text-color)"
-    globalValue="var(--fs-color-warning-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-discount-medium-border-color"
-    value="var(--fs-badge-warning-border-color)"
-    globalValue="var(--fs-color-warning-bkg)"
-    isColor
-  />
-</TokenTable>
-
-### High Discount
-
-<Canvas>
-  <Story
-    name="badge-discount-high"
-    args={{
-      big: false,
-      listPrice: 80,
-      spotPrice: 40,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-badge-discount-high-bkg-color"
-    value="var(--fs-badge-danger-bkg-color)"
-    globalValue="var(--fs-color-danger-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-discount-high-text-color"
-    value="var(--fs-badge-danger-text-color)"
-    globalValue="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-badge-discount-high-border-color"
-    value="var(--fs-badge-danger-border-color)"
-    globalValue="var(--fs-color-danger-bkg)"
-    isColor
-  />
-</TokenTable>