@faststore/ui 2.0.3-alpha.0 → 2.0.5-alpha.0

package/src/base/typography.scss

@@ -0,0 +1,64 @@
+// ----------------------------------------------------------
+// STORE STYLES
+// Typography (Text)
+// ----------------------------------------------------------
+
+body {
+  font-family: var(--fs-text-face-body);
+  font-size: var(--fs-text-size-base);
+  letter-spacing: .01em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6, p, ul {
+  padding: 0;
+  margin: 0;
+}
+
+.text__title-section {
+  font-size: var(--fs-text-size-4);
+  font-weight: var(--fs-text-weight-bold);
+  line-height: 1.16;
+
+  @include media(">=notebook") { font-size: var(--fs-text-size-5); }
+}
+
+.text__title-subsection {
+  font-size: var(--fs-text-size-3);
+  font-weight: var(--fs-text-weight-bold);
+  line-height: 1.2;
+}
+
+.text__title-mini {
+  font-size: var(--fs-text-size-2);
+  font-weight: var(--fs-text-weight-bold);
+  line-height: 1.25;
+}
+
+// TODO: Can we replace this with `.text__body`?
+.text__title-mini-alt {
+  font-size: var(--fs-text-size-2);
+  line-height: 1.25;
+}
+
+.text__lead {
+  font-size: var(--fs-text-size-4);
+  font-weight: var(--fs-text-weight-bold);
+  line-height: 1.12;
+}
+
+.text__body {
+  font-size: var(--fs-text-size-2);
+  line-height: 1.5;
+}
+
+.text__legend {
+  font-size: var(--fs-text-size-1);
+  line-height: 1.7;
+}
+
+.text__tiny {
+  font-size: var(--fs-text-size-0);
+  line-height: 1.5;
+}

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

@@ -0,0 +1,156 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { Badge } from '@faststore/components'
+
+<Meta
+  title="Atoms/Badge/Default"
+  component={Badge}
+  argTypes={{
+    children: {
+      name: 'content',
+    },
+    variant: {
+      options: [
+        'info',
+        'highlighted',
+        'success',
+        'neutral',
+        'warning',
+        'danger',
+        '',
+      ],
+      control: { type: 'select' },
+    },
+    size: {
+      options: ['small', 'big'],
+      control: { type: 'radio' },
+    },
+    counter: {
+      options: ['true', 'false'],
+      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
+
+<Canvas>
+  <Story
+    name="overview-neutral"
+    args={{
+      children: 'Neutral',
+      size: 'small',
+      variant: 'neutral',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-info"
+    args={{
+      children: 'Info',
+      size: 'small',
+      variant: 'info',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-highlighted"
+    args={{
+      children: 'Highlighted',
+      size: 'small',
+      variant: 'highlighted',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-success"
+    args={{
+      children: 'Success',
+      size: 'small',
+      variant: 'success',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-warning"
+    args={{
+      children: 'Warning',
+      size: 'small',
+      variant: 'warning',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-danger"
+    args={{
+      children: 'Danger',
+      size: 'small',
+      variant: 'danger',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-big"
+    args={{
+      children: 'Big',
+      size: 'big',
+      variant: 'success',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-counter"
+    args={{
+      children: '3',
+      size: 'false',
+      counter: 'true',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+```jsx
+import Badge from '@faststore/ui'
+
+// Styles
+import @faststore/ui/src/components/atoms/Badge/styles.scss
+```
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      children: 'New arrival',
+      size: 'small',
+      variant: 'info',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />

package/src/components/atoms/Badge/styles.scss

@@ -0,0 +1,209 @@
+[data-fs-badge] {
+  // --------------------------------------------------------
+  // Design Tokens for Badges
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-badge-padding                      : var(--fs-spacing-0) var(--fs-spacing-2);
+
+  --fs-badge-border-radius                : var(--fs-border-radius-pill);
+  --fs-badge-border-width                 : var(--fs-border-width);
+  --fs-badge-border-color                 : transparent;
+
+  --fs-badge-bkg-color                    : var(--fs-color-neutral-bkg);
+
+  --fs-badge-text-color                   : var(--fs-color-text);
+  --fs-badge-text-size                    : var(--fs-text-size-tiny);
+  --fs-badge-text-weight                  : var(--fs-text-weight-bold);
+
+  --fs-badge-transition-function          : var(--fs-transition-function);
+  --fs-badge-transition-property          : var(--fs-transition-property);
+  --fs-badge-transition-timing            : var(--fs-transition-timing);
+
+  // Neutral
+  --fs-badge-neutral-bkg-color            : var(--fs-color-neutral-bkg);
+  --fs-badge-neutral-text-color           : var(--fs-badge-text-color);
+  --fs-badge-neutral-border-color         : var(--fs-color-neutral-bkg);
+
+  // Success
+  --fs-badge-success-bkg-color            : var(--fs-color-success-bkg);
+  --fs-badge-success-text-color           : var(--fs-badge-text-color);
+  --fs-badge-success-border-color         : var(--fs-color-success-bkg);
+
+  // Highlighted
+  --fs-badge-highlighted-bkg-color        : var(--fs-color-highlighted-bkg);
+  --fs-badge-highlighted-text-color       : var(--fs-color-highlighted-text);
+  --fs-badge-highlighted-border-color     : var(--fs-color-highlighted-bkg);
+
+  // Info
+  --fs-badge-info-bkg-color               : var(--fs-color-info-bkg);
+  --fs-badge-info-text-color              : var(--fs-color-info-text);
+  --fs-badge-info-border-color            : var(--fs-color-info-bkg);
+
+  // Warning
+  --fs-badge-warning-bkg-color            : var(--fs-color-warning-bkg);
+  --fs-badge-warning-text-color           : var(--fs-color-warning-text);
+  --fs-badge-warning-border-color         : var(--fs-color-warning-bkg);
+
+  // Danger
+  --fs-badge-danger-bkg-color             : var(--fs-color-danger-bkg);
+  --fs-badge-danger-text-color            : var(--fs-badge-text-color);
+  --fs-badge-danger-border-color          : var(--fs-color-danger-bkg);
+
+  // Discount
+  --fs-badge-discount-low-bkg-color       : var(--fs-badge-success-bkg-color);
+  --fs-badge-discount-low-text-color      : var(--fs-badge-success-text-color);
+  --fs-badge-discount-low-border-color    : var(--fs-badge-success-border-color);
+
+  --fs-badge-discount-medium-bkg-color    : var(--fs-badge-warning-bkg-color);
+  --fs-badge-discount-medium-text-color   : var(--fs-badge-warning-text-color);
+  --fs-badge-discount-medium-border-color : var(--fs-badge-warning-border-color);
+
+  --fs-badge-discount-high-bkg-color      : var(--fs-badge-danger-bkg-color);
+  --fs-badge-discount-high-text-color     : var(--fs-badge-danger-text-color);
+  --fs-badge-discount-high-border-color   : var(--fs-badge-danger-border-color);
+
+  // Big
+  --fs-badge-big-text-size                : var(--fs-text-size-legend);
+  --fs-badge-big-padding                  : var(--fs-spacing-1) var(--fs-spacing-2);
+
+  // Counter
+  --fs-badge-counter-size                : var(--fs-spacing-3);
+  --fs-badge-counter-padding             : var(--fs-spacing-0);
+  --fs-badge-counter-text-size           : var(--fs-text-size-0);
+  --fs-badge-counter-text-color          : var(--fs-color-text-inverse);
+  --fs-badge-counter-bkg-color           : var(--fs-color-link);
+  --fs-badge-counter-border-radius       : var(--fs-border-radius-pill);
+  --fs-badge-counter-border-color        : var(--fs-color-body-bkg);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  width: fit-content;
+  height: fit-content;
+  font-size: var(--fs-badge-text-size);
+  font-weight: var(--fs-badge-text-weight);
+  line-height: 1;
+  color: var(--fs-badge-text-color);
+  text-transform: uppercase;
+  white-space: nowrap;
+  border-radius: var(--fs-badge-border-radius);
+
+  [data-fs-badge-wrapper] {
+    padding: var(--fs-badge-padding);
+    overflow: hidden;
+    border-radius: var(--fs-badge-border-radius);
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-badge-size="big"] {
+    font-size: var(--fs-badge-big-text-size);
+
+    [data-fs-badge-wrapper] {
+      padding: var(--fs-badge-big-padding);
+    }
+  }
+
+  &[data-fs-badge-counter="true"] {
+    position: absolute;
+    top: .375rem;
+    left: 1.625rem;
+    font-size: 10px;
+    color: var(--fs-badge-counter-text-color);
+    border-color: var(--fs-badge-counter-border-color);
+    border-radius: var(--fs-badge-counter-border-radius);
+
+    [data-fs-badge-wrapper] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--fs-badge-counter-size);
+      height: var(--fs-badge-counter-size);
+      padding: var(--fs-badge-counter-padding);
+      background-color: var(--fs-badge-counter-bkg-color);
+      border-radius: var(--fs-badge-counter-border-radius);
+    }
+  }
+
+  &[data-fs-badge-variant="success"] {
+    color: var(--fs-badge-success-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-success-bkg-color);
+      border-color: var(--fs-badge-success-border-color);
+
+      &::after {
+        background-color: var(--fs-badge-success-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-badge-variant="neutral"] {
+    color: var(--fs-badge-neutral-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-neutral-bkg-color);
+      border-color: var(--fs-badge-neutral-border-color);
+
+      &::after {
+        background-color: var(--fs-badge-neutral-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-badge-variant="highlighted"] {
+    color: var(--fs-badge-highlighted-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-highlighted-bkg-color);
+      border-color: var(--fs-badge-highlighted-border-color);
+
+      &::after {
+        background-color: var(--fs-badge-highlighted-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-badge-variant="info"] {
+    color: var(--fs-badge-info-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-info-bkg-color);
+      border-color: var(--fs-badge-info-border-color);
+
+      &::after {
+        background-color: var(--fs-badge-info-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-badge-variant="warning"] {
+    color: var(--fs-badge-warning-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-warning-bkg-color);
+      border-color: var(--fs-badge-warning-border-color);
+
+      &::after {
+        background-color: var(--fs-badge-warning-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-badge-variant="danger"] {
+    color: var(--fs-badge-danger-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-danger-bkg-color);
+      border-color: var(--fs-badge-danger-border-color);
+
+      &::after {
+        background-color: var(--fs-badge-danger-bkg-color);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,110 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { Button } from '@faststore/components'
+
+<Meta
+  title="Atoms/Button/Default"
+  component={Button}
+  argTypes={{
+    children: {
+      name: 'content',
+    },
+    variant: {
+      options: ['primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'Specifies the component color variant.',
+    },
+    size: {
+      options: ['small', 'regular'],
+      control: { type: 'radio' },
+      description: 'Specifies the component size variant. ',
+    },
+    iconPosition: {
+      options: ['left', 'right'],
+      control: { type: 'radio' },
+    },
+  }}
+/>
+
+export const Template = ({ children, ...args }) => (
+  <Button {...args}>{children}</Button>
+)
+
+<header>
+
+# Button
+
+This component allows users to take actions, make choices or trigger an event with a single tap.
+
+</header>
+
+## Overview
+
+<Canvas>
+  <Story
+    name="overview-primary"
+    args={{
+      children: 'Primary',
+      size: 'regular',
+      variant: 'primary',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-secondary"
+    args={{
+      children: 'Secondary',
+      size: 'regular',
+      variant: 'secondary',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-tertiary"
+    args={{
+      children: 'Tertiary',
+      size: 'regular',
+      variant: 'tertiary',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-small"
+    args={{
+      children: 'Small',
+      size: 'small',
+      variant: 'secondary',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+```jsx
+import Button from '@faststore/ui'
+
+// Styles
+import @faststore/ui/src/components/atoms/Button/styles.scss
+```
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      children: 'Buy Now',
+      size: 'regular',
+      variant: 'primary',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />