@cloud-ru/uikit-product-mobile-chips 0.8.36

package/src/components/MobileChipChoice/utils/utils.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+
+import { ItemId } from '@cloud-ru/uikit-product-mobile-dropdown';
+
+import { ContentRenderProps, FilterOption } from '../types';
+import { isBaseOption } from './typeGuards';
+
+export type FlattenOption<T extends ContentRenderProps = ContentRenderProps> = {
+  value: ItemId;
+  label: ItemId;
+  contentRenderProps?: T;
+  disabled?: boolean;
+  hidden?: boolean;
+  afterContent?: ReactNode;
+  beforeContent?: ReactNode;
+};
+
+type KindFlattenOptionsProps<T extends ContentRenderProps = ContentRenderProps> = {
+  options: FilterOption<T>[];
+};
+
+export function kindFlattenOptions<T extends ContentRenderProps = ContentRenderProps>({
+  options,
+}: KindFlattenOptionsProps<T>): {
+  flattenOptions: Record<string, FlattenOption<T>>;
+} {
+  const flattenOptions: Record<string, FlattenOption<T>> = {};
+
+  function flatten(option: FilterOption<T>) {
+    if (isBaseOption<T>(option)) {
+      const { value, label, contentRenderProps, disabled, afterContent, beforeContent, hidden } = option;
+
+      flattenOptions[value] = {
+        value,
+        label,
+        contentRenderProps,
+        disabled,
+        afterContent,
+        beforeContent,
+        hidden,
+      };
+
+      return;
+    }
+
+    const { options } = option;
+
+    for (let idx = 0; idx < options.length; idx++) {
+      flatten(options[idx]);
+    }
+
+    return;
+  }
+
+  for (let idx = 0; idx < options.length; idx++) {
+    flatten(options[idx]);
+  }
+
+  return {
+    flattenOptions,
+  };
+}

package/src/components/MobileChipChoiceRow/MobileChipChoiceRow.tsx

