From c87c615b5866b8a8f361eeb0764bfdea85740e90 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 10 Oct 2023 19:37:51 +0200
Subject: 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...).
---
 .../molecules/meta-list/meta-list.stories.tsx      | 70 ++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/components/molecules/meta-list/meta-list.stories.tsx

(limited to 'src/components/molecules/meta-list/meta-list.stories.tsx')

diff --git a/src/components/molecules/meta-list/meta-list.stories.tsx b/src/components/molecules/meta-list/meta-list.stories.tsx
new file mode 100644
index 0000000..463ec96
--- /dev/null
+++ b/src/components/molecules/meta-list/meta-list.stories.tsx
@@ -0,0 +1,70 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Link } from '../../atoms';
+import { type MetaItemData, MetaList } from './meta-list';
+
+/**
+ * MetaList - Storybook Meta
+ */
+export default {
+  title: 'Molecules/MetaList',
+  component: MetaList,
+  argTypes: {
+    items: {
+      description: 'The meta items.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+  },
+} as ComponentMeta<typeof MetaList>;
+
+const Template: ComponentStory<typeof MetaList> = (args) => (
+  <MetaList {...args} />
+);
+
+const items: MetaItemData[] = [
+  { id: 'comments', label: 'Comments', value: 'No comments.' },
+  {
+    id: 'category',
+    label: 'Category',
+    value: <Link href="#cat1">Cat 1</Link>,
+  },
+  {
+    id: 'tags',
+    label: 'Tags',
+    value: [
+      { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> },
+      { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> },
+    ],
+  },
+  {
+    hasBorderedValues: true,
+    hasInlinedValues: true,
+    id: 'technologies',
+    label: 'Technologies',
+    value: [
+      { id: 'techno1', value: 'HTML' },
+      { id: 'techno2', value: 'CSS' },
+      { id: 'techno3', value: 'Javascript' },
+    ],
+  },
+];
+
+/**
+ * MetaList Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+  items,
+};
+
+/**
+ * MetaList Stories - Inlined
+ */
+export const Inlined = Template.bind({});
+Inlined.args = {
+  isInline: true,
+  items,
+};
-- 
cgit v1.2.3

 value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/www.armandphilippot.com/tree/?id=f861e6a269ba9f62700776d3cd13b644a9e836d4'>root</a>/<a href='/www.armandphilippot.com/tree/src?id=f861e6a269ba9f62700776d3cd13b644a9e836d4'>src</a>/<a href='/www.armandphilippot.com/tree/src/components?id=f861e6a269ba9f62700776d3cd13b644a9e836d4'>components</a>/<a href='/www.armandphilippot.com/tree/src/components/atoms?id=f861e6a269ba9f62700776d3cd13b644a9e836d4'>atoms</a>/<a href='/www.armandphilippot.com/tree/src/components/atoms/images?id=f861e6a269ba9f62700776d3cd13b644a9e836d4'>images</a>/<a href='/www.armandphilippot.com/tree/src/components/atoms/images/logo.tsx?id=f861e6a269ba9f62700776d3cd13b644a9e836d4'>logo.tsx</a></div><div class='content'>blob: 491539d4bcffeebaf1cc3c5bc95aa852bdf19b0b (<a href='/www.armandphilippot.com/plain/src/components/atoms/images/logo.tsx?id=f861e6a269ba9f62700776d3cd13b644a9e836d4'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
<a id='n11' href='#n11'>11</a>
<a id='n12' href='#n12'>12</a>
<a id='n13' href='#n13'>13</a>
<a id='n14' href='#n14'>14</a>
<a id='n15' href='#n15'>15</a>
<a id='n16' href='#n16'>16</a>
<a id='n17' href='#n17'>17</a>
<a id='n18' href='#n18'>18</a>
<a id='n19' href='#n19'>19</a>
<a id='n20' href='#n20'>20</a>
<a id='n21' href='#n21'>21</a>
<a id='n22' href='#n22'>22</a>
<a id='n23' href='#n23'>23</a>
<a id='n24' href='#n24'>24</a>
<a id='n25' href='#n25'>25</a>
<a id='n26' href='#n26'>26</a>
<a id='n27' href='#n27'>27</a>
<a id='n28' href='#n28'>28</a>
<a id='n29' href='#n29'>29</a>
<a id='n30' href='#n30'>30</a>
<a id='n31' href='#n31'>31</a>
<a id='n32' href='#n32'>32</a>
<a id='n33' href='#n33'>33</a>
<a id='n34' href='#n34'>34</a>
<a id='n35' href='#n35'>35</a>
<a id='n36' href='#n36'>36</a>
<a id='n37' href='#n37'>37</a>
<a id='n38' href='#n38'>38</a>
<a id='n39' href='#n39'>39</a>
<a id='n40' href='#n40'>40</a>
<a id='n41' href='#n41'>41</a>
<a id='n42' href='#n42'>42</a>
<a id='n43' href='#n43'>43</a>
<a id='n44' href='#n44'>44</a>
<a id='n45' href='#n45'>45</a>
</pre></td>
<td class='lines'><pre><code>