Configure IconUtils globally for all storybook to save re-register in individual stories

Author: wintondeshong

.storybook/config.js

@@ -4,6 +4,10 @@ import { withKnobs } from "@storybook/addon-knobs";
 import { withInfo } from "@storybook/addon-info";
 import "./storybook.css";
 import "assets/scss/andculturecode-javascript-react-components.scss";
+import { IconUtils } from "utilities/icon-utils";
+import { SvgIcons } from "atoms/constants/svg-icons";
+
+IconUtils.register(SvgIcons);
 
 setDefaults({
     header: true,

src/assets/scss/6-components/atoms/_buttons.scss

@@ -33,10 +33,6 @@
         width: 100%;
     }
 
-    &.-medium {
-        @include padding(11px, 24px);
-    }
-
     &.-small {
         @include padding(7px, 16px);
         @include font-style($font-primary, "xsmall", #ffffff, 800, 12px);

src/atoms/anchors/anchor-with-icon.stories.tsx

@@ -7,8 +7,7 @@ import { select, text } from "@storybook/addon-knobs";
 import { ButtonSizes } from "../constants/button-sizes";
 import { ButtonStyles } from "../constants/button-styles";
 import { Icons } from "../constants/icons";
-import { IconUtils } from "../../utilities/icon-utils";
-import { SvgIcons } from "../constants/svg-icons";
+import { MemoryRouter } from "react-router-dom";
 
 addDecorator(StoryRouter());
 
@@ -17,10 +16,8 @@ export default {
     title: "Atoms | Anchors / AnchorWithIcon",
 };
 
-export const anchorIconWithChevronDownIcon = () => {
-    IconUtils.register(SvgIcons);
-
-    return (
+export const anchorIconWithChevronDownIcon = () => (
+    <MemoryRouter>
         <AnchorWithIcon
             accessibleText="Text for screen reader"
             size={ButtonSizes.Medium}
@@ -29,13 +26,11 @@ export const anchorIconWithChevronDownIcon = () => {
             to="/test">
             {Faker.lorem.words(5)}
         </AnchorWithIcon>
-    );
-};
+    </MemoryRouter>
+);
 
-export const anchorIconKnobs = () => {
-    IconUtils.register(SvgIcons);
-
-    return (
+export const anchorIconKnobs = () => (
+    <MemoryRouter>
         <AnchorWithIcon
             accessibleText={text("accessibleText", "Text for screen reader")}
             size={select("size", ButtonSizes, ButtonSizes.Medium)}
@@ -44,5 +39,5 @@ export const anchorIconKnobs = () => {
             to="/test">
             {text("text", "Anchor text")}
         </AnchorWithIcon>
-    );
-};
+    </MemoryRouter>
+);

src/atoms/buttons/button.stories.tsx

@@ -6,8 +6,6 @@ import { Icon } from "../icons/icon";
 import { IconSizes } from "../constants/icon-sizes";
 import { Icons } from "../constants/icons";
 import React from "react";
-import { IconUtils } from "../../utilities/icon-utils";
-import { SvgIcons } from "../constants/svg-icons";
 
 export default {
     title: "Atoms | Buttons",
@@ -24,19 +22,15 @@ export const buttonDefault = () => (
     </Button>
 );
 
-export const buttonIcon = () => {
-    IconUtils.register(SvgIcons);
-
-    return (
-        <Button
-            onClick={() => {}}
-            size={select("size", ButtonSizes, ButtonSizes.Medium)}
-            style={select("style", ButtonStyles, ButtonStyles.Primary)}
-            accessibleText={text("Accessible Text", "Text for screen reader")}>
-            <Icon
-                type={select("type", Icons, Icons.Close)}
-                size={select("icon size", IconSizes, IconSizes.Large)}
-            />
-        </Button>
-    );
-};
+export const buttonIcon = () => (
+    <Button
+        onClick={() => {}}
+        size={select("size", ButtonSizes, ButtonSizes.Medium)}
+        style={select("style", ButtonStyles, ButtonStyles.Primary)}
+        accessibleText={text("Accessible Text", "Text for screen reader")}>
+        <Icon
+            type={select("type", Icons, Icons.Close)}
+            size={select("icon size", IconSizes, IconSizes.Large)}
+        />
+    </Button>
+);

src/atoms/icons/icon.stories.tsx

@@ -3,40 +3,31 @@ import { IconSizes } from "../constants/icon-sizes";
 import { Icons } from "../constants/icons";
 import React from "react";
 import { select } from "@storybook/addon-knobs";
-import { IconUtils } from "../../utilities/icon-utils";
 import { SvgIcons } from "../constants/svg-icons";
 
 export default {
     component: Icon,
     title: "Atoms | Icons / Icon",
 };
 
-export const icon = () => {
-    IconUtils.register(SvgIcons);
+export const icon = () => (
+    <Icon
+        type={select("type", Icons, Icons.Checkmark)}
+        size={select("icon size", IconSizes, IconSizes.Large)}
+    />
+);
 
-    return (
-        <Icon
-            type={select("type", Icons, Icons.Checkmark)}
-            size={select("icon size", IconSizes, IconSizes.Large)}
-        />
-    );
-};
-
-export const IconsAll = () => {
-    IconUtils.register(SvgIcons);
-
-    return (
-        <React.Fragment>
-            {SvgIcons.map((i) => (
-                <div>
-                    <h3>{i.type}</h3>
-                    <h4>Base</h4>
-                    <Icon type={i.type} size={IconSizes.Base} />
-                    <h4>Large</h4>
-                    <Icon type={i.type} size={IconSizes.Large} />
-                    <hr />
-                </div>
-            ))}
-        </React.Fragment>
-    );
-};
+export const IconsAll = () => (
+    <React.Fragment>
+        {SvgIcons.map((i) => (
+            <div>
+                <h3>{i.type}</h3>
+                <h4>Base</h4>
+                <Icon type={i.type} size={IconSizes.Base} />
+                <h4>Large</h4>
+                <Icon type={i.type} size={IconSizes.Large} />
+                <hr />
+            </div>
+        ))}
+    </React.Fragment>
+);