Feat/story system icons (#2123)

kadena-community · May 13, 2024 · 864329d · 864329d
1 parent 2c4c1f7
commit 864329d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 28 deletions.
diff --git a/.changeset/loud-seals-kiss.md b/.changeset/loud-seals-kiss.md
@@ -0,0 +1,5 @@
+---
+"@kadena/react-ui": patch
+---
+
+Adds story for new System icons
diff --git a/packages/libs/react-ui/src/components/Icon/NewIcons.stories.tsx b/packages/libs/react-ui/src/components/Icon/NewIcons.stories.tsx
@@ -1,13 +1,14 @@
 /* eslint-disable @kadena-dev/no-eslint-disable */
 /* eslint-disable @typescript-eslint/naming-convention */
-import * as BranchIcons from '@kadena/react-icons/brand';
-import * as ProductIcons from '@kadena/react-icons/product';
+import * as BrandIcons from '@kadena/react-icons/brand';
+import * as SystemIcons from '@kadena/react-icons/system';
 
 import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 import { useFilter } from 'react-aria';
 import { atoms, tokens } from '../../styles';
 import { TextField } from '../Form/TextField';
+import { Grid, GridItem } from '../Layout';
 
 const iconColors = {
   primary: tokens.kda.foundation.color.icon.brand.primary.default,
@@ -59,17 +60,13 @@ type Story = StoryObj<{
   fontSize: IconSize;
   fill: IconColor;
 }>;
-
-const product = Object.entries(ProductIcons);
-const brand = Object.entries(BranchIcons);
-
-export const Brand: Story = {
-  name: 'Brand',
+const system = Object.entries(SystemIcons);
+export const System: Story = {
+  name: 'New System Icons',
   args: {
-    fontSize: 'xxl',
     fill: 'base',
   },
-  render: ({ fontSize, fill }) => {
+  render: ({ fill }) => {
     const { contains } = useFilter({ sensitivity: 'base', usage: 'search' });
     const [search, setSearch] = useState('');
     return (
@@ -88,34 +85,38 @@ export const Brand: Story = {
             setSearch(e.target.value);
           }}
         />
-        <div
-          className={atoms({
-            display: 'flex',
-            flexWrap: 'wrap',
-            flex: 1,
-            gap: 'sm',
-          })}
+        <Grid
+          gap="xl"
+          columns={{
+            xs: 3,
+            sm: 3,
+            md: 4,
+            lg: 5,
+            xl: 5,
+            xxl: 6,
+          }}
         >
-          {brand
+          {system
             .filter(([key]) =>
               contains(key.toLowerCase(), search.toLowerCase()),
             )
             .map(([key, Icon]) => (
-              <Icon
-                key={key}
-                fontSize={icoSizes[fontSize]}
-                fill={iconColors[fill]}
-                title={key}
-              />
+              <>
+                <GridItem>
+                  <Icon key={key} fill={iconColors[fill]} title={key} />
+                  {key}
+                </GridItem>
+              </>
             ))}
-        </div>
+        </Grid>
       </div>
     );
   },
 };
 
-export const Product: Story = {
-  name: 'Product',
+const brand = Object.entries(BrandIcons);
+export const Brand: Story = {
+  name: 'Brand Icons',
   args: {
     fontSize: 'xxl',
     fill: 'base',
@@ -147,7 +148,7 @@ export const Product: Story = {
             gap: 'sm',
           })}
         >
-          {product
+          {brand
             .filter(([key]) =>
               contains(key.toLowerCase(), search.toLowerCase()),
             )