@sats-group/ui-lib 74.2.0

package/react/tag/tag.scss

@@ -0,0 +1,107 @@
+@use '../../tokens/corner-radius';
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.tag {
+  border-radius: corner-radius.$xs;
+  display: flex;
+  align-items: center;
+  gap: spacing.$xxs;
+  padding: spacing.$xxs spacing.$xs;
+  border: 1px solid;
+
+  &--variant-primary {
+    background: light.$ge-tags-primary;
+    border-color: light.$ge-tags-primary;
+    color: light.$on-ge-on-tags-primary-default;
+
+    &-border {
+      background: transparent;
+      color: light.$ge-tags-primary;
+    }
+  }
+
+  &--variant-secondary {
+    background: light.$ge-tags-secondary;
+    border-color: light.$ge-tags-secondary;
+    color: light.$on-ge-on-tags-secondary-default;
+
+    &-border {
+      background: transparent;
+      border-color: light.$ge-tags-secondary;
+      color: light.$on-ge-on-tags-secondary-default;
+    }
+  }
+
+  &--variant-tertiary {
+    background: light.$ge-tags-featured;
+    border-color: light.$ge-tags-featured;
+    color: light.$on-ge-on-tags-featured-default;
+
+    &-border {
+      background: transparent;
+      border-color: light.$ge-tags-featured;
+      color: light.$ge-tags-featured;
+    }
+  }
+
+  &--variant-positive {
+    background: light.$ge-indicator-tags-positive-alternate;
+    border-color: light.$ge-indicator-tags-positive-alternate;
+    color: light.$on-ge-on-indicator-tags-positive-alternate;
+
+    &-border {
+      border-color: light.$on-ge-on-indicator-tags-positive-alternate;
+    }
+  }
+
+  &--variant-attention {
+    background: light.$ge-indicator-tags-attention-alternate;
+    border-color: light.$ge-indicator-tags-attention-alternate;
+    color: light.$on-ge-on-indicator-tags-attention-alternate;
+
+    &-border {
+      border-color: light.$on-ge-on-indicator-tags-attention-alternate;
+    }
+  }
+
+  &--variant-negative {
+    background: light.$ge-indicator-tags-negative-alternate;
+    border-color: light.$ge-indicator-tags-negative-alternate;
+    color: light.$on-ge-on-indicator-tags-negative-alternate;
+
+    &-border {
+      border-color: light.$on-ge-on-indicator-tags-negative-alternate;
+    }
+  }
+
+  &--variant-neutral {
+    background: light.$ge-indicator-tags-neutral-alternate;
+    border-color: light.$ge-indicator-tags-neutral-alternate;
+    color: light.$on-ge-on-indicator-tags-neutral-alternate;
+
+    &-border {
+      border-color: light.$on-ge-on-indicator-tags-neutral-alternate;
+    }
+  }
+
+  &--variant-information {
+    background: light.$ge-indicator-tags-information-alternate;
+    border-color: light.$ge-indicator-tags-information-alternate;
+    color: light.$on-ge-on-indicator-tags-information-alternate;
+
+    &-border {
+      border-color: light.$on-ge-on-indicator-tags-information-alternate;
+    }
+  }
+
+  &--variant-featured {
+    background: light.$ge-indicator-tags-featured-alternate;
+    border-color: light.$ge-indicator-tags-featured-alternate;
+    color: light.$on-ge-on-indicator-tags-featured-alternate;
+
+    &-border {
+      border-color: light.$on-ge-on-indicator-tags-featured-alternate;
+    }
+  }
+}

package/react/tag/tag.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import Text from '../text';
+
+import { Tag as Props, variants, sizes } from './tag.types';
+import classNames from 'classnames';
+
+const Tag: React.FunctionComponent<Props> & {
+  sizes: typeof sizes;
+  variants: typeof variants;
+} = ({ text, icon, border, size = sizes.m, variant = variants.primary }) => (
+  <Text
+    size={size}
+    tight
+    className={classNames('tag', `tag--variant-${variant}`, {
+      [`tag--variant-${variant}-border`]: border,
+    })}
+  >
+    {icon ? icon : null}
+    {text}
+  </Text>
+);
+
+Tag.sizes = sizes;
+Tag.variants = variants;
+export default Tag;

package/react/tag/tag.types.ts

