@sats-group/ui-lib 74.2.0

package/react/checkbox/checkbox.types.ts

@@ -0,0 +1,19 @@
+import { ObjectValues, InputHtmlProps } from '../types';
+
+export const themes = {
+  light: 'light',
+  blue: 'blue',
+} as const;
+
+export type Checkbox = Omit<InputHtmlProps, 'value'> & {
+  intermediate?: boolean;
+  description?: string;
+  extra?: React.ReactNode;
+  isLabelVisible?: boolean;
+  label?: string;
+  name: string;
+  value: string;
+  showCustomError?: boolean;
+  theme?: ObjectValues<typeof themes>;
+  isUnderlined?: boolean;
+};

package/react/checkbox/index.ts

@@ -0,0 +1,2 @@
+import Checkbox from './checkbox';
+export default Checkbox;

package/react/chip/chip.scss

@@ -0,0 +1,46 @@
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.chip {
+  box-sizing: border-box;
+  cursor: pointer;
+  outline: 0;
+  padding: 0;
+  text-decoration: none;
+  display: inline-block;
+  border-radius: 40px; // NOTE: Custom border radius by design
+  background-color: transparent;
+  border: 1px solid light.$ge-chips-unselected-default;
+
+  @media (hover: hover) {
+    &:not([disabled]):hover {
+      background-color: light.$ge-chips-unselected-hover;
+      color: light.$on-ge-on-chips-unselected-default;
+    }
+  }
+
+  &--selected {
+    background-color: light.$ge-chips-selected-default;
+    color: light.$on-ge-on-chips-selected-default;
+
+    @media (hover: hover) {
+      &:not([disabled]):hover {
+        background-color: light.$ge-chips-selected-hover;
+        color: light.$on-ge-on-chips-selected-default;
+      }
+    }
+  }
+
+  &__wrapper {
+    display: flex;
+    gap: spacing.$xs;
+    align-items: center;
+    padding: spacing.$xs spacing.$m;
+  }
+
+  &[disabled] {
+    background-color: light.$ge-chips-selected-disabled;
+    color: light.$on-ge-on-chips-selected-disabled;
+    cursor: not-allowed;
+  }
+}

package/react/chip/chip.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import cn from 'classnames';
+
+import Close from '../icons/16/close';
+import Text from '../text';
+
+import { Chip as Props } from './chip.types';
+
+const Chip: React.FC<Props> = ({
+  elementName = 'button',
+  className,
+  icon = true,
+  isSelected = false,
+  text,
+  ...rest
+}) =>
+  React.createElement(
+    elementName,
+    {
+      className: cn('chip', className, { 'chip--selected': isSelected }),
+      ...rest,
+    },
+    <React.Fragment>
+      <div className="chip__wrapper">
+        {icon ? <Close /> : null}
+        <Text
+          className="chip__text"
+          size={Text.sizes.small}
+          theme={Text.themes.emphasis}
+        >
+          {text}
+        </Text>
+      </div>
+    </React.Fragment>,
+  );
+
+export default Chip;

package/react/chip/chip.types.ts

@@ -0,0 +1,18 @@
+import { ButtonHtmlProps, LinkHtmlProps } from '../types';
+
+type BasicChipProps = {
+  elementName: string;
+  className?: string;
+  icon?: boolean;
+  isSelected?: boolean;
+  text: string;
+};
+
+export type ChipButton = BasicChipProps & ButtonHtmlProps;
+
+export type ChipLink = BasicChipProps & LinkHtmlProps;
+
+export type Chip =
+  | ({ elementName: 'button' } & ChipButton)
+  | ({ elementName: 'a' } & ChipLink)
+  | ({ elementName: string } & (ChipLink | ChipButton));

package/react/chip/index.ts

@@ -0,0 +1,2 @@
+import Chip from './chip';
+export default Chip;

