@sats-group/ui-lib 74.2.0

package/react/text-input/index.ts

@@ -0,0 +1,2 @@
+import TextInput from './text-input';
+export default TextInput;

package/react/text-input/text-input.scss

@@ -0,0 +1,233 @@
+@use '../../tokens/corner-radius';
+@use '../../tokens/font-sizes';
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.text-input {
+  $block: &;
+  $vertical-padding: 13px;
+  $line-height: 1;
+  $icon-width: 24px;
+  $icon-spacing: spacing.$xs;
+
+  &__wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  &__input {
+    @include font-sizes.normal(basic);
+    border: 1px solid light.$ge-divider-default;
+    border-radius: corner-radius.$s;
+    padding: clamp(spacing.$xs, 2vw, spacing.$s) clamp(spacing.$s, 2vw, spacing.$m);
+    line-height: $line-height;
+    background-color: light.$surface-primary-default;
+    color: light.$on-surface-primary-default;
+    width: 100%;
+    box-sizing: border-box;
+
+    #{$block}--icon & {
+      padding-left: $icon-spacing * 2 + $icon-width;
+    }
+
+    &:focus {
+      border-color: light.$ge-border-focused;
+      outline: none;
+    }
+
+    &::placeholder {
+      color: light.$on-surface-primary-alternate;
+      opacity: 1;
+    }
+
+    &[disabled],
+    &[disabled]::placeholder {
+      color: light.$on-surface-primary-disabled;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+
+    &[type='number'] {
+      appearance: none;
+      margin: 0;
+    }
+
+    &[type='date'] {
+      appearance: none;
+      min-height: 46px;
+    }
+
+    &[type='time'] {
+      appearance: none;
+    }
+  }
+
+  &__icon {
+    bottom: $vertical-padding;
+    color: light.$on-surface-primary-disabled;
+    left: $icon-spacing;
+    height: $icon-width;
+    pointer-events: none;
+    position: absolute;
+    width: $icon-width;
+
+    svg {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  &--moving-label {
+    #{$block}__input {
+      padding: $vertical-padding spacing.$m;
+    }
+
+    #{$block}__label {
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      margin: 0;
+      padding: 0 6px;
+      transform: translate(10px, $vertical-padding);
+      transition: transform 0.1s cubic-bezier(0.22, 0.57, 0.25, 1);
+      transform-origin: left center;
+      max-width: calc(100% - 25px);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      line-height: $line-height;
+
+      @media (prefers-reduced-motion) {
+        transition: transform 0s;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: -1;
+        left: 0;
+        bottom: 0;
+        height: 50%;
+        width: 100%;
+        background-color: light.$surface-primary-default;
+      }
+    }
+
+    &.text-input--moving-label {
+      &.text-input--theme-dark {
+        #{$block}__label {
+          color: light.$on-fixed-surface-primary-default;
+        }
+
+        #{$block}__label {
+          &::before {
+            content: '';
+            background-color: light.$fixed-surface-primary-default;
+          }
+        }
+      }
+    }
+
+    & #{$block}__input:focus,
+    & #{$block}__input:not(:placeholder-shown) {
+      ~ #{$block}__label {
+        transform: translate(10px, -50%) scale(0.8);
+      }
+    }
+  }
+
+  &__help {
+    margin-top: spacing.$xxs;
+    color: light.$on-background-primary-disabled;
+  }
+
+  &__error {
+    margin-top: spacing.$xxs;
+  }
+
+  &__asterisk {
+    color: light.$on-surface-featured;
+    margin-left: spacing.$xs;
+  }
+
+  &--disabled {
+    #{$block}__label,
+    #{$block}__icon,
+    #{$block}__help {
+      color: light.$on-background-primary-disabled;
+    }
+  }
+
+  &--theme-dark {
+    #{$block}__icon {
+      color: light.$on-fixed-surface-primary-default;
+    }
+
+    #{$block}__label {
+      color: light.$on-fixed-background-primary-default;
+    }
+
+    #{$block}__help {
+      color: light.$on-fixed-background-primary-disabled;
+    }
+
+    #{$block}__input {
+      background-color: light.$fixed-surface-secondary-default;
+      border-color: light.$ge-border-default;
+      color: light.$on-fixed-surface-primary-alternate;
+
+      &:focus {
+        background-color: light.$fixed-surface-primary-default;
+        color: light.$on-fixed-surface-primary-default;
+        outline: none;
+
+        ~ #{$block}__icon {
+          color: light.$on-fixed-surface-primary-default;
+        }
+      }
+
+      &::placeholder {
+        color: light.$on-fixed-surface-primary-alternate;
+      }
+
+      &[disabled],
+      &[disabled]::placeholder {
+        color: light.$on-fixed-surface-primary-disabled;
+      }
+    }
+
+    &#{$block}--disabled {
+      #{$block}__label,
+      #{$block}__icon,
+      #{$block}__help {
+        color: light.$on-fixed-background-primary-disabled;
+      }
+
+      &#{$block}--error #{$block}__icon {
+        color: light.$on-fixed-surface-error;
+      }
+    }
+  }
+
+  &--error {
+    #{$block}__icon {
+      color: light.$on-surface-error;
+    }
+
+    #{$block}__input {
+      outline: 2px solid light.$ge-signal-error;
+      outline-offset: -2px;
+
+      &:focus {
+        outline: 2px solid light.$ge-signal-error;
+        outline-offset: -2px;
+      }
+    }
+  }
+}

