@sats-group/ui-lib 74.2.0

package/react/form-content/checkbox-category.tsx

@@ -0,0 +1,183 @@
+import * as React from 'react';
+import Collapse from 'react-tiny-collapse';
+import Text from '../text';
+import Checkbox from '../checkbox';
+
+import ChevronRight from '../icons/24/arrow-right';
+import ChevronUp from '../icons/24/arrow-up';
+
+import { CheckboxCategory as Props } from './form-content.checkbox-list.types';
+import VisuallyHidden from '../visually-hidden';
+import { mod } from '../add-bem-modifiers';
+
+const CheckboxCategory: React.FC<React.PropsWithChildren<Props>> = ({
+  currentlySelectedValues = [],
+  id,
+  isSearching,
+  options,
+  searchResults = [],
+  selectAll,
+  selectAllLabel,
+  setMultipleSelectedValues = () => {},
+  setSelectedValue = () => {},
+  shouldShowItems = true,
+  removeAllValues = () => {},
+}) => {
+  const isExpandable = React.useMemo(
+    () => (selectAll ? true : false),
+    [selectAll],
+  );
+  const [availableOptions] = React.useState(
+    options.filter(button => !button.disabled),
+  );
+
+  const [isOpen, setIsOpen] = React.useState(isExpandable ? true : false);
+
+  const handleChange = (value: string) => {
+    setSelectedValue(id, value);
+  };
+
+  const handleSelectAll = () => {
+    if (currentlySelectedValues.length !== availableOptions.length) {
+      setMultipleSelectedValues(
+        id,
+        availableOptions.map(button => button.value),
+      );
+    } else {
+      removeAllValues(id);
+    }
+  };
+
+  React.useEffect(
+    () =>
+      isSearching
+        ? setIsOpen(true)
+        : isExpandable
+          ? setIsOpen(false)
+          : setIsOpen(true),
+    [isExpandable, isSearching, searchResults],
+  );
+
+  const disableCategory = options.every(checkbox => checkbox.disabled);
+
+  const hasSelectedValues = currentlySelectedValues.length > 0;
+
+  return (
+    <fieldset className="form-content__fieldset">
+      {isExpandable && (
+        <div
+          className={mod('form-content__chevron-button-wrapper', {
+            hidden: isSearching,
+          })}
+        >
+          {selectAll ? (
+            <div className="form-content__select-all">
+              <Checkbox
+                {...selectAll}
+                isLabelVisible={false}
+                checked={
+                  availableOptions.length > 0 &&
+                  currentlySelectedValues.length === availableOptions.length
+                }
+                onChange={handleSelectAll}
+                data-test-select-all
+                disabled={disableCategory}
+              />
+            </div>
+          ) : null}
+          <button
+            className="form-content__chevron-button"
+            onClick={() => setIsOpen(currentState => !currentState)}
+            type="button"
+          >
+            <Text
+              elementName="span"
+              className={mod('form-content__select-all-label', {
+                disabled: disableCategory,
+              })}
+              size={Text.sizes.basic}
+            >
+              {selectAllLabel}
+            </Text>
+            <div className="form-content__checkbox-category-info-wrapper">
+              {hasSelectedValues ? (
+                <Text
+                  className="form-content__checkbox-category-number"
+                  size={Text.sizes.interface}
+                >
+                  {currentlySelectedValues.length}
+                </Text>
+              ) : undefined}
+              {isOpen ? (
+                <div className="form-content__checkbox-category-icon">
+                  <ChevronUp />
+                </div>
+              ) : (
+                <div className="form-content__checkbox-category-icon">
+                  <ChevronRight />
+                </div>
+              )}
+            </div>
+          </button>
+        </div>
+      )}
+
+      <Collapse
+        duration={300}
+        animateChildren={isExpandable ? true : false}
+        isOpen={isOpen}
+      >
+        {
+          <fieldset className="form-content__fieldset">
+            {options.map(checkbox => {
+              const isInSearchResults = isSearching
+                ? searchResults.find(
+                    item =>
+                      item.key.toLowerCase() === checkbox.value.toLowerCase(),
+                  )
+                : undefined;
+
+              const isSelected = currentlySelectedValues.includes(
+                checkbox.value,
+              );
+
+              const node = (
+                <div
+                  key={checkbox.value}
+                  className={mod('form-content__checkbox-button', {
+                    nested: !isSearching && isExpandable,
+                  })}
+                >
+                  <Checkbox
+                    onChange={e => handleChange(e.target.value)}
+                    checked={isSelected}
+                    isUnderlined={true}
+                    {...checkbox}
+                  />
+                </div>
+              );
+
+              if (!isSelected && !isInSearchResults && !shouldShowItems) {
+                return;
+              }
+
+              if (isSelected && isSearching && !isInSearchResults) {
+                return (
+                  <VisuallyHidden key={checkbox.value}>{node}</VisuallyHidden>
+                );
+              }
+
+              if (!isSelected && isSearching && !isInSearchResults) {
+                return;
+              }
+
+              return node;
+            })}
+          </fieldset>
+        }
+      </Collapse>
+    </fieldset>
+  );
+};
+
+export default CheckboxCategory;

