@sats-group/ui-lib 74.2.0

package/react/expander/expander.scss

@@ -0,0 +1,115 @@
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.expander {
+  @mixin break {
+    @media (min-width: 800px) {
+      @content;
+    }
+  }
+
+  display: grid;
+  gap: spacing.$m;
+  width: 100%;
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: spacing.$s;
+  }
+
+  &__trigger {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid light.$ge-divider-default;
+    cursor: pointer;
+    display: flex;
+    gap: spacing.$xs;
+    justify-items: flex-end;
+    padding: spacing.$s spacing.$xs;
+    transition: background-color 0.2s ease-in-out;
+    width: 100%;
+
+    &--triggered {
+      background: light.$background-primary-default;
+    }
+
+    @include break {
+      gap: spacing.$s;
+      padding: spacing.$l spacing.$m;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background: light.$surface-primary-hover;
+      }
+    }
+  }
+
+  &__trigger-title {
+    margin-right: auto;
+    text-align: left;
+  }
+
+  &__icon {
+    display: grid;
+    place-items: center;
+    transition: transform 0.4s;
+
+    &--flipped {
+      transform: rotate(-180deg);
+    }
+  }
+
+  &__drawer {
+    background: light.$surface-primary-default;
+  }
+
+  &__content {
+    border-bottom: 1px solid light.$ge-divider-default;
+    border-top: 1px solid light.$ge-divider-default;
+    display: grid;
+    gap: spacing.$m;
+    padding: 20px; // NOTE: Magic number 20px as designed
+
+    @media (min-resolution: 2dppx) {
+      border-bottom-width: 0.5px;
+      border-top-width: 0.5px;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing.$s;
+  }
+
+  &__metadata {
+    display: grid;
+    gap: spacing.$xs;
+  }
+
+  &__meta-content {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__meta-text {
+    color: light.$on-surface-primary-alternate;
+  }
+
+  &__divider {
+    background: light.$ge-divider-default;
+    border: 0;
+    height: 1px;
+    margin: 0;
+    width: 100%;
+  }
+
+  &__links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing.$s;
+  }
+}

package/react/expander/expander.tsx

