@faststore/core 0.3.5 → 0.3.7

package/src/components/ui/InputText/input-text.module.scss

@@ -1,168 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-input-text {
-  // --------------------------------------------------------
-  // Design Tokens for Input Text
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-input-padding                     : var(--fs-spacing-2) var(--fs-spacing-2) 0;
-  --fs-input-height                      : var(--fs-control-tap-size);
-
-  --fs-input-box-shadow                  : none;
-  --fs-input-box-shadow-hover            : 0 0 0 var(--fs-border-width) var(--fs-border-color-active);
-
-  --fs-input-border-radius               : var(--fs-border-radius);
-  --fs-input-border-width                : var(--fs-border-width);
-  --fs-input-border-color                : var(--fs-border-color);
-  --fs-input-border-color-hover          : var(--fs-border-color-active);
-
-  --fs-input-text-color                  : var(--fs-color-text);
-  --fs-input-text-size                   : var(--fs-text-size-body);
-
-  --fs-input-line-height                 : 1.25;
-
-  --fs-input-transition-function         : var(--fs-transition-function);
-  --fs-input-transition-property         : var(--fs-transition-property);
-  --fs-input-transition-timing           : var(--fs-transition-timing);
-
-  // Label
-  --fs-input-label-padding               : 0 var(--fs-spacing-2);
-  --fs-input-label-color                 : var(--fs-color-text-light);
-  --fs-input-label-size                  : var(--fs-text-size-tiny);
-
-  // Error
-  --fs-input-error-message-size          : var(--fs-text-size-legend);
-  --fs-input-error-message-line-height   : 1.1;
-  --fs-input-error-message-margin-top    : var(--fs-spacing-0);
-  --fs-input-error-message-color         : var(--fs-color-danger-text);
-  --fs-input-error-border-color          : var(--fs-color-danger-border);
-  --fs-input-error-box-shadow            : 0 0 0 var(--fs-border-width) var(--fs-input-error-border-color);
-  --fs-input-error-focus-ring            : var(--fs-color-focus-ring-danger);
-
-  // Disabled
-  --fs-input-disabled-bkg-color          : var(--fs-color-disabled-bkg);
-  --fs-input-disabled-text-color         : var(--fs-color-disabled-text);
-  --fs-input-disabled-border-width       : var(--fs-border-width);
-  --fs-input-disabled-border-color       : var(--fs-border-color);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  position: relative;
-  display: flex;
-  flex-flow: column;
-
-  input,
-  label {
-    transition: var(--fs-input-transition-property) var(--fs-input-transition-timing) var(--fs-input-transition-function);
-  }
-
-  input {
-    height: var(--fs-input-height);
-    padding: var(--fs-input-padding);
-    font-size: var(--fs-input-text-size);
-    line-height: var(--fs-input-line-height);
-    color: var(--fs-input-text-color);
-    border: var(--fs-input-border-width) solid var(--fs-input-border-color);
-    border-radius: var(--fs-input-border-radius);
-    box-shadow: var(--fs-input-box-shadow);
-
-    @include input-focus-ring;
-
-    &:placeholder-shown + label {
-      top: calc(1.5 * (var(--fs-input-text-size) / 2));
-      overflow: hidden;
-    }
-
-    &::placeholder {
-      opacity: 0;
-      transition: inherit;
-    }
-
-    &:focus::placeholder {
-      opacity: 1;
-    }
-
-    &:not(:placeholder-shown) + label,
-    &:focus + label {
-      top: rem(6px);
-      font-size: var(--fs-input-label-size);
-    }
-
-    &:hover:not(:disabled):not(:focus-visible):not(:focus) {
-      border-color: var(--fs-input-border-color-hover);
-      box-shadow: var(--fs-input-box-shadow-hover);
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      background-color: var(--fs-input-disabled-bkg-color);
-      border: var(--fs-input-disabled-border-width) solid var(--fs-input-disabled-border-color);
-      + label { cursor: not-allowed; }
-    }
-  }
-
-  label {
-    position: absolute;
-    padding: var(--fs-input-label-padding);
-    font-size: var(--fs-input-text-size);
-    line-height: 1.5;
-    color: var(--fs-input-label-color);
-  }
-
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-input-text-error="true"] {
-    input {
-      border-color: var(--fs-input-error-border-color);
-
-      @include input-focus-ring($outline: #{var(--fs-input-error-focus-ring)},
-      $border: #{var(--fs-input-error-border-color)});
-
-      &:hover:not(:disabled):not(:focus-visible):not(:focus) {
-        border-color: var(--fs-input-error-border-color);
-        box-shadow: var(--fs-input-error-box-shadow);
-      }
-    }
-
-    [data-fs-input-text-error-message] {
-      margin-top: var(--fs-input-error-message-margin-top);
-      font-size: var(--fs-input-error-message-size);
-      line-height: var(--fs-input-error-message-line-height);
-      color: var(--fs-input-error-message-color);
-    }
-  }
-
-  &[data-fs-input-text-actionable="true"] {
-    min-width: rem(250px);
-
-    input {
-      padding-right: var(--fs-spacing-13);
-    }
-
-    [data-fs-button] {
-      position: absolute;
-      top: var(--fs-spacing-1);
-      right: var(--fs-spacing-1);
-
-      &::before {
-        position: absolute;
-        left: calc(-1 * var(--fs-spacing-1));
-        width: 1px;
-        height: 80%;
-        content: "";
-        background-color: var(--fs-input-border-color);
-      }
-    }
-
-    [data-fs-button][data-fs-icon-button] {
-      &::before {
-        left: calc(-1 * var(--fs-spacing-1));
-      }
-    }
-  }
-}

