diff --git a/x-pack/legacy/plugins/canvas/public/components/color_dot/__examples__/color_dot.examples.tsx b/x-pack/legacy/plugins/canvas/public/components/color_dot/__examples__/color_dot.examples.tsx
index 842f80112ecbd7..fb82af49e815e9 100644
--- a/x-pack/legacy/plugins/canvas/public/components/color_dot/__examples__/color_dot.examples.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/color_dot/__examples__/color_dot.examples.tsx
@@ -10,35 +10,41 @@ import { ColorDot } from '../color_dot';
 
 storiesOf('components/Color/ColorDot', module)
   .addParameters({ info: { propTablesExclude: [EuiIcon] } })
-  .add('color dots', () => [
-    <ColorDot key="1" value="white" />,
-    <ColorDot key="2" value="#000" />,
-    <ColorDot key="3" value="#abcd" />,
-    <ColorDot key="4" value="#aabbcc" />,
-    <ColorDot key="5" value="#aabbccdd" />,
-    <ColorDot key="6" value="rgb(100, 150, 250)" />,
-    <ColorDot key="7" value="rgba(100, 150, 250, .5)" />,
-  ])
-  .add('invalid dots', () => [
-    <ColorDot key="1" value="elastic" />,
-    <ColorDot key="2" value="#xyz" />,
-    <ColorDot key="3" value="#ghij" />,
-    <ColorDot key="4" value="#canvas" />,
-    <ColorDot key="5" value="#12345xyz" />,
-    <ColorDot key="6" value="rgb(a,b,c)" />,
-    <ColorDot key="7" value="rgba(w,x,y,z)" />,
-  ])
-  .add('color dots with children', () => [
-    <ColorDot key="1" value="#FFF">
-      <EuiIcon type="plusInCircle" color="#000" />
-    </ColorDot>,
-    <ColorDot key="2" value="#666">
-      <EuiIcon type="minusInCircle" color="#fff" />
-    </ColorDot>,
-    <ColorDot key="3" value="rgba(100, 150, 250, .5)">
-      <EuiIcon type="alert" color="#fff" />
-    </ColorDot>,
-    <ColorDot key="4" value="#000">
-      <EuiIcon type="check" color="#fff" />
-    </ColorDot>,
-  ]);
+  .add('color dots', () => (
+    <>
+      <ColorDot key="1" value="white" />
+      <ColorDot key="2" value="#000" />
+      <ColorDot key="3" value="#abcd" />
+      <ColorDot key="4" value="#aabbcc" />
+      <ColorDot key="5" value="#aabbccdd" />
+      <ColorDot key="6" value="rgb(100, 150, 250)" />
+      <ColorDot key="7" value="rgba(100, 150, 250, .5)" />
+    </>
+  ))
+  .add('invalid dots', () => (
+    <>
+      <ColorDot key="1" value="elastic" />
+      <ColorDot key="2" value="#xyz" />
+      <ColorDot key="3" value="#ghij" />
+      <ColorDot key="4" value="#canvas" />
+      <ColorDot key="5" value="#12345xyz" />
+      <ColorDot key="6" value="rgb(a,b,c)" />
+      <ColorDot key="7" value="rgba(w,x,y,z)" />
+    </>
+  ))
+  .add('color dots with children', () => (
+    <>
+      <ColorDot key="1" value="#FFF">
+        <EuiIcon type="plusInCircle" color="#000" />
+      </ColorDot>
+      <ColorDot key="2" value="#666">
+        <EuiIcon type="minusInCircle" color="#fff" />
+      </ColorDot>
+      <ColorDot key="3" value="rgba(100, 150, 250, .5)">
+        <EuiIcon type="alert" color="#fff" />
+      </ColorDot>
+      <ColorDot key="4" value="#000">
+        <EuiIcon type="check" color="#fff" />
+      </ColorDot>
+    </>
+  ));
diff --git a/x-pack/legacy/plugins/canvas/public/components/color_manager/__examples__/color_manager.examples.tsx b/x-pack/legacy/plugins/canvas/public/components/color_manager/__examples__/color_manager.examples.tsx
index b83ffe70dc185c..005a2541cbc2ea 100644
--- a/x-pack/legacy/plugins/canvas/public/components/color_manager/__examples__/color_manager.examples.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/color_manager/__examples__/color_manager.examples.tsx
@@ -57,48 +57,54 @@ storiesOf('components/Color/ColorManager', module)
       },
     },
   })
