@sats-group/ui-lib 74.2.0

package/react/radio/radio.scss

@@ -0,0 +1,142 @@
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.radio {
+  $root: &;
+  $size: 22px;
+
+  position: relative;
+  display: block;
+
+  &:focus-within {
+    .radio__fake-element {
+      outline: 4px solid currentColor;
+      outline-offset: 2px;
+    }
+  }
+
+  &--error {
+    // NOTE: When multiple radios have the same name and all are required,
+    // ticking one of them will result in the other ones still being
+    // visually marked with an input error. The check for `:not(:valid)` fixes that.
+    input:not(:valid) ~ #{$root}__label #{$root}__fake-element {
+      border-color: light.$ge-signal-border-error;
+    }
+  }
+
+  input {
+    position: absolute;
+    top: 0;
+    margin: 0;
+    opacity: 0;
+  }
+
+  // NOTE: size these together to ensure the native input
+  // is the same size as the fake one
+  input,
+  &__fake-element {
+    height: $size;
+    width: $size;
+  }
+
+  &--underline {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: spacing.$s;
+    border-bottom: 1px solid light.$ge-border-default;
+
+    &--light {
+      border-color: light.$ge-fixed-selector-unselected-default;
+    }
+  }
+
+  &__fake-element {
+    position: relative;
+    display: block;
+    margin-right: 8px;
+    border: 2px solid light.$ge-selector-primary-unselected-default;
+    border-radius: 100%;
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+
+  &__description {
+    margin-top: spacing.$xxs;
+    margin-left: 31px;
+    color: light.$on-surface-primary-alternate;
+
+    &--light {
+      color: light.$on-fixed-surface-primary-alternate;
+    }
+  }
+
+  input:disabled ~ .radio__label {
+    color: light.$on-surface-primary-disabled;
+
+    .radio__fake-element {
+      border-color: light.$ge-selector-primary-unselected-disabled;
+    }
+  }
+
+  input:disabled ~ .radio__description {
+    color: light.$on-surface-primary-disabled;
+  }
+
+  input:checked ~ &__label &__fake-element {
+    border-color: light.$ge-selector-primary-selected-default;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      background-color: light.$ge-selector-primary-selected-default;
+      height: 14px;
+      width: 14px;
+      border-radius: 100%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &__label {
+    display: inline-flex;
+  }
+
+  &--light {
+    .radio__fake-element {
+      border-color: light.$ge-fixed-selector-unselected-default;
+    }
+
+    .radio__label {
+      color: light.$on-fixed-surface-primary-default;
+    }
+
+    .radio__description {
+      color: light.$on-fixed-surface-primary-alternate;
+    }
+
+    & input:disabled ~ .radio__label {
+      color: light.$on-fixed-surface-primary-disabled;
+
+      .radio__fake-element {
+        border-color: light.$ge-fixed-selector-unselected-disabled;
+      }
+    }
+
+    & input:disabled ~ .radio__description {
+      color: light.$on-fixed-surface-primary-disabled;
+    }
+  }
+
+  // NOTE: When multiple radios have the same name and all are required,
+  // ticking one of them will result in the other ones still being
+  // visually marked with an input error. This fixes that.
+  input:valid ~ &__error {
+    display: none;
+  }
+
+  &__error {
+    color: light.$on-surface-error;
+    margin-top: spacing.$xxs;
+  }
+}

package/react/radio/radio.tsx

@@ -0,0 +1,87 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import useInputValidation from '../use-input-validation';
+import Text from '../text';
+
+import { colors, Radio as Props } from './radio.types';
+
+const RefRadio = React.forwardRef<
+  HTMLInputElement,
+  React.PropsWithChildren<Props>
+>(
+  (
+    {
+      children,
+      color,
+      description,
+      isUnderline,
+      label,
+      name,
+      showCustomError = true,
+      value,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const [onChange, onInvalid, error] = useInputValidation();
+
+    return (
+      <label
+        className={cn(
+          'radio',
+          { 'radio--error': error, 'radio--underline': isUnderline },
+          color,
+        )}
+      >
+        <input
+          name={name}
+          value={value}
+          ref={ref}
+          type="radio"
+          onChange={e => {
+            // NOTE: To not break compatibility
+            if (restProps.onChange) restProps.onChange(e);
+            onChange(e);
+          }}
+          onInvalid={e => {
+            // NOTE: To not break compatibility
+            if (restProps.onInvalid) restProps.onInvalid(e);
+            onInvalid(e);
+          }}
+          {...restProps}
+        />
+        <div className="radio__label">
+          <span className="radio__fake-element"></span>
+          <span>
+            {label}
+            {children}
+          </span>
+        </div>
+
+        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
+        {error && showCustomError && (
+          <div aria-hidden="true" className="radio__error">
+            {error}
+          </div>
+        )}
+
+        {description && (
+          <Text className="radio__description" size={Text.sizes.small}>
+            {description}
+          </Text>
+        )}
+      </label>
+    );
+  },
+);
+
+// NOTE: If this isn't set, stack traces say "forwardRef" instead of "Radio"
+RefRadio.displayName = 'Radio';
+
+// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared
+const Radio: typeof RefRadio & {
+  colors: typeof colors;
+} = Object.assign(RefRadio, { colors });
+
+export default Radio;

package/react/radio/radio.types.ts

@@ -0,0 +1,15 @@
+import { InputHtmlProps, ObjectValues } from '../types';
+
+export const colors = {
+  light: 'radio--light',
+} as const;
+
+export type Radio = {
+  color?: ObjectValues<typeof colors>;
+  description?: string;
+  isUnderline?: boolean;
+  label?: string;
+  name: string;
+  showCustomError?: boolean;
+  value: string;
+} & InputHtmlProps;

package/react/scale-bar/index.ts

@@ -0,0 +1,2 @@
+import ScaleBar from './scale-bar';
+export default ScaleBar;

package/react/scale-bar/scale-bar.scss

@@ -0,0 +1,22 @@
+@use '../../tokens/light';
+
+.scale-bar {
+  align-items: stretch;
+  border-radius: 4px;
+  display: flex;
+  gap: 2px;
+  overflow: hidden;
+  height: 8px;
+
+  &__item {
+    flex: 1 1 100%;
+
+    &--empty {
+      background: light.$ge-progress-bar-background;
+    }
+
+    &--filled {
+      background: light.$ge-progress-bar-indicator-default;
+    }
+  }
+}

package/react/scale-bar/scale-bar.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import VisuallyHidden from '../visually-hidden/visually-hidden';
+
+import { ScaleBar as Props } from './scale-bar.types';
+
+const ScaleBar: React.FunctionComponent<Props> = ({ max = 4, value }) => (
+  <>
+    <div className="scale-bar">
+      {Array(max)
+        .fill(0)
+        .map((_, i) => (
+          <div
+            className={`scale-bar__item scale-bar__item--${
+              i < value ? 'filled' : 'empty'
+            }`}
+            key={i}
+          />
+        ))}
+    </div>
+    <VisuallyHidden>
+      <meter max={max} min={0} value={value}>
+        {value}/{max}
+      </meter>
+    </VisuallyHidden>
+  </>
+);
+
+export default ScaleBar;

package/react/scale-bar/scale-bar.types.ts

@@ -0,0 +1,4 @@
+export type ScaleBar = {
+  max?: number;
+  value: number;
+};

package/react/search/index.ts

@@ -0,0 +1,2 @@
+import Search from './search';
+export default Search;

package/react/search/search.scss

@@ -0,0 +1,207 @@
+@use '../../tokens/corner-radius';
+@use '../../tokens/font-names';
+@use '../../tokens/font-sizes';
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+@use '../../tokens/elevation';
+
+.search {
+  $breakpoint: 820px;
+  $breakpointSmall: 500px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+
+  &--expand-direction-left {
+    justify-content: flex-start;
+  }
+
+  &__inner,
+  &__loading-inner {
+    display: flex;
+    flex-direction: column;
+    gap: spacing.$xs;
+    width: 100%;
+    transition: max-width 0.3s ease-in;
+
+    &--expandable {
+      @media (min-width: ($breakpointSmall)) {
+        max-width: 300px;
+      }
+    }
+
+    &--expand {
+      max-width: 100%;
+    }
+  }
+
+  &__loading-input {
+    background-color: light.$ge-skeleton-default;
+    border-radius: spacing.$m;
+
+    &--fixed {
+      background-color: light.$on-fixed-background-primary-disabled;
+    }
+
+    &--small {
+      height: 46px;
+    }
+    &--large {
+      height: 65px;
+    }
+  }
+
+  &__loading-extra {
+    border-radius: corner-radius.$s;
+    color: light.$ge-skeleton-default;
+    background-color: light.$ge-skeleton-default;
+    width: fit-content;
+
+    &--fixed {
+      background-color: light.$on-fixed-background-primary-disabled;
+    }
+  }
+
+  &__header {
+    &--variant-fixed {
+      color: light.$on-fixed-surface-secondary-default;
+    }
+  }
+
+  &__input-wrapper {
+    display: flex;
+    justify-content: space-evenly;
+    border: 1px solid light.$ge-border-default;
+
+    &--variant-default {
+      background-color: light.$surface-primary-default;
+    }
+
+    &--variant-fixed {
+      color: light.$on-fixed-surface-secondary-default;
+      background-color: light.$fixed-surface-secondary-default;
+    }
+
+    &--theme-floating {
+      @include elevation.level(2);
+
+      &:focus-within {
+        @include elevation.level(4);
+      }
+    }
+
+    &--theme-inline {
+      &:focus-within {
+        border-color: light.$ge-border-focused;
+      }
+    }
+
+    &--size-large {
+      height: 65px;
+      padding: 0 spacing.$m;
+      gap: spacing.$m;
+      border-radius: corner-radius.$m;
+
+      @media (max-width: ($breakpoint)) {
+        height: 50px;
+        gap: spacing.$xxs;
+      }
+    }
+
+    &--size-small {
+      height: 46px;
+      padding: 0 spacing.$s;
+      gap: spacing.$s;
+      border-radius: corner-radius.$s;
+
+      @media (max-width: ($breakpoint)) {
+        height: 40px;
+        gap: spacing.$xxs;
+      }
+    }
+
+    > * + * {
+      flex-shrink: 0;
+    }
+  }
+
+  &__label {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    gap: spacing.$s;
+    width: 100%;
+  }
+
+  &__input {
+    border: none;
+    background: none;
+    color: inherit;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+
+    &--size-small {
+      @include font-sizes.normal(small)
+    }
+
+    &--size-large {
+      @include font-sizes.normal(large)
+    }
+
+    &--variant-fixed {
+      &::placeholder {
+        color: light.$on-fixed-surface-secondary-alternate;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__icon {
+    display: flex;
+    background: transparent;
+    color: light.$on-surface-primary-alternate;
+
+    &--variant-fixed {
+      color: light.$on-fixed-surface-secondary-alternate;
+    }
+  }
+
+  &__clear-button {
+    align-self: center;
+  }
+
+  &__close-button,
+  &__search-button {
+    align-self: center;
+
+    @media (max-width: ($breakpoint)) {
+      display: none !important;
+    }
+  }
+
+  &__error {
+    margin-top: spacing.$xxs;
+  }
+
+  &__help-text {
+    display: flex;
+    gap: spacing.$xs;
+    align-items: center;
+    color: light.$on-background-primary-disabled;
+
+    &--variant-fixed {
+      color: light.$on-fixed-background-primary-disabled;
+    }
+  }
+}