@sats-group/ui-lib 74.2.0

package/react/context-menu/context-menu.tsx

@@ -0,0 +1,200 @@
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+
+import Close from '../icons/18/close';
+import HiddenInput from '../hidden-input';
+import focusPreviousElement from '../hooks/focus-previous-element';
+import TabTrapper from '../modal/tab-trapper';
+import useClickOutside from '../hooks/use-click-outside';
+import useEscape from '../hooks/use-escape';
+import Button from '../button';
+import Text from '../text';
+import debounce from '../ts/debounce';
+
+import {
+  ContextMenu as Props,
+  Types,
+  itemThemes,
+  positions,
+} from './context-menu.types';
+
+const ContextMenu: React.FunctionComponent<Props> & {
+  position: typeof positions;
+  itemTheme: typeof itemThemes;
+} = ({
+  list,
+  isOpen,
+  onClose = () => {},
+  position = positions.right,
+  title,
+  close,
+  descriptions,
+  smallDescription,
+}) => {
+  const modal = useRef<HTMLDivElement>(null);
+  const [windowSize, setWindowSize] = useState<number>();
+  useClickOutside(modal, onClose);
+  useEscape(onClose);
+
+  focusPreviousElement(modal, isOpen);
+
+  useEffect(() => {
+    if (!windowSize) setWindowSize(window.innerWidth);
+    const handleWindowResize = () => {
+      setWindowSize(window.innerWidth);
+    };
+    window.addEventListener('resize', debounce(handleWindowResize, 2000));
+
+    return () => window.addEventListener('resize', handleWindowResize);
+  });
+
+  const component = (
+    <div
+      className={classNames('context-menu', {
+        [`context-menu--${position}`]: position,
+      })}
+      ref={modal}
+      tabIndex={-1}
+    >
+      <div
+        className={classNames('context-menu__texts-wrapper', {
+          'context-menu__texts-wrapper--center': !descriptions?.length,
+        })}
+      >
+        <div className="context-menu__texts">
+          <Text theme={Text.themes.emphasis} size={Text.sizes.small}>
+            {title}
+          </Text>
+
+          {descriptions
+            ? descriptions.map(description => (
+                <Text
+                  size={Text.sizes.small}
+                  className="context-menu__texts-description"
+                  key={description}
+                >
+                  {description}
+                </Text>
+              ))
+            : null}
+          {smallDescription ? (
+            <Text
+              size={Text.sizes.interface}
+              className="context-menu__texts-description"
+              key={smallDescription}
+            >
+              {smallDescription}
+            </Text>
+          ) : null}
+        </div>
+        <div>
+          <Button
+            {...close}
+            variant={Button.variants.tertiary}
+            size={Button.sizes.small}
+            leadingIcon={<Close />}
+            onClick={onClose}
+          />
+        </div>
+      </div>
+      <div className="context-menu__list-items">
+        {list.map(({ icon, item }, index) => (
+          <div key={item.props.text + index}>
+            {item.type === Types.Link ? (
+              <a
+                href={item.props.href}
+                className={classNames('context-menu__list-item-link', {
+                  [`context-menu__list-item-link--theme-${item.props.theme}`]:
+                    item.props.theme,
+                })}
+                data-testid={item.props.testId}
+              >
+                {icon ? (
+                  <div
+                    className={classNames('context-menu__list-icon', {
+                      [`context-menu__list-icon--theme-${item.props.theme}`]:
+                        item.props.theme,
+                    })}
+                  >
+                    {icon}
+                  </div>
+                ) : null}
+                <Text>{item.props.text}</Text>
+              </a>
+            ) : item.type === Types.Form ? (
+              <form
+                onSubmit={item.props.handleSubmit}
+                action={item.props.action}
+                method="POST"
+                className={classNames('context-menu__list-item-form', {
+                  [`context-menu__list-item-form--theme-${item.props.theme}`]:
+                    item.props.theme,
+                })}
+              >
+                <button
+                  type="submit"
+                  className={classNames('context-menu__list-item-form-button', {
+                    [`context-menu__list-item-form-button--theme-${item.props.theme}`]:
+                      item.props.theme,
+                  })}
+                  data-testid={item.props.testId}
+                >
+                  {icon ? (
+                    <div
+                      className={classNames('context-menu__list-icon', {
+                        [`context-menu__list-icon--theme-${item.props.theme}`]:
+                          item.props.theme,
+                      })}
+                    >
+                      {icon}
+                    </div>
+                  ) : null}
+                  <Text>{item.props.text}</Text>
+                </button>
+                {item.props.hiddenInputs
+                  ? item.props.hiddenInputs.map((input, index) => (
+                      <HiddenInput key={input.name + index} {...input} />
+                    ))
+                  : null}
+              </form>
+            ) : item.type === Types.Button ? (
+              <button
+                className={classNames('context-menu__list-item-button', {
+                  [`context-menu__list-item-button--theme-${item.props.theme}`]:
+                    item.props.theme,
+                })}
+                {...item.props}
+              >
+                {icon ? (
+                  <div
+                    className={classNames('context-menu__list-icon', {
+                      [`context-menu__list-icon--theme-${item.props.theme}`]:
+                        item.props.theme,
+                    })}
+                  >
+                    {icon}
+                  </div>
+                ) : null}
+                <Text>{item.props.text}</Text>
+              </button>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+  return isOpen ? (
+    <>
+      <div className="context-menu__background-overlay"></div>
+      {windowSize && windowSize < 600 ? ( // 600 is the breakpoint for the component.
+        <TabTrapper isActive={isOpen}>{component}</TabTrapper>
+      ) : (
+        <div>{component}</div>
+      )}
+    </>
+  ) : null;
+};
+
+ContextMenu.position = positions;
+ContextMenu.itemTheme = itemThemes;
+export default ContextMenu;

package/react/context-menu/context-menu.types.ts

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react';
+
+import type { Button } from '../button/button.types';
+import type { HiddenInput } from '../hidden-input/hidden-input.types';
+import type { ButtonHtmlProps, ObjectValues } from '../types';
+
+export const positions = {
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  topLeft: 'top-left',
+  topRight: 'top-right',
+  bottomRight: 'bottom-right',
+  bottomLeft: 'bottom-left',
+} as const;
+
+export enum Types {
+  Button = 'Button',
+  Form = 'Form',
+  Link = 'Link',
+}
+
+export const itemThemes = {
+  destructive: 'destructive',
+} as const;
+
+type CommonProps = {
+  theme?: ObjectValues<typeof itemThemes>;
+};
+
+type LinkMenuItem = {
+  type: Types.Link;
+  props: {
+    href: string;
+    text: string;
+    testId?: string;
+  } & CommonProps;
+};
+
+type FormMenuItem = {
+  type: Types.Form;
+  props: {
+    text: string;
+    action: string;
+    handleSubmit?: () => void;
+    hiddenInputs?: HiddenInput[];
+    testId?: string;
+  } & CommonProps;
+};
+
+type ButtonMenuitem = {
+  type: Types.Button;
+  props: { text: string } & ButtonHtmlProps & CommonProps;
+};
+
+type MenuItem = {
+  icon?: ReactNode;
+  item: LinkMenuItem | FormMenuItem | ButtonMenuitem;
+};
+
+export type ContextMenu = {
+  isOpen?: boolean;
+  onClose?: () => void;
+  list: MenuItem[];
+  position?: ObjectValues<typeof positions>;
+  close: Button;
+  title: string;
+  descriptions?: string[];
+  smallDescription?: string;
+};

package/react/context-menu/index.ts

@@ -0,0 +1,2 @@
+import ContextMenu from './context-menu';
+export default ContextMenu;

package/react/cropped-image/cropped-image.scss

@@ -0,0 +1,48 @@
+@use 'sass:math';
+
+.cropped-image {
+  position: relative;
+
+  &--square {
+    padding-bottom: 100%;
+  }
+
+  &--2-3 {
+    padding-bottom: math.div(3, 2) * 100%;
+  }
+
+  &--3-4 {
+    padding-bottom: math.div(4, 3) * 100%;
+  }
+
+  &--4-3 {
+    padding-bottom: math.div(3, 4) * 100%;
+  }
+
+  &--3-2 {
+    padding-bottom: math.div(2, 3) * 100%;
+  }
+
+  &--16-9 {
+    padding-bottom: math.div(9, 16) * 100%;
+  }
+
+  &--9-18 {
+    padding-bottom: math.div(18, 9) * 100%;
+  }
+
+  &--9-16 {
+    padding-bottom: math.div(16, 9) * 100%;
+  }
+
+  &__element {
+    display: block;
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    object-position: center;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}

package/react/cropped-image/cropped-image.tsx

@@ -0,0 +1,36 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import {
+  aspectRatios,
+  loadings,
+  CroppedImage as Props,
+} from './cropped-image.types';
+
+const CroppedImage: React.FunctionComponent<Props> & {
+  aspectRatios: typeof aspectRatios;
+  loadings: typeof loadings;
+} = ({
+  alt,
+  aspectRatio = aspectRatios.sixteenNine,
+  className,
+  loading = loadings.lazy,
+  src,
+  srcQuery = '',
+  ...rest
+}) => (
+  <div className={cn('cropped-image', aspectRatio, className)}>
+    <img
+      className="cropped-image__element"
+      alt={alt}
+      loading={loading}
+      src={`${src}${srcQuery}`}
+      {...rest}
+    />
+  </div>
+);
+
+CroppedImage.aspectRatios = aspectRatios;
+CroppedImage.loadings = loadings;
+
+export default CroppedImage;

package/react/cropped-image/cropped-image.types.ts

@@ -0,0 +1,26 @@
+import { ImageHtmlProps, ObjectValues } from '../types';
+
+export const aspectRatios = {
+  square: 'cropped-image--square',
+  twoThree: 'cropped-image--2-3',
+  fourThree: 'cropped-image--4-3',
+  threeTwo: 'cropped-image--3-2',
+  threeFour: 'cropped-image--3-4',
+  nineSixteen: 'cropped-image--9-16',
+  nineEighteen: 'cropped-image--9-18',
+  sixteenNine: 'cropped-image--16-9',
+} as const;
+
+export const loadings = {
+  eager: 'eager',
+  lazy: 'lazy',
+} as const;
+
+export type CroppedImage = ImageHtmlProps & {
+  alt: string;
+  aspectRatio?: ObjectValues<typeof aspectRatios>;
+  className?: string;
+  loading?: ObjectValues<typeof loadings>;
+  src: string;
+  srcQuery?: string;
+};

package/react/cropped-image/index.ts

@@ -0,0 +1,2 @@
+import CroppedImage from './cropped-image';
+export default CroppedImage;

package/react/dropdown-list/dropdown-list.scss

@@ -0,0 +1,170 @@
+@use '../../tokens/corner-radius';
+@use '../../tokens/spacing';
+@use '../../tokens/light';
+
+.dropdown-list {
+  $breakpoint: 900px;
+  min-width: 280px;
+
+
+  &__wrapper {
+    border-radius: corner-radius.$s;
+    border: 1px solid light.$ge-divider-default;
+    background-color: light.$surface-primary-default;
+    margin-top: spacing.$xxs;
+    min-width: 180px;
+
+    @media (min-width: $breakpoint) {
+      position: relative;
+    }
+
+    &--theme-light {
+      &-clicked {
+        background-color: light.$surface-primary-hover;
+      }
+
+      &-disabled {
+        border-color: light.$surface-primary-default;
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: light.$surface-primary-hover;
+        }
+
+        &-disabled {
+          &:hover {
+            background-color: light.$surface-primary-default;
+            border-color: light.$surface-primary-default;
+          }
+        }
+      }
+
+      @media (hover: none) {
+        &:hover {
+          background-color: light.$surface-primary-default;
+          border-color: light.$surface-primary-default;
+        }
+      }
+    }
+
+    &--theme-dark {
+      background-color: light.$fixed-surface-secondary-default;
+      border-color: light.$fixed-surface-secondary-default;
+
+      &-clicked {
+        background-color: light.$fixed-surface-secondary-hover;
+        border-color: light.$fixed-surface-secondary-hover;
+      }
+
+      &-disabled {
+        background-color: light.$fixed-surface-secondary-default;
+        border-color: light.$fixed-surface-secondary-default;
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: light.$fixed-surface-secondary-hover;
+          border-color: light.$fixed-surface-secondary-hover;
+        }
+
+        &-disabled {
+          &:hover {
+            background-color: light.$fixed-surface-secondary-default;
+            border-color: light.$fixed-surface-secondary-default;
+          }
+        }
+      }
+
+      @media (hover: none) {
+        &:hover {
+          background-color: light.$fixed-surface-secondary-default;
+          border-color: light.$fixed-surface-secondary-default;
+        }
+      }
+    }
+  }
+
+  &__buttons {
+    position: relative;
+  }
+
+  &__button {
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    text-align: left;
+    background-color: transparent;
+    border: none;
+    width: 100%;
+    height: 100%;
+    box-shadow: none;
+    font: inherit;
+    overflow: hidden;
+    padding: spacing.$xs spacing.$s;
+
+    &--theme-light {
+      &-disabled {
+        cursor: not-allowed;
+        color: light.$on-surface-primary-disabled;
+      }
+    }
+
+    &--theme-dark {
+      color: light.$on-fixed-surface-secondary-default;
+
+      &-disabled {
+        color: light.$on-fixed-surface-secondary-disabled;
+        cursor: not-allowed;
+      }
+
+      &-clicked {
+        color: light.$on-fixed-surface-secondary-default;
+      }
+    }
+  }
+
+  &__text-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: spacing.$xxs;
+  }
+
+  &__icon {
+    margin-left: spacing.$xs;
+    display: block;
+    align-self: center;
+  }
+
+  &__information {
+    &--theme-light {
+      color: light.$on-surface-primary-alternate;
+
+      &-disabled {
+        color: light.$on-surface-primary-disabled;
+      }
+    }
+
+    &--theme-dark {
+      color: light.$on-fixed-surface-secondary-alternate;
+
+      &-disabled {
+        color: light.$on-fixed-surface-secondary-disabled;
+      }
+    }
+  }
+
+  &__label {
+    &--theme-light {
+      &-disabled {
+        color: light.$on-surface-primary-disabled;
+      }
+    }
+    &--theme-dark {
+      color: light.$on-fixed-surface-primary-default;
+      &-disabled {
+        color: light.$on-fixed-background-primary-disabled;
+      }
+    }
+  }
+}

package/react/dropdown-list/dropdown-list.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import FormContent from '../form-content';
+
+import Text from '../text';
+
+import { DropdownList as Props, themes } from './dropdown-list.types';
+import ChevronUp from '../icons/24/arrow-up';
+import ChevronDown from '../icons/24/arrow-down';
+import useToggle from '../hooks/use-toggle';
+import useClickOutside from '../hooks/use-click-outside';
+import useEscape from '../hooks/use-escape';
+import classNames from 'classnames';
+
+const DropdownList: React.FC<React.PropsWithChildren<Props>> & {
+  themes: typeof themes;
+} = ({
+  description,
+  disabled,
+  formContentOptions,
+  label,
+  selectedOptions,
+  header,
+  theme = themes.light,
+}) => {
+  const modal = React.useRef(null);
+  const [isOpen, toggle, , close] = useToggle(false);
+
+  useClickOutside(modal, close);
+  useEscape(close);
+
+  return (
+    <div className="dropdown-list">
+      <Text
+        theme={Text.themes.emphasis}
+        className={classNames(
+          'dropdown-list__label',
+          `dropdown-list__label--theme-${theme}`,
+          {
+            [`dropdown-list__label--theme-${theme}-disabled`]: disabled,
+          },
+        )}
+      >
+        {label}
+      </Text>
+      <div
+        className={classNames(
+          'dropdown-list__wrapper',
+          `dropdown-list__wrapper--theme-${theme}`,
+          {
+            [`dropdown-list__wrapper--theme-${theme}-disabled`]: disabled,
+            [`dropdown-list__wrapper--theme-${theme}-clicked`]: isOpen,
+          },
+        )}
+        ref={modal}
+      >
+        <div className="dropdown-list__buttons">
+          <button
+            type="button"
+            className={classNames(
+              'dropdown-list__button',
+              `dropdown-list__button--theme-${theme}`,
+              {
+                [`dropdown-list__button--theme-${theme}-disabled`]: disabled,
+                [`dropdown-list__button--theme-${theme}-clicked`]: isOpen,
+              },
+            )}
+            onClick={toggle}
+            disabled={disabled}
+            data-test-dropdown-button
+          >
+            <div className="dropdown-list__text-wrap">
+              <Text theme={Text.themes.normal} size={Text.sizes.basic}>
+                {header}
+              </Text>
+
+              <Text size={Text.sizes.small}>
+                {selectedOptions ? (
+                  selectedOptions
+                ) : (
+                  <Text
+                    elementName="span"
+                    size={Text.sizes.small}
+                    className={classNames(
+                      'dropdown-list__information',
+                      `dropdown-list__information--theme-${theme}`,
+                      {
+                        [`dropdown-list__information--theme-${theme}-disabled`]:
+                          disabled,
+                      },
+                    )}
+                  >
+                    {description}
+                  </Text>
+                )}
+              </Text>
+            </div>
+
+            <div className="dropdown-list__icon">
+              {isOpen ? <ChevronUp /> : <ChevronDown />}
+            </div>
+          </button>
+        </div>
+        <FormContent
+          {...formContentOptions}
+          isOpen={isOpen}
+          close={close}
+          onSubmit={toggle}
+        />
+      </div>
+    </div>
+  );
+};
+
+DropdownList.themes = themes;
+
+export default DropdownList;

package/react/dropdown-list/dropdown-list.types.ts

@@ -0,0 +1,17 @@
+import type { FormContentDropdownList } from '../form-content/form-content.types';
+import type { ObjectValues } from '../types';
+
+export const themes = {
+  dark: 'dark',
+  light: 'light',
+} as const;
+
+export type DropdownList = {
+  label?: string;
+  header: string;
+  description: string;
+  formContentOptions: FormContentDropdownList;
+  selectedOptions?: string;
+  disabled?: boolean;
+  theme?: ObjectValues<typeof themes>;
+};

package/react/dropdown-list/index.ts

@@ -0,0 +1,2 @@
+import DropdownList from './dropdown-list';
+export default DropdownList;