chore: Update Icon component (#18)

* Create Icon component and organize stories folder

* Remove args from story to reduce recursion error

* Remove argTypes due to recursion issue

* Typesafe icon component color prop and svg fill

* Use new Truss font rule generation

* Handle rebase

* Resolve Fragment issue

* Change order of .babel presets to resolve <> issue

* Update misc icons in Storybook

.gitignore

@@ -7,3 +7,5 @@ dist
 .vscode/
 .idea/
 .eslintcache
+
+dist

package.json

@@ -16,7 +16,7 @@
     "node": "14.8.0"
   },
   "scripts": {
-    "start": "storybook",
+    "start": "yarn storybook",
     "build": "tsc",
     "build:truss": "cd ./truss && npm run generate",
     "watch:truss": "cd ./truss && watch 'npm run generate' ./",
@@ -31,7 +31,8 @@
     "react": ">=16"
   },
   "dependencies": {
-    "@emotion/react": "^11.1.5"
+    "@emotion/react": "^11.1.5",
+    "@react-types/shared": "^3.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",
@@ -62,6 +63,7 @@
     "husky": "^5.1.1",
     "jest": "^26.6.3",
     "prettier": "^2.2.1",
+    "prettier-plugin-organize-imports": "^1.1.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "semantic-release": "^17.4.0",

src/components/Icon.stories.tsx

@@ -0,0 +1,101 @@
+import { Meta } from "@storybook/react";
+import { Css, Icon as IconComponent, IconProps } from "src/";
+
+export default {
+  title: "Components/Icon",
+  component: IconComponent,
+} as Meta<IconProps>;
+
+export const Icon = () => {
+  const actionIcons: IconProps["icon"][] = [
+    "x",
+    "loader",
+    "linkExternal",
+    "upload",
+    "download",
+    "checkboxChecked",
+    "checkbox",
+    "check",
+    "search",
+    "comment",
+    "plus",
+    "pencil",
+    "cloudUpload",
+    "toggleOn",
+    "trash",
+  ];
+  const alertIcons: IconProps["icon"][] = ["errorCircle", "checkCircle", "infoCircle", "helpCircle", "error"];
+  const arrowIcons: IconProps["icon"][] = [
+    "chevronsDown",
+    "chevronsRight",
+    "sortUp",
+    "sortDown",
+    "chevronDown",
+    "chevronUp",
+    "chevronLeft",
+    "chevronRight",
+    "arrowBack",
+  ];
+  const mediaIcons: IconProps["icon"][] = ["camera", "fileBlank", "folder", "image", "file", "images"];
+  const miscIcons: IconProps["icon"][] = ["dollar", "userCircle", "calendar"];
+  const navigationIcons: IconProps["icon"][] = ["projects", "tasks", "finances", "templates", "tradePartners"];
+
+  return (
+    <>
+      <h1 css={Css.xl2Em.$}>Actions</h1>
+      <ul css={{ gap: 24, listStyle: "none", gridTemplateColumns: "repeat(5, 1fr)", ...Css.dg.p0.$ }}>
+        {actionIcons.map((icon, i) => (
+          <li css={{ gap: 8, ...Css.xsEm.df.itemsCenter.flexColumn.$ }} key={icon}>
+            <IconComponent icon={icon} data-testid={icon} id={icon} />
+            {icon}
+          </li>
+        ))}
+      </ul>
+      <h1 css={Css.xl2Em.$}>Alerts</h1>
+      <ul css={{ gap: 24, listStyle: "none", gridTemplateColumns: "repeat(5, 1fr)", ...Css.dg.p0.$ }}>
+        {alertIcons.map((icon, i) => (
+          <li css={{ gap: 8, ...Css.xsEm.df.itemsCenter.flexColumn.$ }} key={icon}>
+            <IconComponent icon={icon} data-testid={icon} id={icon} />
+            {icon}
+          </li>
+        ))}
+      </ul>
+      <h1 css={Css.xl2Em.$}>Arrows</h1>
+      <ul css={{ gap: 24, listStyle: "none", gridTemplateColumns: "repeat(4, 1fr)", ...Css.dg.p0.$ }}>
+        {arrowIcons.map((icon, i) => (
+          <li css={{ gap: 8, ...Css.xsEm.df.itemsCenter.flexColumn.$ }} key={icon}>
+            <IconComponent icon={icon} data-testid={icon} id={icon} />
+            {icon}
+          </li>
+        ))}
+      </ul>
+      <h1 css={Css.xl2Em.$}>Media</h1>
+      <ul css={{ gap: 24, listStyle: "none", gridTemplateColumns: "repeat(4, 1fr)", ...Css.dg.p0.$ }}>
+        {mediaIcons.map((icon, i) => (
+          <li css={{ gap: 8, ...Css.xsEm.df.itemsCenter.flexColumn.$ }} key={icon}>
+            <IconComponent icon={icon} data-testid={icon} id={icon} />
+            {icon}
+          </li>
+        ))}
+      </ul>
+      <h1 css={Css.xl2Em.$}>Misc</h1>
+      <ul css={{ gap: 24, listStyle: "none", gridTemplateColumns: "repeat(4, 1fr)", ...Css.dg.p0.$ }}>
+        {miscIcons.map((icon, i) => (
+          <li css={{ gap: 8, ...Css.xsEm.df.itemsCenter.flexColumn.$ }} key={icon}>
+            <IconComponent icon={icon} data-testid={icon} id={icon} />
+            {icon}
+          </li>
+        ))}
+      </ul>
+      <h1 css={Css.xl2Em.$}>Navigation</h1>
+      <ul css={{ gap: 24, listStyle: "none", gridTemplateColumns: "repeat(4, 1fr)", ...Css.dg.p0.$ }}>
+        {navigationIcons.map((icon, i) => (
+          <li css={{ gap: 8, ...Css.xsEm.df.itemsCenter.flexColumn.$ }} key={icon}>
+            <IconComponent icon={icon} data-testid={icon} id={icon} />
+            {icon}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};

src/components/Icon.test.tsx

@@ -0,0 +1,10 @@
+import * as ReactDOM from 'react-dom';
+import { Icon } from 'src/';
+
+describe('Icon', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Icon icon="x" />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});