From 36890cfafeba6e30782df1260d7f9e678c7da4bf Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 2 Oct 2023 17:01:57 +0200
Subject: refactor(components): rewrite DescriptionList component

* add a `spacing` prop
* replace `layout` prop with `isInline` prop
* remove `items` prop (and classNames props) in favor of new components:
Description, Group, Term
* remove `withSeparator` prop (CSS content is announced by screen readers
and Firefox/Safari have no support for alternative text so the consumer
should add itself an element with `aria-hidden` if it need a separator)

Be aware, Meta component and its consumers can be visually broken, they
should be refactored before using them in production.
---
 src/styles/abstracts/placeholders/_lists.scss | 30 +++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

(limited to 'src/styles/abstracts')

diff --git a/src/styles/abstracts/placeholders/_lists.scss b/src/styles/abstracts/placeholders/_lists.scss
index 8a6b1d9..780fd21 100644
--- a/src/styles/abstracts/placeholders/_lists.scss
+++ b/src/styles/abstracts/placeholders/_lists.scss
@@ -37,12 +37,16 @@
   }
 }
 
+%flex-list {
+  display: flex;
+  gap: var(--itemSpacing, 0);
+}
+
 %inline-list {
   @extend %reset-list;
+  @extend %flex-list;
 
-  display: flex;
   flex-flow: row wrap;
-  gap: var(--itemSpacing, 0);
   list-style-position: inside;
 }
 
@@ -51,3 +55,25 @@
     margin-block-end: var(--itemSpacing);
   }
 }
+
+%inline-description-list {
+  @extend %flex-list;
+
+  flex-flow: row wrap;
+}
+
+%stack-description-list {
+  @extend %flex-list;
+
+  flex-flow: column wrap;
+}
+
+%term {
+  color: var(--color-fg-light);
+  font-weight: 600;
+}
+
+%description {
+  margin: 0;
+  word-break: break-all;
+}
-- 
cgit v1.2.3