@sats-group/ui-lib 74.2.0

package/react/types.ts

@@ -0,0 +1,38 @@
+import {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  ImgHTMLAttributes,
+  InputHTMLAttributes,
+  OptionHTMLAttributes,
+  SelectHTMLAttributes,
+  TextareaHTMLAttributes,
+  FormHTMLAttributes,
+} from 'react';
+
+/** Removes any generics from type, resulting in only the raw type:
+```ts
+// In editors, this type will sometimes show up as `NonNullable<{ a: string | null }>`
+type X = NonNullable<{
+  a: string | null
+}>;
+// In editors, this type should show up as `{ a: string }`
+type Y = Flatten<X>;
+```
+ */
+// eslint-disable-next-line
+export type Flatten<T> = T extends infer T
+  ? { [key in keyof T]: T[key] }
+  : never;
+
+/** Extracts the property value types from an object */
+export type ObjectValues<T> = Flatten<T[keyof T]>;
+
+// NOTE: The below types include all of the supported props for "html" react components (like `button` or `a`).
+export type ButtonHtmlProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export type LinkHtmlProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+export type InputHtmlProps = InputHTMLAttributes<HTMLInputElement>;
+export type ImageHtmlProps = ImgHTMLAttributes<HTMLImageElement>;
+export type SelectHtmlProps = SelectHTMLAttributes<HTMLSelectElement>;
+export type OptionHtmlProps = OptionHTMLAttributes<HTMLOptionElement>;
+export type TextAreaHtmlProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+export type FormHtmlProps = FormHTMLAttributes<HTMLFormElement>;

package/react/use-input-validation.ts

@@ -0,0 +1,47 @@
+import { useRef, useState } from 'react';
+
+import { Messages } from './use-input-validation.types';
+
+type SupportedElement =
+  | HTMLInputElement
+  | HTMLSelectElement
+  | HTMLTextAreaElement;
+
+const getCustomMessage = (validity: ValidityState, messages: Messages) => {
+  if (validity.badInput) return messages.badInput;
+  if (validity.customError) return messages.customError;
+  if (validity.patternMismatch) return messages.patternMismatch;
+  if (validity.rangeOverflow) return messages.rangeOverflow;
+  if (validity.rangeUnderflow) return messages.rangeUnderflow;
+  if (validity.stepMismatch) return messages.stepMismatch;
+  if (validity.tooLong) return messages.tooLong;
+  if (validity.tooShort) return messages.tooShort;
+  if (validity.typeMismatch) return messages.typeMismatch;
+  if (validity.valueMissing) return messages.valueMissing;
+};
+
+export default (customMessages: Messages = {}) => {
+  const [error, setError] = useState<string | undefined>();
+  const validationEnabled = useRef(false);
+
+  const onInvalid = (e: React.FormEvent<SupportedElement>) => {
+    validationEnabled.current = true;
+    const message = getCustomMessage(
+      (e.target as HTMLInputElement).validity,
+      customMessages,
+    );
+    setError(message || (e.target as HTMLInputElement)?.validationMessage);
+  };
+
+  const onChange = (e: React.ChangeEvent<SupportedElement>) => {
+    if (!validationEnabled.current) return;
+    const message = getCustomMessage(e.target.validity, customMessages);
+    setError(message || e.target?.validationMessage || undefined);
+  };
+
+  return [onChange, onInvalid, error] as [
+    typeof onChange,
+    typeof onInvalid,
+    typeof error,
+  ];
+};

package/react/use-input-validation.types.ts

@@ -0,0 +1,12 @@
+export type Messages = {
+  badInput?: string;
+  customError?: string;
+  patternMismatch?: string;
+  rangeOverflow?: string;
+  rangeUnderflow?: string;
+  stepMismatch?: string;
+  tooLong?: string;
+  tooShort?: string;
+  typeMismatch?: string;
+  valueMissing?: string;
+};

package/react/visually-button/index.ts

@@ -0,0 +1,2 @@
+import VisuallyButton from './visually-button';
+export default VisuallyButton;

package/react/visually-button/visually-button.scss