@@ -0,0 +1,30 @@
+import { ObjectValues } from '../types';
+import { sizes as TextSizes } from '../text/text.types';
+import { ReactElement } from 'react';
+
+export const sizes = {
+  xs: TextSizes.interface,
+  s: TextSizes.small,
+  m: TextSizes.basic,
+  l: TextSizes.large,
+} as const;
+
+export const variants = {
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+  positive: 'positive',
+  attention: 'attention',
+  negative: 'negative',
+  neutral: 'neutral',
+  information: 'information',
+  featured: 'featured',
+} as const;
+
+export type Tag = {
+  text: string;
+  border?: boolean;
+  size?: ObjectValues<typeof sizes>;
+  variant?: ObjectValues<typeof variants>;
+  icon?: ReactElement;
+};

package/react/text/index.ts

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

package/react/text/text.scss

@@ -0,0 +1,109 @@
+@use 'sass:math';
+@use '../../tokens/font-names';
+@use '../../tokens/font-sizes';
+
+.text {
+  $block: &;
+
+  &--italic {
+    font-style: italic;
+  }
+
+  &--tight {
+    margin: 0;
+  }
+
+  &--theme-normal {
+    &#{$block}--size-section {
+      // NOTE: Only normal can be section
+      @include font-sizes.normal(section);
+      font-weight: 600;
+      line-height: 1.15;
+    }
+  }
+
+  &--size-headline1 {
+    @include font-sizes.normal(headline1);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  &--size-headline2 {
+    @include font-sizes.normal(headline2);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  &--size-headline3 {
+    @include font-sizes.normal(headline3);
+    line-height: 1.1;
+  }
+
+  &--size-large {
+    @include font-sizes.normal(large);
+    line-height: math.div(30, 21);
+  }
+
+  &--size-basic {
+    @include font-sizes.normal(basic);
+    line-height: math.div(26, 18);
+  }
+
+  &--size-small {
+    @include font-sizes.normal(small);
+    line-height: math.div(23, 16);
+  }
+
+  &--size-interface {
+    @include font-sizes.normal(interface);
+    line-height: math.div(20, 14);
+  }
+
+
+  &--theme-emphasis {
+    font-family: font-names.$brand, sans-serif;
+    font-weight: 600;
+
+    &#{$block}--size-headline1 {
+      font-weight: 800;
+    }
+
+    &#{$block}--size-headline2 {
+      font-weight: 800;
+    }
+
+    &#{$block}--size-headline3 {
+      font-weight: 800;
+    }
+
+    &#{$block}--italic {
+      // NOTE: Emphasis doesn't have an italic version
+      font-style: normal;
+    }
+  }
+
+  &--theme-headline {
+    &#{$block}--size-headline1 {
+      @include font-sizes.headline(headline1);
+      letter-spacing: 0;
+    }
+
+    &#{$block}--size-headline2 {
+      @include font-sizes.headline(headline2);
+      letter-spacing: 0;
+    }
+
+    &#{$block}--size-headline3 {
+      @include font-sizes.headline(headline3);
+      letter-spacing: 0;
+    }
+
+    &#{$block}--size-button {
+      // NOTE: Only headline can be button
+      @include font-sizes.headline(button);
+      letter-spacing: 1.03;
+      line-height: 1.2;
+    }
+  }
+
+}

package/react/text/text.tsx

@@ -0,0 +1,40 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import { sizes, themes, Text as Props } from './text.types';
+
+const Text: React.FunctionComponent<React.PropsWithChildren<Props>> & {
+  sizes: typeof sizes;
+  themes: typeof themes;
+} = ({
+  children,
+  className,
+  elementName = 'div',
+  italic,
+  size = sizes.basic,
+  theme = themes.normal,
+  tight,
+  ...restProps
+}) =>
+  React.createElement(
+    elementName,
+    {
+      className: cn(
+        'text',
+        {
+          'text--italic': italic,
+          [`text--size-${size}`]: size ? sizes[size] : undefined,
+          [`text--theme-${theme}`]: theme ? themes[theme] : undefined,
+          'text--tight': tight,
+        },
+        className,
+      ),
+      ...restProps,
+    },
+    children,
+  );
+
+Text.sizes = sizes;
+Text.themes = themes;
+
+export default Text;

package/react/text/text.types.ts

@@ -0,0 +1,29 @@
+import { ObjectValues } from '../types';
+
+export const sizes = {
+  headline1: 'headline1',
+  headline2: 'headline2',
+  headline3: 'headline3',
+  large: 'large',
+  basic: 'basic',
+  small: 'small',
+  interface: 'interface',
+  button: 'button',
+  section: 'section',
+} as const;
+
+export const themes = {
+  normal: 'normal',
+  emphasis: 'emphasis',
+  headline: 'headline',
+} as const;
+
+// NOTE: The type of the rest spread properties is generic because `elementName` can be _any_ HTML element which we can't type the props for
+export type Text = {
+  className?: string;
+  elementName?: string;
+  italic?: boolean;
+  size?: ObjectValues<typeof sizes>;
+  theme?: ObjectValues<typeof themes>;
+  tight?: boolean;
+} & { [key: string]: unknown };