package/react/chip/remove.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+const SvgRemove = () => (
+  <svg width={18} height={19} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9 18.998a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm3.429-12.429a.808.808 0 0 1 0 1.143l-2.286 2.286 2.286 2.286a.808.808 0 0 1-1.143 1.143L9 11.14l-2.286 2.287a.808.808 0 0 1-1.143-1.143l2.286-2.286-2.286-2.286a.808.808 0 0 1 1.143-1.143L9 8.855l2.286-2.286a.808.808 0 0 1 1.143 0Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgRemove;

package/react/chip-selected/chip-selected.scss

@@ -0,0 +1,47 @@
+@use '../../tokens/spacing';
+@use '../../tokens/light';
+
+.chip-selected {
+  &__selected-options-wrapper {
+    > * + * {
+      margin-top: spacing.$m;
+    }
+  }
+
+  &__collapse {
+    margin-top: spacing.$s;
+    min-height: 41px !important; // NOTE: This is a hack to display the first line of selected filters above the collapse
+    visibility: visible !important;
+  }
+
+  &__selected-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing.$s;
+  }
+
+  &__clear-all-button {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing.$xs;
+  }
+
+  &__expand {
+    display: flex;
+    align-items: center;
+    border: none;
+    color: inherit;
+    background-color: transparent;
+    margin-top: spacing.$m;
+    text-decoration: underline;
+    color: light.$on-buttons-on-link-default;
+
+    :hover {
+      color: light.$on-buttons-on-link-hover;
+    }
+  }
+
+  &__expand-text {
+    margin-right: spacing.$xs;
+  }
+}

package/react/chip-selected/chip-selected.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import Collapse from 'react-tiny-collapse';
+
+import ChevronDown from '../icons/24/arrow-down';
+import ChevronUp from '../icons/24/arrow-up';
+import Chip from '../chip/chip';
+import Text from '../text';
+
+import useEvent from '../hooks/use-event';
+
+import { ChipSelected as Props } from './chip-selected.types';
+import Link from '../link';
+
+const ChipSelected: React.FC<Props> = ({
+  resetSelected,
+  description,
+  hideSelected,
+  maxChipsToShow = 41,
+  showSelected,
+  chips,
+}) => {
+  const [expandedSelectedValues, setExpandedSelectedValues] =
+    React.useState(false);
+
+  const [heightOfCollapse, setHeightOfCollapse] = React.useState<
+    number | undefined
+  >(0);
+  const divRef = React.useRef<HTMLDivElement>(null);
+
+  const updateSize = () => {
+    if (divRef && divRef.current) {
+      setHeightOfCollapse(divRef.current.clientHeight);
+    }
+  };
+
+  useEvent('resize', updateSize);
+
+  React.useEffect(() => {
+    if (divRef && divRef.current) {
+      setHeightOfCollapse(divRef.current.clientHeight);
+    }
+  }, [divRef]);
+
+  const toggleShowMore = () => {
+    setExpandedSelectedValues(prevState => !prevState);
+  };
+
+  return chips ? (
+    <div className="chip-selected__selected-options-wrapper">
+      <div className="chip-selected__clear-all-button">
+        <Text>{description}</Text>
+        <Link {...resetSelected} />
+      </div>
+      <div>
+        <Collapse
+          className="chip-selected__collapse"
+          isOpen={expandedSelectedValues}
+        >
+          <div className="chip-selected__selected-options" ref={divRef}>
+            {chips.map(chip => (
+              <Chip {...chip} key={chip.text} />
+            ))}
+          </div>
+        </Collapse>
+
+        {heightOfCollapse && heightOfCollapse > maxChipsToShow ? (
+          <button
+            type="button"
+            className="chip-selected__expand"
+            onClick={toggleShowMore}
+          >
+            {expandedSelectedValues ? (
+              <>
+                <Text
+                  elementName="span"
+                  size={Text.sizes.small}
+                  className="chip-selected__expand-text"
+                >
+                  {hideSelected}
+                </Text>
+                <ChevronUp />
+              </>
+            ) : (
+              <>
+                <Text
+                  elementName="span"
+                  size={Text.sizes.small}
+                  className="chip-selected__expand-text"
+                >
+                  {showSelected}
+                </Text>
+                <ChevronDown />
+              </>
+            )}
+          </button>
+        ) : null}
+      </div>
+    </div>
+  ) : null;
+};
+
+export default ChipSelected;

package/react/chip-selected/chip-selected.types.ts

@@ -0,0 +1,11 @@
+import type { Chip } from '../chip/chip.types';
+import { Link } from '../link/link.types';
+
+export type ChipSelected = {
+  hideSelected: string;
+  maxChipsToShow?: number;
+  resetSelected: Link;
+  description: string;
+  showSelected: string;
+  chips?: Chip[];
+};

