@sats-group/ui-lib 74.2.0

package/react/banner/banner.scss

@@ -0,0 +1,118 @@
+@use '../../tokens/corner-radius';
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.banner {
+  border: 1px solid;
+  border-radius: corner-radius.$s;
+  display: grid;
+  padding: spacing.$m;
+
+  &--layout {
+    &-dismissable {
+      grid-template-columns: 1fr min-content;
+    }
+
+    &-icon {
+      grid-template-columns: min-content 1fr;
+    }
+
+    &-single {
+      grid-template-columns: 1fr;
+    }
+
+    &-triple {
+      grid-template-columns: min-content 1fr min-content;
+    }
+  }
+
+  &--nested {
+    border: 0;
+    border-radius: 0;
+  }
+
+  &--type {
+    &-error {
+      background-color: light.$signal-surface-error;
+      border-color: light.$on-signal-surface-error-alternate;
+
+      .banner__anchor,
+      .banner__disimsser,
+      .banner__icon {
+        color: light.$on-signal-surface-error-alternate;
+      }
+    }
+
+    &-information {
+      background-color: light.$signal-surface-information;
+      border-color: light.$on-signal-surface-information-alternate;
+
+      .banner__anchor,
+      .banner__disimsser,
+      .banner__icon {
+        color: light.$on-signal-surface-information-alternate;
+      }
+    }
+
+    &-success {
+      background-color: light.$signal-surface-success;
+      border-color: light.$on-signal-surface-success-alternate;
+
+      .banner__anchor,
+      .banner__disimsser,
+      .banner__icon {
+        color: light.$on-signal-surface-success-alternate;
+      }
+    }
+
+    &-warning {
+      background-color: light.$signal-surface-warning;
+      border-color: light.$on-signal-surface-warning-alternate;
+
+      .banner__anchor,
+      .banner__disimsser,
+      .banner__icon {
+        color: light.$on-signal-surface-warning-alternate;
+      }
+    }
+  }
+
+  &__icon {
+    margin-right: spacing.$m;
+  }
+
+  &__title {
+    margin-bottom: spacing.$s;
+  }
+
+  &__list {
+    margin-bottom: 0;
+    margin-top: spacing.$xs;
+    padding: 0 0 0 1.2em;
+
+    li::marker {
+      font-size: inherit;
+      font-size: inherit;
+      line-height: inherit;
+    }
+  }
+
+  &__link {
+    margin-top: spacing.$m;
+  }
+
+  &__secondary {
+    margin: (-(spacing.$m)) (-(spacing.$m)) 0 spacing.$xs;
+  }
+
+  &__dismisser {
+    background: transparent;
+    border: 0;
+    display: grid;
+    cursor: pointer;
+    height: 48px;
+    padding: 0;
+    place-items: center;
+    width: 48px;
+  }
+}

package/react/banner/banner.tsx

