refactor(components): replace Meta component with MetaList

It removes items complexity by allowing consumers to use any label/value
association. Translations should also be defined by the consumer.
Each item can now be configured separately (borders, layout...).

1 files changed, 90 insertions, 0 deletions

diff --git a/src/components/molecules/meta-list/meta-item/meta-item.tsx b/src/components/molecules/meta-list/meta-item/meta-item.tsx
new file mode 100644
index 0000000..c5223c2
--- /dev/null
+++ b/src/components/molecules/meta-list/meta-item/meta-item.tsx
@@ -0,0 +1,90 @@
+import {
+  type ForwardRefRenderFunction,
+  type ReactElement,
+  type ReactNode,
+  forwardRef,
+} from 'react';
+import { Description, Group, type GroupProps, Term } from '../../../atoms';
+import styles from './meta-item.module.scss';
+
+export type MetaValue = string | ReactElement;
+
+export type MetaValues = {
+  id: string;
+  value: MetaValue;
+};
+
+export type MetaItemProps = Omit<GroupProps, 'children' | 'spacing'> & {
+  /**
+   * Should the values be bordered?
+   *
+   * @default false
+   */
+  hasBorderedValues?: boolean;
+  /**
+   * Should the values be inlined?
+   *
+   * @warning If you use it make sure the value is larger than the label. It
+   * could mess up your design since we are removing the label width.
+   *
+   * @default false
+   */
+  hasInlinedValues?: boolean;
+  /**
+   * Should the label and values be centered?
+   *
+   * @default false
+   */
+  isCentered?: boolean;
+  /**
+   * The item label.
+   */
+  label: ReactNode;
+  /**
+   * The item value or values.
+   */
+  value: MetaValue | MetaValues[];
+};
+
+const MetaItemWithRef: ForwardRefRenderFunction<
+  HTMLDivElement,
+  MetaItemProps
+> = (
+  {
+    className = '',
+    hasBorderedValues = false,
+    hasInlinedValues = false,
+    isCentered = false,
+    isInline = false,
+    label,
+    value,
+    ...props
+  },
+  ref
+) => {
+  const itemClass = [
+    styles.item,
+    styles[hasBorderedValues ? 'item--bordered-values' : ''],
+    styles[hasInlinedValues ? 'item--inlined-values' : ''],
+    styles[isCentered ? 'item--centered' : ''],
+    styles[isInline ? 'item--inlined' : 'item--stacked'],
+    className,
+  ].join(' ');
+
+  return (
+    <Group {...props} className={itemClass} isInline={isInline} ref={ref}>
+      <Term className={styles.label}>{label}</Term>
+      {Array.isArray(value) ? (
+        value.map((item) => (
+          <Description className={styles.value} key={item.id}>
+            {item.value}
+          </Description>
+        ))
+      ) : (
+        <Description className={styles.value}>{value}</Description>
+      )}
+    </Group>
+  );
+};
+
+export const MetaItem = forwardRef(MetaItemWithRef);