-  .add('default', () => [
-    <ColorManager key="1" onChange={action('onChange')} value="blue" />,
-    <ColorManager key="2" onChange={action('onChange')} value="#abc" />,
-    <ColorManager key="3" onChange={action('onChange')} value="#abcd" />,
-    <ColorManager key="4" onChange={action('onChange')} value="#abcdef" />,
-    <ColorManager key="5" onChange={action('onChange')} value="#aabbccdd" />,
-    <ColorManager key="6" onChange={action('onChange')} value="rgb(50, 100, 150)" />,
-    <ColorManager key="7" onChange={action('onChange')} value="rgba(50, 100, 150, .5)" />,
-  ])
-  .add('invalid colors', () => [
-    <ColorManager key="1" onChange={action('onChange')} value="elastic" />,
-    <ColorManager key="2" onChange={action('onChange')} value="#xyz" />,
-    <ColorManager key="3" onChange={action('onChange')} value="#ghij" />,
-    <ColorManager key="4" onChange={action('onChange')} value="#canvas" />,
-    <ColorManager key="5" onChange={action('onChange')} value="#12345xyz" />,
-    <ColorManager key="6" onChange={action('onChange')} value="rgb(a,b,c)" />,
-    <ColorManager key="7" onChange={action('onChange')} value="rgba(w,x,y,z)" />,
-  ])
-  .add('with buttons', () => [
-    <ColorManager
-      hasButtons={true}
-      key="1"
-      onAddColor={action('onAddColor')}
-      onChange={action('onChange')}
-      value="#abcdef"
-    />,
-    <ColorManager
-      hasButtons={true}
-      key="2"
-      onChange={action('onChange')}
-      onRemoveColor={action('onRemoveColor')}
-      value="#abcdef"
-    />,
-    <ColorManager
-      hasButtons={true}
-      key="3"
-      onAddColor={action('onAddColor')}
-      onChange={action('onChange')}
-      onRemoveColor={action('onRemoveColor')}
-      value="#abcdef"
-    />,
-  ])
+  .add('default', () => (
+    <>
+      <ColorManager key="1" onChange={action('onChange')} value="blue" />
+      <ColorManager key="2" onChange={action('onChange')} value="#abc" />
+      <ColorManager key="3" onChange={action('onChange')} value="#abcd" />
+      <ColorManager key="4" onChange={action('onChange')} value="#abcdef" />
+      <ColorManager key="5" onChange={action('onChange')} value="#aabbccdd" />
+      <ColorManager key="6" onChange={action('onChange')} value="rgb(50, 100, 150)" />
+      <ColorManager key="7" onChange={action('onChange')} value="rgba(50, 100, 150, .5)" />
+    </>
+  ))
+  .add('invalid colors', () => (
+    <>
+      <ColorManager key="1" onChange={action('onChange')} value="elastic" />
+      <ColorManager key="2" onChange={action('onChange')} value="#xyz" />
+      <ColorManager key="3" onChange={action('onChange')} value="#ghij" />
+      <ColorManager key="4" onChange={action('onChange')} value="#canvas" />
+      <ColorManager key="5" onChange={action('onChange')} value="#12345xyz" />
+      <ColorManager key="6" onChange={action('onChange')} value="rgb(a,b,c)" />
+      <ColorManager key="7" onChange={action('onChange')} value="rgba(w,x,y,z)" />
+    </>
+  ))
+  .add('with buttons', () => (
+    <>
+      <ColorManager
+        hasButtons={true}
+        key="1"
+        onAddColor={action('onAddColor')}
+        onChange={action('onChange')}
+        value="#abcdef"
+      />
+      <ColorManager
+        hasButtons={true}
+        key="2"
+        onChange={action('onChange')}
+        onRemoveColor={action('onRemoveColor')}
+        value="#abcdef"
+      />
+      <ColorManager
+        hasButtons={true}
+        key="3"
+        onAddColor={action('onAddColor')}
+        onChange={action('onChange')}
+        onRemoveColor={action('onRemoveColor')}
+        value="#abcdef"
+      />
+    </>
+  ))
   .add('interactive', () => <Interactive />, {
     info: {
       inline: true,
diff --git a/x-pack/legacy/plugins/canvas/public/components/color_palette/__examples__/color_palette.examples.tsx b/x-pack/legacy/plugins/canvas/public/components/color_palette/__examples__/color_palette.examples.tsx
index 4c8ef7cb132df7..14cd5e6d13b4f5 100644
--- a/x-pack/legacy/plugins/canvas/public/components/color_palette/__examples__/color_palette.examples.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/color_palette/__examples__/color_palette.examples.tsx
@@ -29,14 +29,18 @@ class Interactive extends React.Component<{}, { value: string }> {
 }
 
 storiesOf('components/Color/ColorPalette', module)
-  .add('three colors', () => [
-    <ColorPalette key="1" onChange={action('onChange')} colors={THREE_COLORS} />,
-    <ColorPalette key="2" value="#fff" onChange={action('onChange')} colors={THREE_COLORS} />,
-  ])
-  .add('six colors', () => [
-    <ColorPalette key="1" onChange={action('onChange')} colors={SIX_COLORS} />,
-    <ColorPalette key="2" value="#fff" onChange={action('onChange')} colors={SIX_COLORS} />,
-  ])
+  .add('three colors', () => (
+    <>
+      <ColorPalette key="1" onChange={action('onChange')} colors={THREE_COLORS} />
+      <ColorPalette key="2" value="#fff" onChange={action('onChange')} colors={THREE_COLORS} />
+    </>
+  ))
+  .add('six colors', () => (
+    <>
+      <ColorPalette key="1" onChange={action('onChange')} colors={SIX_COLORS} />
+      <ColorPalette key="2" value="#fff" onChange={action('onChange')} colors={SIX_COLORS} />
+    </>
+  ))
   .add('six colors, wrap at 4', () => (
     <ColorPalette value="#fff" onChange={action('onChange')} colors={SIX_COLORS} colorsPerRow={4} />
   ))
diff --git a/x-pack/package.json b/x-pack/package.json
index 402c3e95159f3b..f03b7d3d88d684 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -36,6 +36,7 @@
     "@kbn/test": "1.0.0",
     "@kbn/utility-types": "1.0.0",
     "@mattapperson/slapshot": "1.4.0",
+    "@reach/router": "^1.2.1",
     "@storybook/addon-actions": "^5.2.6",
     "@storybook/addon-console": "^1.2.1",
     "@storybook/addon-info": "^5.2.6",