package/react/text-input/text-input.tsx

@@ -0,0 +1,106 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import Text from '../text';
+import useInputValidation from '../use-input-validation';
+
+import { themes, TextInput as Props } from './text-input.types';
+
+const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      customErrorMessages,
+      defaultValue,
+      disabled,
+      hasError,
+      hasMovingLabel,
+      helpText,
+      hiddenLabel,
+      icon,
+      label,
+      name,
+      onChange = () => {},
+      placeholder,
+      required,
+      theme,
+      type = 'text',
+      ...restProps
+    },
+    ref,
+  ) => {
+    const [validationOnChange, onInvalid, error] =
+      useInputValidation(customErrorMessages);
+
+    return (
+      <label
+        className={cn('text-input', {
+          'text-input--theme-dark': theme === themes.dark,
+          'text-input--theme-light': theme === themes.light,
+          'text-input--disabled': disabled,
+          'text-input--error': error || hasError,
+          'text-input--moving-label': icon ? false : hasMovingLabel,
+          'text-input--icon': icon,
+        })}
+      >
+        <div className="text-input__wrapper">
+          <input
+            {...restProps}
+            className="text-input__input"
+            defaultValue={defaultValue}
+            disabled={disabled}
+            required={required}
+            name={name}
+            onInvalid={e => onInvalid(e)}
+            onChange={e => {
+              onChange(e);
+              validationOnChange(e);
+            }}
+            // NOTE: Using " " as placeholder for moving label theme to enable using `:placeholder-shown` to determine when to move the label
+            placeholder={
+              icon ? placeholder : hasMovingLabel ? ' ' : placeholder
+            }
+            ref={ref}
+            type={type}
+            aria-label={icon || hiddenLabel ? label : undefined}
+          />
+
+          {icon ? (
+            <div className="text-input__icon">{icon}</div>
+          ) : hiddenLabel ? null : (
+            <Text
+              className="text-input__label"
+              theme={Text.themes.emphasis}
+              size={Text.sizes.small}
+            >
+              {label}
+              {required ? (
+                <span className="text-input__asterisk">*</span>
+              ) : null}
+            </Text>
+          )}
+        </div>
+
+        {helpText ? (
+          <div className="text-input__help">
+            <Text size={Text.sizes.interface}>{helpText}</Text>
+          </div>
+        ) : null}
+        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
+        {error ? (
+          <div aria-hidden="true" className="text-input__error">
+            <Text>{error}</Text>
+          </div>
+        ) : null}
+      </label>
+    );
+  },
+);
+
+// NOTE: If this isn't set, stack traces say "forwardRef" instead of "TextInput"
+RefTextInput.displayName = 'TextInput';
+
+const TextInput: typeof RefTextInput & {
+  themes: typeof themes;
+} = Object.assign(RefTextInput, { themes });
+
+export default TextInput;

package/react/text-input/text-input.types.ts

