@sats-group/ui-lib 74.2.0

package/react/modal/modal.scss

@@ -0,0 +1,162 @@
+@use 'sass:color';
+@use '../../tokens/corner-radius';
+@use '../../tokens/elevation';
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.modal {
+  background: color.adjust(
+    light.$fixed-background-primary-default,
+    $alpha: -0.7
+  );
+  box-sizing: border-box;
+  display: grid;
+  height: 100vh;
+  height: 100dvh;
+  left: 0;
+  overflow: hidden;
+  overscroll-behavior: contain;
+  place-items: center;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  width: 100dvw;
+  z-index: 900;
+
+  @mixin break {
+    @media (min-width: 500px) {
+      @content;
+    }
+  }
+
+  $padding: spacing.$m;
+
+  @include break {
+    padding: $padding;
+  }
+
+  &__texts {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: spacing.$xs;
+  }
+
+  &__title {
+    color: light.$on-surface-primary-default;
+    max-width: 90%; // NOTE: Magic percent to keep clear of modal´s close-button.
+  }
+
+  &__explanation {
+    &--primary {
+      color: light.$on-surface-primary-alternate;
+    }
+
+    &--secondary {
+      color: light.$on-surface-secondary-alternate;
+    }
+  }
+
+  &__content {
+    position: relative;
+    height: 100vh;
+    height: 100dvh;
+    max-height: 100vh;
+    max-height: 100dvh;
+    max-width: 100vw;
+    max-width: 100dvw;
+    width: 100vw;
+    width: 100dvw;
+    overflow: auto;
+
+    &--primary {
+      background: light.$surface-primary-default;
+    }
+
+    &--secondary {
+      background: light.$surface-secondary-default;
+    }
+
+    @include break {
+      @include elevation.level(24);
+      border-radius: corner-radius.$s;
+      height: max-content;
+      max-height: calc(100vh - (spacing.$m * 2));
+      max-height: calc(100dvh - (spacing.$m * 2));
+      max-width: 640px;
+      width: 100%;
+    }
+  }
+
+  &__content-inner {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    @include break {
+      max-height: calc(100vh - (spacing.$m * 2));
+      max-height: calc(100dvh - (spacing.$m * 2));
+    }
+  }
+
+  &__actions,
+  &__close-action-mobile {
+    background: light.$surface-primary-default;
+    border-top: 1px solid light.$ge-border-default;
+    display: flex;
+    justify-content: center;
+    gap: spacing.$s;
+    padding: spacing.$s spacing.$m;
+
+    @include break {
+      border-radius: 0 0 corner-radius.$s corner-radius.$s;
+    }
+  }
+
+  &__close-action-mobile {
+    @include break {
+      display: none;
+    }
+  }
+
+  &__close-action {
+    display: none;
+    position: absolute;
+    right: spacing.$s;
+    top: spacing.$s;
+
+    @include break {
+      display: block;
+    }
+
+    &--always-shown {
+      display: block;
+    }
+  }
+
+  &__nav {
+    align-items: flex-start;
+    display: flex;
+    gap: spacing.$m;
+    justify-content: space-between;
+    padding: spacing.$l spacing.$m 0 spacing.$m;
+
+    @include break {
+      margin-bottom: 0;
+      padding: spacing.$l spacing.$l 0 spacing.$l;
+    }
+  }
+
+  &__children {
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: spacing.$l spacing.$m;
+
+    @include break {
+      margin-bottom: 0;
+      padding: spacing.$l;
+    }
+  }
+}

package/react/modal/modal.tsx