package/react/text-area/index.ts

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

package/react/text-area/text-area.scss

@@ -0,0 +1,180 @@
+@use '../../tokens/corner-radius';
+@use '../../tokens/font-names';
+@use '../../tokens/light';
+@use '../../tokens/dark';
+@use '../../tokens/spacing';
+
+.text-area {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &__wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__label {
+    &--theme-light {
+      &-disabled {
+        color: light.$on-background-primary-disabled;
+      }
+    }
+    &--theme-dark {
+      color: light.$on-fixed-background-primary-default;
+      &-disabled {
+        color: light.$on-fixed-background-primary-disabled;
+      }
+    }
+  }
+
+  &__max {
+    color: light.$on-background-primary-alternate;
+  }
+
+  &__input {
+    width: 100%;
+    border: 0.5px solid light.$ge-border-default;
+    border-radius: corner-radius.$xs;
+
+    font-family: font-names.$brand, sans-serif;
+    font-size: 16px;
+    line-height: 1.2;
+
+    overflow: auto;
+    box-sizing: border-box;
+
+    min-height: 95px;
+    min-width: 150px;
+
+    &--size-default {
+      padding: spacing.$s spacing.$m;
+      &-short {
+        min-height: 45px;
+        max-height: 120px;
+      }
+    }
+
+    &--size-small {
+      padding: spacing.$xs spacing.$s;
+      &-short {
+        min-height: 35px; // NOTE: Magic number to get to correct height with padding
+        max-height: 110px;
+      }
+    }
+
+    &--theme-light {
+      background-color: light.$surface-primary-default;
+      color: light.$on-surface-primary-default;
+      &:focus {
+        outline: 1px solid light.$ge-border-focused;
+        outline-offset: -1px;
+      }
+
+      &:hover {
+        background-color: light.$surface-primary-hover;
+      }
+
+      &::placeholder {
+        color: light.$on-surface-primary-alternate;
+        opacity: 1;
+      }
+
+      &:disabled {
+        background-color: light.$surface-primary-disabled;
+        &::placeholder {
+          color: light.$on-surface-primary-disabled;
+        }
+      }
+
+      &-error {
+        border-color: light.$ge-signal-border-error;
+      }
+    }
+
+    &--theme-dark {
+      background-color: light.$fixed-surface-secondary-default;
+      color: light.$on-fixed-surface-primary-default;
+      &:focus {
+        background: light.$fixed-surface-primary-hover;
+        outline: 2px solid light.$ge-border-focused;
+        outline-offset: -2px;
+      }
+
+      &:hover {
+        background-color: light.$fixed-surface-primary-hover;
+      }
+
+      &::placeholder {
+        color: light.$on-fixed-surface-primary-alternate;
+        opacity: 1;
+      }
+
+      &:disabled {
+        background-color: light.$fixed-surface-primary-selected;
+        border: 0;
+        &::placeholder {
+          color: light.$on-fixed-surface-secondary-disabled;
+        }
+      }
+
+      &-error {
+        border-color: light.$on-fixed-surface-error;
+      }
+    }
+  }
+
+  &__asterisk {
+    margin-left: spacing.$xs;
+
+    &--theme-light {
+      color: light.$on-surface-featured;
+      &-disabled {
+
+        color: light.$on-surface-primary-disabled;
+      }
+    }
+    &--theme-dark {
+      color: light.$on-fixed-surface-featured;
+      &-disabled {
+        color: light.$on-fixed-background-primary-disabled;
+      }
+    }
+
+  }
+
+  &__error {
+    color: light.$on-surface-error;
+    margin-top: spacing.$xxs;
+  }
+
+  &__help {
+    margin-top: spacing.$xxs;
+  }
+
+  &__help-text {
+    display: flex;
+    align-items: center;
+    gap: spacing.$xs;
+
+    &--theme-light {
+      color: light.$on-background-primary-disabled;
+      &--error {
+        color: light.$on-surface-error;
+      }
+    }
+
+    &--theme-dark {
+      color: light.$on-fixed-background-primary-disabled;
+      &--error {
+        color: light.$on-fixed-surface-error;
+      }
+    }
+  }
+}

package/react/text-area/text-area.tsx

