docs(icons): add all icons storybook

lunit-io · Feb 27, 2024 · 161d6b5 · 161d6b5
1 parent b6a770e
commit 161d6b5
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 35 deletions.
diff --git a/packages/design-system-icons/src/stories/Icons.mdx b/packages/design-system-icons/src/stories/Icons.mdx
@@ -1,9 +1,4 @@
 import { Canvas, Meta, Primary, Controls } from "@storybook/blocks";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableRow from "@mui/material/TableRow";
-import Typography from "@mui/material/Typography";
 import * as Icons from "../..";
 import * as IconStories from "./Icons.stories";
 
@@ -73,36 +68,7 @@ The `outlined` is default if not set.
 
 ## Icons
 
-<Table size="small" sx={{ maxWidth: 480, color: "text.primary" }}>
-  <TableBody>
-    {Object.keys(Icons).map((key) => {
-      const Icon = Icons[key];
-      return (
-        <TableRow key={key}>
-          <TableCell>
-            <Typography>{key}</Typography>
-          </TableCell>
-          <TableCell>
-            {Icon.variants
-              .sort((a, b) => {
-                if (a === "outlined") return -1;
-                else if (b === "outlined") return 1;
-                return 0;
-              })
-              .map((variant) => (
-                <span
-                  key={Icon.displayName + variant}
-                  title={`${Icon.displayName} ${variant}`}
-                >
-                  <Icon variant={variant} />
-                </span>
-              ))}
-          </TableCell>
-        </TableRow>
-      );
-    })}
-  </TableBody>
-</Table>
+<Canvas of={IconStories.AllIcons} sourceState="none" />
 
 If the icon for the design system doesn't exist, let us know by opening an issue.
 

diff --git a/packages/design-system-icons/src/stories/Icons.stories.tsx b/packages/design-system-icons/src/stories/Icons.stories.tsx
@@ -1,3 +1,8 @@
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
 import { pink } from "@mui/material/colors";
 import * as Icons from "../..";
 
@@ -85,3 +90,38 @@ export const Size = {
     </>
   ),
 };
+
+export const AllIcons = {
+  render: () => (
+    <Table size="small" sx={{ maxWidth: 480, color: "text.primary" }}>
+      <TableBody>
+        {Object.keys(Icons).map((key) => {
+          const Icon = Icons[key as keyof typeof Icons];
+          return (
+            <TableRow key={key}>
+              <TableCell>
+                <Typography>{key}</Typography>
+              </TableCell>
+              <TableCell>
+                {Icon.variants
+                  .sort((a, b) => {
+                    if (a === "outlined") return -1;
+                    else if (b === "outlined") return 1;
+                    return 0;
+                  })
+                  .map((variant) => (
+                    <span
+                      key={Icon.displayName + variant}
+                      title={`${Icon.displayName} ${variant}`}
+                    >
+                      <Icon variant={variant} />
+                    </span>
+                  ))}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  ),
+};