refactor(ui): Icons - use name constants for glyphs

relative-ci · Jan 3, 2021 · 925b95f · 925b95f
1 parent 41aab2d
commit 925b95f
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 47 deletions.
diff --git a/packages/ui/src/ui/icon/__snapshots__/icon.stories.storyshot b/packages/ui/src/ui/icon/__snapshots__/icon.stories.storyshot
@@ -13,56 +13,61 @@ exports[`Storyshots UI/Icon all 1`] = `
   <Icon
     as="span"
     className=""
-    glyph="branch"
-    key="branch"
+    glyph="arrow"
+    key="arrow"
   >
     <span
       className="root"
     >
-      <BranchIcon
+      <ArrowIcon
         className="icon"
         fill="currentColor"
-        viewBox="0 0 640 1024"
+        viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <svg
           className="icon"
           fill="currentColor"
-          viewBox="0 0 640 1024"
+          viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M512 192c-70.625 0-128 57.344-128 128 0 47.219 25.875 88.062 64 110.281V448s0 128-128 128c-53.062 0-94.656 11.375-128 28.812V302.281c38.156-22.219 64-63.062 64-110.281 0-70.656-57.344-128-128-128S0 121.344 0 192c0 47.219 25.844 88.062 64 110.281V721.75C25.844 743.938 0 784.75 0 832c0 70.625 57.344 128 128 128s128-57.375 128-128c0-33.5-13.188-63.75-34.25-86.625C240.375 722.5 270.656 704 320 704c254 0 256-256 256-256v-17.719c38.125-22.219 64-63.062 64-110.281 0-70.656-57.375-128-128-128zm-384-64c35.406 0 64 28.594 64 64s-28.594 64-64 64-64-28.594-64-64 28.594-64 64-64zm0 768c-35.406 0-64-28.625-64-64 0-35.312 28.594-64 64-64s64 28.688 64 64c0 35.375-28.594 64-64 64zm384-512c-35.375 0-64-28.594-64-64s28.625-64 64-64 64 28.594 64 64-28.625 64-64 64z"
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
           />
         </svg>
-      </BranchIcon>
+      </ArrowIcon>
     </span>
   </Icon>
   <Icon
     as="span"
     className=""
-    glyph="clock"
-    key="clock"
+    glyph="branch"
+    key="branch"
   >
     <span
       className="root"
     >
-      <ClockIcon
+      <BranchIcon
         className="icon"
         fill="currentColor"
-        viewBox="0 0 14 16"
+        viewBox="0 0 640 1024"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <svg
           className="icon"
           fill="currentColor"
-          viewBox="0 0 14 16"
+          viewBox="0 0 640 1024"
+          xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M8 8h3v2H7c-.55 0-1-.45-1-1V4h2v4zM7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7z"
-            fillRule="evenodd"
+            d="M512 192c-70.625 0-128 57.344-128 128 0 47.219 25.875 88.062 64 110.281V448s0 128-128 128c-53.062 0-94.656 11.375-128 28.812V302.281c38.156-22.219 64-63.062 64-110.281 0-70.656-57.344-128-128-128S0 121.344 0 192c0 47.219 25.844 88.062 64 110.281V721.75C25.844 743.938 0 784.75 0 832c0 70.625 57.344 128 128 128s128-57.375 128-128c0-33.5-13.188-63.75-34.25-86.625C240.375 722.5 270.656 704 320 704c254 0 256-256 256-256v-17.719c38.125-22.219 64-63.062 64-110.281 0-70.656-57.375-128-128-128zm-384-64c35.406 0 64 28.594 64 64s-28.594 64-64 64-64-28.594-64-64 28.594-64 64-64zm0 768c-35.406 0-64-28.625-64-64 0-35.312 28.594-64 64-64s64 28.688 64 64c0 35.375-28.594 64-64 64zm384-512c-35.375 0-64-28.594-64-64s28.625-64 64-64 64 28.594 64 64-28.625 64-64 64z"
           />
         </svg>
-      </ClockIcon>
+      </BranchIcon>
     </span>
   </Icon>
   <Icon
@@ -101,6 +106,33 @@ exports[`Storyshots UI/Icon all 1`] = `
       </CancelIcon>
     </span>
   </Icon>
+  <Icon
+    as="span"
+    className=""
+    glyph="clock"
+    key="clock"
+  >
+    <span
+      className="root"
+    >
+      <ClockIcon
+        className="icon"
+        fill="currentColor"
+        viewBox="0 0 14 16"
+      >
+        <svg
+          className="icon"
+          fill="currentColor"
+          viewBox="0 0 14 16"
+        >
+          <path
+            d="M8 8h3v2H7c-.55 0-1-.45-1-1V4h2v4zM7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </ClockIcon>
+    </span>
+  </Icon>
   <Icon
     as="span"
     className=""
