diff --git a/.eslintignore b/.eslintignore
index d983c4bedfaab..9263b483b8de9 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -33,7 +33,7 @@ target
 /x-pack/plugins/canvas/canvas_plugin
 /x-pack/plugins/canvas/canvas_plugin_src/lib/flot-charts
 /x-pack/plugins/canvas/shareable_runtime/build
-/x-pack/plugins/canvas/storybook
+/x-pack/plugins/canvas/storybook/build
 /x-pack/plugins/monitoring/public/lib/jquery_flot
 /x-pack/plugins/reporting/server/export_types/printable_pdf/server/lib/pdf/assets/**
 /x-pack/legacy/plugins/infra/common/graphql/types.ts
diff --git a/.eslintrc.js b/.eslintrc.js
index a9ffe2850aa72..e2674e8d7b407 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1222,6 +1222,12 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['x-pack/plugins/canvas/storybook/**'],
+      rules: {
+        'import/no-extraneous-dependencies': 0,
+      },
+    },
     {
       files: ['x-pack/plugins/canvas/canvas_plugin_src/**/*.js'],
       globals: { canvas: true, $: true },
diff --git a/src/dev/precommit_hook/casing_check_config.js b/src/dev/precommit_hook/casing_check_config.js
index 929de8c6701d4..1e4f048be8ea4 100644
--- a/src/dev/precommit_hook/casing_check_config.js
+++ b/src/dev/precommit_hook/casing_check_config.js
@@ -51,7 +51,7 @@ export const IGNORE_FILE_GLOBS = [
   '.ci/pipeline-library/**/*',
 
   // Files in this directory must match a pre-determined name in some cases.
-  'x-pack/plugins/canvas/.storybook/*',
+  'x-pack/plugins/canvas/storybook/*',
 
   // filename must match language code which requires capital letters
   '**/translations/*.json',
diff --git a/x-pack/plugins/canvas/.gitignore b/x-pack/plugins/canvas/.gitignore
index 1c6258670c59c..d47bd8acf6be2 100644
--- a/x-pack/plugins/canvas/.gitignore
+++ b/x-pack/plugins/canvas/.gitignore
@@ -57,4 +57,4 @@ canvas_plugin/*
 webpack_stats.json
 
 # Don't commit storybook builds
-storybook
+storybook/build
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/__examples__/__snapshots__/advanced_filter.examples.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/__examples__/__snapshots__/advanced_filter.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/__examples__/__snapshots__/advanced_filter.examples.storyshot
rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/__examples__/__snapshots__/advanced_filter.stories.storyshot
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/__examples__/advanced_filter.examples.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/__examples__/advanced_filter.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/__examples__/advanced_filter.examples.tsx
rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/__examples__/advanced_filter.stories.tsx
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/__examples__/__snapshots__/dropdown_filter.examples.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/__examples__/__snapshots__/dropdown_filter.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/__examples__/__snapshots__/dropdown_filter.examples.storyshot
rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/__examples__/__snapshots__/dropdown_filter.stories.storyshot
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/__examples__/dropdown_filter.examples.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/__examples__/dropdown_filter.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/__examples__/dropdown_filter.examples.tsx
rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/__examples__/dropdown_filter.stories.tsx
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/__examples__/__snapshots__/time_filter.examples.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/__examples__/__snapshots__/time_filter.examples.storyshot
deleted file mode 100644
index d555fbbe0ce92..0000000000000
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/__examples__/__snapshots__/time_filter.examples.storyshot
+++ /dev/null
@@ -1,134 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots renderers/TimeFilter default 1`] = `
-<div
-  className="canvasTimeFilter"
->
-  <div
-    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
-  >
-    <div
-      className="euiFlexItem"
-    >
-      <div
-        className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
-      >
-        <div
-          className="euiPopover euiPopover--anchorDownLeft"
-          id="QuickSelectPopover"
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
-        >
-          <div
-            className="euiPopover__anchor euiQuickSelectPopover__anchor"
-          >
-            <button
-              aria-label="Date quick select"
-              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
-              data-test-subj="superDatePickerToggleQuickMenuButton"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
-            >
-              <span
-                className="euiButtonEmpty__content"
-              >
-                <svg
-                  aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonEmpty__icon"
-                  focusable="false"
-                  height={16}
-                  role="img"
-                  style={null}
-                  viewBox="0 0 16 16"
-                  width={16}
-                  xmlns="http://www.w3.org/2000/svg"
-                />
-                <span
-                  className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
-                >
-                  <svg
-                    aria-hidden={true}
-                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                    focusable="false"
-                    height={16}
-                    role="img"
-                    style={null}
-                    viewBox="0 0 16 16"
-                    width={16}
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                </span>
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          className="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            className="euiDatePickerRange euiDatePickerRange--inGroup"
-          >
-            <div
-              className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiSuperDatePicker__startPopoverButton"
-              onKeyDown={[Function]}
-              onMouseDown={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchStart={[Function]}
-            >
-              <div
-                className="euiPopover__anchor"
-              >
-                <button
-                  className="euiDatePopoverButton euiDatePopoverButton--start"
-                  data-test-subj="superDatePickerstartDatePopoverButton"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="now-1y"
-                >
-                  ~ a year ago
-                </button>
-              </div>
-            </div>
-            <div
-              className="euiText euiText--small euiDatePickerRange__delimeter"
-            >
-              <div
-                className="euiTextColor euiTextColor--subdued"
-              >
-                →
-              </div>
-            </div>
-            <div
-              className="euiPopover euiPopover--anchorDownRight euiPopover--displayBlock"
-              onKeyDown={[Function]}
-              onMouseDown={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchStart={[Function]}
-            >
-              <div
-                className="euiPopover__anchor"
-              >
-                <button
-                  className="euiDatePopoverButton euiDatePopoverButton--end"
-                  data-test-subj="superDatePickerendDatePopoverButton"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="now-7d"
-                >
-                  ~ 7 days ago
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset.examples.storyshot b/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset.examples.storyshot
rename to x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset.stories.storyshot
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset_manager.examples.storyshot b/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset_manager.examples.storyshot
deleted file mode 100644
index 9f91668e602a4..0000000000000
--- a/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset_manager.examples.storyshot
+++ /dev/null
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots components/Assets/AssetManager no assets 1`] = `
-<button
-  className="euiButtonEmpty euiButtonEmpty--primary"
-  onClick={[Function]}
-  type="button"
->
-  <span
-    className="euiButtonEmpty__content"
-  >
-    <span
-      className="euiButtonEmpty__text"
-    >
-      Manage assets
-    </span>
-  </span>
-</button>
-`;
-
-exports[`Storyshots components/Assets/AssetManager two assets 1`] = `
-<button
-  className="euiButtonEmpty euiButtonEmpty--primary"
-  onClick={[Function]}
-  type="button"
->
-  <span
-    className="euiButtonEmpty__content"
-  >
-    <span
-      className="euiButtonEmpty__text"
-    >
-      Manage assets
-    </span>
-  </span>
-</button>
-`;
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/__examples__/asset.examples.tsx b/x-pack/plugins/canvas/public/components/asset_manager/__examples__/asset.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/asset_manager/__examples__/asset.examples.tsx
rename to x-pack/plugins/canvas/public/components/asset_manager/__examples__/asset.stories.tsx
diff --git a/x-pack/plugins/canvas/public/components/color_picker/__examples__/color_picker.stories.tsx b/x-pack/plugins/canvas/public/components/color_picker/__examples__/color_picker.stories.tsx
index 0a7ed75ee728e..c5d42be2d201e 100644
--- a/x-pack/plugins/canvas/public/components/color_picker/__examples__/color_picker.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/color_picker/__examples__/color_picker.stories.tsx
@@ -5,7 +5,7 @@
  */
 
 import { action } from '@storybook/addon-actions';
-import { boolean, withKnobs } from '@storybook/addon-knobs';
+import { boolean } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { ColorPicker } from '../color_picker';
@@ -54,7 +54,6 @@ class Interactive extends React.Component<
 }
 
 storiesOf('components/Color/ColorPicker', module)
