@faststore/core 22.42.6

package/src/components/ui/InputText/InputText.tsx

@@ -0,0 +1,128 @@
+import { Input as UIInput, Label as UILabel } from '@faststore/ui'
+import type { MutableRefObject } from 'react'
+import type { InputProps } from '@faststore/ui'
+
+import Button from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+
+import styles from './input-text.module.scss'
+
+type DefaultProps = {
+  /**
+   * ID to identify input and corresponding label.
+   */
+  id: string
+  /**
+   * The text displayed to identify input text.
+   */
+  label: string
+  /**
+   * The error message is displayed when an error occurs.
+   */
+  error?: string
+  /**
+   * Component's ref.
+   */
+  inputRef?: MutableRefObject<HTMLInputElement | null>
+  /**
+   * Specifies that the whole input component should be disabled.
+   */
+  disabled?: boolean
+}
+
+type ActionableInputText =
+  | {
+      actionable?: never
+      onSubmit?: never
+      onClear?: never
+      buttonActionText?: string
+      displayClearButton?: never
+    }
+  | {
+      /**
+       * Adds a Button to the component.
+       */
+      actionable: true
+      /**
+       * Callback function when button is clicked. Required for actionable input.
+       */
+      onSubmit: () => void
+      /**
+       * Callback function when clear button is clicked. Required for actionable input.
+       */
+      onClear: () => void
+      /**
+       * The text displayed on the Button. Suggestion: maximum 9 characters.
+       */
+      buttonActionText?: string
+      /**
+       * Boolean that controls the clear button.
+       */
+      displayClearButton?: boolean
+    }
+
+export type InputTextProps = DefaultProps &
+  Omit<InputProps, 'disabled' | 'onSubmit'> &
+  ActionableInputText
+
+const InputText = ({
+  id,
+  label,
+  type = 'text',
+  error,
+  displayClearButton,
+  actionable,
+  buttonActionText = 'Apply',
+  onSubmit,
+  onClear,
+  placeholder = ' ', // initializes with an empty space to style float label using `placeholder-shown`
+  inputRef,
+  disabled,
+  value,
+  ...otherProps
+}: InputTextProps) => {
+  const shouldDisplayError = !disabled && error && error !== ''
+  const shouldDisplayButton = actionable && !disabled && value !== ''
+
+  return (
+    <div
+      className={styles.fsInputText}
+      data-fs-input-text
+      data-fs-input-text-actionable={actionable}
+      data-fs-input-text-error={error && error !== ''}
+    >
+      <UIInput
+        id={id}
+        type={type}
+        value={value}
+        ref={inputRef}
+        disabled={disabled}
+        placeholder={placeholder}
+        {...otherProps}
+      />
+      <UILabel htmlFor={id}>{label}</UILabel>
+
+      {shouldDisplayButton &&
+        (displayClearButton || error ? (
+          <Button
+            data-fs-button-size="small"
+            aria-label="Clear Field"
+            icon={<Icon name="XCircle" width={20} height={20} />}
+            onClick={() => {
+              onClear?.()
+              inputRef?.current?.focus()
+            }}
+          />
+        ) : (
+          <Button variant="tertiary" size="small" onClick={onSubmit}>
+            {buttonActionText}
+          </Button>
+        ))}
+      {shouldDisplayError && (
+        <span data-fs-input-text-error-message>{error}</span>
+      )}
+    </div>
+  )
+}
+
+export default InputText

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

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

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

@@ -0,0 +1,168 @@
+@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.stories.mdx