package/react/form-content/form-content.checkbox-list.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import Text from '../text';
+
+import CheckboxCategory from './checkbox-category';
+
+import { CheckboxList as Props } from './form-content.checkbox-list.types';
+import { SearchItem } from './form-content.types';
+import { mod } from '../add-bem-modifiers';
+import FormContentSearch from './form-content.search';
+
+const CheckboxList: React.FC<React.PropsWithChildren<Props>> = props => {
+  const [currentlySelectedValues, setCurrentlySelectedValues] = React.useState<
+    Record<string, string[]>
+  >({});
+  const { content, emptySearchResultDescription, emptySearchResultText } =
+    props;
+
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [searchResult, setSearchResult] = React.useState<SearchItem[]>();
+
+  const updateCurrentlySelectedValues = (id: string, value: string) => {
+    if (currentlySelectedValues[id]?.includes(value)) {
+      setCurrentlySelectedValues(prevState => {
+        const updatedValues = Object.entries(prevState).map(([id, values]) => [
+          id,
+          values.filter(option => option !== value),
+        ]);
+        return Object.fromEntries(updatedValues);
+      });
+    } else {
+      setCurrentlySelectedValues(prevState => {
+        const updatedValues = Object.entries(prevState).map(
+          ([filterGroupId, values = []]) => {
+            if (id === filterGroupId) {
+              return [filterGroupId, [...values, value]];
+            }
+
+            return [filterGroupId, values];
+          },
+        );
+        return Object.fromEntries(updatedValues);
+      });
+    }
+  };
+
+  const updateMultipleSelectedValues = (id: string, values: string[]) => {
+    setCurrentlySelectedValues(prevState => ({
+      ...prevState,
+      [id]: values,
+    }));
+  };
+
+  const removeAllValuesById = (id: string) => {
+    setCurrentlySelectedValues(prevState => {
+      const selectedValues = prevState[id] || [];
+      const updatedValues = Object.entries(prevState).map(([id, values]) => [
+        id,
+        values.filter(option => !selectedValues.includes(option)),
+      ]);
+      return Object.fromEntries(updatedValues);
+    });
+  };
+
+  React.useEffect(() => {
+    const selectedValues = content
+      .flatMap(({ categories }) => categories)
+      .filter(category => category?.id)
+      .map(category => [category?.id, category?.selectedValues]);
+    setCurrentlySelectedValues(Object.fromEntries(selectedValues));
+  }, [content]);
+
+  return (
+    <div>
+      {'searchProps' in props ? (
+        <FormContentSearch
+          {...props.searchProps}
+          searchResult={setSearchResult}
+          searchTerm={setSearchTerm}
+        />
+      ) : undefined}
+
+      {searchTerm.length > 0 && searchResult?.length === 0 && (
+        <div className="form-content__search-no-results">
+          <Text
+            className="form-content__search-no-results-text"
+            elementName="span"
+            theme={Text.themes.emphasis}
+          >
+            {emptySearchResultText}
+          </Text>
+          <span>{emptySearchResultDescription}</span>
+        </div>
+      )}
+
+      {content.map(({ categories = [], key, header }) => (
+        <React.Fragment key={key}>
+          {header && searchTerm.length === 0 ? (
+            <Text
+              className={mod('form-content__content-title', {
+                hidden: searchTerm.length > 0,
+              })}
+              theme={Text.themes.emphasis}
+            >
+              {header}
+            </Text>
+          ) : undefined}
+
+          {categories.map(category => (
+            <CheckboxCategory
+              key={category.id}
+              searchResults={searchResult}
+              isSearching={searchTerm.length > 0}
+              currentlySelectedValues={currentlySelectedValues[category.id]}
+              setSelectedValue={updateCurrentlySelectedValues}
+              setMultipleSelectedValues={updateMultipleSelectedValues}
+              removeAllValues={removeAllValuesById}
+              {...category}
+            />
+          ))}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default CheckboxList;

package/react/form-content/form-content.checkbox-list.types.ts

@@ -0,0 +1,36 @@
+import type { Checkbox } from '../checkbox/checkbox.types';
+import { ContentKeys } from '../form-content/form-content.types';
+import type { Search } from './form-content.types';
+
+export type CheckboxCategory = {
+  currentlySelectedValues?: string[];
+  id: string;
+  isSearching?: boolean;
+  options: Checkbox[];
+  searchResults?: { key: string; label: string }[];
+  selectAll?: Checkbox;
+  selectAllLabel?: string;
+  selectedValues?: string[];
+  setMultipleSelectedValues?: (id: string, values: string[]) => void;
+  setSelectedValue?: (id: string, value: string) => void;
+  shouldShowItems?: boolean;
+  removeAllValues?: (id: string) => void;
+  queryName: string; // NOTE: This is used by some systems to avoid looping through all options to get the name. This should be refactored away in those systems.
+};
+
+export type CheckboxListBase = {
+  key: ContentKeys.Checkbox;
+  content: {
+    key: string;
+    header?: string;
+    categories?: CheckboxCategory[];
+  }[];
+  emptySearchResultText?: string;
+  emptySearchResultDescription?: string;
+};
+
+export type CheckboxListSearch = CheckboxListBase & {
+  searchProps: Search;
+};
+
+export type CheckboxList = CheckboxListBase | CheckboxListSearch;

package/react/form-content/form-content.radio-list.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Radio from '../radio';
+import Text from '../text';
+import FormContentSearch from './form-content.search';
+
+import { RadioList as Props, SearchItem } from './form-content.types';
+import classNames from 'classnames';
+
+const RadioList: React.FC<Props> = props => {
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [searchResult, setSearchResult] = React.useState<SearchItem[]>();
+  return (
+    <div>
+      {'searchProps' in props ? (
+        <FormContentSearch
+          {...props.searchProps}
+          searchResult={setSearchResult}
+          searchTerm={setSearchTerm}
+        />
+      ) : undefined}
+      {props.categories.map((category, categoryIndex) => (
+        <div key={categoryIndex}>
+          {category.header &&
+          category.options.length > 0 &&
+          searchTerm.length === 0 ? (
+            <Text
+              className={classNames('form-content__group-title', {
+                hidden: searchTerm.length > 0,
+              })}
+              theme={Text.themes.emphasis}
+            >
+              {category.header}
+            </Text>
+          ) : undefined}
+          {category.options.map((radio, i) => {
+            const isInSearchResults =
+              searchTerm.length > 0
+                ? searchResult?.find(
+                    item =>
+                      item.key.toLowerCase() === radio.value.toLowerCase(),
+                  )
+                : undefined;
+
+            if (searchTerm.length > 0 && !isInSearchResults) return;
+
+            return (
+              <div key={i} className="form-content__radio-button">
+                <Radio {...radio} isUnderline={true} />
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default RadioList;

package/react/form-content/form-content.range.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import TextInput from '../text-input';
+
+import { Range as Props } from './form-content.range.types';
+
+const Range: React.FC<React.PropsWithChildren<Props>> = ({ max, min }) => {
+  return (
+    <div className="form-content__range">
+      <div className="form-content__range-input">
+        <TextInput {...min} type="number" />
+      </div>
+      <div className="form-content__range-line"></div>
+      <div className="form-content__range-input">
+        <TextInput {...max} type="number" />
+      </div>
+    </div>
+  );
+};
+
+export default Range;

package/react/form-content/form-content.range.types.ts

@@ -0,0 +1,14 @@
+import { ContentKeys } from './form-content.types';
+import type { TextInput } from '../text-input/text-input.types';
+
+interface RangeInput extends TextInput {
+  min: number;
+  max: number;
+  defaultValue: number;
+}
+
+export type Range = {
+  key: ContentKeys.Range;
+  max: RangeInput;
+  min: RangeInput;
+};

package/react/form-content/form-content.scss

@@ -0,0 +1,234 @@
+@use '../../tokens/corner-radius';
+@use '../../tokens/elevation';
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.form-content {
+  $breakpoint: 1100px;
+
+  &__background-overlay {
+    pointer-events: none;
+    @media (min-width: $breakpoint) {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      background: light.$fixed-background-primary-default;
+      opacity: 0.2;
+      z-index: 400;
+    }
+  }
+
+  &__modal {
+    display: none;
+
+    &--open {
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+
+      position: fixed;
+      width: 100%;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+
+      background-color: light.$surface-primary-default;
+      z-index: 500;
+
+      border-radius: corner-radius.$s;
+      @include elevation.level(2);
+
+      @media (min-width: $breakpoint) {
+        top: 10%;
+        left: 50%;
+        bottom: unset;
+        transform: translateX(-50%);
+        max-width: 870px;
+        min-height: 40vh;
+        max-height: 80vh;
+      }
+    }
+  }
+
+  &__modal-content {
+    overflow-y: auto;
+    height: 100%;
+
+    border-radius: corner-radius.$s corner-radius.$s 0 0;
+
+    background: linear-gradient(white 30%, white) center top,
+      linear-gradient(white, white 70%) center bottom,
+      linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)) center top,
+      linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)) center bottom;
+
+    background-repeat: no-repeat;
+    background-size: 100% 20px, 100% 20px, 100% 14px, 100% 14px;
+    background-attachment: local, local, scroll, scroll;
+
+    @media (max-width: $breakpoint) {
+      border-radius: 0;
+    }
+  }
+
+  &__modal-header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    border-bottom: 1px solid light.$ge-divider-default;
+    padding: spacing.$s;
+
+    @media (min-width: $breakpoint) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &__modal-close-small {
+    @media (min-width: $breakpoint) {
+      display: none;
+    }
+  }
+
+  &__modal-close-large {
+    display: none;
+
+    @media (min-width: $breakpoint) {
+      display: block;
+    }
+  }
+
+  &__modal-title {
+    text-align: center;
+  }
+
+  &__modal-action-wrapper {
+    border-top: 1px solid light.$ge-divider-default;
+    padding: spacing.$s;
+  }
+
+  &__modal-actions {
+    display: grid;
+    gap: spacing.$s;
+    grid-auto-flow: column;
+    margin: auto;
+    width: 100%;
+
+    @media (min-width: $breakpoint) {
+      width: fit-content;
+    }
+  }
+
+  &__fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  &__checkbox-button,
+  &__content-title {
+    margin: spacing.$m spacing.$l 0;
+  }
+
+  &__radio-button {
+    // NOTE: Purposefully different from `&__checkbox-button` and `&__content-title`,
+    // ref. https://hfnswedenab.atlassian.net/browse/IAT-3537
+    margin: spacing.$s spacing.$l 0;
+  }
+
+  &__checkbox-button {
+    &--nested {
+      margin-left: spacing.$xxl;
+    }
+  }
+
+  &__search {
+    padding: 0 spacing.$m;
+    padding-top: spacing.$m;
+  }
+
+  &__chevron-button-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin: 0 spacing.$l;
+    border-bottom: 1px solid light.$ge-divider-default;
+    line-height: 0;
+
+    &--hidden {
+      display: none;
+    }
+  }
+
+  &__chevron-button {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: none;
+    width: 100%;
+    margin-left: spacing.$xs;
+    color: light.$on-surface-primary-default;
+    border: none;
+    padding: spacing.$s 0;
+    padding-top: calc(spacing.$s + 2px);
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+  }
+
+  &__select-all-label {
+    text-align: left;
+
+    &--disabled {
+      color: light.$on-surface-primary-default;
+    }
+  }
+
+  &__checkbox-category-info-wrapper {
+    display: flex;
+    gap: spacing.$s;
+  }
+
+  &__checkbox-category-icon {
+    margin-left: spacing.$xs;
+  }
+
+  &__checkbox-category-number {
+    border-radius: 100%;
+    color: light.$on-ge-on-tags-primary-default;
+    background: light.$ge-tags-primary;
+    width: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__search-no-results {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    padding: spacing.$m;
+  }
+
+  &__search-no-results-text {
+    margin-bottom: spacing.$xs;
+  }
+
+  &__range {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: spacing.$m;
+  }
+
+  &__range-line {
+    width: 21px;
+    border-bottom: 1px solid light.$ge-divider-alternate;
+    margin: 0 spacing.$m;
+  }
+
+  &__range-input {
+    flex-grow: 1;
+  }
+}