package/react/chip-selected/index.ts

@@ -0,0 +1,2 @@
+import ChipSelected from './chip-selected';
+export default ChipSelected;

package/react/confirmation/confirmation.scss

@@ -0,0 +1,60 @@
+@use 'sass:color';
+@use '../../tokens/corner-radius';
+@use '../../tokens/elevation';
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.confirmation {
+  $padding: spacing.$l;
+  background: color.adjust(light.$background-secondary-default, $alpha: -0.7);
+  box-sizing: border-box;
+  display: grid;
+  height: 100%;
+  align-items: center;
+  justify-items: center;
+  left: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: $padding;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 900;
+
+  &__content {
+    max-height: 100%;
+    max-width: 375px + (2 * $padding);
+    min-width: spacing.$minimum-viewport-width - (2 * $padding);
+  }
+
+  &__title {
+    padding: 0;
+    margin: 0;
+    margin-bottom: $padding;
+  }
+
+  &__text,
+  &__children {
+    margin-bottom: $padding;
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: spacing.$m;
+  }
+
+  &__button {
+    flex-grow: 1;
+  }
+
+  &__wrapper {
+    @include elevation.level(24);
+    background: light.$surface-primary-default;
+    border-radius: corner-radius.$s;
+    color: light.$on-surface-primary-default;
+    overflow: auto;
+    padding: spacing.$l;
+  }
+}

