Merge pull request #345 from dcos-labs/mp/fix/broken-appchrome-stories

Fix broken AppChrome stories
d2iq · Jun 17, 2019 · 6f13af4 · 6f13af4
2 parents 1b2126f + b7c66f1
commit 6f13af4
Showing 1 changed file with 34 additions and 20 deletions.
diff --git a/packages/appChrome/stories/AppChrome.stories.tsx b/packages/appChrome/stories/AppChrome.stories.tsx
@@ -4,10 +4,7 @@ import { action } from "@storybook/addon-actions";
 import { withReadme } from "storybook-readme";
 import { ThemeProvider } from "emotion-theming";
 import { number, select, text, withKnobs } from "@storybook/addon-knobs";
-import {
-  SidebarBareContent,
-  PlaceholderIcon
-} from "./helpers/StorybookSidebarHelpers";
+import { SidebarBareContent } from "./helpers/StorybookSidebarHelpers";
 import DCOSAppChrome from "./helpers/DCOSAppChrome";
 import AppChrome from "../components/AppChrome";
 import Sidebar from "../components/Sidebar";
@@ -31,6 +28,8 @@ import {
   pink,
   purple
 } from "../../design-tokens/build/js/designTokens";
+import { ProductIcons } from "../../icons/dist/product-icons-enum";
+import { Icon } from "../../icon";
 
 const readme = require("../README.md");
 
@@ -112,39 +111,39 @@ storiesOf("AppChrome", module)
     <Sidebar isOpen={true}>
       <SidebarSection label="Section header">
         <SidebarItem onClick={action("clicked a nav item")}>
-          <SidebarItemLabel icon={<PlaceholderIcon />}>
+          <SidebarItemLabel icon={ProductIcons.ServicesInverse}>
             Lorem Ipsum
           </SidebarItemLabel>
         </SidebarItem>
         <SidebarItem
-          icon={<PlaceholderIcon />}
+          icon={ProductIcons.ServicesInverse}
           onClick={action("clicked a nav item")}
         >
-          <SidebarItemLabel icon={<PlaceholderIcon />}>
+          <SidebarItemLabel icon={ProductIcons.ServicesInverse}>
             Dolor Sit
           </SidebarItemLabel>
         </SidebarItem>
         <SidebarItem
-          icon={<PlaceholderIcon />}
+          icon={ProductIcons.ServicesInverse}
           onClick={action("clicked a nav item")}
         >
-          <SidebarItemLabel icon={<PlaceholderIcon />}>
+          <SidebarItemLabel icon={ProductIcons.ServicesInverse}>
             Amet Consecutor
           </SidebarItemLabel>
         </SidebarItem>
         <SidebarItem
-          icon={<PlaceholderIcon />}
+          icon={ProductIcons.ServicesInverse}
           onClick={action("clicked a nav item")}
         >
-          <SidebarItemLabel icon={<PlaceholderIcon />}>
+          <SidebarItemLabel icon={ProductIcons.ServicesInverse}>
             Adipiscing Edit
           </SidebarItemLabel>
         </SidebarItem>
         <SidebarItem
-          icon={<PlaceholderIcon />}
+          icon={ProductIcons.ServicesInverse}
           onClick={action("clicked a nav item")}
         >
-          <SidebarItemLabel icon={<PlaceholderIcon />}>
+          <SidebarItemLabel icon={ProductIcons.ServicesInverse}>
             Praesent Massa
           </SidebarItemLabel>
         </SidebarItem>
@@ -275,7 +274,7 @@ storiesOf("AppChrome", module)
       <SidebarSection label="Section header">
         <SidebarSubMenu
           label={
-            <SidebarItemLabel icon={<PlaceholderIcon />}>
+            <SidebarItemLabel icon={ProductIcons.ServicesInverse}>
               Lorem ipsum
             </SidebarItemLabel>
           }
@@ -290,7 +289,7 @@ storiesOf("AppChrome", module)
         </SidebarSubMenu>
         <SidebarSubMenu
           label={
-            <SidebarItemLabel icon={<PlaceholderIcon />}>
+            <SidebarItemLabel icon={ProductIcons.ServicesInverse}>
               Dolor Sit
             </SidebarItemLabel>
           }
@@ -305,7 +304,7 @@ storiesOf("AppChrome", module)
         </SidebarSubMenu>
         <SidebarSubMenu
           label={
-            <SidebarItemLabel icon={<PlaceholderIcon />}>
+            <SidebarItemLabel icon={ProductIcons.ServicesInverse}>
               Amet Consecutor
             </SidebarItemLabel>
           }
@@ -320,7 +319,7 @@ storiesOf("AppChrome", module)
         </SidebarSubMenu>
         <SidebarSubMenu
           label={
-            <SidebarItemLabel icon={<PlaceholderIcon />}>
+            <SidebarItemLabel icon={ProductIcons.ServicesInverse}>
               Adipiscing Edit
             </SidebarItemLabel>
           }
@@ -335,7 +334,7 @@ storiesOf("AppChrome", module)
         </SidebarSubMenu>
         <SidebarSubMenu
           label={
-            <SidebarItemLabel icon={<PlaceholderIcon />}>
+            <SidebarItemLabel icon={ProductIcons.ServicesInverse}>
               Praesent Massa
             </SidebarItemLabel>
           }
@@ -507,7 +506,14 @@ storiesOf("AppChrome", module)
         <SidebarSection label={sectionHeader}>
           <ThemeProvider theme={CustomTheme}>
             <SidebarItem onClick={action("clicked a nav item")}>
-              <SidebarItemLabel icon={<PlaceholderIcon width={iconWidth} />}>
+              <SidebarItemLabel
+                icon={
+                  <Icon
+                    shape={ProductIcons.ServicesInverse}
+                    size={`${iconWidth}px`}
+                  />
+                }
+              >
                 {content}
               </SidebarItemLabel>
             </SidebarItem>
@@ -536,12 +542,20 @@ storiesOf("AppChrome", module)
           <ThemeProvider theme={CustomTheme}>
             <SidebarSubMenu
               label={
-                <SidebarItemLabel icon={<PlaceholderIcon width={iconWidth} />}>
+                <SidebarItemLabel
+                  icon={
+                    <Icon
+                      shape={ProductIcons.ServicesInverse}
+                      size={`${iconWidth}px`}
+                    />
+                  }
+                >
                   Praesent Massa
                 </SidebarItemLabel>
               }
               iconWidth={iconWidth + "px"}
               isOpen={true}
+              menuHasIcon={true}
             >
               <SidebarSubMenuItem onClick={action("clicked a nav item")}>
                 Lorem Ipsum