@@ -0,0 +1,19 @@
+import { InputHtmlProps, ObjectValues } from '../types';
+import { Messages } from '../use-input-validation.types';
+
+export const themes = {
+  dark: 'dark',
+  light: 'light',
+} as const;
+
+export type TextInput = {
+  theme?: ObjectValues<typeof themes>;
+  customErrorMessages?: Messages;
+  hasError?: boolean;
+  hasMovingLabel?: boolean;
+  helpText?: string;
+  hiddenLabel?: boolean;
+  icon?: React.ReactNode;
+  label: string;
+  name: string;
+} & InputHtmlProps;

package/react/toggle/index.ts

@@ -0,0 +1,2 @@
+import Toggle from './toggle';
+export default Toggle;

package/react/toggle/toggle.scss

@@ -0,0 +1,69 @@
+@use '../../tokens/light';
+@use '../../tokens/spacing.scss';
+
+.toggle {
+  $block: &;
+  $sizeWidth: 32px;
+  $sizeHeight: 20px;
+  box-sizing: border-box;
+
+  &__content {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    gap: spacing.$s;
+
+    &--space-between {
+      justify-content: space-between;
+    }
+  }
+
+  &__button-wrap {
+    position: relative;
+    display: flex;
+    height: $sizeHeight;
+    width: $sizeWidth;
+  }
+
+  &__slider {
+    background: light.$ge-toggle-unselected-default;
+    border-radius: 40px;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    height: 22px;
+    width: 39px;
+    transition: 0.4s;
+    transform: translateY(-50%);
+    padding: 2px;
+  }
+
+  &__slider-element {
+    height: 18px;
+    width: 18px;
+    background: light.$ge-toggle-interactive-element;
+    filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.06))
+      drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.05))
+      drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.05));
+    transition: 0.4s;
+    border-radius: 100%;
+  }
+
+  &__input {
+    opacity: 0;
+    width: $sizeWidth;
+    height: $sizeHeight;
+
+    &:checked + #{$block}__slider {
+      background: light.$ge-toggle-selected-default;
+    }
+
+    &:checked + #{$block}__slider #{$block}__slider-element {
+      transform: translateX(17px);
+    }
+
+    &:disabled + #{$block}__slider {
+      opacity: 0.4;
+    }
+  }
+}

package/react/toggle/toggle.tsx

