aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/lists/description-list.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/atoms/lists/description-list.tsx')
-rw-r--r--src/components/atoms/lists/description-list.tsx103
1 files changed, 0 insertions, 103 deletions
diff --git a/src/components/atoms/lists/description-list.tsx b/src/components/atoms/lists/description-list.tsx
deleted file mode 100644
index d97e505..0000000
--- a/src/components/atoms/lists/description-list.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { FC, HTMLAttributes } from 'react';
-import {
- DescriptionListGroup,
- type DescriptionListGroupProps,
-} from './description-list-group';
-import styles from './description-list.module.scss';
-
-export type DescriptionListItem = {
- /**
- * The item id.
- */
- id: string;
- /**
- * The list item layout.
- */
- layout?: DescriptionListGroupProps['layout'];
- /**
- * A list label.
- */
- label: DescriptionListGroupProps['label'];
- /**
- * An array of values for the list item.
- */
- value: DescriptionListGroupProps['value'];
-};
-
-export type DescriptionListProps = Omit<
- HTMLAttributes<HTMLDListElement>,
- 'children'
-> & {
- /**
- * Set additional classnames to the `dt`/`dd` couple wrapper.
- */
- groupClassName?: string;
- /**
- * The list items.
- */
- items: DescriptionListItem[];
- /**
- * Set additional classnames to the `dt` element.
- */
- labelClassName?: string;
- /**
- * The list layout. Default: column.
- */
- layout?: 'inline' | 'column';
- /**
- * Set additional classnames to the `dd` element.
- */
- valueClassName?: string;
- /**
- * If true, use a slash to delimitate multiple values.
- */
- withSeparator?: DescriptionListGroupProps['withSeparator'];
-};
-
-/**
- * DescriptionList component
- *
- * Render a description list.
- */
-export const DescriptionList: FC<DescriptionListProps> = ({
- className = '',
- groupClassName = '',
- items,
- labelClassName = '',
- layout = 'column',
- valueClassName = '',
- withSeparator,
- ...props
-}) => {
- const layoutModifier = `list--${layout}`;
- const listClass = `${styles.list} ${styles[layoutModifier]} ${className}`;
-
- /**
- * Retrieve the description list items.
- *
- * @param {DescriptionListGroup[]} listItems - An array of items.
- * @returns {JSX.Element[]} The description list items.
- */
- const getItems = (listItems: DescriptionListItem[]): JSX.Element[] => {
- return listItems.map(({ id, layout: itemLayout, label, value }) => {
- return (
- <DescriptionListGroup
- key={id}
- label={label}
- value={value}
- layout={itemLayout}
- className={groupClassName}
- descriptionClassName={valueClassName}
- termClassName={labelClassName}
- withSeparator={withSeparator}
- />
- );
- });
- };
-
- return (
- <dl {...props} className={listClass}>
- {getItems(items)}
- </dl>
- );
-};