@@ -0,0 +1,130 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import Button from '../button';
+import useEscape from '../hooks/use-escape';
+import { useIsMounted } from '../hooks/use-is-mounted';
+import Close from '../icons/18/close';
+import Text from '../text';
+
+import { ActionTypes, type Modal as Props, backgrounds } from './modal.types';
+import TabTrapper from './tab-trapper';
+import LinkButton from '../link-button';
+
+const Modal: React.FC<React.PropsWithChildren<Props>> & {
+  backgrounds: typeof backgrounds;
+} = ({
+  ariaLabel,
+  background = backgrounds.primary,
+  children,
+  closeLabel,
+  explanation,
+  id,
+  onClose = () => {},
+  title,
+  actions,
+  onClick = () => {},
+}) => {
+  const modal = React.useRef<HTMLDivElement>(null);
+  const isMounted = useIsMounted();
+  useEscape(onClose);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  const handleModalClick: React.MouseEventHandler = e => {
+    if (modal.current && modal.current === e.target) {
+      onClose();
+    }
+  };
+
+  return ReactDOM.createPortal(
+    <div
+      aria-label={ariaLabel}
+      className="modal"
+      id={id}
+      onClick={handleModalClick}
+      ref={modal}
+      role="dialog"
+    >
+      <div
+        className={classNames('modal__content', {
+          [`modal__content--${background}`]: background,
+        })}
+      >
+        <TabTrapper isActive={true} className="modal__content-inner">
+          <div
+            className={classNames('modal__close-action', {
+              'modal__close-action--always-shown': actions && actions.length,
+            })}
+          >
+            <Button
+              ariaLabel={closeLabel}
+              leadingIcon={<Close />}
+              onClick={onClose}
+              size={Button.sizes.small}
+              variant={Button.variants.secondary}
+            />
+          </div>
+          {title || explanation ? (
+            <div className="modal__nav">
+              <div className="modal__texts">
+                {title ? (
+                  <Text
+                    className="modal__title"
+                    size={Text.sizes.headline2}
+                    theme={Text.themes.emphasis}
+                  >
+                    {title}
+                  </Text>
+                ) : null}
+                {explanation ? (
+                  <div
+                    className={classNames('modal__explanation', {
+                      [`modal__explanation--${background}`]: background,
+                    })}
+                  >
+                    <Text size={Text.sizes.small}>{explanation}</Text>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          ) : null}
+          <div className="modal__children">
+            <div>{children}</div>
+          </div>
+          {actions && actions.length ? (
+            <div className="modal__actions">
+              {actions.map(action =>
+                action.type === ActionTypes.LinkButton ? (
+                  <LinkButton {...action.action} />
+                ) : action.type === ActionTypes.Button ? (
+                  <Button
+                    {...action.action}
+                    onClick={e => onClick(action.buttonId, e)}
+                  />
+                ) : null,
+              )}
+            </div>
+          ) : (
+            <div className="modal__close-action-mobile">
+              <Button
+                leadingIcon={<Close />}
+                onClick={onClose}
+                text={closeLabel}
+                variant={Button.variants.secondary}
+              />
+            </div>
+          )}
+        </TabTrapper>
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+Modal.backgrounds = backgrounds;
+
+export default Modal;

package/react/modal/modal.types.ts

@@ -0,0 +1,36 @@
+import { Button } from '../button/button.types';
+import { LinkButton } from '../link-button/link-button.types';
+import { ObjectValues } from '../types';
+
+export const backgrounds = {
+  primary: 'primary',
+  secondary: 'secondary',
+} as const;
+
+export enum ActionTypes {
+  LinkButton = 'LinkButton',
+  Button = 'Button',
+}
+
+type LinkAction = {
+  type: ActionTypes.LinkButton;
+  action: LinkButton;
+};
+
+type ButtonAction = {
+  type: ActionTypes.Button;
+  action: Button;
+  buttonId: string;
+};
+
+export type Modal = {
+  ariaLabel: string;
+  background?: ObjectValues<typeof backgrounds>;
+  closeLabel: string;
+  explanation?: string;
+  id: string;
+  onClose?: () => void;
+  title?: string;
+  actions?: (LinkAction | ButtonAction)[];
+  onClick?: (id: string, arg?: unknown) => void;
+};

package/react/modal/tab-trapper.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+
+const focusRef = (ref: React.MutableRefObject<HTMLElement | null>): void => {
+  ref?.current?.focus();
+};
+
+/** Returns the value of `value` from the previous render.
+```js
+const [value, setValue] = useState();
+const previousValue = usePrevious(value);
+```
+ */
+// eslint-disable-next-line
+const usePrevious = <T extends unknown>(
+  value: T,
+  initialValue?: T,
+): React.RefObject<T>['current'] => {
+  const state = React.useRef<T | null>(
+    typeof initialValue === 'undefined' ? null : initialValue,
+  );
+
+  React.useEffect(() => {
+    state.current = value;
+  }, [value]);
+
+  return state.current;
+};
+
+const TabTrapper: React.FunctionComponent<
+  React.PropsWithChildren<{
+    isActive: boolean;
+    className?: string;
+  }>
+> = ({ children, isActive, className }) => {
+  const wasActive = usePrevious(isActive);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  const previouslyFocusedElement = React.useRef<HTMLElement | null>(null);
+
+  const focusContent = () => focusRef(contentRef);
+
+  React.useEffect(() => {
+    if (!wasActive && isActive) {
+      // NOTE: Because document.activeElement is an Element by default, we need
+      // to cast this as a HTMLElement to be able to use HTMLElement functions
+      previouslyFocusedElement.current = document.activeElement as HTMLElement;
+      focusContent();
+    }
+
+    if (wasActive && !isActive) {
+      focusRef(previouslyFocusedElement);
+    }
+  }, [isActive]);
+
+  // NOTE: This happens on unmount only
+  React.useEffect(() => () => focusRef(previouslyFocusedElement), []);
+
+  return (
+    <React.Fragment>
+      {isActive ? <div onFocus={focusContent} tabIndex={0} /> : null}
+      <div ref={contentRef} tabIndex={-1} className={className}>
+        {children}
+      </div>
+      {isActive ? <div onFocus={focusContent} tabIndex={0} /> : null}
+    </React.Fragment>
+  );
+};
+
+export default TabTrapper;

package/react/progress-bar/index.ts

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

package/react/progress-bar/progress-bar.scss

@@ -0,0 +1,71 @@
+@use '../../tokens/corner-radius';
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.progress-bar {
+  display: flex;
+  flex-direction: column;
+  gap: spacing.$xxs;
+
+  &__progress {
+    display: flex;
+    height: 4px;
+    width: 100%;
+
+    background-color: light.$ge-progress-bar-background;
+    border-radius: corner-radius.$xs;
+
+    &--dark {
+      background-color: light.$ge-fixed-progress-bar-background;
+    }
+  }
+
+  &__bar {
+    background-color: light.$ge-progress-bar-indicator-alternate;
+    border-radius: corner-radius.$xs;
+
+    &--dark {
+      background-color: light.$ge-fixed-progress-bar-indicator-alternate;
+    }
+
+    &--cta {
+      background-color: light.$ge-progress-bar-indicator-default;
+    }
+  }
+
+  &__hidden {
+    display: none;
+  }
+
+  &--top-left {
+    flex-direction: column-reverse;
+  }
+
+  &--top-center {
+    flex-direction: column-reverse;
+    text-align: center;
+  }
+
+  &--top-right {
+    flex-direction: column-reverse;
+    text-align: right;
+  }
+
+  &--bottom-center {
+    text-align: center;
+  }
+
+  &--bottom-right {
+    text-align: right;
+  }
+
+  &__text {
+    > * + * {
+      margin-left: spacing.$xxs;
+    }
+
+    &--dark {
+      color: light.$on-fixed-background-primary-default;
+    }
+  }
+}

package/react/progress-bar/progress-bar.tsx

@@ -0,0 +1,81 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import Text from '../text';
+
+import {
+  Progressbar as Props,
+  variants,
+  themes,
+  labelAlignments,
+  labelPositions,
+} from './progress-bar.types';
+
+const ProgressBar: React.FunctionComponent<Props> & {
+  variants: typeof variants;
+  themes: typeof themes;
+  labelAlignments: typeof labelAlignments;
+  labelPositions: typeof labelPositions;
+} = ({
+  value,
+  max,
+  label,
+  labelAlignment = 'right',
+  labelPosition,
+  variant,
+  theme,
+}) => (
+  <div
+    className={classNames('progress-bar', {
+      [`progress-bar--${labelPosition}`]: labelPosition,
+    })}
+  >
+    <progress className="progress-bar__hidden" value={value} max={max} />
+    <div
+      className={classNames('progress-bar__progress', {
+        [`progress-bar__progress--${theme}`]: theme,
+      })}
+    >
+      <div
+        className={classNames('progress-bar__bar', {
+          [`progress-bar__bar--${variant}`]: variant,
+          [`progress-bar__bar--${theme}`]: theme,
+        })}
+        style={{ width: `${Math.floor((value / max) * 100)}%` }}
+      />
+    </div>
+    {label ? (
+      <div
+        className={classNames('progress-bar__text', {
+          [`progress-bar__text--${theme}`]: theme,
+        })}
+      >
+        {labelAlignment === 'left' ? (
+          <Text elementName="span" size={Text.sizes.basic}>
+            {label.text}
+          </Text>
+        ) : null}
+        {label.boldText ? (
+          <Text
+            elementName="span"
+            size={Text.sizes.basic}
+            theme={Text.themes.emphasis}
+          >
+            {label.boldText}
+          </Text>
+        ) : undefined}
+        {labelAlignment === 'right' ? (
+          <Text elementName="span" size={Text.sizes.basic}>
+            {label.text}
+          </Text>
+        ) : null}
+      </div>
+    ) : undefined}
+  </div>
+);
+
+ProgressBar.variants = variants;
+ProgressBar.themes = themes;
+ProgressBar.labelAlignments = labelAlignments;
+ProgressBar.labelPositions = labelPositions;
+export default ProgressBar;

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

@@ -0,0 +1,35 @@
+import { ObjectValues } from '../types';
+
+export const variants = {
+  cta: 'cta',
+} as const;
+
+export const themes = {
+  dark: 'dark',
+} as const;
+
+export const labelAlignments = {
+  left: 'left',
+  right: 'right',
+} as const;
+
+export const labelPositions = {
+  topLeft: 'top-left',
+  topCenter: 'top-center',
+  topRight: 'top-right',
+  bottomCenter: 'bottom-center',
+  bottomRight: 'bottom-right',
+} as const;
+
+export type Progressbar = {
+  value: number;
+  max: number;
+  label?: {
+    boldText?: string;
+    text: string;
+  };
+  labelAlignment?: ObjectValues<typeof labelAlignments>;
+  labelPosition?: ObjectValues<typeof labelPositions>;
+  variant?: ObjectValues<typeof variants>;
+  theme?: ObjectValues<typeof themes>;
+};

package/react/radio/index.ts

@@ -0,0 +1,2 @@
+import Radio from './radio';
+export default Radio;