@@ -0,0 +1,470 @@
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+@use '../../tokens/corner-radius';
+
+.visually-button {
+  $borderThickness: 1px;
+  border-radius: corner-radius.$s;
+  border: $borderThickness solid;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  position: relative;
+  background: transparent;
+  text-align: center;
+
+  &--wide {
+    display: block;
+    width: 100%;
+
+    &.visually-button--icon {
+      width: inherit;
+    }
+  }
+
+  &--size-large {
+    padding: (spacing.$m - 6.5px) (spacing.$m - $borderThickness); // NOTE: Subtracting border width and text size to get the right padding
+
+    &.visually-button--icon {
+      padding: (
+        spacing.$m - 1px
+      ); //NOTE: Hack to get the pixel size of only icon to be the same as other "large" buttons.
+    }
+  }
+
+  &--size-basic {
+    padding: (spacing.$s - 3.5px) (spacing.$m - $borderThickness); // NOTE: Subtracting border width and text size to get the right padding
+
+    &.visually-button--icon {
+      padding: spacing.$s;
+    }
+  }
+
+  &--size-small {
+    padding: (spacing.$xs - 3.5px) (spacing.$s - $borderThickness); // NOTE: Subtracting border width and text size to get the right padding
+
+    &.visually-button--icon {
+      padding: (
+        spacing.$xs - 1.5px
+      ); //NOTE: Hack to get the pixel size of only icon to be the same as other "small" buttons.
+    }
+  }
+
+  &--icon-text {
+    display: flex;
+    gap: spacing.$xs;
+    justify-content: center;
+    align-items: center;
+
+    &--stacked {
+      flex-direction: column;
+    }
+  }
+
+  &[disabled] {
+    background-color: light.$buttons-primary-disabled;
+    color: light.$on-buttons-on-primary-disabled;
+    border-color: light.$buttons-primary-disabled;
+    cursor: not-allowed;
+
+    &.visually-button--variant-tertiary-destructive,
+    &.visually-button--variant-fixed-tertiary,
+    &.visually-button--variant-tertiary {
+      background-color: transparent;
+      border-color: transparent;
+      text-decoration: none;
+    }
+
+    &:not(&.visually-button--icon) {
+      &.visually-button--variant-tertiary-destructive,
+      &.visually-button--variant-fixed-tertiary,
+      &.visually-button--variant-tertiary {
+        padding-right: 0;
+        padding-left: 0;
+      }
+    }
+  }
+
+  &--variant-complete,
+  &--variant-cta {
+    border-color: light.$buttons-cta-default;
+    background: light.$buttons-cta-default;
+    color: light.$on-buttons-on-cta-default;
+
+    @media (hover: hover) {
+      &:hover:not(&:disabled) {
+        background: light.$buttons-cta-hover;
+        border-color: light.$buttons-cta-hover;
+      }
+    }
+
+    &[disabled] {
+      &.visually-button--theme-spinner {
+        background: light.$buttons-cta-default;
+        color: transparent;
+
+        .visually-button__spinner {
+          display: flex;
+          border-color: light.$buttons-cta-default;
+          color: light.$on-buttons-on-cta-default;
+        }
+      }
+    }
+  }
+
+  &--variant-cta-secondary,
+  &--variant-secondary {
+    color: light.$buttons-secondary-default;
+    border-color: light.$buttons-secondary-default;
+
+    @media (hover: hover) {
+      &:hover:not(&:disabled) {
+        color: light.$buttons-secondary-default;
+        border-color: light.$buttons-secondary-default;
+        background-color: light.$buttons-secondary-hover;
+      }
+    }
+
+    &[disabled] {
+      &.visually-button--theme-spinner {
+        background: transparent;
+        color: transparent;
+        border-color: light.$buttons-secondary-default !important; //NOTE: This overrites the default "disabled" color for spinner style.
+
+        .visually-button__spinner {
+          display: flex;
+          color: light.$buttons-secondary-default;
+        }
+      }
+    }
+  }
+
+  &--variant-secondary-white,
+  &--variant-cta-secondary-white {
+    color: light.$buttons-clean-secondary-outline;
+    border-color: light.$buttons-clean-secondary-outline;
+
+    @media (hover: hover) {
+      &:hover:not(&:disabled) {
+        background: light.$buttons-clean-secondary-hover;
+      }
+    }
+
+    &[disabled] {
+      &.visually-button--theme-spinner {
+        background: transparent;
+        color: transparent;
+        border-color: light.$buttons-clean-secondary-outline;
+
+        .visually-button__spinner {
+          display: flex;
+          color: light.$buttons-clean-secondary-outline;
+        }
+      }
+    }
+  }
+
+  &--variant-secondary-destructive {
+    color: light.$buttons-destructive-outlined-default;
+    border-color: light.$buttons-destructive-outlined-default;
+
+    @media (hover: hover) {
+      &:hover:not(&:disabled) {
+        background: light.$buttons-destructive-outlined-hover;
+      }
+    }
+
+    &[disabled] {
+      &.visually-button--theme-spinner {
+        background: transparent;
+        color: transparent;
+        border-color: light.$buttons-destructive-outlined-default;
+
+        .visually-button__spinner {
+          display: flex;
+          color: light.$buttons-destructive-outlined-default;
+        }
+      }
+    }
+  }
+
+  &--variant-primary {
+    border-color: light.$buttons-primary-default;
+    background: light.$buttons-primary-default;
+    color: light.$on-buttons-on-primary-default;
+
+    @media (hover: hover) {
+      &:hover:not(&:disabled) {
+        border-color: light.$buttons-primary-hover;
+        background: light.$buttons-primary-hover;
+      }
+    }
+
+    &[disabled] {
+      &.visually-button--theme-spinner {
+        background: light.$buttons-primary-default;
+        color: transparent;
+
+        .visually-button__spinner {
+          display: flex;
+          color: light.$on-buttons-on-primary-default;
+        }
+      }
+    }
+  }
+
+  &--variant-primary-white {
+    border-color: light.$buttons-clean-default;
+    background: light.$buttons-clean-default;
+    color: light.$on-buttons-on-clean-default;
+
+    @media (hover: hover) {
+      &:hover:not(&:disabled) {
+        background: light.$buttons-clean-hover;
+        border-color: light.$buttons-clean-hover;
+      }
+    }
+
+    &[disabled] {
+      &.visually-button--theme-spinner {
+        background: light.$buttons-clean-default;
+        color: light.$on-buttons-on-clean-default;
+
+        .visually-button__spinner {
+          display: flex;
+          color: light.$on-buttons-on-clean-default;
+        }
+      }
+    }
+  }
+
+  &--variant-primary-destructive {
+    border-color: light.$buttons-destructive-default;
+    background: light.$buttons-destructive-default;
+    color: light.$on-buttons-on-destructive-default;
+
+    @media (hover: hover) {
+      &:hover:not(&:disabled) {
+        background: light.$buttons-destructive-hover;
+        border-color: light.$buttons-destructive-hover;
+      }
+    }
+
+    &[disabled] {
+      &.visually-button--theme-spinner {
+        background: light.$buttons-destructive-default;
+        color: light.$on-buttons-on-destructive-default;
+
+        .visually-button__spinner {
+          display: flex;
+          color: light.$on-buttons-on-destructive-default;
+        }
+      }
+    }
+  }
+
+  &--variant-tertiary-destructive,
+  &--variant-fixed-tertiary,
+  &--variant-tertiary {
+    border: none;
+    padding-right: 0;
+    padding-left: 0;
+    color: light.$on-buttons-on-link-default;
+
+    @media (hover: hover) {
+      &.visually-button--icon {
+        &:hover:not(&:disabled) {
+          background-color: light.$buttons-link-hover;
+        }
+      }
+
+      &:hover:not(&:disabled) {
+        color: light.$on-buttons-on-link-hover;
+        text-decoration: underline;
+        text-decoration-thickness: 2px;
+      }
+    }
+
+    &[disabled] {
+      &.visually-button--theme-spinner {
+        color: transparent;
+
+        .visually-button__spinner {
+          display: flex;
+          color: light.$on-buttons-on-link-default;
+        }
+      }
+    }
+  }
+
+  &--variant-tertiary-destructive {
+    color: light.$on-buttons-on-destructive-outlined-default;
+
+    @media (hover: hover) {
+      &.visually-button--icon {
+        &:hover:not(&:disabled) {
+          background-color: light.$buttons-destructive-outlined-hover;
+          color: light.$on-buttons-on-destructive-outlined-default;
+        }
+      }
+
+      &:hover:not(&:disabled) {
+        color: light.$buttons-destructive-hover;
+        text-decoration: underline;
+        text-decoration-thickness: 2px;
+      }
+    }
+
+    &[disabled] {
+      &.visually-button--theme-spinner {
+        .visually-button__spinner {
+          display: flex;
+          color: light.$on-buttons-on-destructive-outlined-default;
+        }
+      }
+    }
+  }
+
+  &--variant-fixed-tertiary {
+    color: light.$on-buttons-on-fixed-link-default;
+
+    @media (hover: hover) {
+      &.visually-button--icon {
+        &:hover:not(&:disabled) {
+          background-color: light.$buttons-fixed-link-hover;
+        }
+      }
+
+      &:hover:not(&:disabled) {
+        color: light.$on-buttons-on-fixed-link-hover;
+        text-decoration: underline;
+        text-decoration-thickness: 2px;
+      }
+    }
+
+    &[disabled] {
+      &.visually-button--theme-spinner {
+        .visually-button__spinner {
+          display: flex;
+          color: light.$on-buttons-on-fixed-link-default;
+        }
+      }
+    }
+  }
+
+  &--variant-waitlist {
+    border-color: light.$buttons-waiting-list-default;
+    background: light.$buttons-waiting-list-default;
+    color: light.$on-buttons-on-waiting-list-default;
+
+    @media (hover: hover) {
+      &:hover:not(&:disabled) {
+        background: light.$buttons-waiting-list-hover;
+        border-color: light.$buttons-waiting-list-hover;
+      }
+    }
+
+    &[disabled] {
+      &.visually-button--theme-spinner {
+        background: light.$buttons-waiting-list-default;
+        color: transparent;
+
+        .visually-button__spinner {
+          display: flex;
+          color: light.$on-buttons-on-waiting-list-default;
+        }
+      }
+    }
+  }
+
+  &--variant-waitlist-secondary {
+    background: transparent;
+    color: light.$on-buttons-on-waiting-list-outlined-default;
+    border-color: light.$buttons-waiting-list-outlined-default;
+
+    @media (hover: hover) {
+      &:hover:not(&:disabled) {
+        color: light.$on-buttons-on-waiting-list-outlined-hover;
+        border-color: light.$buttons-waiting-list-outlined-hover;
+        background-color: light.$buttons-waiting-list-outlined-hover;
+      }
+    }
+
+    &[disabled] {
+      &.visually-button--theme-spinner {
+        background: transparent;
+        color: transparent;
+        border-color: light.$buttons-waiting-list-outlined-default !important; //NOTE: This overrides the default "disabled" color for spinner style.
+
+        .visually-button__spinner {
+          display: flex;
+          color: light.$on-buttons-on-waiting-list-outlined-default;
+        }
+      }
+    }
+  }
+
+  &__icon {
+    display: block;
+    height: 19px;
+    width: 19px;
+    position: relative;
+
+    > * {
+      display: block;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &[disabled] {
+      &.visually-button--spinner {
+        .visually-button__spinner {
+          display: flex;
+        }
+      }
+    }
+  }
+
+  &__text {
+    text-align: center;
+    text-decoration: none;
+  }
+
+  &__spinner {
+    display: none;
+    justify-content: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 24px;
+    width: 24px;
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    &-icon {
+      animation: spin 2s linear infinite;
+
+      z-index: 2;
+      height: 100%;
+      width: 100%;
+      position: sticky;
+      left: 0;
+      top: 50%;
+      margin: 0 auto;
+    }
+  }
+}

package/react/visually-button/visually-button.tsx

@@ -0,0 +1,130 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import Text from '../text';
+import type { ValueOf } from '../indexed-access-type';
+import { themes as textThemes, sizes as textSizes } from '../text/text.types';
+
+import {
+  sizes,
+  themes,
+  variants,
+  VisuallyButton as Props,
+} from './visually-button.types';
+
+const italicMap: Partial<Record<ValueOf<typeof variants>, true>> = {
+  cta: true,
+  'cta-secondary': true,
+  'cta-secondary-white': true,
+};
+
+const sizeMap: Record<keyof typeof sizes, keyof typeof textSizes> = {
+  small: textSizes.small,
+  basic: textSizes.basic,
+  large: textSizes.large,
+};
+
+const themeMap: Record<ValueOf<typeof variants>, keyof typeof textThemes> = {
+  complete: textThemes.emphasis,
+  cta: textThemes.headline,
+  'cta-secondary': textThemes.headline,
+  'cta-secondary-white': textThemes.headline,
+  primary: textThemes.emphasis,
+  'primary-destructive': textThemes.emphasis,
+  'primary-white': textThemes.emphasis,
+  secondary: textThemes.emphasis,
+  'secondary-white': textThemes.emphasis,
+  'secondary-destructive': textThemes.emphasis,
+  tertiary: textThemes.emphasis,
+  'tertiary-destructive': textThemes.emphasis,
+  'fixed-tertiary': textThemes.emphasis,
+  waitlist: textThemes.emphasis,
+  'waitlist-secondary': textThemes.emphasis,
+};
+
+const VisuallyButton: React.FunctionComponent<Props> & {
+  sizes: typeof sizes;
+  variants: typeof variants;
+  themes: typeof themes;
+} = ({
+  ariaLabel,
+  className,
+  elementName = 'button',
+  leadingIcon,
+  trailingIcon,
+  hasStackedIcon,
+  size = sizes.basic,
+  testId,
+  text,
+  theme = themes.normal,
+  variant = variants.primary,
+  wide,
+  ...rest
+}) =>
+  React.createElement(
+    elementName,
+    {
+      'aria-label': leadingIcon && ariaLabel ? ariaLabel : undefined,
+      className: cn(
+        'visually-button',
+        {
+          'visually-button--icon': leadingIcon && !text,
+          'visually-button--icon-text': (leadingIcon || trailingIcon) && text,
+          'visually-button--icon-text--stacked': hasStackedIcon,
+          [`visually-button--size-${size}`]: size,
+          [`visually-button--variant-${variant}`]: variant,
+          'visually-button--wide': wide,
+          [`visually-button--theme-${theme}`]: theme
+            ? themes[theme]
+            : undefined,
+        },
+        className,
+      ),
+      'data-testid': testId,
+      ...rest,
+    },
+    <React.Fragment>
+      {leadingIcon ? (
+        <div className="visually-button__icon">{leadingIcon}</div>
+      ) : null}
+      <Text
+        className="visually-button__text"
+        italic={italicMap[variant]}
+        size={sizeMap[size]}
+        theme={themeMap[variant]}
+        elementName="span"
+      >
+        {text}
+      </Text>
+      {trailingIcon ? (
+        <div className="visually-button__icon">{trailingIcon}</div>
+      ) : null}
+      {theme === 'spinner' && (
+        <div className="visually-button__spinner">
+          <svg
+            className="visually-button__spinner-icon"
+            width="24px"
+            height="24px"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle opacity="0.1" cx="12" cy="12" r="10" />
+            <path
+              d="M12 2C13.9778 2 15.9112 2.58649 17.5557 3.6853C19.2002 4.78412 20.4819 6.3459 21.2388 8.17316C21.9957 10.0004 22.1937 12.0111 21.8079 13.9509C21.422 15.8907 20.4696 17.6725 19.0711 19.0711C17.6725 20.4696 15.8907 21.422 13.9509 21.8079C12.0111 22.1937 10.0004 21.9957 8.17317 21.2388C6.3459 20.4819 4.78412 19.2002 3.6853 17.5557C2.58649 15.9112 2 13.9778 2 12"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </div>
+      )}
+    </React.Fragment>,
+  );
+
+VisuallyButton.sizes = sizes;
+VisuallyButton.variants = variants;
+VisuallyButton.themes = themes;
+
+export default VisuallyButton;