@@ -0,0 +1,272 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import Link from '.'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Atoms/Link"
+  component={Link}
+  argTypes={{
+    href: {
+      type: { name: 'string', required: true },
+    },
+    ref: { table: { disable: true } },
+    as: { table: { disable: true } },
+    children: { table: { disable: true } },
+    replace: { table: { disable: true } },
+    scroll: { table: { disable: true } },
+    shallow: { table: { disable: true } },
+    passHref: { table: { disable: true } },
+    prefetch: { table: { disable: true } },
+    locale: { table: { disable: true } },
+    legacyBehavior: { table: { disable: true } },
+  }}
+/>
+
+export const Template = ({ children, ...args }) => (
+  <Link {...args}>{children}</Link>
+)
+
+<header>
+
+# Link
+
+The Link component behaves as a regular anchor tag `<a />`, but can be used as any HTML tag.
+
+</header>
+
+## Overview
+
+The `Link` component uses [FastStore UI Link](https://www.faststore.dev/reference/ui/atoms/Link) and [Next.js Link](https://nextjs.org/docs/api-reference/next/link) as base.
+
+Internally, the `Link` component handles client-side navigation through the Next.js `Link`, so all the Next.js `Link` attributes can be used for this case.
+
+<Canvas style={{ backgroundColor: 'var(--fs-color-neutral-3)' }}>
+  <Story
+    name="overview-default"
+    args={{
+      href: '#',
+      children: 'Default',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-inverse"
+    args={{
+      href: '#',
+      inverse: true,
+      children: 'Inverse',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-display"
+    args={{
+      href: '#',
+      variant: 'display',
+      children: 'Display',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-inline"
+    args={{
+      href: '#',
+      variant: 'inline',
+      children: 'Inline',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-footer"
+    args={{
+      href: '#',
+      variant: 'footer',
+      children: 'Footer',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+`import Link from '../components/ui/Link'`
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      href: '#',
+      children: 'Link',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow token="--fs-link-min-width" value="auto" />
+  <TokenRow token="--fs-link-min-height" value="var(--fs-link-min-width)" />
+  <TokenRow
+    token="--fs-link-padding"
+    value="var(--fs-spacing-2) var(--fs-spacing-0)"
+  />
+  <TokenRow token="--fs-link-border-radius" value="var(--fs-border-radius)" />
+  <TokenDivider />
+  <TokenRow token="--fs-link-text-line-height" value="1.5" />
+  <TokenRow token="--fs-link-text-color" value="var(--fs-color-link)" isColor />
+  <TokenRow
+    token="--fs-link-text-color-visited"
+    value="var(--fs-color-link-visited)"
+    isColor
+  />
+  <TokenRow token="--fs-link-text-decoration" value="none" />
+  <TokenRow token="--fs-link-text-decoration-hover" value="underline" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-link-transition-function"
+    value="var(--fs-transition-function)"
+  />
+  <TokenRow
+    token="--fs-link-transition-property"
+    value="var(--fs-transition-property)"
+  />
+  <TokenRow
+    token="--fs-link-transition-timing"
+    value="var(--fs-transition-timing)"
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### Inverse
+
+<Canvas style={{ backgroundColor: 'var(--fs-color-neutral-7)' }}>
+  <Story
+    name="link-inverse"
+    args={{
+      href: '#',
+      inverse: true,
+      children: 'Link Inverse',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-link-inverse-text-color"
+    value="var(--fs-color-link-inverse)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-link-inverse-text-color-visited"
+    value="var(--fs-link-inverse-text-color)"
+    globalValue="var(--fs-color-link-inverse)"
+    isColor
+  />
+</TokenTable>
+
+### Display
+
+<Canvas>
+  <Story
+    name="link-display"
+    args={{
+      href: '#',
+      variant: 'display',
+      children: 'Link Display',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-link-display-text-line-height"
+    value="var(--fs-link-text-line-height)"
+  />
+  <TokenRow
+    token="--fs-link-display-text-color"
+    value="var(--fs-color-text-display)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-link-display-text-color-visited"
+    value="var(--fs-link-display-text-color)"
+    globalValue="var(--fs-color-text-display)"
+    isColor
+  />
+</TokenTable>
+
+### Inline
+
+<Canvas>
+  <Story
+    name="link-inline"
+    args={{
+      href: '#',
+      variant: 'inline',
+      children: 'Link Inline',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-link-inline-padding" value="0" />
+  <TokenRow token="--fs-link-inline-text-decoration" value="underline" />
+  <TokenRow
+    token="--fs-link-inline-text-color"
+    value="var(--fs-link-text-color)"
+    globalValue="var(--fs-color-link)"
+    isColor
+  />
+</TokenTable>
+
+### Footer
+
+<Canvas>
+  <Story
+    name="link-footer"
+    args={{
+      href: '#',
+      variant: 'footer',
+      children: 'Link Footer',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-link-footer-text-size" value="var(--fs-text-size-1)" />
+  <TokenRow
+    token="--fs-link-footer-text-color"
+    value="var(--fs-color-info-text)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-link-footer-padding"
+    value="var(--fs-spacing-1) var(--fs-spacing-0)"
+  />
+</TokenTable>

package/src/components/ui/Link/Link.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, useMemo } from 'react'
+import type { Ref, ElementType, AnchorHTMLAttributes } from 'react'
+import NextLink from 'next/link'
+import type { LinkProps as FrameworkLinkProps } from 'next/link'
+import { Link as UILink } from '@faststore/ui'
+import type { LinkProps as UILinkProps } from '@faststore/ui'
+
+import styles from './link.module.scss'
+
+type Variant = 'default' | 'display' | 'footer' | 'inline'
+
+export type LinkProps<T extends ElementType = 'a'> = UILinkProps<T> &
+  FrameworkLinkProps &
+  AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /**
+     * Specifies the component variant.
+     */
+    variant?: Variant
+    /**
+     * Defines use of inverted color.
+     */
+    inverse?: boolean
+  }
+
+const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link<
+  T extends ElementType = 'a'
+>(
+  { href, inverse, children, variant = 'default', ...otherProps }: LinkProps<T>,
+  ref: Ref<HTMLAnchorElement> | undefined
+) {
+  const isInternalLink = useMemo(
+    () => href[0] === '/' && href[1] !== '/',
+    [href]
+  )
+
+  if (isInternalLink) {
+    return (
+      <NextLink passHref href={href}>
+        <UILink
+          ref={ref}
+          data-fs-link
+          data-fs-link-variant={variant}
+          data-fs-link-inverse={inverse}
+          className={styles.fsLink}
+          {...otherProps}
+        >
+          {children}
+        </UILink>
+      </NextLink>
+    )
+  }
+
+  return (
+    <UILink
+      ref={ref}
+      href={href}
+      data-fs-link
+      data-fs-link-variant={variant}
+      data-fs-link-inverse={inverse}
+      className={styles.fsLink}
+      {...otherProps}
+    >
+      {children}
+    </UILink>
+  )
+})
+
+export default Link

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

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