@@ -0,0 +1,167 @@
+import cn from 'classnames';
+import React, { useState } from 'react';
+import Collapse from 'react-tiny-collapse';
+
+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';
+
+const ExpanderListItem: React.FC<
+  React.PropsWithChildren<Props<unknown>['items'][number]['listItemProps']>
+> = ({
+  actions,
+  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="expander__content"
+            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

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+
+import type { Link } from '../link/link.types';
+import type { LinkButton } from '../link-button/link-button.types';
+
+type ExpanderListItem = {
+  actions: LinkButton[];
+  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;
+};

package/react/expander/index.ts

@@ -0,0 +1,2 @@
+import Expander from './expander';
+export default Expander;

package/react/filter/filter.scss

@@ -0,0 +1,94 @@
+@use '../../tokens/corner-radius';
+@use '../../tokens/light.scss';
+@use '../../tokens/spacing';
+
+.filter {
+  $breakpoint: 900px;
+  $breakpointSmall: 500px;
+
+  border-radius: corner-radius.$s;
+  background-color: light.$surface-primary-default;
+  border: 1px solid light.$ge-divider-default;
+  min-width: 180px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  @media (max-width: $breakpointSmall) {
+    border-radius: corner-radius.$none;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
+    width: 100%;
+
+    &:last-of-type {
+      border-bottom: 1px solid light.$ge-divider-default;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light.$surface-primary-hover;
+      border-color: light.$ge-divider-alternate;
+    }
+  }
+
+  &--clicked {
+    background-color: light.$surface-primary-hover;
+    border-color: light.$ge-divider-alternate;
+  }
+
+  @media (min-width: $breakpoint) {
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  &__buttons {
+    position: relative;
+  }
+
+  &__button,
+  &__loading-button {
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: transparent;
+    border: none;
+    width: 100%;
+    height: 100%;
+    box-shadow: none;
+    font: inherit;
+    overflow: hidden;
+    padding: spacing.$s;
+    color: inherit;
+    gap: spacing.$s;
+  }
+
+  &__loading-icon {
+    color: light.$on-surface-primary-disabled;
+  }
+
+  &__button-text {
+    word-break: break-all;
+    text-align: left;
+  }
+
+  &__button-inner-right {
+    display: flex;
+    align-items: center;
+    gap: spacing.$xs;
+  }
+
+  &__selected-options {
+    box-sizing: border-box;
+    border-radius: corner-radius.$l;
+    color: light.$on-ge-on-badge-secondary;
+    background: light.$ge-badge-secondary;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 3px spacing.$xs; // NOTE: The spacings on this padding are slightly custom due to their tiny size.
+    min-width: 29px; // NOTE: Magic width that makes the background round in correlation with the padding when the selected options are less than 10
+  }
+}

package/react/filter/filter.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import useToggle from '../hooks/use-toggle';
+import useClickOutside from '../hooks/use-click-outside';
+import useEscape from '../hooks/use-escape';
+import { useIsMounted } from '../hooks/use-is-mounted';
+import FormContent from '../form-content';
+import ChevronUp from '../icons/24/arrow-up';
+import ChevronDown from '../icons/24/arrow-down';
+import Text from '../text';
+
+import { Filter as Props } from './filter.types';
+
+const Filter: React.FunctionComponent<Props> = ({
+  formContentOptions,
+  selectedOptionsCount,
+  testTags,
+  title,
+}) => {
+  const isMounted = useIsMounted();
+  const modal = React.useRef(null);
+  const [isOpen, toggle, , close] = useToggle(false);
+
+  useClickOutside(modal, close);
+  useEscape(close);
+
+  return (
+    <div
+      className={classNames('filter', {
+        'filter--clicked': isOpen,
+      })}
+      ref={modal}
+      {...testTags}
+    >
+      {isMounted ? (
+        <div className="filter__buttons">
+          <button
+            type="button"
+            className="filter__button"
+            onClick={toggle}
+            data-test-dropdown-button
+          >
+            <Text
+              size={Text.sizes.basic}
+              theme={Text.themes.emphasis}
+              className="filter__button-text"
+            >
+              {title}
+            </Text>
+
+            <div className="filter__button-inner-right">
+              {selectedOptionsCount ? (
+                <Text
+                  className="filter__selected-options"
+                  theme={Text.themes.emphasis}
+                  size={Text.sizes.small}
+                >
+                  {selectedOptionsCount}
+                </Text>
+              ) : null}
+
+              {isOpen ? <ChevronUp /> : <ChevronDown />}
+            </div>
+          </button>
+        </div>
+      ) : (
+        <div className="filter__loading-button">
+          <div className="filter__loading-placeholder">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="112"
+              height="22"
+              viewBox="0 0 112 22"
+              fill="none"
+            >
+              <path
+                d="M0 4.5C0 2.29086 1.79086 0.5 4 0.5H108C110.209 0.5 112 2.29086 112 4.5V17.5C112 19.7091 110.209 21.5 108 21.5H4C1.79086 21.5 0 19.7091 0 17.5V4.5Z"
+                fill="#DCDEE0"
+              />
+            </svg>
+          </div>
+          <div className="filter__loading-icon">
+            <ChevronDown />
+          </div>
+        </div>
+      )}
+
+      <FormContent
+        {...formContentOptions}
+        isOpen={isOpen}
+        close={close}
+        onSubmit={toggle}
+      />
+    </div>
+  );
+};
+
+export default Filter;

package/react/filter/filter.types.ts

@@ -0,0 +1,8 @@
+import type { FormContentFilter } from '../form-content/form-content.types';
+
+export type Filter = {
+  title: string;
+  formContentOptions: FormContentFilter;
+  selectedOptionsCount?: number;
+  testTags?: { [key: string]: boolean };
+};

package/react/filter/index.ts

@@ -0,0 +1,2 @@
+import Filter from './filter';
+export default Filter;

package/react/filter-wrapper/filter-wrapper.scss

@@ -0,0 +1,46 @@
+@use '../../tokens/spacing';
+
+.filter-wrapper {
+  $breakpointLarge: 1100px;
+  $breakpointMedium: 850px;
+  $breakpointSmall: 500px;
+  width: 100%;
+
+  display: grid;
+  gap: spacing.$s;
+  width: 100%;
+
+  &--wide {
+    @media (min-width: $breakpointLarge) {
+      grid-template-columns: repeat(
+        auto-fit,
+        [col-start] minmax(180px, 1fr) [col-end]
+      );
+    }
+  }
+
+  &--medium {
+    &--single {
+      > * + * {
+        max-width: 430px;
+        width: 100%;
+      }
+    }
+    @media (min-width: $breakpointMedium) {
+      grid-template-columns: repeat(
+        auto-fit,
+        [col-start] minmax(180px, 1fr) [col-end]
+      );
+    }
+  }
+
+  @media (max-width: $breakpointSmall) {
+    gap: 0;
+  }
+
+  &--single {
+    > * {
+      width: 430px;
+    }
+  }
+}

package/react/filter-wrapper/filter-wrapper.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import React from 'react';
+import Filter from '../filter/filter';
+
+import {
+  FilterWrapper as Props,
+  BreakAtElements,
+} from './filter-wrapper.types';
+
+const FilterWrapper: React.FunctionComponent<Props> = ({ filters }) => (
+  <div
+    className={classNames('filter-wrapper', {
+      [`filter-wrapper--medium`]: filters.length <= BreakAtElements.medium,
+      [`filter-wrapper--wide`]: filters.length >= BreakAtElements.wide,
+      [`filter-wrapper--single`]: filters.length === 1,
+    })}
+  >
+    {filters.map((filter, i) => (
+      <Filter {...filter} key={i} />
+    ))}
+  </div>
+);
+
+export default FilterWrapper;

package/react/filter-wrapper/filter-wrapper.types.ts

@@ -0,0 +1,10 @@
+import { Filter } from '../filter/filter.types';
+
+export enum BreakAtElements {
+  'wide' = 3,
+  'medium' = 4,
+}
+
+export type FilterWrapper = {
+  filters: Filter[];
+};

package/react/filter-wrapper/index.ts

@@ -0,0 +1,2 @@
+import FilterWrapper from './filter-wrapper';
+export default FilterWrapper;

package/react/flag/flag.scss

@@ -0,0 +1,26 @@
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.flag {
+  border-top-left-radius: 8px;
+  clip-path: polygon(0 0, 100% 0, calc(100% - #{spacing.$s}) 100%, 0 100%);
+  color: light.$on-ge-on-tags-featured-default;
+  padding: spacing.$xxs (spacing.$s * 2) spacing.$xxs spacing.$s;
+  text-transform: uppercase;
+
+  &--theme-inline-block {
+    display: inline-block;
+  }
+
+  &--theme-block {
+    display: block;
+  }
+
+  &--variant-featured {
+    background: light.$ge-tags-featured;
+  }
+
+  &--variant-primary {
+    background: light.$ge-tags-primary;
+  }
+}

package/react/flag/flag.tsx

@@ -0,0 +1,27 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import Text from '../text';
+
+import { Flag as Props, themes, variants } from './flag.types';
+
+const Flag: React.FunctionComponent<Props> & {
+  themes: typeof themes;
+  variants: typeof variants;
+} = ({ text, theme = themes['inline-block'], variant = variants.featured }) => (
+  <div
+    className={cn('flag', {
+      [`flag--theme-${theme}`]: theme,
+      [`flag--variant-${variant}`]: variant,
+    })}
+  >
+    <Text size={Text.sizes.interface} theme={Text.themes.emphasis}>
+      {text}
+    </Text>
+  </div>
+);
+
+Flag.themes = themes;
+Flag.variants = variants;
+
+export default Flag;

package/react/flag/flag.types.ts

@@ -0,0 +1,17 @@
+import { ObjectValues } from '../types';
+
+export const themes = {
+  block: 'block',
+  'inline-block': 'inline-block',
+} as const;
+
+export const variants = {
+  featured: 'featured',
+  primary: 'primary',
+} as const;
+
+export type Flag = {
+  text: string;
+  theme?: ObjectValues<typeof themes>;
+  variant?: ObjectValues<typeof variants>;
+};

package/react/flag/index.ts

@@ -0,0 +1,2 @@
+import Flag from './flag';
+export default Flag;