blob: 9505d014c52960feb3f2a7b67226ce1132f36180 (
plain)
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
|
import { FC, ReactNode, useId } from 'react';
import styles from './description-list-item.module.scss';
export type ItemLayout = 'inline' | 'inline-values' | 'stacked';
export type DescriptionListItemProps = {
/**
* Set additional classnames to the list item wrapper.
*/
className?: string;
/**
* Set additional classnames to the list item description.
*/
descriptionClassName?: string;
/**
* The item label.
*/
label: string;
/**
* The item layout.
*/
layout?: ItemLayout;
/**
* Set additional classnames to the list item term.
*/
termClassName?: string;
/**
* The item value.
*/
value: ReactNode | ReactNode[];
/**
* If true, use a slash to delimitate multiple values.
*/
withSeparator?: boolean;
};
/**
* DescriptionListItem component
*
* Render a couple of dt/dd wrapped in a div.
*/
const DescriptionListItem: FC<DescriptionListItemProps> = ({
className = '',
descriptionClassName = '',
label,
termClassName = '',
value,
layout = 'stacked',
withSeparator = false,
}) => {
const id = useId();
const layoutStyles = styles[`wrapper--${layout}`];
const separatorStyles = withSeparator ? styles['wrapper--has-separator'] : '';
const itemValues = Array.isArray(value) ? value : [value];
return (
<div
className={`${styles.wrapper} ${layoutStyles} ${separatorStyles} ${className}`}
>
<dt className={`${styles.term} ${termClassName}`}>{label}</dt>
{itemValues.map((currentValue, index) => (
<dd
key={`${id}-${index}`}
className={`${styles.description} ${descriptionClassName}`}
>
{currentValue}
</dd>
))}
</div>
);
};
export default DescriptionListItem;
|