@@ -0,0 +1,83 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import useInputValidation from '../use-input-validation';
+import { Toggle as Props } from './toggle.types';
+
+const Toggle = React.forwardRef<
+  HTMLInputElement,
+  React.PropsWithChildren<Props>
+>(
+  (
+    {
+      children,
+      isLabelVisible = true,
+      label,
+      labelPosition = 'right',
+      name,
+      value = '',
+      spaceBetween,
+      testId,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [onChange, onInvalid, error] = useInputValidation();
+
+    return (
+      <div
+        className={cn('toggle', {
+          'toggle--error': error,
+        })}
+      >
+        <label
+          className={cn('toggle__content', {
+            'toggle__content--space-between': spaceBetween,
+          })}
+          data-testid={testId}
+        >
+          {isLabelVisible && labelPosition === 'left' && (
+            <div className="toggle__label">
+              {label}
+              {children}
+            </div>
+          )}
+
+          <div className="toggle__button-wrap">
+            <input
+              aria-label={isLabelVisible ? undefined : label}
+              className="toggle__input"
+              type="checkbox"
+              name={name}
+              onChange={e => {
+                // NOTE: If props specify an `onChange`, we need to call that too
+                if (rest.onChange) rest.onChange(e);
+                onChange(e);
+              }}
+              onInvalid={e => {
+                // NOTE: If props specify an `onInvalid`, we need to call that too
+                if (rest.onInvalid) rest.onInvalid(e);
+                onInvalid(e);
+              }}
+              ref={ref}
+              value={value}
+              {...rest}
+            />
+            <span className="toggle__slider">
+              <div className="toggle__slider-element"></div>
+            </span>
+          </div>
+
+          {isLabelVisible && labelPosition === 'right' && (
+            <div className="toggle__label">
+              {label}
+              {children}
+            </div>
+          )}
+        </label>
+      </div>
+    );
+  },
+);
+
+export default Toggle;

package/react/toggle/toggle.types.ts

@@ -0,0 +1,11 @@
+import { InputHtmlProps } from '../types';
+
+export type Toggle = Omit<InputHtmlProps, 'value'> & {
+  isLabelVisible?: boolean;
+  label: string;
+  labelPosition?: 'left' | 'right';
+  name: string;
+  value: string;
+  spaceBetween?: boolean;
+  testId?: string;
+};

package/react/toolbox/index.ts

@@ -0,0 +1,2 @@
+import Toolbox from './toolbox';
+export default Toolbox;

package/react/toolbox/toolbox.scss

@@ -0,0 +1,68 @@
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+@use '../../tokens/corner-radius';
+
+.toolbox {
+  border-top: 1px solid light.$ge-border-default;
+  border-bottom-right-radius: corner-radius.$s;
+  border-bottom-left-radius: corner-radius.$s;
+  background-color: light.$surface-primary-default;
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+
+  &__item-wrapper {
+    cursor: pointer;
+    width: 100%;
+
+    &:hover {
+      background: light.$surface-primary-hover;
+    }
+
+    &:first-child {
+      border-bottom-left-radius: corner-radius.$s;
+    }
+
+    &:last-child {
+      border-bottom-right-radius: corner-radius.$s;
+    }
+
+    &:only-child {
+      border-bottom-right-radius: corner-radius.$s;
+      border-bottom-left-radius: corner-radius.$s;
+    }
+
+    &:not(:last-child) {
+      border-right: 1px solid light.$ge-border-default;
+    }
+  }
+
+  &__list-item-form {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+
+  &__item {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    text-decoration: none;
+    justify-content: center;
+    align-items: center;
+    row-gap: spacing.$xs;
+    column-gap: spacing.$xxs;
+    color: light.$on-buttons-on-link-default;
+    padding: spacing.$s;
+    background: none;
+    border: none;
+    cursor: pointer;
+
+    @media(max-width: 400px) {
+      flex-direction: column;
+    }
+  }
+
+}

package/react/toolbox/toolbox.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { Types, type Toolbox as Props } from './toolbox.types';
+import Text from '../text';
+import HiddenInput from '../hidden-input';
+
+const Toolbox: React.FunctionComponent<Props> = ({ items }) => (
+  <div className="toolbox">
+    {items.map(({ item, icon }, i) => (
+      <div className="toolbox__item-wrapper" key={i}>
+        {item.type === Types.Link ? (
+          <a {...item.props.link} className="toolbox__item">
+            {icon ? icon : null}
+            <Text size={Text.sizes.small}>{item.props.text}</Text>
+          </a>
+        ) : (
+          <form
+            onSubmit={item.props.handleSubmit}
+            method="POST"
+            className="toolbox__list-item-form"
+            {...item.props.form}
+          >
+            <button
+              className="toolbox__item"
+              data-testid={item.props.testId}
+              {...item.props.button}
+            >
+              {icon ? icon : null}
+              <Text size={Text.sizes.small}>{item.props.text}</Text>
+            </button>
+            {item.props.hiddenInputs
+              ? item.props.hiddenInputs.map((input, index) => (
+                  <HiddenInput key={input.name + index} {...input} />
+                ))
+              : null}
+          </form>
+        )}
+      </div>
+    ))}
+  </div>
+);
+
+export default Toolbox;

package/react/toolbox/toolbox.types.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+
+import type { HiddenInput } from '../hidden-input/hidden-input.types';
+import type { ButtonHtmlProps, FormHtmlProps, LinkHtmlProps } from '../types';
+
+export enum Types {
+  Button = 'Button',
+  Link = 'Link',
+}
+
+type LinkItem = {
+  type: Types.Link;
+  props: {
+    text: string;
+    link: LinkHtmlProps;
+    testId?: string;
+  };
+};
+
+type FormItem = {
+  type: Types.Button;
+  props: {
+    text: string;
+    form: FormHtmlProps;
+    button: ButtonHtmlProps;
+    handleSubmit?: () => void;
+    hiddenInputs?: HiddenInput[];
+    testId?: string;
+  };
+};
+
+type MenuItem = {
+  icon?: ReactNode;
+  item: LinkItem | FormItem;
+};
+
+export type Toolbox = {
+  items: MenuItem[];
+};

package/react/ts/debounce.ts

@@ -0,0 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function debounce<T extends any[]>(
+  callback: (...args: T) => void,
+  wait: number,
+) {
+  let timerRef: number;
+
+  return (...args: T) => {
+    clearTimeout(timerRef);
+    timerRef = window.setTimeout(() => callback(...args), wait);
+  };
+}