package/react/confirmation/confirmation.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import Button from '../button';
+import LinkButton from '../link-button';
+import TabTrapper from '../modal/tab-trapper';
+import Text from '../text';
+import useEscape from '../hooks/use-escape';
+import { useIsMounted } from '../hooks/use-is-mounted';
+
+import { Confirmation as Props } from './confirmation.types';
+
+const Confirmation: React.FC<React.PropsWithChildren<Props>> = ({
+  children,
+  close,
+  confirmationButton,
+  confirmationLink,
+  onClose = () => {},
+  onConfirm,
+  text,
+  title,
+  ariaLabel,
+}) => {
+  useEscape(onClose);
+
+  const isMounted = useIsMounted();
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return ReactDOM.createPortal(
+    <div className="confirmation" role="dialog" aria-label={ariaLabel}>
+      <div className="confirmation__content">
+        <TabTrapper isActive={true}>
+          <div className="confirmation__wrapper">
+            {title ? (
+              <Text
+                className="confirmation__title"
+                elementName="h2"
+                theme={Text.themes.emphasis}
+                size={Text.sizes.headline3}
+              >
+                {title}
+              </Text>
+            ) : undefined}
+            {text ? (
+              <Text className="confirmation__text">{text}</Text>
+            ) : (
+              <div className="confirmation__children">{children}</div>
+            )}
+            <div className="confirmation__buttons">
+              {confirmationButton ? (
+                <Button
+                  className="confirmation__button"
+                  variant={Button.variants.primary}
+                  {...confirmationButton}
+                  onClick={onConfirm}
+                />
+              ) : undefined}
+              {confirmationLink ? (
+                <LinkButton
+                  className="confirmation__button"
+                  variant={LinkButton.variants.primary}
+                  {...confirmationLink}
+                />
+              ) : undefined}
+              {close ? (
+                <Button
+                  className="confirmation__button"
+                  variant={Button.variants.secondary}
+                  {...close}
+                  onClick={onClose}
+                />
+              ) : undefined}
+            </div>
+          </div>
+        </TabTrapper>
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+export default Confirmation;

package/react/confirmation/confirmation.types.ts

@@ -0,0 +1,24 @@
+import { Button } from '../button/button.types';
+import { LinkButton } from '../link-button/link-button.types';
+
+type ConfirmationBase = {
+  close?: Button;
+  onClose?: () => void;
+  title?: string;
+  text?: string;
+  ariaLabel: string;
+};
+
+type ConfirmationRedirect = ConfirmationBase & {
+  confirmationLink: LinkButton;
+  confirmationButton?: never;
+  onConfirm?: never;
+};
+
+type ConfirmationAction = ConfirmationBase & {
+  confirmationLink?: never;
+  confirmationButton: Button;
+  onConfirm?: () => void;
+};
+
+export type Confirmation = ConfirmationRedirect | ConfirmationAction;

package/react/confirmation/index.ts

@@ -0,0 +1,2 @@
+import Confirmation from './confirmation';
+export default Confirmation;

package/react/context-menu/context-menu.scss

@@ -0,0 +1,183 @@
+@use '../../tokens/spacing';
+@use '../../tokens/corner-radius';
+@use '../../tokens/elevation';
+@use '../../tokens/light';
+
+.context-menu {
+  $breakpoint: 600px;
+  @include elevation.level(6);
+
+  background: light.$surface-primary-default;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  border-radius: corner-radius.$s corner-radius.$s 0 0;
+  min-width: 300px;
+  width: 100%;
+  z-index: 100;
+  padding: spacing.$s spacing.$m;
+  animation: slide 0.3s ease-in;
+
+  @media (min-width: $breakpoint) {
+    position: absolute;
+    left: initial;
+    transform: none;
+    border-radius: corner-radius.$s;
+    animation: none;
+    bottom: auto;
+    width: calc(100% - #{spacing.$m * 2});
+
+    &--top {
+      bottom: calc(100% + #{spacing.$xxs});
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &--top-right {
+      bottom: calc(100% + #{spacing.$xxs});
+      right: 0;
+    }
+
+    &--right {
+      left: calc(100% + #{spacing.$xxs});
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &--bottom-right {
+      right: 0;
+      top: calc(100% + #{spacing.$xxs});
+    }
+
+    &--bottom {
+      left: 50%;
+      top: calc(100% + #{spacing.$xxs});
+      transform: translateX(-50%);
+    }
+
+    &--bottom-left {
+      left: 0;
+      top: calc(100% + #{spacing.$xxs});
+    }
+
+    &--left {
+      right: calc(100% + #{spacing.$xxs});
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &--top-left {
+      left: 0;
+      bottom: calc(100% + #{spacing.$xxs});
+    }
+  }
+
+  &__background-overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: light.$fixed-background-secondary-default;
+    opacity: 0.2;
+    z-index: 99;
+
+    @media (min-width: $breakpoint) {
+      display: none;
+    }
+  }
+
+  &__texts-wrapper {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: spacing.$xs;
+
+    &--center {
+      align-items: center;
+    }
+  }
+
+  &__texts {
+    color: light.$on-surface-primary-default;
+  }
+
+  &__texts-description {
+    color: light.$on-surface-primary-alternate;
+  }
+
+  &__list-items {
+    border-top: 1px solid light.$ge-divider-default;
+  }
+
+  &__list-item-link {
+    text-decoration: none;
+  }
+
+  &__list-item-form {
+    display: flex;
+  }
+
+  &__list-item-button, &__list-item-form-button  {
+    outline: none;
+    border: none;
+    background: transparent;
+    padding: 0;
+    width: 100%;
+  }
+
+  &__list-icon {
+    margin-right: spacing.$s;
+    display: flex;
+    align-items: center;
+    color: light.$on-surface-primary-disabled;
+
+    &--theme-destructive {
+      color: light.$on-buttons-on-destructive-outlined-default;
+
+      &:hover {
+        color: light.$on-buttons-on-destructive-outlined-hover;
+      }
+    }
+  }
+
+  &__list-item-link,
+  &__list-item-button,
+  &__list-item-form {
+    padding: spacing.$s spacing.$xs;
+  }
+
+  &__list-item-link,
+  &__list-item-button,
+  &__list-item-form-button,
+  &__list-item-form {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: light.$on-surface-primary-default;
+    border-radius: corner-radius.$s;
+    text-align: left;
+
+    &:hover {
+      background-color: light.$surface-primary-hover;
+    }
+
+    &--theme-destructive {
+      color: light.$on-buttons-on-destructive-outlined-default;
+
+      &:hover {
+        background-color: light.$buttons-destructive-outlined-hover;
+        color: light.$on-buttons-on-destructive-outlined-hover;
+      }
+    }
+  }
+}
+
+@keyframes slide {
+  from {
+    bottom: -100%;
+  }
+
+  to {
+    bottom: 0;
+  }
+}