@sats-group/ui-lib 80.3.0 → 81.0.0

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

@@ -1,201 +0,0 @@
-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}
-            iconOnly
-            leadingIcon={<Close />}
-            onClick={onClose}
-            size={Button.sizes.small}
-            variant={Button.variants.tertiary}
-          />
-        </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

@@ -1,71 +0,0 @@
-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/cropped-image/cropped-image.tsx

@@ -1,36 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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/div-button/div-button.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-import VisuallyButton from '../visually-button/visually-button';
-
-import { DivButton as Props } from './div-button.types';
-
-const DivButton: React.FunctionComponent<Props> & {
-  sizes: typeof VisuallyButton.sizes;
-  variants: typeof VisuallyButton.variants;
-} = props => <VisuallyButton elementName="div" {...props} />;
-
-DivButton.sizes = VisuallyButton.sizes;
-DivButton.variants = VisuallyButton.variants;
-
-export default DivButton;

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

@@ -1,116 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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/expander/expander.tsx

@@ -1,170 +0,0 @@
-import cn from 'classnames';
-import React, { useState } from 'react';
-
-import ArrowDown from '../icons/24/arrow-down';
-import LinkButton from '../link-button';
-import Text from '../text';
-
-import { type Expander as Props } from './expander.types';
-import Badge from '../badge';
-import { Types } from '../badge/badge.types';
-import Link from '../link';
-import Collapse from '../collapse';
-
-const ExpanderListItem: React.FC<
-  React.PropsWithChildren<Props<unknown>['items'][number]['listItemProps']>
-> = ({
-  actions,
-  contentType = 'article',
-  defaultOpen = false,
-  faq,
-  icon,
-  id,
-  links,
-  children,
-  metadata,
-  title,
-  value,
-}) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-
-  const toggle = () => setIsOpen(!isOpen);
-
-  return (
-    <div
-      className="expander__list-item"
-      key={id}
-      itemScope={faq ? faq : undefined}
-      itemProp={faq ? 'mainEntity' : undefined}
-      itemType={faq ? 'https://schema.org/Question' : undefined}
-    >
-      <button
-        aria-controls={id}
-        aria-expanded={isOpen}
-        className={cn('expander__trigger', {
-          'expander__trigger--triggered': isOpen,
-          'expander__trigger--w-value': value,
-        })}
-        onClick={toggle}
-      >
-        {icon ? <div className="expander__icon">{icon}</div> : null}
-        <div className="expander__trigger-title">
-          <Text elementName="h3" itemProp={faq ? 'name' : undefined} tight>
-            {title}
-          </Text>
-        </div>
-        {value ? (
-          <Badge
-            content={{ content: value, type: Types.Numerical }}
-            variant={Badge.variants.secondary}
-          />
-        ) : null}
-        <div
-          className={cn('expander__icon', {
-            'expander__icon--flipped': isOpen,
-          })}
-        >
-          <ArrowDown />
-        </div>
-      </button>
-      <div
-        className={cn('expander__drawer', {
-          'expander__drawer--open': isOpen,
-        })}
-        id={id}
-      >
-        <Collapse isOpen={isOpen}>
-          <div
-            className={cn('expander__content', {
-              [`expander__content--${contentType}`]: contentType,
-            })}
-            itemScope={faq ? faq : undefined}
-            itemProp={faq ? 'acceptedAnswer' : undefined}
-            itemType={faq ? 'https://schema.org/Answer' : undefined}
-          >
-            <div
-              className="expander__children"
-              itemProp={faq ? 'text' : undefined}
-            >
-              {children}
-            </div>
-            {actions.length ? (
-              <div className="expander__actions">
-                {actions.map(action => (
-                  <div className="expander__action" key={action.href}>
-                    <LinkButton {...action} />
-                  </div>
-                ))}
-              </div>
-            ) : null}
-            {metadata || (links && links.length) ? (
-              <div className="expander__metadata">
-                <hr className="expander__divider" />
-                <div className="expander__meta-content">
-                  {metadata ? (
-                    <div className="expander__meta-text">
-                      <Text elementName="span" size={Text.sizes.small}>
-                        {metadata}
-                      </Text>
-                    </div>
-                  ) : null}
-                  {links && links.length ? (
-                    <div className="expander__links">
-                      {links.map(link => (
-                        <div className="expander__link" key={link.href}>
-                          <Link {...link} size={Link.sizes.small} />
-                        </div>
-                      ))}
-                    </div>
-                  ) : null}
-                </div>
-              </div>
-            ) : null}
-          </div>
-        </Collapse>
-      </div>
-    </div>
-  );
-};
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-const Expander = <T extends {}>({
-  description,
-  faq,
-  itemRenderer,
-  items,
-  title,
-}: Props<T> & { itemRenderer: React.FC<T> }) => (
-  <div className="expander">
-    {title || description ? (
-      <div className="expander__header">
-        {title ? (
-          <Text
-            elementName="h2"
-            size={Text.sizes.headline2}
-            theme={Text.themes.emphasis}
-            tight
-          >
-            {title}
-          </Text>
-        ) : null}
-        {description ? (
-          <Text size={Text.sizes.basic}>{description}</Text>
-        ) : null}
-      </div>
-    ) : null}
-    <div>
-      {items.map(item => (
-        <ExpanderListItem
-          key={item.listItemProps.id}
-          {...item.listItemProps}
-          faq={faq}
-        >
-          {React.createElement(itemRenderer, item.props)}
-        </ExpanderListItem>
-      ))}
-    </div>
-  </div>
-);
-
-export default Expander;

package/react/expander/expander.types.ts

@@ -1,33 +0,0 @@
-import type { ReactNode } from 'react';
-
-import type { Link } from '../link/link.types';
-import type { LinkButton } from '../link-button/link-button.types';
-import { ObjectValues } from '../types';
-
-export const contentTypes = {
-  article: 'article',
-  list: 'list',
-} as const;
-
-type ExpanderListItem = {
-  actions: LinkButton[];
-  contentType?: ObjectValues<typeof contentTypes>;
-  defaultOpen?: boolean;
-  faq?: boolean;
-  icon?: ReactNode;
-  id: string;
-  links?: Pick<Link, 'href' | 'testId' | 'text'>[];
-  metadata?: string;
-  title: string;
-  value?: number;
-};
-
-export type Expander<T> = {
-  description?: string;
-  faq?: boolean;
-  items: {
-    listItemProps: ExpanderListItem;
-    props: T;
-  }[];
-  title?: string;
-};