package/src/components/ui/Link/link.module.scss

@@ -1,98 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-link {
-  // --------------------------------------------------------
-  // Design Tokens for Link
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-link-min-width                  : auto;
-  --fs-link-min-height                 : var(--fs-link-min-width);
-  --fs-link-padding                    : var(--fs-spacing-2) var(--fs-spacing-0);
-  --fs-link-border-radius              : var(--fs-border-radius);
-
-  --fs-link-text-line-height           : 1.5;
-  --fs-link-text-color                 : var(--fs-color-link);
-  --fs-link-text-color-visited         : var(--fs-color-link-visited);
-  --fs-link-text-decoration            : none;
-  --fs-link-text-decoration-hover      : underline;
-
-  --fs-link-transition-function        : var(--fs-transition-function);
-  --fs-link-transition-property        : var(--fs-transition-property);
-  --fs-link-transition-timing          : var(--fs-transition-timing);
-
-  // Inverse
-  --fs-link-inverse-text-color         : var(--fs-color-link-inverse);
-  --fs-link-inverse-text-color-visited : var(--fs-link-inverse-text-color);
-
-  // Display
-  --fs-link-display-text-line-height   : var(--fs-link-text-line-height);
-  --fs-link-display-text-color         : var(--fs-color-text-display);
-  --fs-link-display-text-color-visited : var(--fs-link-display-text-color);
-
-  // Inline
-  --fs-link-inline-padding             : 0;
-  --fs-link-inline-text-decoration     : underline;
-  --fs-link-inline-text-color          : var(--fs-link-text-color);
-
-  // Footer
-  --fs-link-footer-text-size           : var(--fs-text-size-1);
-  --fs-link-footer-text-color          : var(--fs-color-info-text);
-  --fs-link-footer-padding             : var(--fs-spacing-1) var(--fs-spacing-0);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  min-width: var(--fs-link-min-width);
-  min-height: var(--fs-link-min-height);
-  padding: var(--fs-link-padding);
-  text-decoration: var(--fs-link-text-decoration);
-
-  &:hover { text-decoration: var(--fs-link-text-decoration-hover); }
-
-  &:visited { color: var(--fs-link-text-color-visited); }
-
-  a, [data-fs-link] {
-    border-radius: var(--fs-link-border-radius);
-    transition: var(--fs-link-transition-property) var(--fs-link-transition-timing) var(--fs-link-transition-function);
-
-    @include focus-ring-visible;
-  }
-
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-link-variant="default"] {
-    line-height: var(--fs-link-text-line-height);
-    color: var(--fs-link-text-color);
-  }
-
-  &[data-fs-link-variant="display"] {
-    line-height: var(--fs-link-display-text-line-height);
-    color: var(--fs-link-display-text-color);
-
-    &:visited { color: var(--fs-link-display-text-color-visited); }
-  }
-
-  &[data-fs-link-variant="inline"] {
-    display: inline-block;
-    padding: var(--fs-link-inline-padding);
-    color: var(--fs-link-inline-text-color);
-    text-decoration: var(--fs-link-inline-text-decoration);
-  }
-
-  &[data-fs-link-variant="footer"] {
-    font-size: var(--fs-link-footer-text-size);
-    color: var(--fs-link-footer-text-color);
-
-    @include media(">=notebook") { padding: var(--fs-link-footer-padding); }
-  }
-
-  &[data-fs-link-inverse="true"] {
-    color: var(--fs-link-inverse-text-color);
-
-    &:visited { color: var(--fs-link-inverse-text-color-visited); }
-  }
-}

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