@@ -0,0 +1,153 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import Text from '../text';
+import useInputValidation from '../use-input-validation';
+
+import { TextArea as Props, themes, sizes } from './text-area.types';
+
+const RefTextArea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.PropsWithChildren<Props>
+>(
+  (
+    {
+      children,
+      helpText,
+      label,
+      name,
+      placeholder,
+      disabled,
+      required,
+      isLabelVisible = true,
+      helpIcon,
+      size = sizes.default,
+      theme = themes.light,
+      isShort,
+      maxLength,
+      defaultValue,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const [onChange, onInvalid, error] = useInputValidation();
+    const [count, setCount] = React.useState(0);
+
+    React.useEffect(() => {
+      if (defaultValue) {
+        if (typeof defaultValue === 'string') {
+          setCount(defaultValue.length);
+        } else if (typeof defaultValue === 'number') {
+          setCount(defaultValue);
+        }
+      }
+    }, [restProps]);
+
+    return (
+      <label className="text-area">
+        <div className="text-area__wrapper">
+          {isLabelVisible ? (
+            <div className="text-area__header">
+              <Text
+                theme={Text.themes.emphasis}
+                size={
+                  size === sizes.default ? Text.sizes.basic : Text.sizes.small
+                }
+                className={cn('text-area__label', {
+                  [`text-area__label--theme-${theme}-disabled`]: disabled,
+                  [`text-area__label--theme-${theme}`]: theme,
+                })}
+              >
+                {label}
+                {required ? (
+                  <span
+                    className={cn('text-area__asterisk', {
+                      [`text-area__asterisk--theme-${theme}-disabled`]:
+                        disabled,
+                      [`text-area__asterisk--theme-${theme}`]: theme,
+                    })}
+                  >
+                    *
+                  </span>
+                ) : null}
+                {children}
+              </Text>
+              {maxLength ? (
+                <Text className="text-area__max" size={Text.sizes.small}>
+                  {count}/{maxLength}
+                </Text>
+              ) : null}
+            </div>
+          ) : null}
+          <textarea
+            className={cn('text-area__input', {
+              [`text-area__input--theme-${theme}`]: theme,
+              [`text-area__input--theme-${theme}-error`]: error,
+              [`text-area__input--size-${size}-short`]: isShort,
+              [`text-area__input--size-${size}`]: size,
+            })}
+            aria-label={isLabelVisible ? label : undefined}
+            name={name}
+            maxLength={maxLength}
+            ref={ref}
+            cols={1}
+            required={required}
+            defaultValue={defaultValue}
+            rows={isShort ? 1 : 2}
+            onChange={e => {
+              // NOTE: To not break compatibility
+              if (restProps.onChange) {
+                restProps.onChange(e);
+              }
+              onChange(e);
+              if (maxLength) {
+                setCount(e.target.value.length);
+              }
+            }}
+            onInvalid={e => {
+              // NOTE: To not break compatibility
+              if (restProps.onInvalid) restProps.onInvalid(e);
+              onInvalid(e);
+            }}
+            placeholder={placeholder}
+            disabled={disabled}
+            {...restProps}
+          />
+        </div>
+
+        {helpText ? (
+          <div className="text-area__help">
+            <Text
+              size={Text.sizes.interface}
+              className={cn('text-area__help-text', {
+                [`text-area__help-text--theme-${theme}-error`]: error,
+                [`text-area__help-text--theme-${theme}`]: theme,
+              })}
+            >
+              {helpIcon ? helpIcon : null}
+              {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-area__error">
+            <Text>{error}</Text>
+          </div>
+        )}
+      </label>
+    );
+  },
+);
+
+// NOTE: If this isn't set, stack traces say "forwardRef" instead of "TextArea"
+RefTextArea.displayName = 'TextArea';
+// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared
+
+const TextArea: typeof RefTextArea & {
+  themes: typeof themes;
+  sizes: typeof sizes;
+} = Object.assign(RefTextArea, { themes, sizes });
+
+export default TextArea;

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

@@ -0,0 +1,24 @@
+import type { ReactElement } from 'react';
+import type { ObjectValues, TextAreaHtmlProps } from '../types';
+
+export const themes = {
+  light: 'light',
+  dark: 'dark',
+} as const;
+
+export const sizes = {
+  default: 'default',
+  small: 'small',
+} as const;
+
+export type TextArea = {
+  helpText?: string;
+  label: string;
+  theme?: ObjectValues<typeof themes>;
+  size?: ObjectValues<typeof sizes>;
+  isLabelVisible?: boolean;
+  helpIcon?: ReactElement;
+  isShort?: boolean;
+  name: string;
+  defaultValue?: string;
+} & TextAreaHtmlProps;