aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/lists/description-list-item.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/atoms/lists/description-list-item.tsx')
-rw-r--r--src/components/atoms/lists/description-list-item.tsx73
1 files changed, 0 insertions, 73 deletions
diff --git a/src/components/atoms/lists/description-list-item.tsx b/src/components/atoms/lists/description-list-item.tsx
deleted file mode 100644
index 9505d01..0000000
--- a/src/components/atoms/lists/description-list-item.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-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;