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, 24 insertions, 0 deletions

diff --git a/src/components/molecules/meta-list/meta-list.module.scss b/src/components/molecules/meta-list/meta-list.module.scss
new file mode 100644
index 0000000..5570f4c
--- /dev/null
+++ b/src/components/molecules/meta-list/meta-list.module.scss
@@ -0,0 +1,24 @@
+.list {
+  display: grid;
+  width: fit-content;
+  height: fit-content;
+
+  &--centered {
+    margin-inline: auto;
+    justify-items: center;
+  }
+
+  &--inlined {
+    grid-auto-flow: column;
+    grid-template-columns: repeat(
+      auto-fit,
+      min(calc(100vw - (var(--spacing-md) * 2)), 1fr)
+    );
+    column-gap: clamp(var(--spacing-lg), 3vw, var(--spacing-3xl));
+    row-gap: clamp(var(--spacing-sm), 3vw, var(--spacing-md));
+  }
+
+  &--stacked {
+    gap: var(--spacing-2xs);
+  }
+}