@@ -0,0 +1,275 @@
+import cn from 'classnames';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { CrossSVG, PlusSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { MobileDroplist, MobileDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { MobileTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Divider } from '@snack-uikit/divider';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { CHIP_CHOICE_ROW_IDS } from '../../constants';
+import { ForwardedChipChoice } from './components';
+import { CHIP_CHOICE_ROW_SIZE, MAP_ROW_SIZE_TO_BUTTON_SIZE, MAP_ROW_SIZE_TO_CHOICE_SIZE } from './constants';
+import styles from './styles.module.scss';
+import { ChipChoiceProps, ChipChoiceRowSize, FilterValue, OmitBetter } from './types';
+
+export type FiltersState = Record<string, unknown>;
+
+export type MobileChipChoiceRowFilter = OmitBetter<ChipChoiceProps, 'onChange' | 'value' | 'size' | 'defaultValue'> & {
+  pinned?: boolean;
+};
+
+export type MobileChipChoiceRowProps<TState extends FiltersState> = WithSupportProps<{
+  /** Состояние фильтров */
+  value?: TState;
+  /** Начальное состояние фильтров */
+  defaultValue?: Partial<TState>;
+  /** Колбек изменения состояния фильтров */
+  onChange?(filters: TState): void;
+  /** Массив чипов */
+  filters: MobileChipChoiceRowFilter[];
+  /** Размер @default 's' */
+  size?: ChipChoiceRowSize;
+  /** CSS-класс */
+  className?: string;
+  /** Скрыть/показать кнопку очиски фильтров @default true */
+  showClearButton?: boolean;
+  /** Скрыть/показать кнопку добавления фильров @default true */
+  showAddButton?: boolean;
+  /** Состояние для видимых фильтров */
+  visibleFilters?: string[];
+  /** Коллбек на изменение видимых фильтров */
+  onVisibleFiltersChange?(value: string[]): void;
+}>;
+
+export function MobileChipChoiceRow<TState extends FiltersState>({
+  filters,
+  onChange,
+  showClearButton: showClearButtonProp = true,
+  showAddButton = true,
+  className,
+  value,
+  defaultValue: defaultValueProp,
+  size = CHIP_CHOICE_ROW_SIZE.S,
+  visibleFilters: visibleFiltersProp,
+  onVisibleFiltersChange,
+  ...rest
+}: MobileChipChoiceRowProps<TState>) {
+  const { t } = useLocale('Chips');
+
+  const defaultValue = useMemo(() => (defaultValueProp ?? {}) as TState, [defaultValueProp]);
+
+  const [state, setState] = useUncontrolledProp<TState>(value, defaultValue, newState => {
+    const result = typeof newState === 'function' ? newState(state) : newState;
+    onChange?.(result);
+  });
+
+  const [addListValue, setAddListValue] = useUncontrolledProp<string[]>(
+    visibleFiltersProp,
+    Object.keys(state),
+    newState => {
+      const result = typeof newState === 'function' ? newState(addListValue) : newState;
+      onVisibleFiltersChange?.(result);
+    },
+  );
+
+  const [openedChip, setOpenedChip] = useState<string>('');
+
+  const [addListOpen, setAddListOpen] = useState(false);
+
+  const handleChange = (fieldId: string, value: FilterValue) => {
+    setState((state: TState) => ({
+      ...state,
+      [fieldId]: value,
+    }));
+  };
+
+  const handleChipOpen = useCallback(
+    (filterId: string) => (isOpen: boolean) => {
+      setOpenedChip(isOpen ? filterId : '');
+    },
+    [],
+  );
+
+  const handleFiltersClear = () => {
+    const defaultState = filters.reduce((res, filter) => {
+      if (filter.pinned) {
+        return { ...res, [filter.id]: defaultValue[filter.id] } as TState;
+      }
+
+      return res;
+    }, {} as TState);
+
+    setState(defaultState);
+    setAddListValue([]);
+  };
+
+  const { pinnedFilters, nonPinnedFilters } = useMemo(
+    () =>
+      filters.reduce(
+        (res, filter) => {
+          if (filter.pinned) {
+            res.pinnedFilters.push(filter);
+          } else {
+            res.nonPinnedFilters.push(filter);
+          }
+
+          return res;
+        },
+        { pinnedFilters: [] as MobileChipChoiceRowFilter[], nonPinnedFilters: [] as MobileChipChoiceRowFilter[] },
+      ),
+    [filters],
+  );
+
+  const visibleFilters = useMemo(
+    () =>
+      addListValue.reduce((res, filterId) => {
+        const filter = nonPinnedFilters.find(filter => filter.id === filterId);
+
+        if (filter) {
+          res.push(filter);
+        }
+
+        return res;
+      }, [] as MobileChipChoiceRowFilter[]),
+    [addListValue, nonPinnedFilters],
+  );
+
+  const hasAnyFilter = useMemo(
+    () => visibleFilters.length > 0 || pinnedFilters.some(filter => state[filter.id] !== defaultValue[filter.id]),
+    [defaultValue, pinnedFilters, state, visibleFilters.length],
+  );
+
+  const handleClearPinnedFilter = (filterId: string) => {
+    const defaultFilterValue = defaultValue[filterId];
+
+    if (state[filterId] === defaultFilterValue) {
+      return;
+    }
+
+    return () => setState((prevState: TState) => ({ ...prevState, [filterId]: defaultFilterValue }));
+  };
+
+  const handleRemoveVisibleFilter = (filterId: string) => () => {
+    setAddListValue((prev?: string[]) => prev?.filter(item => filterId !== item));
+    setState((prevState: TState) => ({ ...prevState, [filterId]: undefined }));
+  };
+
+  const addSelectorOptions = useMemo(
+    () =>
+      nonPinnedFilters.reduce(
+        (res, filter, index) => {
+          if (addListValue.includes(filter.id)) {
+            return res;
+          }
+
+          res.push({
+            id: filter.id,
+            content: { option: filter.label ?? filter.id },
+            onClick: () => {
+              setAddListValue(function (prevValue?: string[]) {
+                return [...(prevValue ?? []), filter.id];
+              });
+              setAddListOpen(false);
+            },
+            'data-test-id': `${CHIP_CHOICE_ROW_IDS.addButtonOption}-${filter['data-test-id'] ?? index}`,
+          });
+
+          return res;
+        },
+        [] as MobileDroplistProps['items'],
+      ),
+    [addListValue, nonPinnedFilters, setAddListValue],
+  );
+
+  const canAddChips = addSelectorOptions.length > 0;
+
+  const addListPrevValue = useRef(addListValue);
+
+  useEffect(() => {
+    const prevValue = addListPrevValue.current;
+
+    if (addListValue.length > prevValue.length) {
+      const newItem = addListValue.find(item => !prevValue.includes(item));
+
+      if (newItem) {
+        handleChipOpen(newItem)(true);
+      }
+    }
+
+    addListPrevValue.current = addListValue;
+  }, [addListValue, handleChipOpen]);
+
+  const showClearButton = showClearButtonProp && hasAnyFilter;
+  const showPinnedFiltersDivider = showAddButton || showClearButton || visibleFilters.length > 0;
+
+  return (
+    <div className={cn(styles.chipChoiceRow, className)} {...extractSupportProps(rest)}>
+      {pinnedFilters.length > 0 && (
+        <div className={styles.pinnedItems}>
+          {pinnedFilters.map(filter => (
+            <ForwardedChipChoice
+              key={filter.id}
+              {...filter}
+              value={state[filter.id] as never}
+              size={MAP_ROW_SIZE_TO_CHOICE_SIZE[size]}
+              onChange={(value: FilterValue) => handleChange(filter.id, value)}
+              onClearButtonClick={handleClearPinnedFilter(filter.id)}
+            />
+          ))}
+
+          {showPinnedFiltersDivider && <Divider orientation='vertical' className={styles.divider} />}
+        </div>
+      )}
+
+      {visibleFilters.map(filter => (
+        <ForwardedChipChoice
+          key={filter.id}
+          {...filter}
+          value={state[filter.id] as never}
+          size={MAP_ROW_SIZE_TO_CHOICE_SIZE[size]}
+          onChange={(value: FilterValue) => handleChange(filter.id, value)}
+          onClearButtonClick={handleRemoveVisibleFilter(filter.id)}
+          open={openedChip === filter.id}
+          onOpenChange={handleChipOpen(filter.id)}
+        />
+      ))}
+
+      <div className={styles.controlWrapper}>
+        {showAddButton && (
+          <MobileTooltip
+            tip={t('addButtonDisabledTip')}
+            open={canAddChips ? false : undefined}
+            placement='bottom'
+            data-test-id={CHIP_CHOICE_ROW_IDS.addButtonTooltip}
+          >
+            <MobileDroplist open={canAddChips && addListOpen} onOpenChange={setAddListOpen} items={addSelectorOptions}>
+              <ButtonFunction
+                disabled={!canAddChips}
+                label={t('add')}
+                icon={<PlusSVG />}
+                iconPosition='before'
+                size={MAP_ROW_SIZE_TO_BUTTON_SIZE[size]}
+                data-test-id={CHIP_CHOICE_ROW_IDS.addButton}
+              />
+            </MobileDroplist>
+          </MobileTooltip>
+        )}
+
+        {showClearButton && (
+          <ButtonFunction
+            onClick={handleFiltersClear}
+            label={t('clear')}
+            icon={<CrossSVG />}
+            iconPosition='before'
+            size={MAP_ROW_SIZE_TO_BUTTON_SIZE[size]}
+            data-test-id={CHIP_CHOICE_ROW_IDS.clearButton}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/MobileChipChoiceRow/components/ForwardedChipChoice.tsx

@@ -0,0 +1,10 @@
+import { JSXElementConstructor } from 'react';
+
+import { ChipChoiceProps } from '../types';
+import { MAP_CHIP_TYPE_TO_COMPONENT } from './constants';
+
+export function ForwardedChipChoice(props: ChipChoiceProps) {
+  const Component = MAP_CHIP_TYPE_TO_COMPONENT[props.type] as unknown as JSXElementConstructor<ChipChoiceProps>;
+
+  return <Component {...props} />;
+}

package/src/components/MobileChipChoiceRow/components/constants.ts

@@ -0,0 +1,12 @@
+import { MobileChipChoice } from '../../MobileChipChoice';
+import { CHIP_CHOICE_TYPE } from '../../MobileChipChoice/constants';
+
+export const MAP_CHIP_TYPE_TO_COMPONENT = {
+  [CHIP_CHOICE_TYPE.Single]: MobileChipChoice.Single,
+  [CHIP_CHOICE_TYPE.Multiple]: MobileChipChoice.Multiple,
+  [CHIP_CHOICE_TYPE.Date]: MobileChipChoice.Date,
+  [CHIP_CHOICE_TYPE.DateTime]: MobileChipChoice.Date,
+  [CHIP_CHOICE_TYPE.DateRange]: MobileChipChoice.DateRange,
+  [CHIP_CHOICE_TYPE.Time]: MobileChipChoice.Time,
+  [CHIP_CHOICE_TYPE.Custom]: MobileChipChoice.Custom,
+};

package/src/components/MobileChipChoiceRow/components/index.ts

@@ -0,0 +1 @@
+export * from './ForwardedChipChoice';

package/src/components/MobileChipChoiceRow/constants.ts

@@ -0,0 +1,21 @@
+import { ButtonFunctionProps } from '@snack-uikit/button';
+
+import { SIZE } from '../../constants';
+
+export const CHIP_CHOICE_ROW_SIZE = {
+  Xs: 'xs',
+  S: 's',
+  M: 'm',
+} as const;
+
+export const MAP_ROW_SIZE_TO_CHOICE_SIZE = {
+  [CHIP_CHOICE_ROW_SIZE.Xs]: SIZE.Xs,
+  [CHIP_CHOICE_ROW_SIZE.S]: SIZE.S,
+  [CHIP_CHOICE_ROW_SIZE.M]: SIZE.M,
+};
+
+export const MAP_ROW_SIZE_TO_BUTTON_SIZE: Record<string, ButtonFunctionProps['size']> = {
+  [CHIP_CHOICE_ROW_SIZE.Xs]: 'xs',
+  [CHIP_CHOICE_ROW_SIZE.S]: 's',
+  [CHIP_CHOICE_ROW_SIZE.M]: 'm',
+};

package/src/components/MobileChipChoiceRow/index.ts

@@ -0,0 +1,2 @@
+export * from './MobileChipChoiceRow';
+export { hasFilterBeenApplied } from '@snack-uikit/chips';

package/src/components/MobileChipChoiceRow/styles.module.scss

@@ -0,0 +1,32 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-chips-chipChoice' as chips;
+
+.chipChoiceRow {
+  display: flex;
+  flex-wrap: wrap;
+
+  @include chips.composite-var(chips.$chip-choice-row-container);
+}
+
+.pinnedItems {
+  @include chips.composite-var(chips.$chip-choice-row-pinned);
+
+  display: flex;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.controlWrapper {
+  @include chips.composite-var(chips.$chip-choice-row-control-wrapper);
+
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.divider {
+  align-self: stretch;
+  height: auto;
+}
+
+.addButtonWrapper {
+  display: inline-flex;
+}

package/src/components/MobileChipChoiceRow/types.ts

@@ -0,0 +1,60 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import {
+  MobileChipChoiceCustomProps,
+  MobileChipChoiceDateProps,
+  MobileChipChoiceDateRangeProps,
+  MobileChipChoiceTimeProps,
+} from '../MobileChipChoice/components';
+import { CHIP_CHOICE_TYPE } from '../MobileChipChoice/constants';
+import { MobileChipChoiceMultipleProps, MobileChipChoiceSingleProps } from '../MobileChipChoice/types';
+import { CHIP_CHOICE_ROW_SIZE } from './constants';
+
+export type ChipChoiceRowSize = ValueOf<typeof CHIP_CHOICE_ROW_SIZE>;
+
+type ChipChoiceMultipleType = {
+  type: typeof CHIP_CHOICE_TYPE.Multiple;
+} & MobileChipChoiceMultipleProps;
+
+type ChipChoiceSingleType = {
+  type: typeof CHIP_CHOICE_TYPE.Single;
+} & MobileChipChoiceSingleProps;
+
+type ChipChoiceDateType = {
+  type: typeof CHIP_CHOICE_TYPE.Date;
+} & MobileChipChoiceDateProps;
+
+type ChipChoiceDateTimeType = {
+  type: typeof CHIP_CHOICE_TYPE.DateTime;
+} & Omit<MobileChipChoiceDateProps, 'mode'> & { mode: 'date-time'; showSeconds?: boolean };
+
+type ChipChoiceDateRangeType = {
+  type: typeof CHIP_CHOICE_TYPE.DateRange;
+} & MobileChipChoiceDateRangeProps;
+
+type ChipChoiceTimeType = {
+  type: typeof CHIP_CHOICE_TYPE.Time;
+} & MobileChipChoiceTimeProps;
+
+type ChipChoiceCustomType = {
+  type: typeof CHIP_CHOICE_TYPE.Custom;
+} & MobileChipChoiceCustomProps;
+
+export type ChipChoiceProps = {
+  id: string;
+} & (
+  | ChipChoiceMultipleType
+  | ChipChoiceSingleType
+  | ChipChoiceDateType
+  | ChipChoiceDateTimeType
+  | ChipChoiceDateRangeType
+  | ChipChoiceTimeType
+  | ChipChoiceCustomType
+);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type OmitBetter<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export type FilterValue = Parameters<ChipChoiceProps['onChange']>[number];

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './AdaptiveChips';
+export * from './MobileChipChoice';
+export * from './MobileChipChoiceRow';

package/src/constants.ts

@@ -0,0 +1,50 @@
+export const SIZE = {
+  Xs: 'xs',
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
+
+export const BUTTON_SIZE = {
+  Xxs: 'xxs',
+  Xs: 'xs',
+} as const;
+
+export const VARIANT = {
+  LabelOnly: 'label-only',
+  IconBefore: 'icon-before',
+} as const;
+
+export const CHIP_ASSIST_TEST_IDS = {
+  icon: 'chip-assist__icon',
+  spinner: 'chip-assist__spinner',
+  label: 'chip-assist__label',
+};
+
+export const CHIP_CHOICE_TEST_IDS = {
+  icon: 'chip-choice__icon',
+  label: 'chip-choice__label',
+  spinner: 'chip-choice__spinner',
+  value: 'chip-choice__value',
+  clearButton: 'chip-choice__clear-button',
+  droplist: 'chip-choice__droplist',
+  footer: 'chip-choice__footer',
+  cancelButton: 'chip-choice__cancel-button',
+  approveButton: 'chip-choice__approve-button',
+};
+
+export const CHIP_CHOICE_ROW_IDS = {
+  clearButton: 'chip-choice-row__clear-button',
+  addButton: 'chip-choice-row__add-button',
+  addButtonTooltip: 'chip-choice-row__add-button-tooltip',
+  addButtonOption: 'chip-choice-row__add-button-option',
+};
+
+export const CHIP_TOGGLE_TEST_IDS = {
+  input: 'chip-toggle__input',
+  icon: 'chip-toggle__icon',
+  spinner: 'chip-toggle__spinner',
+  label: 'chip-toggle__label',
+};
+
+export const DEFAULT_EMPTY_VALUE = '—';

package/src/helperComponents/ButtonClearValue/ButtonClearValue.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, KeyboardEventHandler, MouseEventHandler } from 'react';
+
+import { CrossSVG } from '@cloud-ru/uikit-product-icons';
+
+import { BUTTON_SIZE } from '../../constants';
+import { ButtonSize } from '../../types';
+import styles from './styles.module.scss';
+
+type ButtonClearValueProps = {
+  size: ButtonSize;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  tabIndex?: number;
+  'data-test-id'?: string;
+};
+
+export const ButtonClearValue = forwardRef<HTMLButtonElement, ButtonClearValueProps>(
+  ({ size, onClick, tabIndex = -1, onKeyDown, 'data-test-id': dataTestId }, ref) => {
+    const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
+      event.stopPropagation();
+      onClick(event);
+    };
+
+    return (
+      <button
+        className={styles.buttonClearValue}
+        data-size={size}
+        onClick={handleClick}
+        data-test-id={dataTestId}
+        type='button'
+        ref={ref}
+        onKeyDown={onKeyDown}
+        tabIndex={tabIndex}
+      >
+        {size === BUTTON_SIZE.Xxs && <CrossSVG size={16} />}
+        {size === BUTTON_SIZE.Xs && <CrossSVG />}
+      </button>
+    );
+  },
+);

package/src/helperComponents/ButtonClearValue/index.ts

@@ -0,0 +1 @@
+export * from './ButtonClearValue';

package/src/helperComponents/ButtonClearValue/styles.module.scss

@@ -0,0 +1,50 @@
+@use "@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element";
+@use "@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-chips-chipChoice";
+
+$sizes: 'xxs', 'xs';
+$icon-sizes: (
+  'xxs': styles-tokens-element.$icon-xs,
+  'xs': styles-tokens-element.$icon-s
+);
+
+.buttonClearValue {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  margin: 0;
+  padding: 0;
+
+  color: styles-tokens-chips-chipChoice.$sys-neutral-text-light;
+
+  background-color: transparent;
+  border: none;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include styles-tokens-chips-chipChoice.composite-var(styles-tokens-chips-chipChoice.$chip-choice, 'button-clear-value', $size);
+
+      svg {
+        width: styles-tokens-chips-chipChoice.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: styles-tokens-chips-chipChoice.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    color: styles-tokens-chips-chipChoice.$sys-neutral-text-support;
+  }
+
+  &:focus-visible {
+    @include styles-tokens-chips-chipChoice.outline-var(styles-tokens-element.$container-focused-s);
+
+    color: styles-tokens-chips-chipChoice.$sys-neutral-text-support;
+    outline-color: styles-tokens-chips-chipChoice.$sys-available-complementary;
+    outline-offset: styles-tokens-chips-chipChoice.$spacing-state-focus-offset;
+  }
+
+  &:active {
+    color: styles-tokens-chips-chipChoice.$sys-neutral-text-main;
+  }
+}

package/src/helperComponents/ItemContent/ItemContent.tsx

@@ -0,0 +1,37 @@
+import cn from 'classnames';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type ItemContentProps = WithSupportProps<{
+  option: string | number;
+  caption?: string;
+  description?: string;
+  disabled?: boolean;
+  className?: string;
+}>;
+
+export function ItemContent({ caption, description, option, className, disabled, ...rest }: ItemContentProps) {
+  return (
+    <div
+      className={cn(styles.content, className)}
+      {...extractSupportProps(rest)}
+      data-size='l'
+      data-disabled={disabled || undefined}
+    >
+      <div className={styles.headline}>
+        <div className={styles.label} data-test-id='list__base-item-option'>
+          {option}
+        </div>
+        {caption && <span className={styles.caption}>{caption}</span>}
+      </div>
+
+      {description && (
+        <div className={styles.description} data-test-id='list__base-item-description'>
+          {description}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/helperComponents/ItemContent/index.ts

@@ -0,0 +1 @@
+export * from './ItemContent';