@@ -1,237 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Radio from '.'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Atoms/Radio"
-  component={Radio}
-  argTypes={{
-    disabled: {
-      type: {
-        name: 'boolean',
-      },
-      description:
-        'Specifies that this input should be disabled. <br/> `boolean`',
-      defaultValue: false,
-    },
-  }}
-/>
-
-export const Template = (args) => <Radio {...args} onChange={() => {}} />
-
-<header>
-
-# Radio
-
-Radios allow users to select one option from a set.
-
-</header>
-
-## Overview
-
-The `Radio` component uses [FastStore UI Radio](https://www.faststore.dev/reference/ui/atoms/Radio) as base.
-
-<Canvas>
-  <Story
-    name="overview-default-1"
-    args={{
-      id: 'overview-radio-default-1',
-      label: 'Label',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-default-2"
-    args={{
-      id: 'overview-radio-default-2',
-      label: 'Label',
-      checked: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-default-3"
-    args={{
-      id: 'overview-radio-default-3',
-      label: 'Label',
-      disabled: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-default-4"
-    args={{
-      id: 'overview-radio-default-4',
-      label: 'Label',
-      disabled: true,
-      checked: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-`import Radio from '../components/ui/Radio'`
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      id: 'radio-default',
-      label: 'Label',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-<TokenTable>
-  <TokenRow token="--fs-radio-width" value="1.25rem" />
-  <TokenRow token="--fs-radio-height" value="var(--fs-radio-width)" />
-  <TokenDivider />
-  <TokenRow token="--fs-radio-border-width" value="var(--fs-border-width)" />
-  <TokenRow
-    token="--fs-radio-border-radius"
-    value="var(--fs-border-radius-circle)"
-  />
-  <TokenRow
-    token="--fs-radio-border-color"
-    value="var(--fs-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-radio-border-color-hover"
-    value="var(--fs-border-color-hover)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-radio-transition"
-    value="border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-radio-bkg-color-hover"
-    value="var(--fs-color-primary-bkg-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-radio-shadow-hover"
-    value="0 0 0 var(--fs-radio-border-width) var(--fs-border-color-active)"
-  />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Knob
-
-<TokenTable>
-  <TokenRow token="--fs-radio-knob-width" value="var(--fs-spacing-1)" />
-  <TokenRow token="--fs-radio-knob-height" value="var(--fs-radio-knob-width)" />
-  <TokenRow
-    token="--fs-radio-knob-bkg-color"
-    value="var(--fs-color-body-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-radio-knob-disabled-bkg-color"
-    value="var(--fs-color-neutral-5)"
-    isColor
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Checked
-
-<Canvas>
-  <Story
-    name="checked"
-    args={{
-      id: 'radio-checked',
-      label: 'Label',
-      checked: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-radio-checked-bkg-color"
-    value="var(--fs-color-primary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-radio-checked-bkg-color-hover"
-    value="var(--fs-color-primary-bkg-hover)"
-    isColor
-  />
-</TokenTable>
-
-### Disabled
-
-<Canvas>
-  <Story
-    name="disabled"
-    args={{
-      id: 'radio-disabled',
-      label: 'Label',
-      disabled: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="disabled-checked"
-    args={{
-      id: 'radio-disabled-checked',
-      label: 'Label',
-      disabled: true,
-      checked: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-radio-disabled-bkg-color"
-    value="var(--fs-color-disabled-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-radio-disabled-border-width"
-    value="var(--fs-radio-border-width)"
-  />
-  <TokenRow
-    token="--fs-radio-disabled-border-color"
-    value="var(--fs-border-color-disabled)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-radio-disabled-text-color"
-    value="var(--fs-color-disabled-text)"
-    isColor
-  />
-</TokenTable>

package/src/components/ui/Radio/Radio.tsx

@@ -1,36 +0,0 @@
-import { Radio as UIRadio, Label as UILabel } from '@faststore/ui'
-import type { RadioProps as UIRadioProps } from '@faststore/ui'
-
-import styles from './radio.module.scss'
-
-export type RadioProps = {
-  /**
-   * ID to identify input and corresponding label.
-   */
-  id: string
-  /**
-   * The text displayed to identify the input.
-   */
-  label: string
-  /**
-   * The value to identify the input.
-   */
-  value?: string
-  /**
-   * Identify radio in the same group.
-   */
-  name?: string
-} & UIRadioProps
-
-function Radio({ id, label, value, name, ...otherProps }: RadioProps) {
-  return (
-    <div data-fs-radio className={styles.fsRadio}>
-      <UIRadio id={id} value={value ?? label} name={name} {...otherProps} />
-      <UILabel data-fs-label htmlFor={id}>
-        {label}
-      </UILabel>
-    </div>
-  )
-}
-
-export default Radio

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

@@ -1,2 +0,0 @@
-export { default } from './Radio'
-export type { RadioProps } from './Radio'

package/src/components/ui/Radio/radio.module.scss

@@ -1,122 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-radio {
-  // --------------------------------------------------------
-  // Design Tokens for radio
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-radio-width                        : 1.25rem;
-  --fs-radio-height                       : var(--fs-radio-width);
-
-  --fs-radio-border-width                 : var(--fs-border-width);
-  --fs-radio-border-radius                : var(--fs-border-radius-circle);
-  --fs-radio-border-color                 : var(--fs-border-color);
-  --fs-radio-border-color-hover           : var(--fs-border-color-hover);
-
-  --fs-radio-transition                   : border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function);
-
-  --fs-radio-bkg-color-hover              : var(--fs-color-primary-bkg-light);
-  --fs-radio-shadow-hover                 : 0 0 0 var(--fs-radio-border-width) var(--fs-border-color-active);
-
-  // Knob
-  --fs-radio-knob-width                   : var(--fs-spacing-1);
-  --fs-radio-knob-height                  : var(--fs-radio-knob-width);
-  --fs-radio-knob-bkg-color               : var(--fs-color-body-bkg);
-  --fs-radio-knob-disabled-bkg-color      : var(--fs-color-neutral-5);
-
-  // Checked
-  --fs-radio-checked-bkg-color            : var(--fs-color-primary-bkg);
-  --fs-radio-checked-bkg-color-hover      : var(--fs-color-primary-bkg-hover);
-
-  // Disabled
-  --fs-radio-disabled-bkg-color           : var(--fs-color-disabled-bkg);
-  --fs-radio-disabled-border-width        : var(--fs-radio-border-width);
-  --fs-radio-disabled-border-color        : var(--fs-border-color-disabled);
-  --fs-radio-disabled-text-color          : var(--fs-color-disabled-text);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  display: flex;
-  column-gap: var(--fs-spacing-1);
-  align-items: center;
-
-  label { width: 100%; }
-
-  input {
-    position: relative;
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: var(--fs-radio-width);
-    height: var(--fs-radio-height);
-    cursor: pointer;
-    border: var(--fs-radio-border-width) solid var(--fs-radio-border-color);
-    border-radius: var(--fs-radio-border-radius);
-    outline: none;
-    transition: var(--fs-radio-transition);
-    appearance: none;
-
-    @include input-focus-ring;
-
-    &::before {
-      width: var(--fs-radio-knob-width);
-      height: var(--fs-radio-knob-height);
-      pointer-events: none;
-      content: "";
-      background-color: var(--fs-radio-knob-bkg-color);
-      border-radius: var(--fs-radio-border-radius);
-      opacity: 0;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--fs-radio-bkg-color-hover);
-    }
-
-    &:hover:not(:disabled):not(:focus-visible):not(:focus) {
-      border-color: var(--fs-radio-border-color-hover);
-      box-shadow: var(--fs-radio-shadow-hover);
-    }
-
-    &:checked {
-      background-color: var(--fs-radio-checked-bkg-color);
-      border: none;
-
-      &::before {
-        opacity: 1;
-      }
-
-      &:hover:not(:disabled) {
-        background-color: var(--fs-radio-checked-bkg-color-hover);
-      }
-
-      &:hover:not(:disabled):not(:focus-visible):not(:focus) {
-        box-shadow: none;
-      }
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      background-color: var(--fs-radio-disabled-bkg-color);
-      border: var(--fs-radio-disabled-border-width) solid var(--fs-radio-disabled-border-color);
-
-      &::before {
-        background-color: var(--fs-radio-knob-disabled-bkg-color);
-      }
-
-      &:checked {
-        &::before {
-          background-color: var(--fs-radio-knob-disabled-bkg-color);
-        }
-      }
-
-      + label {
-        color: var(--fs-radio-disabled-text-color);
-        cursor: not-allowed;
-      }
-    }
-  }
-}