@@ -295,28 +327,32 @@ exports[`Storyshots UI/Icon default 1`] = `
   <Icon
     as="span"
     className=""
-    glyph="branch"
+    glyph="arrow"
   >
     <span
       className="root"
     >
-      <BranchIcon
+      <ArrowIcon
         className="icon"
         fill="currentColor"
-        viewBox="0 0 640 1024"
+        viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <svg
           className="icon"
           fill="currentColor"
-          viewBox="0 0 640 1024"
+          viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M512 192c-70.625 0-128 57.344-128 128 0 47.219 25.875 88.062 64 110.281V448s0 128-128 128c-53.062 0-94.656 11.375-128 28.812V302.281c38.156-22.219 64-63.062 64-110.281 0-70.656-57.344-128-128-128S0 121.344 0 192c0 47.219 25.844 88.062 64 110.281V721.75C25.844 743.938 0 784.75 0 832c0 70.625 57.344 128 128 128s128-57.375 128-128c0-33.5-13.188-63.75-34.25-86.625C240.375 722.5 270.656 704 320 704c254 0 256-256 256-256v-17.719c38.125-22.219 64-63.062 64-110.281 0-70.656-57.375-128-128-128zm-384-64c35.406 0 64 28.594 64 64s-28.594 64-64 64-64-28.594-64-64 28.594-64 64-64zm0 768c-35.406 0-64-28.625-64-64 0-35.312 28.594-64 64-64s64 28.688 64 64c0 35.375-28.594 64-64 64zm384-512c-35.375 0-64-28.594-64-64s28.625-64 64-64 64 28.594 64 64-28.625 64-64 64z"
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
           />
         </svg>
-      </BranchIcon>
+      </ArrowIcon>
     </span>
   </Icon>
 </div>

diff --git a/packages/ui/src/ui/icon/icon.jsx b/packages/ui/src/ui/icon/icon.jsx
@@ -15,21 +15,34 @@ import SortIcon from './assets/sort.svg';
 
 import css from './icon.module.css';
 
-const ICONS = {
-  arrow: ArrowIcon,
-  branch: BranchIcon,
-  cancel: CancelIcon,
-  clock: ClockIcon,
-  commit: CommitIcon,
-  filter: FilterIcon,
-  help: HelpIcon,
-  package: PackageIcon,
-  pr: PullRequestIcon,
-  sort: SortIcon,
+export const ICONS = {
+  ARROW: 'arrow',
+  BRANCH: 'branch',
+  CANCEL: 'cancel',
+  CLOCK: 'clock',
+  COMMIT: 'commit',
+  FILTER: 'filter',
+  HELP: 'help',
+  PACKAGE: 'package',
+  PR: 'pr',
+  SORT: 'sort',
+};
+
+const ICON_MAP = {
+  [ICONS.ARROW]: ArrowIcon,
+  [ICONS.BRANCH]: BranchIcon,
+  [ICONS.CANCEL]: CancelIcon,
+  [ICONS.CLOCK]: ClockIcon,
+  [ICONS.COMMIT]: CommitIcon,
+  [ICONS.FILTER]: FilterIcon,
+  [ICONS.HELP]: HelpIcon,
+  [ICONS.PACKAGE]: PackageIcon,
+  [ICONS.PR]: PullRequestIcon,
+  [ICONS.SORT]: SortIcon,
 };
 
 export const Icon = ({ className, glyph, as: Component, ...restProps }) => {
-  const Svg = typeof glyph === 'string' ? ICONS[glyph] : glyph;
+  const Svg = typeof glyph === 'string' ? ICON_MAP[glyph] : glyph;
 
   return (
     <Component className={cx(css.root, className)} {...restProps}>
@@ -45,6 +58,6 @@ Icon.defaultProps = {
 
 Icon.propTypes = {
   className: PropTypes.string,
-  glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  glyph: PropTypes.oneOfType([PropTypes.oneOf(Object.values(ICONS)), PropTypes.node]).isRequired,
   as: PropTypes.node,
 };
diff --git a/packages/ui/src/ui/icon/icon.stories.jsx b/packages/ui/src/ui/icon/icon.stories.jsx
@@ -2,23 +2,13 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
-import { Icon } from '.';
+import { Icon, ICONS } from '.';
 
 const stories = storiesOf('UI/Icon', module);
 stories.addDecorator(getWrapperDecorator());
 
-stories.add('default', () => <Icon glyph="branch" />);
+stories.add('default', () => <Icon glyph={ICONS.ARROW} />);
 
 stories.add('all', () =>
-  [
-    'branch',
-    'clock',
-    'cancel',
-    'commit',
-    'filter',
-    'help',
-    'package',
-    'pr',
-    'sort',
-  ].map((glyph) => <Icon glyph={glyph} key={glyph} />),
+  Object.values(ICONS).map((glyph) => <Icon glyph={glyph} key={glyph} />),
 );