feat: adding section for selected icons from icon library (#1589)

telekom · Mar 16, 2023 · eb5f8a8 · eb5f8a8
1 parent 77a42bc
commit eb5f8a8
Showing 1 changed file with 38 additions and 1 deletion.
diff --git a/packages/storybook-vue/stories/components/icon/Icon.stories.mdx b/packages/storybook-vue/stories/components/icon/Icon.stories.mdx
@@ -209,7 +209,44 @@ When using the `name` attribute, the component assumes there is an object with a
         >
           {category.items.map((item) => {
             let markup = () => ({
-              __html: `<scale-icon-${category.category}-${item} accessibility-title="${item}" />`,
+              __html: `<scale-icon-${category.category}-${item} accessibility-title="${item}"/>`,
+            });
+            return (
+              <div key={item}>
+                <span>
+                  <span style={{ color: '#7C7C7C' }}>{category.category}-</span>
+                  {item}
+                </span>
+                <Canvas mdxSource={markup().__html}>
+                  <span dangerouslySetInnerHTML={markup()}></span>
+                </Canvas>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  })}
+</div>
+
+### Full list of selected, grouped by category
+
+<div style={{ marginTop: 16 }}>
+  {index.map((category) => {
+    return (
+      <div key={category.category}>
+        <h4>{category.label}</h4>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
+            gap: 16,
+            marginTop: 32,
+          }}
+        >
+          {category.items.map((item) => {
+            let markup = () => ({
+              __html: `<scale-icon-${category.category}-${item} accessibility-title="${item}" selected/>`,
             });
             return (
               <div key={item}>