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.

1 files changed, 4 insertions, 11 deletions

diff --git a/src/styles/pages/partials/_article-lists.scss b/src/styles/pages/partials/_article-lists.scss
index e872d3c..562ee70 100644
--- a/src/styles/pages/partials/_article-lists.scss
+++ b/src/styles/pages/partials/_article-lists.scss
@@ -13,24 +13,17 @@
   }
 
   dl {
-    display: flex;
-    flex-flow: row wrap;
-    gap: var(--spacing-2xs);
+    @extend %inline-description-list;
+
     width: fit-content;
     margin: var(--spacing-sm) 0;
-
-    & & {
-      margin: var(--spacing-2xs) 0 0;
-    }
   }
 
   dt {
-    color: var(--color-fg-light);
-    font-weight: 600;
+    @extend %term;
   }
 
   dd {
-    margin: 0;
-    word-break: break-all;
+    @extend %description;
   }
 }