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

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;