From 2cf39cad0de593a7979645b501b38e6999f1cf03 Mon Sep 17 00:00:00 2001
From: Rafael Youakeem <youakeem@gmail.com>
Date: Fri, 13 Sep 2024 17:04:08 +0200
Subject: [PATCH] Add DetailsList component

---
 .../components/DetailsList/DetailsList.css.ts | 22 ++++++++
 .../components/DetailsList/DetailsList.tsx    | 54 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 apps/store/src/components/DetailsList/DetailsList.css.ts
 create mode 100644 apps/store/src/components/DetailsList/DetailsList.tsx

diff --git a/apps/store/src/components/DetailsList/DetailsList.css.ts b/apps/store/src/components/DetailsList/DetailsList.css.ts
new file mode 100644
index 0000000000..a58a136b82
--- /dev/null
+++ b/apps/store/src/components/DetailsList/DetailsList.css.ts
@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css'
+import { tokens, xStack } from 'ui'
+
+export const detailsListRoot = style({
+  listStyle: 'none',
+  color: tokens.colors.textTranslucentSecondary,
+})
+
+export const detailsListItem = style([
+  xStack({ justifyContent: 'space-between' }),
+  {
+    fontSize: 'inherit',
+  },
+])
+
+export const detailsListLabel = style({
+  textAlign: 'start',
+})
+
+export const detailsListValue = style({
+  textAlign: 'end',
+})
diff --git a/apps/store/src/components/DetailsList/DetailsList.tsx b/apps/store/src/components/DetailsList/DetailsList.tsx
new file mode 100644
index 0000000000..424b559f44
--- /dev/null
+++ b/apps/store/src/components/DetailsList/DetailsList.tsx
@@ -0,0 +1,54 @@
+import clsx from 'clsx'
+import { type ComponentProps } from 'react'
+import { type FontSizeProps, sprinkles } from 'ui'
+import {
+  detailsListItem,
+  detailsListLabel,
+  detailsListRoot,
+  detailsListValue,
+} from './DetailsList.css'
+
+type RootProps = ComponentProps<'ul'> & {
+  size?: FontSizeProps
+}
+const DetailsListRoot = ({ size = 'xs', className, children, ...props }: RootProps) => {
+  return (
+    <ul className={clsx(detailsListRoot, sprinkles({ fontSize: size }), className)} {...props}>
+      {children}
+    </ul>
+  )
+}
+
+type ItemProps = ComponentProps<'li'>
+const DetailsListItem = ({ className, children, ...props }: ItemProps) => {
+  return (
+    <li className={clsx(className, detailsListItem)} {...props}>
+      {children}
+    </li>
+  )
+}
+
+type LabelProps = ComponentProps<'span'>
+const DetailsListLabel = ({ className, children, ...props }: LabelProps) => {
+  return (
+    <span className={clsx(className, detailsListLabel)} {...props}>
+      {children}
+    </span>
+  )
+}
+
+type ValueProps = ComponentProps<'span'>
+const DetailsListValue = ({ className, children, ...props }: ValueProps) => {
+  return (
+    <span className={clsx(className, detailsListValue)} {...props}>
+      {children}
+    </span>
+  )
+}
+
+export const DetailsList = {
+  Root: DetailsListRoot,
+  Item: DetailsListItem,
+  Label: DetailsListLabel,
+  Value: DetailsListValue,
+}