@@ -0,0 +1,92 @@
+import Close from '@sats-group/icons/18/close';
+import Confirm from '@sats-group/icons/18/confirm';
+import Error from '@sats-group/icons/18/error';
+import Info from '@sats-group/icons/18/info';
+import WarningSign from '@sats-group/icons/18/warning-sign';
+import cn from 'classnames';
+import React, { useState } from 'react';
+
+import Text from '../text';
+import VisuallyHidden from '../visually-hidden';
+
+import type { Banner as Props } from './banner.types';
+
+const typeIcon = {
+  error: <Error />,
+  information: <Info />,
+  success: <Confirm />,
+  warning: <WarningSign />,
+};
+
+const Banner: React.FunctionComponent<Props> = ({
+  dismiss,
+  icon,
+  link,
+  list,
+  nested,
+  text,
+  title,
+  type,
+}) => {
+  const [isDismissed, setDismissed] = useState(false);
+  if (isDismissed) {
+    return null;
+  }
+
+  const handleClick = () => setDismissed(true);
+
+  return (
+    <div
+      className={cn('banner', {
+        'banner--layout-dismissable': !icon && dismiss,
+        'banner--layout-icon': icon && !dismiss,
+        'banner--layout-single': !icon && !dismiss,
+        'banner--layout-triple': icon && dismiss,
+        'banner--nested': nested,
+        [`banner--type-${type}`]: type,
+      })}
+    >
+      {icon ? <div className="banner__icon">{typeIcon[type]}</div> : null}
+      <div className="banner__primary">
+        {title ? (
+          <div className="banner__title">
+            <Text theme={Text.themes.emphasis} tight>
+              {title}
+            </Text>
+          </div>
+        ) : null}
+        <Text className="banner__text" size={Text.sizes.small}>
+          {text}
+        </Text>
+        {list.length ? (
+          <Text
+            elementName="ol"
+            className="banner__list"
+            size={Text.sizes.small}
+          >
+            {list.map(item => (
+              <li key={item}>{item}</li>
+            ))}
+          </Text>
+        ) : null}
+        {link ? (
+          <Text className="banner__link">
+            <a className="banner__anchor" href={link.href}>
+              {link.text}
+            </a>
+          </Text>
+        ) : null}
+      </div>
+      {dismiss ? (
+        <div className="banner__secondary">
+          <button className="banner__dismisser" onClick={handleClick}>
+            <VisuallyHidden>{dismiss}</VisuallyHidden>
+            <Close />
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default Banner;

package/react/banner/banner.types.ts

@@ -0,0 +1,10 @@
+export type Banner = {
+  dismiss?: string;
+  icon?: boolean;
+  link?: { href: string; text: string };
+  list: string[];
+  nested?: boolean;
+  text: string;
+  title?: string;
+  type: 'error' | 'information' | 'success' | 'warning';
+};

package/react/banner/index.ts

@@ -0,0 +1,2 @@
+import Banner from './banner';
+export default Banner;

package/react/bomb/bomb.scss

@@ -0,0 +1,33 @@
+@use '../../tokens/elevation';
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.bomb {
+  $border-inset: 3px;
+  $border-thickness: 2px;
+
+  @include elevation.level(1);
+  aspect-ratio: 1/1; // NOTE: Needs fallback for perfect roundness in older browsers. Worth it?
+  background: light.$buttons-cta-default;
+  border-radius: 50%;
+  color: light.$on-buttons-on-cta-default;
+  display: grid;
+  overflow: hidden;
+  padding: spacing.$l;
+  place-items: center;
+  position: relative;
+  width: max-content;
+
+  &::before {
+    border-radius: 50%;
+    border: $border-thickness solid light.$on-buttons-on-cta-default;
+    bottom: $border-inset;
+    content: '';
+    display: block;
+    left: $border-inset;
+    pointer-events: none;
+    position: absolute;
+    right: $border-inset;
+    top: $border-inset;
+  }
+}

package/react/bomb/bomb.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Text from '../text';
+
+import { Bomb as Props } from './bomb.types';
+
+const Bomb: React.FC<Props> = ({ label, price }) => (
+  <div className="bomb">
+    <div className="bomb__content">
+      <Text size={Text.sizes.small} theme={Text.themes.normal}>
+        {label}
+      </Text>
+      <Text size={Text.sizes.large} theme={Text.themes['emphasis']}>
+        {price}
+      </Text>
+    </div>
+  </div>
+);
+
+export default Bomb;

package/react/bomb/bomb.types.ts

@@ -0,0 +1 @@
+export type Bomb = { label: string; price: string };

package/react/bomb/index.ts

@@ -0,0 +1,2 @@
+import Bomb from './bomb';
+export default Bomb;

package/react/button/button.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { Button as Props } from './button.types';
+
+import VisuallyButton from '../visually-button';
+
+const Button: React.FunctionComponent<Props> & {
+  sizes: typeof VisuallyButton.sizes;
+  themes: typeof VisuallyButton.themes;
+  variants: typeof VisuallyButton.variants;
+} = ({ type = 'button', ...rest }) => (
+  <VisuallyButton elementName="button" type={type} {...rest} />
+);
+
+Button.sizes = VisuallyButton.sizes;
+Button.themes = VisuallyButton.themes;
+Button.variants = VisuallyButton.variants;
+
+export default Button;

package/react/button/button.types.ts

@@ -0,0 +1,3 @@
+import { VisuallyButtonButton } from '../visually-button/visually-button.types';
+
+export type Button = VisuallyButtonButton;

package/react/button/index.ts

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

package/react/checkbox/checkbox.scss

@@ -0,0 +1,218 @@
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.checkbox {
+  $block: &;
+  $size: 20px;
+
+  &__asterisk {
+    color: light.$on-surface-featured;
+    margin-left: spacing.$xs;
+  }
+
+  &:focus-within {
+    .checkbox__icon {
+      outline: 4px solid light.$ge-selector-primary-unselected-default;
+      outline-offset: 2px;
+
+      &--light {
+        outline-color: light.$ge-fixed-selector-unselected-default;
+      }
+    }
+  }
+
+  &--underline {
+    padding-bottom: spacing.$s;
+    border-bottom: 1px solid light.$ge-divider-default;
+
+    &--light {
+      border-color: light.$ge-divider-default;
+    }
+  }
+
+  &--intermediate {
+    .checkbox__icon {
+      border-color: light.$ge-selector-primary-selected-default;
+      background-color: light.$ge-selector-primary-selected-default;
+
+      svg {
+        color: light.$on-ge-on-selector-primary-selected-default;
+      }
+
+      .checkbox__check {
+        opacity: 0;
+      }
+
+      .checkbox__intermediate {
+        opacity: 1;
+      }
+
+      &--light {
+        border-color: light.$ge-fixed-selector-selected-default;
+        background-color: light.$ge-fixed-selector-selected-default;
+
+        svg {
+          color: light.$on-ge-on-fixed-selector-selected-default;
+        }
+      }
+
+      &--blue {
+        border-color: light.$on-background-primary-default;
+        background-color: light.$on-background-primary-default;
+
+        svg {
+          color: light.$on-ge-on-selector-primary-selected-default;
+        }
+      }
+    }
+  }
+
+  &--error {
+    .checkbox__icon {
+      border-color: light.$ge-signal-border-error;
+
+      &--light {
+        border-color: light.$ge-signal-border-error;
+      }
+    }
+  }
+
+  &__main {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  &__main-top {
+    display: flex;
+    align-items: center;
+    gap: spacing.$xs;
+  }
+
+  &__input {
+    position: absolute;
+    height: $size;
+    width: $size;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+
+    &:not(:checked) {
+      + .checkbox__icon {
+        svg {
+          opacity: 0;
+        }
+
+        &--intermediate {
+          .checkbox__intermediate {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    &:checked + .checkbox__icon {
+      background-color: light.$ge-selector-primary-selected-default;
+      border-color: light.$ge-selector-primary-selected-default;
+
+      svg {
+        color: light.$on-ge-on-selector-primary-selected-default;
+      }
+
+      .checkbox__check {
+        opacity: 1;
+      }
+
+      .checkbox__intermediate {
+        opacity: 0;
+      }
+
+      &--light {
+        background-color: light.$ge-fixed-selector-selected-default;
+        border-color: light.$ge-fixed-selector-selected-default;
+
+        svg {
+          color: light.$on-ge-on-fixed-selector-selected-default;
+        }
+      }
+
+      &--blue {
+        background-color: light.$on-background-primary-default;
+        border-color: light.$on-background-primary-default;
+
+        svg {
+          color: light.$on-ge-on-selector-primary-selected-default;
+        }
+      }
+    }
+
+    &:disabled + .checkbox__icon {
+      opacity: 0.4;
+    }
+  }
+
+  &__content {
+    display: flex;
+  }
+
+  &__icon {
+    border-radius: 4px;
+    border: 2px solid light.$ge-selector-primary-unselected-default;
+    box-sizing: border-box;
+    height: $size;
+    position: relative;
+    width: $size;
+    margin-top: 2px;
+    flex-shrink: 0;
+
+    svg {
+      display: block;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &--light {
+      border-color: light.$ge-fixed-selector-unselected-default;
+    }
+  }
+
+  &__description {
+    color: light.$on-surface-primary-alternate;
+    margin-left: $size + (spacing.$xs);
+    &--light {
+      color: light.$on-fixed-surface-neutral;
+    }
+
+    &--disabled {
+      color: light.$on-surface-primary-disabled;
+    }
+  }
+
+  &__label {
+    color: light.$on-surface-primary-default;
+
+    &--light {
+      color: light.$on-fixed-surface-primary-default;
+    }
+
+    &--disabled {
+      color: light.$on-surface-primary-default;
+    }
+  }
+
+  &__extra {
+    margin-top: spacing.$s;
+    margin-left: 28px;
+  }
+
+  &__error {
+    color: light.$ge-signal-error;
+    margin-top: 4px;
+
+    &--light {
+      color: light.$ge-signal-error;
+    }
+  }
+}

package/react/checkbox/checkbox.tsx

@@ -0,0 +1,176 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import useInputValidation from '../use-input-validation';
+import Text from '../text';
+
+import { Checkbox as Props, themes } from './checkbox.types';
+
+const RefCheckbox = React.forwardRef<
+  HTMLInputElement,
+  React.PropsWithChildren<Props>
+>(
+  (
+    {
+      children,
+      disabled,
+      description,
+      extra,
+      intermediate,
+      isLabelVisible = true,
+      label,
+      name,
+      showCustomError = true,
+      theme,
+      value = '',
+      isUnderlined,
+      required,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const [onChange, onInvalid, error] = useInputValidation();
+
+    return (
+      <div
+        className={cn('checkbox', {
+          'checkbox--error': error,
+          'checkbox--intermediate': intermediate,
+          [`checkbox--${theme}`]: theme,
+        })}
+      >
+        <label
+          className={cn('checkbox__content', {
+            'checkbox--underline': isUnderlined,
+          })}
+        >
+          <div className="checkbox__main">
+            <div className="checkbox__main-top">
+              <div>
+                <input
+                  aria-label={isLabelVisible ? undefined : label}
+                  className="checkbox__input"
+                  type="checkbox"
+                  name={name}
+                  onChange={e => {
+                    // NOTE: If props specify an `onChange`, we need to call that too
+                    if (restProps.onChange) restProps.onChange(e);
+                    onChange(e);
+                  }}
+                  onInvalid={e => {
+                    // NOTE: If props specify an `onInvalid`, we need to call that too
+                    if (restProps.onInvalid) restProps.onInvalid(e);
+                    onInvalid(e);
+                  }}
+                  ref={ref}
+                  value={value}
+                  disabled={disabled}
+                  required={required}
+                  {...restProps}
+                />
+
+                <div
+                  className={cn('checkbox__icon', {
+                    'checkbox__icon--intermediate': intermediate,
+                    [`checkbox__icon--${theme}`]: theme,
+                  })}
+                >
+                  <svg
+                    className="checkbox__intermediate"
+                    width="10"
+                    height="10"
+                    viewBox="0 0 10 10"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <line
+                      x1="0"
+                      y1="5"
+                      x2="10"
+                      y2="5"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    />
+                  </svg>
+                  <svg
+                    className="checkbox__check"
+                    width="12"
+                    height="10"
+                    viewBox="0 0 12 10"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              </div>
+              {isLabelVisible ? (
+                <>
+                  {label ? (
+                    <Text
+                      className={cn('checkbox__label', {
+                        [`checkbox__label--${theme}`]: theme,
+                        'checkbox__label--disabled': disabled,
+                      })}
+                      size={Text.sizes.basic}
+                    >
+                      {label}
+                    </Text>
+                  ) : (
+                    <div
+                      className={cn('checkbox__label', {
+                        [`checkbox__label--${theme}`]: theme,
+                        'checkbox__label--disabled': disabled,
+                      })}
+                    >
+                      {children}
+                    </div>
+                  )}
+                </>
+              ) : null}
+              {required ? <span className="checkbox__asterisk">*</span> : null}
+            </div>
+            {description && (
+              <Text
+                className={cn('checkbox__description', {
+                  [`checkbox__label--${theme}`]: theme,
+                  'checkbox__label--disabled': disabled,
+                })}
+                size={Text.sizes.small}
+              >
+                {description}
+              </Text>
+            )}
+          </div>
+        </label>
+
+        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
+        {error && showCustomError && (
+          <div
+            aria-hidden="true"
+            className={cn('checkbox__error', {
+              [`checkbox__error--${theme}`]: theme,
+            })}
+          >
+            {error}
+          </div>
+        )}
+
+        {extra && <span className="checkbox__extra">{extra}</span>}
+      </div>
+    );
+  },
+);
+
+// NOTE: If this isn't set, stack traces say "forwardRef" instead of "Checkbox"
+RefCheckbox.displayName = 'Checkbox';
+
+// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared
+const Checkbox: typeof RefCheckbox & {
+  themes: typeof themes;
+} = Object.assign(RefCheckbox, { themes });
+
+export default Checkbox;