-  .addDecorator(withKnobs)
   .addParameters({
     info: {
       inline: true,
diff --git a/x-pack/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.examples.storyshot b/x-pack/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.examples.storyshot
rename to x-pack/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.stories.storyshot
diff --git a/x-pack/plugins/canvas/public/components/custom_element_modal/__examples__/custom_element_modal.examples.tsx b/x-pack/plugins/canvas/public/components/custom_element_modal/__examples__/custom_element_modal.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/custom_element_modal/__examples__/custom_element_modal.examples.tsx
rename to x-pack/plugins/canvas/public/components/custom_element_modal/__examples__/custom_element_modal.stories.tsx
diff --git a/x-pack/plugins/canvas/public/components/debug/__examples__/__snapshots__/debug.examples.storyshot b/x-pack/plugins/canvas/public/components/debug/__examples__/__snapshots__/debug.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/public/components/debug/__examples__/__snapshots__/debug.examples.storyshot
rename to x-pack/plugins/canvas/public/components/debug/__examples__/__snapshots__/debug.stories.storyshot
diff --git a/x-pack/plugins/canvas/public/components/debug/__examples__/debug.examples.tsx b/x-pack/plugins/canvas/public/components/debug/__examples__/debug.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/debug/__examples__/debug.examples.tsx
rename to x-pack/plugins/canvas/public/components/debug/__examples__/debug.stories.tsx
diff --git a/x-pack/plugins/canvas/public/components/element_card/__examples__/__snapshots__/element_controls.examples.storyshot b/x-pack/plugins/canvas/public/components/element_card/__examples__/__snapshots__/element_controls.examples.storyshot
deleted file mode 100644
index 5e076ba76a9c1..0000000000000
--- a/x-pack/plugins/canvas/public/components/element_card/__examples__/__snapshots__/element_controls.examples.storyshot
+++ /dev/null
@@ -1,98 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots components/ElementTypes/ElementControls has two buttons 1`] = `
-<div
-  style={
-    Object {
-      "width": "50px",
-    }
-  }
->
-  <div
-    className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive canvasElementCard__controls"
-  >
-    <div
-      className="euiFlexItem euiFlexItem--flexGrowZero"
-    >
-      <span
-        className="euiToolTipAnchor"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <button
-          aria-describedby="generated-id"
-          aria-label="Edit element"
-          className="euiButtonIcon euiButtonIcon--primary"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            className="euiIcon euiIcon--medium euiButtonIcon__icon"
-            focusable="false"
-            height="16"
-            style={null}
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
-          >
-            <defs>
-              <path
-                d="M12.148 3.148L11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 0 1-.708 0 .502.502 0 0 1 0-.708l8.002-7.998zM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 0 1 0 1.414l-9 9A.997.997 0 0 1 5 15H2a1 1 0 0 1-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0 1 11 1zM5 14H2v-3l3 3z"
-                id="pencil-a"
-              />
-            </defs>
-            <use
-              xlinkHref="#pencil-a"
-            />
-          </svg>
-        </button>
-      </span>
-    </div>
-    <div
-      className="euiFlexItem euiFlexItem--flexGrowZero"
-    >
-      <span
-        className="euiToolTipAnchor"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <button
-          aria-describedby="generated-id"
-          aria-label="Delete element"
-          className="euiButtonIcon euiButtonIcon--danger"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            className="euiIcon euiIcon--medium euiButtonIcon__icon"
-            focusable="false"
-            height="16"
-            style={null}
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
-          >
-            <defs>
-              <path
-                d="M11 3h5v1H0V3h5V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2zm-7.056 8H7v1H4.1l.392 2.519c.042.269.254.458.493.458h6.03c.239 0 .451-.189.493-.458l1.498-9.576H14l-1.504 9.73c-.116.747-.74 1.304-1.481 1.304h-6.03c-.741 0-1.365-.557-1.481-1.304l-1.511-9.73H9V5.95H3.157L3.476 8H8v1H3.632l.312 2zM6 3h4V1H6v2z"
-                id="trash-a"
-              />
-            </defs>
-            <use
-              xlinkHref="#trash-a"
-            />
-          </svg>
-        </button>
-      </span>
-    </div>
-  </div>
-</div>
-`;
diff --git a/x-pack/plugins/canvas/public/components/expression_input/__examples__/__snapshots__/expression_input.examples.storyshot b/x-pack/plugins/canvas/public/components/expression_input/__examples__/__snapshots__/expression_input.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/public/components/expression_input/__examples__/__snapshots__/expression_input.examples.storyshot
rename to x-pack/plugins/canvas/public/components/expression_input/__examples__/__snapshots__/expression_input.stories.storyshot
diff --git a/x-pack/plugins/canvas/public/components/expression_input/__examples__/expression_input.examples.tsx b/x-pack/plugins/canvas/public/components/expression_input/__examples__/expression_input.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/expression_input/__examples__/expression_input.examples.tsx
rename to x-pack/plugins/canvas/public/components/expression_input/__examples__/expression_input.stories.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/__snapshots__/edit_menu.examples.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/__snapshots__/edit_menu.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/__snapshots__/edit_menu.examples.storyshot
rename to x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/__snapshots__/edit_menu.stories.storyshot
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/edit_menu.examples.tsx b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/edit_menu.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/edit_menu.examples.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/edit_menu.stories.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/__snapshots__/element_menu.examples.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/__snapshots__/element_menu.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/__snapshots__/element_menu.examples.storyshot
rename to x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/__snapshots__/element_menu.stories.storyshot
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/element_menu.examples.tsx b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/element_menu.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/element_menu.examples.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/element_menu.stories.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/__snapshots__/share_menu.examples.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/__snapshots__/share_menu.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/__snapshots__/share_menu.examples.storyshot
rename to x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/__snapshots__/share_menu.stories.storyshot
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/share_menu.examples.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/share_menu.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/share_menu.examples.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/share_menu.stories.tsx
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot
rename to x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.stories.storyshot
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/simple_template.examples.storyshot b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/simple_template.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/simple_template.examples.storyshot
rename to x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/simple_template.stories.storyshot
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/extended_template.examples.tsx b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/extended_template.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/extended_template.examples.tsx
rename to x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/extended_template.stories.tsx
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/simple_template.examples.tsx b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/simple_template.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/simple_template.examples.tsx
rename to x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/simple_template.stories.tsx
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot b/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot
rename to x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.stories.storyshot
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/simple_template.examples.storyshot b/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/simple_template.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/simple_template.examples.storyshot
rename to x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/simple_template.stories.storyshot
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/extended_template.examples.tsx b/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/extended_template.stories.tsx
similarity index 95%
rename from x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/extended_template.examples.tsx
rename to x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/extended_template.stories.tsx
index 4a300b3de8923..a831f35ad597e 100644
--- a/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/extended_template.examples.tsx
+++ b/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/extended_template.stories.tsx
@@ -6,7 +6,7 @@
 
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
-import { withKnobs, array, radios, boolean } from '@storybook/addon-knobs';
+import { array, radios, boolean } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { ExtendedTemplate } from '../extended_template';
@@ -64,7 +64,6 @@ storiesOf('arguments/SeriesStyle', module)
   .addDecorator((story) => (
     <div style={{ width: '323px', padding: '16px', background: '#fff' }}>{story()}</div>
   ))
-  .addDecorator(withKnobs)
   .add('extended', () => <Interactive />);
 
 storiesOf('arguments/SeriesStyle/components', module)
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/simple_template.examples.tsx b/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/simple_template.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/simple_template.examples.tsx
rename to x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/simple_template.stories.tsx
diff --git a/x-pack/plugins/canvas/scripts/jest.js b/x-pack/plugins/canvas/scripts/jest.js
index b30cb02d2c99a..a91431a0141c5 100644
--- a/x-pack/plugins/canvas/scripts/jest.js
+++ b/x-pack/plugins/canvas/scripts/jest.js
@@ -60,7 +60,7 @@ run(
     if (all) {
       log.info('Running all available tests. This will take a while...');
     } else if (storybook) {
-      path = 'plugins/canvas/.storybook';
+      path = 'plugins/canvas/storybook';
       log.info('Running Storybook Snapshot tests...');
     } else {
       log.info('Running tests. This does not include Storybook Snapshots...');
diff --git a/x-pack/plugins/canvas/scripts/storybook.js b/x-pack/plugins/canvas/scripts/storybook.js
index c9e6c6c65436c..beea1814b54d2 100644
--- a/x-pack/plugins/canvas/scripts/storybook.js
+++ b/x-pack/plugins/canvas/scripts/storybook.js
@@ -10,7 +10,7 @@ const del = require('del');
 const { run } = require('@kbn/dev-utils');
 const storybook = require('@storybook/react/standalone');
 const execa = require('execa');
-const { DLL_OUTPUT } = require('./../.storybook/constants');
+const { DLL_OUTPUT } = require('./../storybook/constants');
 
 const options = {
   stdio: ['ignore', 'inherit', 'inherit'],
@@ -18,7 +18,7 @@ const options = {
 };
 
 const storybookOptions = {
-  configDir: path.resolve(__dirname, './../.storybook'),
+  configDir: path.resolve(__dirname, './../storybook'),
   mode: 'dev',
 };
 
@@ -51,7 +51,7 @@ run(
         [
           'webpack',
           '--config',
-          'x-pack/plugins/canvas/.storybook/webpack.dll.config.js',
+          'x-pack/plugins/canvas/storybook/webpack.dll.config.js',
           '--progress',
           '--hide-modules',
           '--display-entrypoints',
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.examples.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.examples.storyshot
rename to x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.stories.storyshot
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/page.examples.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/page.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/page.examples.storyshot
rename to x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/page.stories.storyshot
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/rendered_element.examples.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/rendered_element.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/rendered_element.examples.storyshot
rename to x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/rendered_element.stories.storyshot
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/__examples__/canvas.examples.tsx b/x-pack/plugins/canvas/shareable_runtime/components/__examples__/canvas.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/__examples__/canvas.examples.tsx
rename to x-pack/plugins/canvas/shareable_runtime/components/__examples__/canvas.stories.tsx
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/__examples__/page.examples.tsx b/x-pack/plugins/canvas/shareable_runtime/components/__examples__/page.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/__examples__/page.examples.tsx
rename to x-pack/plugins/canvas/shareable_runtime/components/__examples__/page.stories.tsx
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/__examples__/rendered_element.examples.tsx b/x-pack/plugins/canvas/shareable_runtime/components/__examples__/rendered_element.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/__examples__/rendered_element.examples.tsx
rename to x-pack/plugins/canvas/shareable_runtime/components/__examples__/rendered_element.stories.tsx
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.components.examples.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.components.examples.storyshot
deleted file mode 100644
index 6d783a26d8424..0000000000000
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.components.examples.storyshot
+++ /dev/null
@@ -1,140 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots shareables/Footer/components PageControls 1`] = `
-<div
-  className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-  style={
-    Object {
-      "margin": "0 12px",
-    }
-  }
->
-  <div
-    className="euiFlexItem euiFlexItem--flexGrowZero"
-  >
-    <button
-      aria-label="Previous Page"
-      className="euiButtonIcon euiButtonIcon--ghost"
-      data-test-subj="pageControlsPrevPage"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
-        focusable="false"
-        height={16}
-        style={null}
-        viewBox="0 0 16 16"
-        width={16}
-        xmlns="http://www.w3.org/2000/svg"
-      />
-    </button>
-  </div>
-  <div
-    className="euiFlexItem euiFlexItem--flexGrowZero"
-  >
-    <button
-      className="euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small"
-      data-test-subj="pageControlsCurrentPage"
-      onClick={[Function]}
-      type="button"
-    >
-      <span
-        className="euiButtonEmpty__content"
-      >
-        <span
-          className="euiButtonEmpty__text"
-        >
-          <div
-            className="euiText euiText--small"
-          >
-            <div
-              className="euiTextColor euiTextColor--ghost"
-            >
-              Page 
-              1
-            </div>
-          </div>
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="euiFlexItem euiFlexItem--flexGrowZero"
-  >
-    <button
-      aria-label="Next Page"
-      className="euiButtonIcon euiButtonIcon--ghost"
-      data-test-subj="pageControlsNextPage"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
-        focusable="false"
-        height={16}
-        style={null}
-        viewBox="0 0 16 16"
-        width={16}
-        xmlns="http://www.w3.org/2000/svg"
-      />
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots shareables/Footer/components Title 1`] = `
-<div
-  style={
-    Object {
-      "background": "#333",
-      "padding": 10,
-    }
-  }
->
-  <div
-    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-  >
-    <div
-      className="euiFlexItem euiFlexItem--flexGrowZero"
-    >
-      <svg
-        className="euiIcon euiIcon--medium euiIcon-isLoading"
-        focusable="false"
-        height={16}
-        style={null}
-        viewBox="0 0 16 16"
-        width={16}
-        xmlns="http://www.w3.org/2000/svg"
-      />
-    </div>
-    <div
-      className="euiFlexItem euiFlexItem--flexGrowZero"
-      style={
-        Object {
-          "cursor": "default",
-          "minWidth": 0,
-        }
-      }
-    >
-      <div
-        className="euiText euiText--small"
-      >
-        <div
-          className="euiTextColor euiTextColor--ghost"
-        >
-          <div
-            className="eui-textTruncate"
-          >
-            This is a test title.
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.examples.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.examples.storyshot
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.stories.storyshot
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/page_controls.examples.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/page_controls.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/page_controls.examples.storyshot
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/page_controls.stories.storyshot
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/scrubber.examples.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/scrubber.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/scrubber.examples.storyshot
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/scrubber.stories.storyshot
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/title.examples.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/title.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/title.examples.storyshot
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/title.stories.storyshot
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/footer.examples.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/footer.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/footer.examples.tsx
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/footer.stories.tsx
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/page_controls.examples.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/page_controls.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/page_controls.examples.tsx
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/page_controls.stories.tsx
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/scrubber.examples.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/scrubber.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/scrubber.examples.tsx
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/scrubber.stories.tsx
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/title.examples.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/title.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/title.examples.tsx
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/title.stories.tsx
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.stories.storyshot
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/settings.components.examples.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/settings.components.examples.storyshot
deleted file mode 100644
index 1922bd84b174c..0000000000000
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/settings.components.examples.storyshot
+++ /dev/null
@@ -1,479 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots shareables/Settings/components AutoplaySettings, autoplay disabled 1`] = `
-<div
-  style={
-    Object {
-      "padding": 16,
-    }
-  }
->
-  <div
-    className="euiSwitch"
-  >
-    <input
-      checked={false}
-      className="euiSwitch__input"
-      id="cycle"
-      name="cycle"
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <span
-      className="euiSwitch__body"
-    >
-      <span
-        className="euiSwitch__thumb"
-      />
-      <span
-        className="euiSwitch__track"
-      >
-        <svg
-          className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-          focusable="false"
-          height={16}
-          style={null}
-          viewBox="0 0 16 16"
-          width={16}
-          xmlns="http://www.w3.org/2000/svg"
-        />
-        <svg
-          className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-          focusable="false"
-          height={16}
-          style={null}
-          viewBox="0 0 16 16"
-          width={16}
-          xmlns="http://www.w3.org/2000/svg"
-        />
-      </span>
-    </span>
-    <label
-      className="euiSwitch__label"
-      htmlFor="cycle"
-    >
-      Cycle Slides
-    </label>
-  </div>
-  <hr
-    className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-  />
-  <form
-    onSubmit={[Function]}
-  >
-    <div
-      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-    >
-      <div
-        className="euiFlexItem"
-      >
-        <div
-          className="euiFormRow euiFormRow--compressed"
-          id="generated-id-row"
-        >
-          <div
-            className="euiFormRow__labelWrapper"
-          >
-            <label
-              className="euiFormLabel euiFormRow__label"
-              htmlFor="generated-id"
-            >
-              Set a custom interval
-            </label>
-          </div>
-          <div
-            className="euiFormRow__fieldWrapper"
-          >
-            <div
-              className="euiFormControlLayout euiFormControlLayout--compressed"
-            >
-              <div
-                className="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-describedby="generated-id-help"
-                  className="euiFieldText euiFieldText--compressed"
-                  id="generated-id"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  type="text"
-                  value="5s"
-                />
-              </div>
-            </div>
-            <div
-              className="euiFormHelpText euiFormRow__text"
-              id="generated-id-help"
-            >
-              Use shorthand notation, like 30s, 10m, or 1h
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="euiFlexItem euiFlexItem--flexGrowZero"
-      >
-        <div
-          className="euiFormRow"
-          id="generated-id-row"
-        >
-          <div
-            className="euiFormRow__labelWrapper"
-          >
-            <label
-              className="euiFormLabel euiFormRow__label"
-              htmlFor="generated-id"
-            >
-               
-            </label>
-          </div>
-          <div
-            className="euiFormRow__fieldWrapper"
-          >
-            <button
-              className="euiButton euiButton--primary euiButton--small"
-              disabled={false}
-              id="generated-id"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              style={
-                Object {
-                  "minWidth": "auto",
-                }
-              }
-              type="submit"
-            >
-              <span
-                className="euiButton__content"
-              >
-                <span
-                  className="euiButton__text"
-                >
-                  Set
-                </span>
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots shareables/Settings/components AutoplaySettings, autoplay enabled 1`] = `
-<div
-  style={
-    Object {
-      "padding": 16,
-    }
-  }
->
-  <div
-    className="euiSwitch"
-  >
-    <input
-      checked={true}
-      className="euiSwitch__input"
-      id="cycle"
-      name="cycle"
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <span
-      className="euiSwitch__body"
-    >
-      <span
-        className="euiSwitch__thumb"
-      />
-      <span
-        className="euiSwitch__track"
-      >
-        <svg
-          className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-          focusable="false"
-          height={16}
-          style={null}
-          viewBox="0 0 16 16"
-          width={16}
-          xmlns="http://www.w3.org/2000/svg"
-        />
-        <svg
-          className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-          focusable="false"
-          height={16}
-          style={null}
-          viewBox="0 0 16 16"
-          width={16}
-          xmlns="http://www.w3.org/2000/svg"
-        />
-      </span>
-    </span>
-    <label
-      className="euiSwitch__label"
-      htmlFor="cycle"
-    >
-      Cycle Slides
-    </label>
-  </div>
-  <hr
-    className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-  />
-  <form
-    onSubmit={[Function]}
-  >
-    <div
-      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-    >
-      <div
-        className="euiFlexItem"
-      >
-        <div
-          className="euiFormRow euiFormRow--compressed"
-          id="generated-id-row"
-        >
-          <div
-            className="euiFormRow__labelWrapper"
-          >
-            <label
-              className="euiFormLabel euiFormRow__label"
-              htmlFor="generated-id"
-            >
-              Set a custom interval
-            </label>
-          </div>
-          <div
-            className="euiFormRow__fieldWrapper"
-          >
-            <div
-              className="euiFormControlLayout euiFormControlLayout--compressed"
-            >
-              <div
-                className="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-describedby="generated-id-help"
-                  className="euiFieldText euiFieldText--compressed"
-                  id="generated-id"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  type="text"
-                  value="5s"
-                />
-              </div>
-            </div>
-            <div
-              className="euiFormHelpText euiFormRow__text"
-              id="generated-id-help"
-            >
-              Use shorthand notation, like 30s, 10m, or 1h
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="euiFlexItem euiFlexItem--flexGrowZero"
-      >
-        <div
-          className="euiFormRow"
-          id="generated-id-row"
-        >
-          <div
-            className="euiFormRow__labelWrapper"
-          >
-            <label
-              className="euiFormLabel euiFormRow__label"
-              htmlFor="generated-id"
-            >
-               
-            </label>
-          </div>
-          <div
-            className="euiFormRow__fieldWrapper"
-          >
-            <button
-              className="euiButton euiButton--primary euiButton--small"
-              disabled={false}
-              id="generated-id"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              style={
-                Object {
-                  "minWidth": "auto",
-                }
-              }
-              type="submit"
-            >
-              <span
-                className="euiButton__content"
-              >
-                <span
-                  className="euiButton__text"
-                >
-                  Set
-                </span>
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots shareables/Settings/components ToolbarSettings, autohide disabled 1`] = `
-<div
-  style={
-    Object {
-      "padding": 16,
-    }
-  }
->
-  <div
-    className="euiFormRow"
-    id="generated-id-row"
-  >
-    <div
-      className="euiFormRow__fieldWrapper"
-    >
-      <div
-        className="euiSwitch"
-      >
-        <input
-          aria-describedby="generated-id-help"
-          checked={false}
-          className="euiSwitch__input"
-          data-test-subj="hideToolbarSwitch"
-          id="generated-id"
-          name="toolbarHide"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          type="checkbox"
-        />
-        <span
-          className="euiSwitch__body"
-        >
-          <span
-            className="euiSwitch__thumb"
-          />
-          <span
-            className="euiSwitch__track"
-          >
-            <svg
-              className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-              focusable="false"
-              height={16}
-              style={null}
-              viewBox="0 0 16 16"
-              width={16}
-              xmlns="http://www.w3.org/2000/svg"
-            />
-            <svg
-              className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-              focusable="false"
-              height={16}
-              style={null}
-              viewBox="0 0 16 16"
-              width={16}
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </span>
-        </span>
-        <label
-          className="euiSwitch__label"
-          htmlFor="generated-id"
-        >
-          Hide Toolbar
-        </label>
-      </div>
-      <div
-        className="euiFormHelpText euiFormRow__text"
-        id="generated-id-help"
-      >
-        Hide the toolbar when the mouse is not within the Canvas?
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots shareables/Settings/components ToolbarSettings, autohide enabled 1`] = `
-<div
-  style={
-    Object {
-      "padding": 16,
-    }
-  }
->
-  <div
-    className="euiFormRow"
-    id="generated-id-row"
-  >
-    <div
-      className="euiFormRow__fieldWrapper"
-    >
-      <div
-        className="euiSwitch"
-      >
-        <input
-          aria-describedby="generated-id-help"
-          checked={true}
-          className="euiSwitch__input"
-          data-test-subj="hideToolbarSwitch"
-          id="generated-id"
-          name="toolbarHide"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          type="checkbox"
-        />
-        <span
-          className="euiSwitch__body"
-        >
-          <span
-            className="euiSwitch__thumb"
-          />
-          <span
-            className="euiSwitch__track"
-          >
-            <svg
-              className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-              focusable="false"
-              height={16}
-              style={null}
-              viewBox="0 0 16 16"
-              width={16}
-              xmlns="http://www.w3.org/2000/svg"
-            />
-            <svg
-              className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-              focusable="false"
-              height={16}
-              style={null}
-              viewBox="0 0 16 16"
-              width={16}
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </span>
-        </span>
-        <label
-          className="euiSwitch__label"
-          htmlFor="generated-id"
-        >
-          Hide Toolbar
-        </label>
-      </div>
-      <div
-        className="euiFormHelpText euiFormRow__text"
-        id="generated-id-help"
-      >
-        Hide the toolbar when the mouse is not within the Canvas?
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/settings.examples.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/settings.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/settings.examples.storyshot
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/settings.stories.storyshot
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/toolbar_settings.examples.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/toolbar_settings.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/toolbar_settings.examples.storyshot
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/toolbar_settings.stories.storyshot
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/autoplay_settings.examples.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/autoplay_settings.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/autoplay_settings.examples.tsx
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/autoplay_settings.stories.tsx
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/settings.examples.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/settings.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/settings.examples.tsx
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/settings.stories.tsx
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/toolbar_settings.examples.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/toolbar_settings.stories.tsx
similarity index 100%
rename from x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/toolbar_settings.examples.tsx
rename to x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/toolbar_settings.stories.tsx
diff --git a/x-pack/plugins/canvas/.storybook/.babelrc b/x-pack/plugins/canvas/storybook/.babelrc
similarity index 100%
rename from x-pack/plugins/canvas/.storybook/.babelrc
rename to x-pack/plugins/canvas/storybook/.babelrc
diff --git a/x-pack/plugins/canvas/.storybook/addons.js b/x-pack/plugins/canvas/storybook/addons.js
similarity index 100%
rename from x-pack/plugins/canvas/.storybook/addons.js
rename to x-pack/plugins/canvas/storybook/addons.js
diff --git a/x-pack/plugins/canvas/.storybook/config.js b/x-pack/plugins/canvas/storybook/config.js
similarity index 67%
rename from x-pack/plugins/canvas/.storybook/config.js
rename to x-pack/plugins/canvas/storybook/config.js
index 04b4e2a8e7b4b..f349f9b7ccf98 100644
--- a/x-pack/plugins/canvas/.storybook/config.js
+++ b/x-pack/plugins/canvas/storybook/config.js
@@ -4,13 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
 import { configure, addDecorator, addParameters } from '@storybook/react';
-import { withKnobs } from '@storybook/addon-knobs/react';
 import { withInfo } from '@storybook/addon-info';
 import { create } from '@storybook/theming';
 
-import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
+import { addDecorators } from './decorators';
 
 // If we're running Storyshots, be sure to register the require context hook.
 // Otherwise, add the other decorators.
@@ -31,18 +29,9 @@ if (process.env.NODE_ENV === 'test') {
       },
     })
   );
-
-  // Add optional knobs to customize each story.
-  addDecorator(withKnobs);
 }
 
-// Add New Platform Context for any stories that need it
-const settings = new Map();
-settings.set('darkMode', true);
-const platform = {
-  uiSettings: settings,
-};
-addDecorator(fn => <KibanaContextProvider services={platform}>{fn()}</KibanaContextProvider>);
+addDecorators();
 
 function loadStories() {
   require('./dll_contexts');
@@ -54,14 +43,14 @@ function loadStories() {
     true,
     /plugins\/(?=canvas).*light\.css/
   );
-  css.keys().forEach(filename => css(filename));
+  css.keys().forEach((filename) => css(filename));
 
-  // Find all files ending in *.examples.ts
-  const req = require.context('./..', true, /.(stories|examples).tsx$/);
-  req.keys().forEach(filename => req(filename));
+  // Find all files ending in *.stories.tsx
+  const req = require.context('./..', true, /.(stories).tsx$/);
+  req.keys().forEach((filename) => req(filename));
 
   // Import Canvas CSS
-  require('../public/style/index.scss')
+  require('../public/style/index.scss');
 }
 
 // Set up the Storybook environment with custom settings.
diff --git a/x-pack/plugins/canvas/.storybook/constants.js b/x-pack/plugins/canvas/storybook/constants.js
similarity index 100%
rename from x-pack/plugins/canvas/.storybook/constants.js
rename to x-pack/plugins/canvas/storybook/constants.js
diff --git a/x-pack/plugins/canvas/storybook/decorators/index.ts b/x-pack/plugins/canvas/storybook/decorators/index.ts
new file mode 100644
index 0000000000000..aa1e958a410f5
--- /dev/null
+++ b/x-pack/plugins/canvas/storybook/decorators/index.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { addDecorator } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+// @ts-expect-error
+import { withInfo } from '@storybook/addon-info';
+
+import { routerContextDecorator } from './router_decorator';
+import { kibanaContextDecorator } from './kibana_decorator';
+
+export const addDecorators = () => {
+  addDecorator(withKnobs);
+  addDecorator(kibanaContextDecorator);
+  addDecorator(routerContextDecorator);
+};
diff --git a/x-pack/plugins/canvas/storybook/decorators/kibana_decorator.tsx b/x-pack/plugins/canvas/storybook/decorators/kibana_decorator.tsx
new file mode 100644
index 0000000000000..a55efba5a5183
--- /dev/null
+++ b/x-pack/plugins/canvas/storybook/decorators/kibana_decorator.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
+
+const settings = new Map();
+settings.set('darkMode', true);
+const platform = {
+  http: {
+    basePath: {
+      get: () => '',
+      prepend: () => '',
+      remove: () => '',
+      serverBasePath: '',
+    },
+  },
+  uiSettings: settings,
+};
+
+export const kibanaContextDecorator = (story: Function) => (
+  <KibanaContextProvider services={platform}>{story()}</KibanaContextProvider>
+);
diff --git a/x-pack/plugins/canvas/storybook/decorators/router_decorator.tsx b/x-pack/plugins/canvas/storybook/decorators/router_decorator.tsx
new file mode 100644
index 0000000000000..43b0da6473f23
--- /dev/null
+++ b/x-pack/plugins/canvas/storybook/decorators/router_decorator.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class RouterContext extends React.Component {
+  static childContextTypes = {
+    router: PropTypes.object.isRequired,
+  };
+
+  getChildContext() {
+    return {
+      router: {
+        getFullPath: () => 'path',
+        create: () => '',
+      },
+    };
+  }
+  render() {
+    return <>{this.props.children}</>;
+  }
+}
+
+export function routerContextDecorator(story: Function) {
+  return <RouterContext>{story()}</RouterContext>;
+}
diff --git a/x-pack/plugins/canvas/.storybook/dll_contexts.js b/x-pack/plugins/canvas/storybook/dll_contexts.js
similarity index 88%
rename from x-pack/plugins/canvas/.storybook/dll_contexts.js
rename to x-pack/plugins/canvas/storybook/dll_contexts.js
index 529fd8aa5c791..85f2ab66cab88 100644
--- a/x-pack/plugins/canvas/.storybook/dll_contexts.js
+++ b/x-pack/plugins/canvas/storybook/dll_contexts.js
@@ -15,7 +15,7 @@ const css = require.context(
   true,
   /\.\/plugins\/(?!canvas).*light\.css/
 );
-css.keys().forEach(filename => {
+css.keys().forEach((filename) => {
   css(filename);
 });
 
@@ -25,7 +25,7 @@ const uiStyles = require.context(
   false,
   /[\/\\](?!mixins|variables|_|\.|bootstrap_(light|dark))[^\/\\]+\.less/
 );
-uiStyles.keys().forEach(key => uiStyles(key));
+uiStyles.keys().forEach((key) => uiStyles(key));
 
 const json = require.context('../shareable_runtime/test/workpads', false, /\.json$/);
-json.keys().forEach(key => json(key));
+json.keys().forEach((key) => json(key));
diff --git a/x-pack/plugins/canvas/.storybook/middleware.js b/x-pack/plugins/canvas/storybook/middleware.js
similarity index 72%
rename from x-pack/plugins/canvas/.storybook/middleware.js
rename to x-pack/plugins/canvas/storybook/middleware.js
index 8bbd2b6c1a22f..baa524aefa709 100644
--- a/x-pack/plugins/canvas/.storybook/middleware.js
+++ b/x-pack/plugins/canvas/storybook/middleware.js
@@ -4,10 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-const serve = require('serve-static');
 const path = require('path');
+const serve = require('serve-static');
 
 // Extend the Storybook Middleware to include a route to access Legacy UI assets
-module.exports = function(router) {
-  router.get('/ui', serve(path.resolve(__dirname, '../../../../../src/core/server/core_app/assets')));
+module.exports = function (router) {
+  router.get(
+    '/ui',
+    serve(path.resolve(__dirname, '../../../../../src/core/server/core_app/assets'))
+  );
 };
diff --git a/x-pack/plugins/canvas/.storybook/preview-head.html b/x-pack/plugins/canvas/storybook/preview-head.html
similarity index 100%
rename from x-pack/plugins/canvas/.storybook/preview-head.html
rename to x-pack/plugins/canvas/storybook/preview-head.html
diff --git a/x-pack/plugins/canvas/.storybook/storyshots.test.js b/x-pack/plugins/canvas/storybook/storyshots.test.js
similarity index 95%
rename from x-pack/plugins/canvas/.storybook/storyshots.test.js
rename to x-pack/plugins/canvas/storybook/storyshots.test.js
index 7195b97712464..ba4013f7cc816 100644
--- a/x-pack/plugins/canvas/.storybook/storyshots.test.js
+++ b/x-pack/plugins/canvas/storybook/storyshots.test.js
@@ -53,7 +53,7 @@ jest.mock('@elastic/eui/packages/react-datepicker', () => {
 });
 
 // Mock React Portal for components that use modals, tooltips, etc
-ReactDOM.createPortal = jest.fn(element => {
+ReactDOM.createPortal = jest.fn((element) => {
   return element;
 });
 
@@ -67,7 +67,7 @@ jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
 // https://github.com/elastic/eui/issues/3712
 jest.mock('@elastic/eui/lib/components/overlay_mask/overlay_mask', () => {
   return {
-    EuiOverlayMask: ({children}) => children,
+    EuiOverlayMask: ({ children }) => children,
   };
 });
 
@@ -79,19 +79,19 @@ jest.mock(
   }
 );
 
+import { EuiObserver } from '@elastic/eui/test-env/components/observer/observer';
+jest.mock('@elastic/eui/test-env/components/observer/observer');
+EuiObserver.mockImplementation(() => 'EuiObserver');
+
 // This element uses a `ref` and cannot be rendered by Jest snapshots.
 import { RenderedElement } from '../shareable_runtime/components/rendered_element';
 jest.mock('../shareable_runtime/components/rendered_element');
 RenderedElement.mockImplementation(() => 'RenderedElement');
 
-import { EuiObserver } from '@elastic/eui/test-env/components/observer/observer';
-jest.mock('@elastic/eui/test-env/components/observer/observer');
-EuiObserver.mockImplementation(() => 'EuiObserver');
-
 addSerializer(styleSheetSerializer);
 
 // Initialize Storyshots and build the Jest Snapshots
 initStoryshots({
-  configPath: path.resolve(__dirname, './../.storybook'),
+  configPath: path.resolve(__dirname, './../storybook'),
   test: multiSnapshotWithOptions({}),
 });
diff --git a/x-pack/plugins/canvas/.storybook/webpack.config.js b/x-pack/plugins/canvas/storybook/webpack.config.js
similarity index 88%
rename from x-pack/plugins/canvas/.storybook/webpack.config.js
rename to x-pack/plugins/canvas/storybook/webpack.config.js
index 3148a6742f76a..1e0e36f796128 100644
--- a/x-pack/plugins/canvas/.storybook/webpack.config.js
+++ b/x-pack/plugins/canvas/storybook/webpack.config.js
@@ -14,7 +14,7 @@ const { DLL_OUTPUT, KIBANA_ROOT } = require('./constants');
 module.exports = async ({ config }) => {
   // Find and alter the CSS rule to replace the Kibana public path string with a path
   // to the route we've added in middleware.js
-  const cssRule = config.module.rules.find(rule => rule.test.source.includes('.css$'));
+  const cssRule = config.module.rules.find((rule) => rule.test.source.includes('.css$'));
   cssRule.use.push({
     loader: 'string-replace-loader',
     options: {
@@ -153,7 +153,7 @@ module.exports = async ({ config }) => {
   config.plugins.push(
     // replace imports for `uiExports/*` modules with a synthetic module
     // created by create_ui_exports_module.js
-    new webpack.NormalModuleReplacementPlugin(/^uiExports\//, resource => {
+    new webpack.NormalModuleReplacementPlugin(/^uiExports\//, (resource) => {
       // uiExports used by Canvas
       const extensions = {
         hacks: [],
@@ -179,10 +179,22 @@ module.exports = async ({ config }) => {
     }),
 
     // Mock out libs used by a few componets to avoid loading in kibana_legacy and platform
-    new webpack.NormalModuleReplacementPlugin(/(lib)?\/notify/, path.resolve(__dirname, '../tasks/mocks/uiNotify')),
-    new webpack.NormalModuleReplacementPlugin(/lib\/download_workpad/, path.resolve(__dirname, '../tasks/mocks/downloadWorkpad')),
-    new webpack.NormalModuleReplacementPlugin(/(lib)?\/custom_element_service/, path.resolve(__dirname, '../tasks/mocks/customElementService')),
-    new webpack.NormalModuleReplacementPlugin(/(lib)?\/ui_metric/, path.resolve(__dirname, '../tasks/mocks/uiMetric')),
+    new webpack.NormalModuleReplacementPlugin(
+      /(lib)?\/notify/,
+      path.resolve(__dirname, '../tasks/mocks/uiNotify')
+    ),
+    new webpack.NormalModuleReplacementPlugin(
+      /lib\/download_workpad/,
+      path.resolve(__dirname, '../tasks/mocks/downloadWorkpad')
+    ),
+    new webpack.NormalModuleReplacementPlugin(
+      /(lib)?\/custom_element_service/,
+      path.resolve(__dirname, '../tasks/mocks/customElementService')
+    ),
+    new webpack.NormalModuleReplacementPlugin(
+      /(lib)?\/ui_metric/,
+      path.resolve(__dirname, '../tasks/mocks/uiMetric')
+    )
   );
 
   // Tell Webpack about relevant extensions
@@ -196,7 +208,10 @@ module.exports = async ({ config }) => {
     '../tasks/mocks/uiNotifyFormatMsg'
   );
   config.resolve.alias['ui/notify'] = path.resolve(__dirname, '../tasks/mocks/uiNotify');
-  config.resolve.alias['ui/url/absolute_to_parsed_url'] = path.resolve(__dirname, '../tasks/mocks/uiAbsoluteToParsedUrl');
+  config.resolve.alias['ui/url/absolute_to_parsed_url'] = path.resolve(
+    __dirname,
+    '../tasks/mocks/uiAbsoluteToParsedUrl'
+  );
   config.resolve.alias['ui/chrome'] = path.resolve(__dirname, '../tasks/mocks/uiChrome');
   config.resolve.alias.ui = path.resolve(KIBANA_ROOT, 'src/legacy/ui/public');
   config.resolve.alias.ng_mock$ = path.resolve(KIBANA_ROOT, 'src/test_utils/public/ng_mock');
diff --git a/x-pack/plugins/canvas/.storybook/webpack.dll.config.js b/x-pack/plugins/canvas/storybook/webpack.dll.config.js
similarity index 100%
rename from x-pack/plugins/canvas/.storybook/webpack.dll.config.js
rename to x-pack/plugins/canvas/storybook/webpack.dll.config.js
index 5fdc4519f3bd7..0e9371e4cb5e4 100644
--- a/x-pack/plugins/canvas/.storybook/webpack.dll.config.js
+++ b/x-pack/plugins/canvas/storybook/webpack.dll.config.js
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-const webpack = require('webpack');
 const path = require('path');
+const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const { DLL_NAME, DLL_OUTPUT, KIBANA_ROOT } = require('./constants');