# All files / src/components decorated-list-item.tsx

100% Statements 2/2
83.33% Branches 5/6
100% Functions 1/1
100% Lines 2/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77

    10x

    16x

     import {
      type FC,
      type PropsWithChildren,
      type ReactElement,
      type ReactNode,
    } from 'react';
    import cn from 'classnames';

    import '../styles/components/decorated-list-item.scss';

    type Props = {
      /**
       * Title
       */
      title?: ReactNode;
      /**
       * Make this item visually stand-out
       */
      highlight?: boolean;
      /**
       * Target/link of the list item when clicking on it
       */
      link?: ReactElement<{ [key: string]: unknown }>;
      /**
       * Compact style
       */
      compact?: boolean;
      /**
       * Hide the title
       */
      hideTitle?: boolean;
      /**
       * Attempts to keep the element horizontally aligned with its siblings
       */
      inline?: boolean;
      /**
       * Optional CSS classnames to be passed down from the parent component
       */
      className?: string;
      /**
       * Switches to an alternative style for the decorative line
       */
      altStyle?: boolean;
    };

    const DecoratedListItem: FC<PropsWithChildren<Props>> = ({
      title,
      children,
      link,
      highlight,
      compact,
      hideTitle,
      inline,
      className,
      altStyle,
      ...props
    }) => (
      <div
        className={cn(className, 'decorated-list-item', {
          'decorated-list-item--compact': compact,
          'decorated-list-item--no-title': hideTitle,
          'decorated-list-item--inline': inline,
          'decorated-list-item--alt-style': altStyle,
          'decorated-list-item--has-link': link,
        })}
        {...props}
      >
        {link && <link.type {...link.props} aria-hidden="true" tabIndex={-1} />}
        {title && <div className="decorated-list-item__title tiny">{title}</div>}
        <div className="decorated-list-item__content">
          {highlight ? <strong>{children}</strong> : children}
        </div>
      </div>
    );

    export default DecoratedListItem;