@faststore/core 0.3.5 → 0.3.7

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

@@ -1,168 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import Select from '.'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta title="Atoms/Select" component={Select} />
-
-export const Template = (args) => <Select {...args} />
-
-<header>
-
-# Select
-
-Select components allow users to pick an option from a predefined list.
-
-</header>
-
-## Overview
-
-The `Select` component uses [FastStore UI Select](https://www.faststore.dev/reference/ui/atoms/Select) as base.
-
-<Canvas>
-  <Story
-    name="overview-default"
-    args={{
-      id: 'overview-default',
-      options: {
-        name_asc: 'Name, A-Z',
-        name_desc: 'Name, Z-A',
-      },
-      label: 'Order by:',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-disabled"
-    args={{
-      id: 'overview-disabled',
-      options: {
-        name_asc: 'Name, A-Z',
-        name_desc: 'Name, Z-A',
-      },
-      label: 'Order by:',
-      disabled: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-`import Select from '../components/ui/Select'`
-
-<Canvas>
-  <Story
-    name="select-default"
-    args={{
-      id: 'select-default',
-      options: {
-        name_asc: 'Name, A-Z',
-        name_desc: 'Name, Z-A',
-      },
-      label: 'Order by:',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="select-default" />
-
-<TokenTable>
-  <TokenRow token="--fs-select-height" value="var(--fs-spacing-6)" />
-  <TokenRow token="--fs-select-min-height" value="var(--fs-control-tap-size)" />
-  <TokenRow
-    token="--fs-select-padding"
-    value="var(--fs-spacing-1) var(--fs-spacing-5) var(--fs-spacing-1) var(--fs-spacing-2)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-select-text-color"
-    value="var(--fs-color-link)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow token="--fs-select-border-radius" value="var(--fs-border-radius)" />
-  <TokenDivider />
-  <TokenRow token="--fs-select-bkg" value="transparent" />
-  <TokenRow
-    token="--fs-select-bkg-color-focus"
-    value="var(--fs-color-primary-bkg-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-select-bkg-color-hover"
-    value="var(--fs-select-bkg-color-focus)"
-    globalValue="var(--fs-color-primary-bkg-light)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-select-transition-timing"
-    value="var(--fs-transition-timing)"
-  />
-  <TokenRow
-    token="--fs-select-transition-property"
-    value="var(--fs-transition-property)"
-  />
-  <TokenRow
-    token="--fs-select-transition-function"
-    value="var(--fs-transition-function)"
-  />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Label
-
-<TokenTable>
-  <TokenRow
-    token="--fs-select-label-color"
-    value="var(--fs-color-text-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-select-label-margin-right"
-    value="var(--fs-spacing-1)"
-  />
-</TokenTable>
-
-### Icon
-
-<TokenTable>
-  <TokenRow
-    token="--fs-select-icon-color"
-    value="var(--fs-color-link)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-select-icon-position-right"
-    value="var(--fs-spacing-2)"
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Disabled
-
-<TokenTable>
-  <TokenRow
-    token="--fs-select-disabled-text-color"
-    value="var(--fs-color-disabled-text)"
-    isColor
-  />
-  <TokenRow token="--fs-select-disabled-text-opacity" value="1" />
-</TokenTable>

package/src/components/ui/Select/Select.tsx

@@ -1,70 +0,0 @@
-import { Select as UISelect, Label as UILabel } from '@faststore/ui'
-import type { SelectProps as UISelectProps } from '@faststore/ui'
-
-import Icon from 'src/components/ui/Icon'
-
-import styles from './select.module.scss'
-
-export interface SelectProps extends UISelectProps {
-  /**
-   * Redefines the id property to be required when using the Select component. The
-   * id will be used to link the UISelect component and its label.
-   */
-  id: string
-  /**
-   * Defines the options available in the select. The SelectOptions object
-   * keys are the property names, while the values correspond to the text that
-   * will be displayed in the UI.
-   */
-  options: Record<string, string>
-  /**
-   * Specifies the text that will be displayed in the label right next to the Select.
-   * If omitted, the label will not be rendered.
-   */
-  label?: string
-}
-
-function Select({
-  id,
-  className,
-  options,
-  onChange,
-  label,
-  value,
-  'aria-label': ariaLabel,
-  testId,
-  ...otherProps
-}: SelectProps) {
-  return (
-    <div data-fs-select className={`${styles.fsSelect} ${className}`}>
-      {label && (
-        <UILabel data-fs-select-label htmlFor={id}>
-          {label}
-        </UILabel>
-      )}
-      <UISelect
-        data-testid={testId}
-        onChange={onChange}
-        value={value}
-        aria-label={ariaLabel}
-        id={id}
-        {...otherProps}
-      >
-        {Object.keys(options).map((key) => (
-          <option key={key} value={key}>
-            {options[key]}
-          </option>
-        ))}
-      </UISelect>
-      <Icon
-        data-fs-select-icon
-        name="CaretDown"
-        width={18}
-        height={18}
-        weight="bold"
-      />
-    </div>
-  )
-}
-
-export default Select

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

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

package/src/components/ui/Select/select.module.scss

@@ -1,85 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-select[data-fs-select] {
-  // --------------------------------------------------------
-  // Design Tokens for Select
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-select-height                      : var(--fs-spacing-6);
-  --fs-select-min-height                  : var(--fs-control-tap-size);
-  --fs-select-padding                     : var(--fs-spacing-1) var(--fs-spacing-5) var(--fs-spacing-1) var(--fs-spacing-2);
-
-  --fs-select-text-color                  : var(--fs-color-link);
-
-  --fs-select-border-radius               : var(--fs-border-radius);
-
-  --fs-select-bkg                         : transparent;
-  --fs-select-bkg-color-focus             : var(--fs-color-primary-bkg-light);
-  --fs-select-bkg-color-hover             : var(--fs-select-bkg-color-focus);
-
-  --fs-select-transition-timing           : var(--fs-transition-timing);
-  --fs-select-transition-property         : var(--fs-transition-property);
-  --fs-select-transition-function         : var(--fs-transition-function);
-
-  // Label
-  --fs-select-label-color                 : var(--fs-color-text-light);
-  --fs-select-label-margin-right          : var(--fs-spacing-1);
-
-  // Icon
-  --fs-select-icon-color                  : var(--fs-color-link);
-  --fs-select-icon-position-right         : var(--fs-spacing-2);
-
-  // Disabled
-  --fs-select-disabled-text-color         : var(--fs-color-disabled-text);
-  --fs-select-disabled-text-opacity       : 1;
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: fit-content;
-
-  select {
-    padding: var(--fs-select-padding);
-    color: var(--fs-select-text-color);
-    background: var(--fs-select-bkg);
-    border: 0;
-    border-radius: var(--fs-select-border-radius);
-    box-shadow: 0;
-    transition: var(--fs-select-transition-property) var(--fs-select-transition-timing) var(--fs-select-transition-function);
-    appearance: none;
-
-    @include focus-ring-visible;
-
-    &:focus { background-color: var(--fs-select-bkg-color-focus); }
-
-    &:hover:not(:disabled) { background-color: var(--fs-select-bkg-color-hover); }
-
-    &:disabled {
-      color: var(--fs-select-disabled-text-color);
-      cursor: not-allowed;
-      opacity: var(--fs-select-disabled-text-opacity);
-      + [data-fs-select-icon] { display: none; }
-    }
-
-    @include media("<notebook") { min-height: var(--fs-select-min-height); }
-
-    @include media(">=notebook") { height: var(--fs-select-height); }
-  }
-
-  [data-fs-select-label] {
-    margin-right: var(--fs-select-label-margin-right);
-    color: var(--fs-select-label-color);
-  }
-
-  [data-fs-select-icon] {
-    position: absolute;
-    right: var(--fs-select-icon-position-right);
-    color: var(--fs-select-icon-color);
-    pointer-events: none;
-  }
-}

package/src/components/ui/SlideOver/overlay.scss

@@ -1,14 +0,0 @@
-[data-modal-overlay] {
-  // --------------------------------------------------------
-  // Design Tokens for Overlay
-  // --------------------------------------------------------
-  --fs-overlay-bkg-color: rgb(0 0 0 / 20%);
-
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 3;
-  background-color: var(--fs-overlay-bkg-color);
-}

package/src/styles/global/resets.scss

@@ -1,48 +0,0 @@
-// ----------------------------------------------------------
-// GLOBAL STYLES
-// Resets
-// ----------------------------------------------------------
-
-@import "../vendors/modern-normalize.css";
-
-// Reset default styles
-body {
-  padding: 0;
-  margin: 0;
-}
-
-// Remove all of the default margins
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-// Remove heading elements default style
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-// Remove list elements default style
-ol,
-ul {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}

package/src/styles/global/tokens.scss

@@ -1,276 +0,0 @@
-// ----------------------------------------------------------
-// GLOBAL TOKENS
-// Base Store Theme
-// ----------------------------------------------------------
-
-@import "../vendors/include-media";
-
-body {
-  // --------------------------------------------------------
-  // Colors (Branding Core)
-  // --------------------------------------------------------
-
-  // PALETTE
-  // Tone values must range from lightest to darkest.
-  // `0` is more suitable for backgrounds, and `4` for texts.
-  --fs-color-main-0                    : #f1f2f3;
-  --fs-color-main-1                    : #dbdbdb;
-  --fs-color-main-2                    : #00419e;
-  --fs-color-main-3                    : #002c71;
-  --fs-color-main-4                    : #002155;
-
-  --fs-color-accent-0                  : #e3e6e8;
-  --fs-color-accent-1                  : #e3e6e8;
-  --fs-color-accent-2                  : #74808b;
-  --fs-color-accent-3                  : #5d666f;
-  --fs-color-accent-4                  : #171a1c;
-
-  --fs-color-neutral-0                 : #ffffff;
-  --fs-color-neutral-1                 : #f1f2f3;
-  --fs-color-neutral-2                 : #e3e6e8;
-  --fs-color-neutral-3                 : #c7ccd1;
-  --fs-color-neutral-4                 : #9099a2;
-  --fs-color-neutral-5                 : #74808b;
-  --fs-color-neutral-6                 : #5d666f;
-  --fs-color-neutral-7                 : #171a1c;
-
-  // HIERARCHY
-  --fs-color-primary-text              : var(--fs-color-text-inverse);
-  --fs-color-primary-bkg               : var(--fs-color-main-2);
-  --fs-color-primary-bkg-hover         : var(--fs-color-main-3);
-  --fs-color-primary-bkg-active        : var(--fs-color-main-4);
-  --fs-color-primary-bkg-light         : var(--fs-color-main-0);
-  --fs-color-primary-bkg-light-active  : var(--fs-color-main-1);
-
-  --fs-color-secondary-text            : var(--fs-color-primary-bkg);
-  --fs-color-secondary-bkg             : transparent;
-  --fs-color-secondary-bkg-hover       : var(--fs-color-primary-bkg);
-  --fs-color-secondary-bkg-active      : var(--fs-color-main-3);
-  --fs-color-secondary-bkg-light       : var(--fs-color-main-0);
-  --fs-color-secondary-bkg-light-active: var(--fs-color-secondary-bkg-light);
-
-  --fs-color-tertiary-text             : var(--fs-color-link);
-  --fs-color-tertiary-bkg              : transparent;
-  --fs-color-tertiary-bkg-hover        : var(--fs-color-main-0);
-  --fs-color-tertiary-bkg-active       : var(--fs-color-main-1);
-  --fs-color-tertiary-bkg-light        : var(--fs-color-neutral-0);
-  --fs-color-tertiary-bkg-light-active : var(--fs-color-tertiary-bkg-light);
-
-  // COMPONENTS & STATES
-  --fs-color-body-bkg                  : var(--fs-color-neutral-0);
-
-  --fs-color-action-text               : var(--fs-color-text-inverse);
-  --fs-color-action-bkg                : var(--fs-color-accent-4);
-  --fs-color-action-bkg-hover          : var(--fs-color-accent-3);
-  --fs-color-action-bkg-active         : var(--fs-color-accent-2);
-  --fs-color-action-bkg-light          : var(--fs-color-neutral-0);
-  --fs-color-action-bkg-light-active   : var(--fs-color-tertiary-bkg-light);
-
-  --fs-color-link                      : var(--fs-color-main-2);
-  --fs-color-link-hover                : var(--fs-color-main-2);
-  --fs-color-link-active               : var(--fs-color-main-4);
-  --fs-color-link-visited              : #6058ba;
-  --fs-color-link-inverse              : var(--fs-color-neutral-0);
-
-  --fs-color-text                      : var(--fs-color-neutral-7);
-  --fs-color-text-light                : var(--fs-color-neutral-6);
-  --fs-color-text-inverse              : var(--fs-color-neutral-0);
-  --fs-color-text-display              : var(--fs-color-neutral-7);
-
-  --fs-color-focus-ring                : #8db6fa;
-  --fs-color-focus-ring-outline        : #8db6fa80;
-  --fs-color-focus-ring-danger         : #e1adad;
-
-  // SITUATIONS
-  --fs-color-success-text              : #1e493b;
-  --fs-color-success-bkg               : #b3ebd5;
-  --fs-color-success-border            : var(--fs-color-success-text);
-
-  --fs-color-warning-text              : var(--fs-color-text);
-  --fs-color-warning-bkg               : #fdec8d;
-  --fs-color-warning-border            : var(--fs-color-warning-text);
-
-  --fs-color-danger-text               : #cb4242;
-  --fs-color-danger-bkg                : var(--fs-color-focus-ring-danger);
-  --fs-color-danger-border             : var(--fs-color-danger-text);
-
-  --fs-color-info-text                 : var(--fs-color-text);
-  --fs-color-info-bkg                  : var(--fs-color-main-1);
-
-  --fs-color-highlighted-text          : var(--fs-color-text-display);
-  --fs-color-highlighted-bkg           : var(--fs-color-accent-0);
-
-  --fs-color-neutral-text              : var(--fs-color-text);
-  --fs-color-neutral-bkg               : var(--fs-color-neutral-1);
-
-  --fs-color-disabled-text             : var(--fs-color-neutral-6);
-  --fs-color-disabled-bkg              : var(--fs-color-neutral-2);
-
-  // --------------------------------------------------------
-  // Typography (Branding Core)
-  // --------------------------------------------------------
-
-  // FACE
-  --fs-text-face-body                  : -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
-  --fs-text-face-title                 : var(--fs-text-face-body);
-
-  // WEIGHT
-  --fs-text-weight-light               : 300;
-  --fs-text-weight-regular             : 400;
-  --fs-text-weight-bold                : 700;
-  --fs-text-weight-black               : 900;
-
-  // MAX LINES
-  --fs-text-max-lines                  : 2;
-
-  // TYPOGRAPHY SCALE
-  // Use a type scale to add rhythm to your typography and
-  // ensure consistency throughout the project.
-  // Access https://type-scale.com and pick a scale that
-  // suits the store's branding.
-  --fs-text-scale-mobile               : 1.13;
-  --fs-text-scale-desktop              : 1.25;
-
-  --fs-scale                           : var(--fs-text-scale-mobile);
-
-  @include media(">=notebook") {
-    --fs-scale                         : var(--fs-text-scale-desktop);
-  }
-
-  // NUMERIC SCALE
-  --fs-text-size-base                  : 16px; // 1rem
-
-  --fs-text-size-0                     : 12px; // Smallest
-  --fs-text-size-1                     : 14px; // Smaller                               // Mobile    Desktop
-  --fs-text-size-2                     : var(--fs-text-size-base);                      // 16px      16px
-  --fs-text-size-3                     : calc(var(--fs-text-size-2) * var(--fs-scale)); // 18px      20px
-  --fs-text-size-4                     : calc(var(--fs-text-size-3) * var(--fs-scale)); // 20px      25px
-  --fs-text-size-5                     : calc(var(--fs-text-size-4) * var(--fs-scale)); // 23px      31px
-  --fs-text-size-6                     : calc(var(--fs-text-size-5) * var(--fs-scale)); // 26px      39px
-  --fs-text-size-7                     : calc(var(--fs-text-size-6) * var(--fs-scale)); // 29px      48px
-  --fs-text-size-8                     : calc(var(--fs-text-size-7) * var(--fs-scale)); // 33px      61px
-
-  // HIERARCHY SCALE
-  --fs-text-size-title-huge            : var(--fs-text-size-7);
-  --fs-text-size-title-page            : var(--fs-text-size-6);
-  --fs-text-size-title-product         : var(--fs-text-size-4);
-  --fs-text-size-title-section         : var(--fs-text-size-4);
-  --fs-text-size-title-subsection      : var(--fs-text-size-4);
-  --fs-text-size-title-mini            : var(--fs-text-size-4);
-  --fs-text-size-lead                  : var(--fs-text-size-3);
-  --fs-text-size-menu                  : var(--fs-text-size-base);
-  --fs-text-size-body                  : var(--fs-text-size-base);
-  --fs-text-size-legend                : var(--fs-text-size-1);
-  --fs-text-size-tiny                  : var(--fs-text-size-0);
-
-  // --------------------------------------------------------
-  // Spacing (UI Essentials)
-  // --------------------------------------------------------
-
-  // NUMERIC SCALE
-  --fs-spacing-0                       : .25rem; //  4px
-  --fs-spacing-1                       : .5rem;  //  8px
-  --fs-spacing-2                       : .75rem; // 12px
-  --fs-spacing-3                       : 1rem;   // 16px (--fs-text-size-base)
-  --fs-spacing-4                       : 1.5rem; // 24px
-  --fs-spacing-5                       : 2rem;   // 32px
-  --fs-spacing-6                       : 2.5rem; // 40px
-  --fs-spacing-7                       : 3rem;   // 48px
-  --fs-spacing-8                       : 3.5rem; // 56px
-  --fs-spacing-9                       : 4rem;   // 64px
-  --fs-spacing-10                      : 4.5rem; // 72px
-  --fs-spacing-11                      : 5rem;   // 80px
-  --fs-spacing-12                      : 5.5rem; // 88px
-  --fs-spacing-13                      : 6rem;   // 96px
-
-  // --------------------------------------------------------
-  // Grid & Layout (UI Essentials)
-  // --------------------------------------------------------
-
-  // PADDING
-  --fs-grid-padding                    : var(--fs-spacing-3);
-
-  @include media(">=tablet") {
-    --fs-grid-padding                  : var(--fs-spacing-4);
-  }
-
-  @include media(">=notebook") {
-    --fs-grid-padding                  : var(--fs-spacing-5);
-  }
-
-  // Z-INDEX
-  --fs-z-index-below                   : -1;
-  --fs-z-index-default                 : 0;
-  --fs-z-index-top                     : 1;
-  --fs-z-index-high                    : 2;
-  --fs-z-index-highest                 : 3;
-
-  // CONTAINER
-  --fs-grid-max-width                  : var(--fs-grid-breakpoint-notebook);
-
-  // GAPS
-  --fs-grid-gap-0                      : var(--fs-spacing-1);
-  --fs-grid-gap-1                      : var(--fs-spacing-2);
-  --fs-grid-gap-2                      : var(--fs-spacing-3);
-  --fs-grid-gap-3                      : var(--fs-spacing-4);
-  --fs-grid-gap-4                      : var(--fs-spacing-5);
-
-  // BREAKPOINTS
-  --fs-grid-breakpoint-phone           : #{map-get($breakpoints, "phone")};
-  --fs-grid-breakpoint-phonemid        : #{map-get($breakpoints, "phonemid")};
-  --fs-grid-breakpoint-tablet          : #{map-get($breakpoints, "tablet")};
-  --fs-grid-breakpoint-notebook        : #{map-get($breakpoints, "notebook")};
-  --fs-grid-breakpoint-desktop         : #{map-get($breakpoints, "desktop")};
-
-  // --------------------------------------------------------
-  // Interactive Controls (UI Essentials)
-  // --------------------------------------------------------
-
-  // TAP
-  --fs-control-tap-size                : var(--fs-spacing-7); // 3rem = 48px
-  --fs-control-tap-size-smallest       : calc(var(--fs-control-tap-size) / 2);
-  --fs-control-min-height              : var(--fs-control-tap-size);
-
-  @include media(">=notebook") {
-    --fs-control-tap-size              : var(--fs-spacing-7); // This value can be smaller on desktops
-  }
-
-  // STATES
-  --fs-control-bkg                     : var(--fs-color-neutral-0);
-  --fs-control-bkg-disabled            : var(--fs-color-disabled-bkg);
-
-  // --------------------------------------------------------
-  // Refinements
-  // --------------------------------------------------------
-
-  // TRANSITION
-  --fs-transition-timing               : .2s;
-  --fs-transition-property             : all;
-  --fs-transition-function             : ease-in-out;
-
-  // BORDERS
-  --fs-border-radius-small             : 1px;
-  --fs-border-radius                   : 2px;
-  --fs-border-radius-medium            : 8px;
-  --fs-border-radius-pill              : 100px;
-  --fs-border-radius-circle            : 100%;
-
-  --fs-border-width                    : 1px;
-  --fs-border-width-thick              : 2px;
-  --fs-border-width-thickest           : 3px;
-
-  --fs-border-color                    : var(--fs-color-neutral-4);
-  --fs-border-color-hover              : var(--fs-color-main-3);
-  --fs-border-color-active             : var(--fs-color-main-2);
-  --fs-border-color-disabled           : var(--fs-color-neutral-6);
-
-  --fs-border-color-light              : var(--fs-color-neutral-2);
-  --fs-border-color-light-hover        : var(--fs-color-neutral-3);
-  --fs-border-color-light-active       : var(--fs-color-neutral-3);
-  --fs-border-color-light-disabled     : var(--fs-color-neutral-5);
-
-  // SHADOW
-  --fs-shadow                          : none;
-  --fs-shadow-darker                   : 0 0 10px rgb(0 0 0 / 20%);
-  --fs-shadow-hover                    : 0 0 0 1px var(--fs-color-main-4);
-}