📕 Storybook for everyone (take 2) (#43529)

* chore: 🤖 add Infra sample Storybook story

* chore: 🤖 add @kbn/storybook package

* chore: 🤖 add sample SIEM stories

* chore: 🤖 add Canvas new Storybook config

* fix: 🐛 fix TypeScript errors

* chore: 🤖 add @kbn/babel-preset to package.json

* chore: 🤖 move dependencies to devDependencies

* chore: 🤖 make Storybook dependencies non-dev

* chore: 🤖 upgrade Storybook dependencies

* chore: 🤖 add packages to webpack

* fix: 🐛 fix TypeScript type check

* chore: 🤖 disable ESLint warnings

* chore: 🤖 remove Storybook info plugin

* chore: 🤖 upate yarn.lock

* chore: 🤖 add Storbook to Embeddables

* feat: 🎸 add --clean flag to Storybook CLI

* coalesce yarn.lock versions

* update kbn/pm dist

* This reverts commit 97d8ff9f53 and 49b07cd007.

* chore: 🤖 use fs instead of mkdirp

* chore: 🤖 use debug for message logging

* chore: 🤖 update yarn.lock

* feat: 🎸 add link to kbn-storybook package

* docs: ✏️ add Storybook readme

* chore: 🤖 remove packages that failed DLL build

* style: 💄 add ESLint comma

* chore: 🤖 apply changes from #52209

* fix: 🐛 make Canvas Storybook build again

* chore: 🤖 move Canvas stories to global Storybook

* chore: 🤖 move more Canvas components to global Storybook

* chore: 🤖 move more Canvas stories to global Storybook

* chore: 🤖 move <ItemGrid> and <KeyboardShortcutsDoc> to NP SB

* chore: 🤖 move shape picker Canvas stories to global Storybook

* chore: 🤖 move Canvas sidebar stories to global Storybook

* fix: 🐛 split imports to not import path.resolve in Storybook

* chore: 🤖 move tag and PDF panel Canvas stories to global SB

* chore: 🤖 move Canvas share website flyout stories to global SB

* fix: 🐛 clean up <ShareWebsiteFlyout> imports

* chore: 🤖 add back Canvas withInfo decorator

* chore: 🤖 look for Canvas stories everywhere in /canvas folder

* test: 💍 mock correct files in Storyshots

* test: 💍 update Canvas Storyshot snapshots

* chore: 🤖 move more Canvas components to global Storybook

* chore: 🤖 move more Canvas components to global Storybook

* test: 💍 update Canvas Storyshots

* chore: 🤖 rebuild @kbn/pm

* chore: 🤖 refresh @kbn/pm dist/index.js artifact

* chore: 🤖 update yarn.lock

* chore: 🤖 update @kbn/pm artifact

* feat: 🎸 address review comments

* fix: 🐛 remove circular import

* chore: 🤖 update yarn.lock

* test: 💍 disable a test suite

* test: 💍 update Canvas storyshots

* chore: 🤖 remvoe build step from @kbn/storybook

* chore: 🤖 enable disabled functional test suite

Co-authored-by: Spencer <email@spalger.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

package.json

@@ -71,6 +71,7 @@
     "kbn:bootstrap": "yarn build:types && node scripts/register_git_hook",
     "spec_to_console": "node scripts/spec_to_console",
     "backport-skip-ci": "backport --prDescription \"[skip-ci]\"",
+    "storybook": "node scripts/storybook",
     "cover:report": "nyc report --temp-dir target/kibana-coverage/functional --report-dir target/coverage/report --reporter=lcov && open ./target/coverage/report/lcov-report/index.html"
   },
   "repository": {
@@ -460,10 +461,13 @@
     "postcss-url": "^8.0.0",
     "prettier": "^1.19.1",
     "proxyquire": "1.8.0",
+    "react-popper-tooltip": "^2.10.1",
+    "react-textarea-autosize": "^7.1.2",
     "regenerate": "^1.4.0",
     "sass-lint": "^1.12.1",
     "selenium-webdriver": "^4.0.0-alpha.5",
     "simple-git": "1.116.0",
+    "simplebar-react": "^2.1.0",
     "sinon": "^7.4.2",
     "strip-ansi": "^3.0.1",
     "supertest": "^3.1.0",

packages/kbn-dev-utils/src/index.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-export { withProcRunner } from './proc_runner';
+export { withProcRunner, ProcRunner } from './proc_runner';
 export {
   ToolingLog,
   ToolingLogTextWriter,

packages/kbn-dev-utils/src/proc_runner/index.ts

@@ -18,3 +18,4 @@
  */
 
 export { withProcRunner } from './with_proc_runner';
+export { ProcRunner } from './proc_runner';

packages/kbn-dev-utils/src/run/run.ts

@@ -23,11 +23,13 @@ import exitHook from 'exit-hook';
 import { pickLevelFromFlags, ToolingLog } from '../tooling_log';
 import { createFlagError, isFailError } from './fail';
 import { Flags, getFlags, getHelp } from './flags';
+import { ProcRunner, withProcRunner } from '../proc_runner';
 
 type CleanupTask = () => void;
 type RunFn = (args: {
   log: ToolingLog;
   flags: Flags;
+  procRunner: ProcRunner;
   addCleanupTask: (task: CleanupTask) => void;
 }) => Promise<void> | void;
 
@@ -102,10 +104,13 @@ export async function run(fn: RunFn, options: Options = {}) {
     }
 
     try {
-      await fn({
-        log,
-        flags,
-        addCleanupTask: (task: CleanupTask) => cleanupTasks.push(task),
+      await withProcRunner(log, async procRunner => {
+        await fn({
+          log,
+          flags,
+          procRunner,
+          addCleanupTask: (task: CleanupTask) => cleanupTasks.push(task),
+        });
       });
     } finally {
       doCleanup();

packages/kbn-pm/dist/index.js

@@ -4489,6 +4489,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = __webpack_require__(36);
 var proc_runner_1 = __webpack_require__(37);
 exports.withProcRunner = proc_runner_1.withProcRunner;
+exports.ProcRunner = proc_runner_1.ProcRunner;
 var tooling_log_1 = __webpack_require__(415);
 exports.ToolingLog = tooling_log_1.ToolingLog;
 exports.ToolingLogTextWriter = tooling_log_1.ToolingLogTextWriter;
@@ -4761,6 +4762,8 @@ function __importDefault(mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var with_proc_runner_1 = __webpack_require__(38);
 exports.withProcRunner = with_proc_runner_1.withProcRunner;
+var proc_runner_1 = __webpack_require__(39);
+exports.ProcRunner = proc_runner_1.ProcRunner;
 
 
 /***/ }),
@@ -37069,6 +37072,7 @@ const exit_hook_1 = tslib_1.__importDefault(__webpack_require__(348));
 const tooling_log_1 = __webpack_require__(415);
 const fail_1 = __webpack_require__(425);
 const flags_1 = __webpack_require__(426);
+const proc_runner_1 = __webpack_require__(37);
 async function run(fn, options = {}) {
     var _a;
     const flags = flags_1.getFlags(process.argv.slice(2), options);
@@ -37118,10 +37122,13 @@ async function run(fn, options = {}) {
             throw fail_1.createFlagError(`Unknown flag(s) "${flags.unexpected.join('", "')}"`);
         }
         try {
-            await fn({
-                log,
-                flags,
-                addCleanupTask: (task) => cleanupTasks.push(task),
+            await proc_runner_1.withProcRunner(log, async (procRunner) => {
+                await fn({
+                    log,
+                    flags,
+                    procRunner,
+                    addCleanupTask: (task) => cleanupTasks.push(task),
+                });
             });
         }
         finally {

packages/kbn-storybook/README.md

@@ -0,0 +1,33 @@
+# Kibana Storybook
+
+This package provides ability to add [Storybook](https://storybook.js.org/) to any Kibana plugin.
+
+- [Setup Instructions](#setup-instructions)
+
+
+## Setup Instructions
+
+1. Add `storybook.js` launcher file to your plugin. For example, create a file at
+   `src/plugins/<plugin>/scripts/storybook.js`, with the following contents:
+
+   ```js
+   import { join } from 'path';
+
+   // eslint-disable-next-line
+   require('@kbn/storybook').runStorybookCli({
+     name: '<plugin>',
+     storyGlobs: [join(__dirname, '..', 'public', 'components', '**', '*.examples.tsx')],
+   });
+   ```
+2. Add your plugin alias to `src/dev/storybook/aliases.ts` config.
+3. Create sample Storybook stories. For example, in your plugin create create a file at
+   `src/plugins/<plugin>/public/components/hello_world/__examples__/hello_world.examples.tsx` with
+   the following contents:
+
+   ```jsx
+   import * as React from 'react';
+   import { storiesOf } from '@storybook/react';
+
+   storiesOf('Hello world', module).add('default', () => <div>Hello world!</div>);
+   ```
+4. Launch Storybook with `yarn storybook <plugin>`.

packages/kbn-storybook/index.js

@@ -0,0 +1,86 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const fs = require('fs');
+const { join } = require('path');
+const Rx = require('rxjs');
+const { first } = require('rxjs/operators');
+const storybook = require('@storybook/react/standalone');
+const { run } = require('@kbn/dev-utils');
+const { generateStorybookEntry } = require('./lib/storybook_entry');
+const { REPO_ROOT, CURRENT_CONFIG } = require('./lib/constants');
+const { buildDll } = require('./lib/dll');
+
+exports.runStorybookCli = config => {
+  const { name, storyGlobs } = config;
+  run(
+    async ({ flags, log, procRunner }) => {
+      log.debug('Global config:\n', require('./lib/constants'));
+
+      const currentConfig = JSON.stringify(config, null, 2);
+      const currentConfigDir = join(CURRENT_CONFIG, '..');
+      await fs.promises.mkdir(currentConfigDir, { recursive: true });
+      log.debug('Writing currentConfig:\n', CURRENT_CONFIG + '\n', currentConfig);
+      await fs.promises.writeFile(CURRENT_CONFIG, `exports.currentConfig = ${currentConfig};`);
+
+      await buildDll({
+        rebuildDll: flags.rebuildDll,
+        log,
+        procRunner,
+      });
+
+      // Build sass and continue when initial build complete
+      await procRunner.run('watch sass', {
+        cmd: process.execPath,
+        args: ['scripts/build_sass', '--watch'],
+        cwd: REPO_ROOT,
+        wait: /scss bundles created/,
+      });
+
+      const subj = new Rx.ReplaySubject(1);
+      generateStorybookEntry({ log, storyGlobs }).subscribe(subj);
+
+      await subj.pipe(first()).toPromise();
+
+      await Promise.all([
+        // route errors
+        subj.toPromise(),
+
+        new Promise(() => {
+          // storybook never completes, so neither will this promise
+          const configDir = join(__dirname, 'storybook_config');
+          log.debug('Config dir:', configDir);
+          storybook({
+            mode: 'dev',
+            port: 9001,
+            configDir,
+          });
+        }),
+      ]);
+    },
+    {
+      flags: {
+        boolean: ['rebuildDll'],
+      },
+      description: `
+        Run the storybook examples for ${name}
+      `,
+    }
+  );
+};

packages/kbn-storybook/lib/constants.js

@@ -0,0 +1,27 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const { resolve, dirname } = require('path');
+
+exports.REPO_ROOT = dirname(require.resolve('../../../package.json'));
+exports.ASSET_DIR = resolve(exports.REPO_ROOT, 'built_assets/storybook');
+exports.CURRENT_CONFIG = resolve(exports.ASSET_DIR, 'current.config.js');
+exports.STORY_ENTRY_PATH = resolve(exports.ASSET_DIR, 'stories.entry.js');
+exports.DLL_DIST_DIR = resolve(exports.ASSET_DIR, 'dll');
+exports.DLL_NAME = 'storybook_dll';

packages/kbn-storybook/lib/dll.js

@@ -0,0 +1,41 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const { resolve } = require('path');
+const { existsSync } = require('fs');
+
+const { REPO_ROOT, DLL_DIST_DIR } = require('./constants');
+
+exports.buildDll = async ({ rebuildDll, log, procRunner }) => {
+  if (rebuildDll) {
+    log.info('rebuilding dll');
+  } else if (!existsSync(resolve(DLL_DIST_DIR, 'dll.js'))) {
+    log.info('dll missing, rebuilding');
+  } else {
+    log.info('dll exists');
+    return;
+  }
+
+  await procRunner.run('build dll ', {
+    cmd: require.resolve('webpack/bin/webpack'),
+    args: ['--config', require.resolve('./webpack.dll.config.js')],
+    cwd: REPO_ROOT,
+    wait: true,
+  });
+};

packages/kbn-storybook/lib/storybook_entry.js

@@ -0,0 +1,89 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const { resolve, relative, dirname } = require('path');
+const Fs = require('fs');
+const Rx = require('rxjs');
+const { mergeMap, map, debounceTime } = require('rxjs/operators');
+const normalize = require('normalize-path');
+const { promisify } = require('util');
+
+const watch = require('glob-watcher');
+const mkdirp = require('mkdirp'); // eslint-disable-line
+const glob = require('fast-glob');
+
+const mkdirpAsync = promisify(mkdirp);
+const writeFileAsync = promisify(Fs.writeFile);
+
+const { REPO_ROOT, STORY_ENTRY_PATH } = require('./constants');
+const STORE_ENTRY_DIR = dirname(STORY_ENTRY_PATH);
+
+exports.generateStorybookEntry = ({ log, storyGlobs }) => {
+  const globs = ['built_assets/css/**/*.light.css', ...storyGlobs];
+  log.info('Storybook globs:\n', globs);
+  const norm = p => normalize(relative(STORE_ENTRY_DIR, p));
+
+  return Rx.defer(() =>
+    glob(globs, {
+      absolute: true,
+      cwd: REPO_ROOT,
+      onlyFiles: true,
+    })
+  ).pipe(
+    map(paths => {
+      log.info('Discovered Storybook entry points:\n', paths);
+      return new Set(paths.map(norm));
+    }),
+    mergeMap(
+      paths =>
+        new Rx.Observable(observer => {
+          observer.next(paths);
+
+          const chokidar = watch(globs, { cwd: REPO_ROOT })
+            .on('add', path => {
+              observer.next(paths.add(norm(resolve(REPO_ROOT, path))));
+            })
+            .on('unlink', path => {
+              observer.next(paths.delete(norm(resolve(REPO_ROOT, path))));
+            });
+
+          return () => {
+            chokidar.close();
+          };
+        })
+    ),
+    debounceTime(200),
+    mergeMap(async (paths, i) => {
+      await mkdirpAsync(STORE_ENTRY_DIR);
+
+      let content = '';
+      for (const path of paths) {
+        content += `require('${path}');\n`;
+      }
+
+      await writeFileAsync(STORY_ENTRY_PATH, content);
+
+      if (i === 0) {
+        log.info('%d paths written to entry file', paths.size);
+      } else {
+        log.info('entry file updated');
+      }
+    })
+  );
+};

packages/kbn-storybook/lib/webpack.dll.config.js

@@ -0,0 +1,149 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const webpack = require('webpack');
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const { DLL_NAME, REPO_ROOT, DLL_DIST_DIR } = require('./constants');
+
+// This is the Webpack config for the DLL of CSS and JS assets that are
+// not expected to change during development.  This saves compile and run
+// times considerably.
+module.exports = {
+  context: REPO_ROOT,
+  mode: 'development',
+
+  // This is a (potentially growing) list of modules that can be safely
+  // included in the DLL.  Only add to this list modules or other code
+  // which Storybook stories and their components would require, but don't
+  // change during development.
+  entry: [
+    '@elastic/eui/dist/eui_theme_light.css',
+    '@kbn/ui-framework/dist/kui_light.css',
+    '@storybook/addon-info',
+    '@storybook/addon-knobs',
+    '@storybook/addon-knobs/react',
+    '@storybook/addon-knobs/register',
+    '@storybook/addon-options',
+    '@storybook/addon-options/register',
+    '@storybook/core',
+    '@storybook/core/dist/server/common/polyfills.js',
+    '@storybook/react',
+    '@storybook/theming',
+    'angular-mocks',
+    'angular',
+    'brace',
+    'chroma-js',
+    'highlight.js',
+    'html-entities',
+    'jquery',
+    'lodash.clone',
+    'lodash',
+    'markdown-it',
+    'mocha',
+    'prop-types',
+    'react-ace',
+    'react-beautiful-dnd',
+    'react-dom',
+    'react-focus-lock',
+    'react-markdown',
+    'react-resize-detector',
+    'react-virtualized',
+    'react',
+    'recompose',
+    'redux-actions',
+    'remark-parse',
+    'rxjs',
+    'sinon',
+    'tinycolor2',
+    './src/legacy/ui/public/styles/font_awesome.less',
+    './src/legacy/ui/public/styles/bootstrap/bootstrap_light.less',
+  ],
+  plugins: [
+    // Produce the DLL and its manifest
+    new webpack.DllPlugin({
+      name: DLL_NAME,
+      path: path.resolve(DLL_DIST_DIR, 'manifest.json'),
+    }),
+    // Produce the DLL CSS file
+    new MiniCssExtractPlugin({
+      filename: 'dll.css',
+    }),
+  ],
+  // Output the DLL JS file
+  output: {
+    path: DLL_DIST_DIR,
+    filename: 'dll.js',
+    library: DLL_NAME,
+  },
+  // Include a require alias for legacy UI code and styles
+  resolve: {
+    alias: {
+      ui: path.resolve(REPO_ROOT, 'src/legacy/ui/public'),
+    },
+    mainFields: ['browser', 'main'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {},
+          },
+          { loader: 'css-loader' },
+          {
+            loader: 'string-replace-loader',
+            options: {
+              search: '__REPLACE_WITH_PUBLIC_PATH__',
+              replace: '/',
+              flags: 'g',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader', options: { importLoaders: 2 } },
+          {
+            loader: 'postcss-loader',
+            options: {
+              config: {
+                path: path.resolve(REPO_ROOT, 'src/optimize/postcss.config.js'),
+              },
+            },
+          },
+          { loader: 'less-loader' },
+        ],
+      },
+      {
+        test: /\.(woff|woff2|ttf|eot|svg|ico)(\?|$)/,
+        loader: 'file-loader',
+      },
+    ],
+  },
+  node: {
+    fs: 'empty',
+    child_process: 'empty',
+  },
+};

packages/kbn-storybook/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@kbn/storybook",
+  "version": "1.0.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@kbn/babel-preset": "1.0.0",
+    "@kbn/dev-utils": "1.0.0",
+    "@storybook/addon-actions": "^5.2.8",
+    "@storybook/addon-console": "^1.2.1",
+    "@storybook/addon-info": "^5.2.8",
+    "@storybook/addon-knobs": "^5.2.8",
+    "@storybook/addon-options": "^5.2.8",
+    "@storybook/addon-storyshots": "^5.2.8",
+    "@storybook/react": "^5.2.8",
+    "@storybook/theming": "^5.2.8",
+    "copy-webpack-plugin": "5.0.3",
+    "execa": "1.0.0",
+    "fast-glob": "2.2.7",
+    "glob-watcher": "5.0.3",
+    "jest-specific-snapshot": "2.0.0",
+    "jest-styled-components": "6.3.1",
+    "mkdirp": "0.5.1",
+    "mini-css-extract-plugin": "0.7.0",
+    "normalize-path": "3.0.0",
+    "react-docgen-typescript-loader": "3.1.0",
+    "rxjs": "6.5.2",
+    "serve-static": "1.14.1",
+    "styled-components": "^3",
+    "webpack": "4.34.0"
+  }
+}

packages/kbn-storybook/storybook_config/addons.js

@@ -0,0 +1,23 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import '@storybook/addon-options/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-console';

packages/kbn-storybook/storybook_config/config.js

@@ -0,0 +1,68 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+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';
+
+// If we're running Storyshots, be sure to register the require context hook.
+// Otherwise, add the other decorators.
+if (process.env.NODE_ENV === 'test') {
+  // eslint-disable-next-line
+  require('babel-plugin-require-context-hook/register')();
+} else {
+  // Customize the info for each story.
+  addDecorator(
+    withInfo({
+      inline: true,
+      styles: {
+        infoBody: {
+          margin: 20,
+        },
+        infoStory: {
+          margin: '40px 60px',
+        },
+      },
+    })
+  );
+
+  // Add optional knobs to customize each story.
+  addDecorator(withKnobs);
+}
+
+// Set up the Storybook environment with custom settings.
+addParameters({
+  options: {
+    theme: create({
+      base: 'light',
+      brandTitle: 'Kibana Storybook',
+      brandUrl: 'https://github.com/elastic/kibana/tree/master/packages/kbn-storybook',
+    }),
+    showPanel: true,
+    isFullscreen: false,
+    panelPosition: 'bottom',
+    isToolshown: true,
+  },
+});
+
+configure(() => {
+  // eslint-disable-next-line
+  require('../../../built_assets/storybook/stories.entry.js');
+}, module);

packages/kbn-storybook/storybook_config/middleware.js

@@ -0,0 +1,26 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const serve = require('serve-static');
+const path = require('path');
+
+// 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/legacy/ui/public/assets')));
+};

packages/kbn-storybook/storybook_config/mocks/absolute_to_parsed_url.js

@@ -0,0 +1,23 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const absoluteToParsedUrl = () => {
+  getAbsoluteUrl: () =>
+    'http://localhost:5601/kbp/app/canvas#/workpad/workpad-24d56dad-ae70-42b8-9ef1-c5350ecd426c/page/1';
+}; // noop

packages/kbn-storybook/storybook_config/mocks/noop.js

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export default function() {}

packages/kbn-storybook/storybook_config/mocks/state_store.js

@@ -0,0 +1,26 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export function getState() {
+  return {
+    assets: {
+      yay: { value: 'here is your image' },
+    },
+  };
+}

packages/kbn-storybook/storybook_config/mocks/ui_storage.js

@@ -0,0 +1,28 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export class Storage {
+  get(key) {
+    return this[key];
+  }
+
+  set(key, value) {
+    this[key] = value;
+  }
+}

packages/kbn-storybook/storybook_config/preview-head.html

@@ -0,0 +1,6 @@
+<!--
+  This file is looked for by Storybook and included in the HEAD element
+  if it exists.  This is how we load the DLL content into the Storybook UI.
+-->
+<script src="/dll.js"></script>
+<link href="/dll.css" rel="stylesheet" />

packages/kbn-storybook/storybook_config/webpack.config.js

@@ -0,0 +1,108 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const { resolve } = require('path');
+const webpack = require('webpack');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const { REPO_ROOT, DLL_DIST_DIR } = require('../lib/constants');
+// eslint-disable-next-line import/no-unresolved
+const { currentConfig } = require('../../../built_assets/storybook/current.config');
+
+// Extend the Storybook Webpack config with some customizations
+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$'));
+  cssRule.use.push({
+    loader: 'string-replace-loader',
+    options: {
+      search: '__REPLACE_WITH_PUBLIC_PATH__',
+      replace: '/',
+      flags: 'g',
+    },
+  });
+
+  // Include the React preset from Kibana for Storybook JS files.
+  config.module.rules.push({
+    test: /\.js$/,
+    exclude: /node_modules/,
+    loaders: 'babel-loader',
+    options: {
+      presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
+    },
+  });
+
+  // Handle Typescript files
+  config.module.rules.push({
+    test: /\.tsx?$/,
+    use: [
+      {
+        loader: 'babel-loader',
+        options: {
+          presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
+        },
+      },
+    ],
+  });
+
+  // Parse props data for .tsx files
+  config.module.rules.push({
+    test: /\.tsx$/,
+    // Exclude example files, as we don't display props info for them
+    exclude: /\.examples.tsx$/,
+    use: [
+      // Parse TS comments to create Props tables in the UI
+      require.resolve('react-docgen-typescript-loader'),
+    ],
+  });
+
+  // Reference the built DLL file of static(ish) dependencies, which are removed
+  // during kbn:bootstrap and rebuilt if missing.
+  config.plugins.push(
+    new webpack.DllReferencePlugin({
+      manifest: resolve(DLL_DIST_DIR, 'manifest.json'),
+      context: REPO_ROOT,
+    })
+  );
+
+  // Copy the DLL files to the Webpack build for use in the Storybook UI
+  config.plugins.push(
+    new CopyWebpackPlugin([
+      {
+        from: resolve(DLL_DIST_DIR, 'dll.js'),
+        to: 'dll.js',
+      },
+      {
+        from: resolve(DLL_DIST_DIR, 'dll.css'),
+        to: 'dll.css',
+      },
+    ])
+  );
+
+  // Tell Webpack about the ts/x extensions
+  config.resolve.extensions.push('.ts', '.tsx');
+
+  // Load custom Webpack config specified by a plugin.
+  if (currentConfig.webpackHook) {
+    // eslint-disable-next-line import/no-dynamic-require
+    config = await require(currentConfig.webpackHook)({ config });
+  }
+
+  return config;
+};

scripts/storybook.js

@@ -0,0 +1,21 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+require('../src/setup_node_env');
+require('../src/dev/storybook/run_storybook_cli');

src/dev/precommit_hook/casing_check_config.js

@@ -52,6 +52,9 @@ export const IGNORE_FILE_GLOBS = [
 
   // filename must match language code which requires capital letters
   '**/translations/*.json',
+
+  // filename is required by storybook
+  'packages/kbn-storybook/storybook_config/preview-head.html',
 ];
 
 /**

src/dev/storybook/aliases.ts

@@ -0,0 +1,25 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const storybookAliases = {
+  canvas: 'x-pack/legacy/plugins/canvas/scripts/storybook_new.js',
+  embeddable: 'src/plugins/embeddable/scripts/storybook.js',
+  infra: 'x-pack/legacy/plugins/infra/scripts/storybook.js',
+  siem: 'x-pack/legacy/plugins/siem/scripts/storybook.js',
+};

src/dev/storybook/commands/clean.ts

@@ -0,0 +1,32 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ToolingLog } from '@kbn/dev-utils';
+import { REPO_ROOT } from '@kbn/dev-utils';
+import { join } from 'path';
+import del from 'del';
+
+export const clean = async ({ log }: { log: ToolingLog }) => {
+  log.info('Cleaning Storybook build folder');
+
+  const dir = join(REPO_ROOT, 'built_assets', 'storybook');
+  log.info('Deleting folder:', dir);
+  await del([join(dir, '*')]);
+  await del([dir]);
+};

src/dev/storybook/run_storybook_cli.ts

@@ -0,0 +1,78 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { join } from 'path';
+import { run, createFlagError } from '@kbn/dev-utils';
+import { REPO_ROOT } from '@kbn/dev-utils';
+import { storybookAliases } from './aliases';
+import { clean } from './commands/clean';
+
+run(
+  async params => {
+    const { flags, log } = params;
+    const {
+      _: [alias],
+    } = flags;
+
+    if (flags.verbose) {
+      log.verbose('Flags:', flags);
+    }
+
+    if (flags.clean) {
+      await clean({ log });
+      return;
+    }
+
+    if (!alias) {
+      throw createFlagError('missing alias');
+    }
+
+    if (!storybookAliases.hasOwnProperty(alias)) {
+      throw createFlagError(`unknown alias [${alias}]`);
+    }
+
+    const relative = (storybookAliases as any)[alias];
+    const absolute = join(REPO_ROOT, relative);
+
+    log.verbose('Loading Storybook:', absolute);
+    process.chdir(join(absolute, '..', '..'));
+    require(absolute);
+  },
+  {
+    usage: `node scripts/storybook <alias>`,
+    description: `
+      Start a 📕 Storybook for a plugin
+
+      Available aliases:
+        ${Object.keys(storybookAliases)
+          .map(alias => `📕 ${alias}`)
+          .join('\n        ')}
+
+      Add your alias in src/dev/storybook/aliases.ts
+    `,
+    flags: {
+      default: {},
+      string: [],
+      boolean: ['clean'],
+      help: `
+      --clean            Clean Storybook build folder.
+    `,
+    },
+  }
+);

src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_operators.ts

@@ -18,11 +18,11 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { esFilters } from '../../../..';
+import { FILTERS } from '../../../../../common/es_query/filters';
 
 export interface Operator {
   message: string;
-  type: esFilters.FILTERS;
+  type: FILTERS;
   negate: boolean;
   fieldTypes?: string[];
 }
@@ -31,7 +31,7 @@ export const isOperator = {
   message: i18n.translate('data.filter.filterEditor.isOperatorOptionLabel', {
     defaultMessage: 'is',
   }),
-  type: esFilters.FILTERS.PHRASE,
+  type: FILTERS.PHRASE,
   negate: false,
 };
 
@@ -39,7 +39,7 @@ export const isNotOperator = {
   message: i18n.translate('data.filter.filterEditor.isNotOperatorOptionLabel', {
     defaultMessage: 'is not',
   }),
-  type: esFilters.FILTERS.PHRASE,
+  type: FILTERS.PHRASE,
   negate: true,
 };
 
@@ -47,7 +47,7 @@ export const isOneOfOperator = {
   message: i18n.translate('data.filter.filterEditor.isOneOfOperatorOptionLabel', {
     defaultMessage: 'is one of',
   }),
-  type: esFilters.FILTERS.PHRASES,
+  type: FILTERS.PHRASES,
   negate: false,
   fieldTypes: ['string', 'number', 'date', 'ip', 'geo_point', 'geo_shape'],
 };
@@ -56,7 +56,7 @@ export const isNotOneOfOperator = {
   message: i18n.translate('data.filter.filterEditor.isNotOneOfOperatorOptionLabel', {
     defaultMessage: 'is not one of',
   }),
-  type: esFilters.FILTERS.PHRASES,
+  type: FILTERS.PHRASES,
   negate: true,
   fieldTypes: ['string', 'number', 'date', 'ip', 'geo_point', 'geo_shape'],
 };
@@ -65,7 +65,7 @@ export const isBetweenOperator = {
   message: i18n.translate('data.filter.filterEditor.isBetweenOperatorOptionLabel', {
     defaultMessage: 'is between',
   }),
-  type: esFilters.FILTERS.RANGE,
+  type: FILTERS.RANGE,
   negate: false,
   fieldTypes: ['number', 'date', 'ip'],
 };
@@ -74,7 +74,7 @@ export const isNotBetweenOperator = {
   message: i18n.translate('data.filter.filterEditor.isNotBetweenOperatorOptionLabel', {
     defaultMessage: 'is not between',
   }),
-  type: esFilters.FILTERS.RANGE,
+  type: FILTERS.RANGE,
   negate: true,
   fieldTypes: ['number', 'date', 'ip'],
 };
@@ -83,7 +83,7 @@ export const existsOperator = {
   message: i18n.translate('data.filter.filterEditor.existsOperatorOptionLabel', {
     defaultMessage: 'exists',
   }),
-  type: esFilters.FILTERS.EXISTS,
+  type: FILTERS.EXISTS,
   negate: false,
 };
 
@@ -91,7 +91,7 @@ export const doesNotExistOperator = {
   message: i18n.translate('data.filter.filterEditor.doesNotExistOperatorOptionLabel', {
     defaultMessage: 'does not exist',
   }),
-  type: esFilters.FILTERS.EXISTS,
+  type: FILTERS.EXISTS,
   negate: true,
 };
 

src/plugins/embeddable/public/components/embeddable_panel/__examples__/embeddable_panel.examples.tsx

@@ -0,0 +1,24 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { EmbeddablePanel } from '..';
+
+storiesOf('components/EmbeddablePanel', module).add('default', () => <EmbeddablePanel />);

src/plugins/embeddable/public/components/embeddable_panel/index.tsx

@@ -0,0 +1,29 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { EuiPanel } from '@elastic/eui';
+import * as React from 'react';
+
+export const EmbeddablePanel = () => {
+  return (
+    <EuiPanel data-test-subj="embeddablePanel" paddingSize="none" role="figure">
+      Hello world
+    </EuiPanel>
+  );
+};

src/plugins/embeddable/scripts/storybook.js

@@ -0,0 +1,26 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { join } from 'path';
+
+// eslint-disable-next-line
+require('@kbn/storybook').runStorybookCli({
+  name: 'embeddable',
+  storyGlobs: [join(__dirname, '..', 'public', 'components', '**', '*.examples.tsx')],
+});

x-pack/legacy/plugins/canvas/.storybook/config.js

@@ -10,7 +10,6 @@ import { withKnobs } from '@storybook/addon-knobs/react';
 import { withInfo } from '@storybook/addon-info';
 import { create } from '@storybook/theming';
 
-import { coreMock } from 'src/core/public/mocks';
 import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
 
 // If we're running Storyshots, be sure to register the require context hook.
@@ -38,9 +37,12 @@ if (process.env.NODE_ENV === 'test') {
 }
 
 // Add New Platform Context for any stories that need it
-addDecorator(fn => (
-  <KibanaContextProvider services={coreMock.createStart()}>{fn()}</KibanaContextProvider>
-));
+const settings = new Map();
+settings.set('darkMode', true);
+const platform = {
+  uiSettings: settings,
+};
+addDecorator(fn => <KibanaContextProvider services={platform}>{fn()}</KibanaContextProvider>);
 
 function loadStories() {
   require('./dll_contexts');
@@ -55,7 +57,7 @@ function loadStories() {
   css.keys().forEach(filename => css(filename));
 
   // Find all files ending in *.examples.ts
-  const req = require.context('./..', true, /.examples.tsx$/);
+  const req = require.context('./..', true, /.(stories|examples).tsx$/);
   req.keys().forEach(filename => req(filename));
 }
 

x-pack/legacy/plugins/canvas/.storybook/dll_contexts.js

@@ -26,3 +26,10 @@ const uiStyles = require.context(
   /[\/\\](?!mixins|variables|_|\.|bootstrap_(light|dark))[^\/\\]+\.less/
 );
 uiStyles.keys().forEach(key => uiStyles(key));
+
+const json = require.context(
+  '../shareable_runtime/test/workpads',
+  false,
+  /\.json$/
+);
+json.keys().forEach(key => json(key));

x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js

@@ -52,7 +52,7 @@ jest.mock('plugins/interpreter/registries', () => ({}));
 
 // Disabling this test due to https://github.com/elastic/eui/issues/2242
 jest.mock(
-  '../public/components/workpad_header/workpad_export/__examples__/disabled_panel.examples',
+  '../public/components/workpad_header/workpad_export/__examples__/disabled_panel.stories',
   () => {
     return 'Disabled Panel';
   }
@@ -60,7 +60,7 @@ jest.mock(
 
 // Disabling this test due to https://github.com/elastic/eui/issues/2242
 jest.mock(
-  '../public/components/workpad_header/workpad_export/flyout/__examples__/share_website_flyout.examples',
+  '../public/components/workpad_header/workpad_export/flyout/__examples__/share_website_flyout.stories',
   () => {
     return 'Disabled Panel';
   }

x-pack/legacy/plugins/canvas/.storybook/webpack.config.js

@@ -47,15 +47,18 @@ module.exports = async ({ config }) => {
   });
 
   // Parse props data for .tsx files
-  config.module.rules.push({
-    test: /\.tsx$/,
-    // Exclude example files, as we don't display props info for them
-    exclude: /\.examples.tsx$/,
-    use: [
-      // Parse TS comments to create Props tables in the UI
-      require.resolve('react-docgen-typescript-loader'),
-    ],
-  });
+  // This is notoriously slow, and is making Storybook unusable.  Disabling for now.
+  // See: https://github.com/storybookjs/storybook/issues/7998
+  // 
+  // config.module.rules.push({
+  //   test: /\.tsx$/,
+  //   // Exclude example files, as we don't display props info for them
+  //   exclude: /\.examples.tsx$/,
+  //   use: [
+  //     // Parse TS comments to create Props tables in the UI
+  //     require.resolve('react-docgen-typescript-loader'),
+  //   ],
+  // });
 
   // Enable SASS, but exclude CSS Modules in Storybook
   config.module.rules.push({

x-pack/legacy/plugins/canvas/.storybook/webpack.dll.config.js

@@ -24,9 +24,7 @@ module.exports = {
   entry: [
     '@elastic/eui/dist/eui_theme_light.css',
     '@kbn/ui-framework/dist/kui_light.css',
-    '@storybook/addon-actions',
     '@storybook/addon-actions/register',
-    '@storybook/addon-info',
     '@storybook/addon-knobs',
     '@storybook/addon-knobs/react',
     '@storybook/addon-knobs/register',

x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/datetime_quick_list.tsx

@@ -8,7 +8,7 @@ import React, { ReactNode, FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import { EuiButton, EuiButtonEmpty } from '@elastic/eui';
 import 'react-datetime/css/react-datetime.css';
-import { UnitStrings } from '../../../../../i18n';
+import { UnitStrings } from '../../../../../i18n/units';
 
 const { quickRanges: strings } = UnitStrings;
 

x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/quick_ranges.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { UnitStrings } from '../../../../../../i18n';
+import { UnitStrings } from '../../../../../../i18n/units';
 
 export interface QuickRange {
   /** Start date string of range */

x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.tsx

@@ -11,7 +11,7 @@ import { EuiButton } from '@elastic/eui';
 import moment from 'moment';
 import { DatetimeQuickList } from '../datetime_quick_list';
 import { DatetimeRangeAbsolute } from '../datetime_range_absolute';
-import { ComponentStrings } from '../../../../../i18n';
+import { ComponentStrings } from '../../../../../i18n/components';
 
 const { TimePicker: strings } = ComponentStrings;
 

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx

@@ -10,7 +10,7 @@ import { EuiSelect, EuiFormRow, EuiSpacer, EuiText } from '@elastic/eui';
 import immutable from 'object-path-immutable';
 import { get } from 'lodash';
 import { ExpressionAST } from '../../../../types';
-import { ArgumentStrings } from '../../../../i18n';
+import { ArgumentStrings } from '../../../../i18n/ui';
 
 const { AxisConfig: strings } = ArgumentStrings;
 

x-pack/legacy/plugins/canvas/common/lib/constants.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { SHAREABLE_RUNTIME_NAME } from '../../shareable_runtime/constants';
+import { SHAREABLE_RUNTIME_NAME } from '../../shareable_runtime/constants_static';
 
 export const CANVAS_TYPE = 'canvas-workpad';
 export const CUSTOM_ELEMENT_TYPE = 'canvas-element';

x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { MouseEvent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiButtonIcon } from '@elastic/eui';
 // @ts-ignore untyped local
@@ -28,7 +28,7 @@ interface Props {
 }
 
 export const ArgAddPopover = ({ options }: Props) => {
-  const button = (handleClick: (ev: MouseEvent) => void) => (
+  const button = (handleClick: React.MouseEventHandler<HTMLButtonElement>) => (
     <EuiButtonIcon
       iconType="plusInCircle"
       aria-label={strings.getAddAriaLabel()}

x-pack/legacy/plugins/canvas/public/components/color_manager/color_manager.tsx

@@ -10,7 +10,7 @@ import React, { FunctionComponent } from 'react';
 import tinycolor from 'tinycolor2';
 import { ColorDot } from '../color_dot/color_dot';
 
-import { ComponentStrings } from '../../../i18n';
+import { ComponentStrings } from '../../../i18n/components';
 
 const { ColorManager: strings } = ComponentStrings;
 

x-pack/legacy/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx

@@ -6,7 +6,7 @@
 
 import { EuiLink, PopoverAnchorPosition } from '@elastic/eui';
 import PropTypes from 'prop-types';
-import React, { FunctionComponent, MouseEvent } from 'react';
+import React, { FunctionComponent } from 'react';
 import tinycolor from 'tinycolor2';
 import { ColorDot } from '../color_dot';
 import { ColorPicker, Props as ColorPickerProps } from '../color_picker';
@@ -19,7 +19,7 @@ export interface Props extends ColorPickerProps {
 
 export const ColorPickerPopover: FunctionComponent<Props> = (props: Props) => {
   const { value, anchorPosition, ariaLabel, ...rest } = props;
-  const button = (handleClick: (ev: MouseEvent) => void) => (
+  const button = (handleClick: React.MouseEventHandler<HTMLButtonElement>) => (
     <EuiLink
       aria-label={`${ariaLabel} ${tinycolor(value).toName() || value}`}
       style={{ fontSize: 0 }}

x-pack/legacy/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx

@@ -31,7 +31,7 @@ import {
 import { VALID_IMAGE_TYPES } from '../../../common/lib/constants';
 import { encode } from '../../../common/lib/dataurl';
 import { ElementCard } from '../element_card';
-import { ComponentStrings } from '../../../i18n';
+import { ComponentStrings } from '../../../i18n/components';
 
 const MAX_NAME_LENGTH = 40;
 const MAX_DESCRIPTION_LENGTH = 100;

x-pack/legacy/plugins/canvas/public/components/element_card/__examples__/__snapshots__/element_grid.examples.storyshot

@@ -1,685 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots components/ElementTypes/ElementGrid with controls 1`] = `
-<div
-  className="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
->
-  <div
-    className="euiFlexItem canvasElementCard"
-  >
-    <button
-      className="euiCard euiCard--leftAligned euiCard--isClickable canvasCard"
-      onClick={[Function]}
-    >
-      <span
-        className="euiCard__top"
-      >
-        <img
-          alt=""
-          className="euiCard__image"
-          src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
-        />
-      </span>
-      <span
-        className="euiCard__content"
-      >
-        <span
-          className="euiTitle euiTitle--medium euiCard__title"
-          id="generated-idTitle"
-        >
-          Custom Element 1
-        </span>
-        <div
-          className="euiText euiText--small euiCard__description"
-          id="generated-idDescription"
-        >
-          <p>
-            sample description
-          </p>
-        </div>
-      </span>
-      <span
-        className="euiCard__footer"
-      />
-    </button>
-    <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>
-  <div
-    className="euiFlexItem canvasElementCard"
-  >
-    <button
-      className="euiCard euiCard--leftAligned euiCard--isClickable canvasCard"
-      onClick={[Function]}
-    >
-      <span
-        className="euiCard__top"
-      >
-        <img
-          alt=""
-          className="euiCard__image"
-          src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
-        />
-      </span>
-      <span
-        className="euiCard__content"
-      >
-        <span
-          className="euiTitle euiTitle--medium euiCard__title"
-          id="generated-idTitle"
-        >
-          Custom Element 2
-        </span>
-        <div
-          className="euiText euiText--small euiCard__description"
-          id="generated-idDescription"
-        >
-          <p>
-            Aenean eu justo auctor, placerat felis non, scelerisque dolor. 
-          </p>
-        </div>
-      </span>
-      <span
-        className="euiCard__footer"
-      />
-    </button>
-    <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>
-  <div
-    className="euiFlexItem canvasElementCard"
-  >
-    <button
-      className="euiCard euiCard--leftAligned euiCard--isClickable canvasCard"
-      onClick={[Function]}
-    >
-      <span
-        className="euiCard__top"
-      >
-        <img
-          alt=""
-          className="euiCard__image"
-          src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
-        />
-      </span>
-      <span
-        className="euiCard__content"
-      >
-        <span
-          className="euiTitle euiTitle--medium euiCard__title"
-          id="generated-idTitle"
-        >
-          Custom Element 3
-        </span>
-        <div
-          className="euiText euiText--small euiCard__description"
-          id="generated-idDescription"
-        >
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis aliquet arcu ut turpis duis.
-          </p>
-        </div>
-      </span>
-      <span
-        className="euiCard__footer"
-      />
-    </button>
-    <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>
-</div>
-`;
-
-exports[`Storyshots components/ElementTypes/ElementGrid with controls and filter 1`] = `
-<div
-  className="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
->
-  <div
-    className="euiFlexItem canvasElementCard"
-  >
-    <button
-      className="euiCard euiCard--leftAligned euiCard--isClickable canvasCard"
-      onClick={[Function]}
-    >
-      <span
-        className="euiCard__top"
-      >
-        <img
-          alt=""
-          className="euiCard__image"
-          src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
-        />
-      </span>
-      <span
-        className="euiCard__content"
-      >
-        <span
-          className="euiTitle euiTitle--medium euiCard__title"
-          id="generated-idTitle"
-        >
-          Custom Element 3
-        </span>
-        <div
-          className="euiText euiText--small euiCard__description"
-          id="generated-idDescription"
-        >
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis aliquet arcu ut turpis duis.
-          </p>
-        </div>
-      </span>
-      <span
-        className="euiCard__footer"
-      />
-    </button>
-    <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>
-</div>
-`;
-
-exports[`Storyshots components/ElementTypes/ElementGrid with filter 1`] = `
-<div
-  className="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
->
-  <div
-    className="euiFlexItem canvasElementCard"
-  >
-    <button
-      className="euiCard euiCard--leftAligned euiCard--isClickable canvasCard"
-      onClick={[Function]}
-    >
-      <span
-        className="euiCard__top"
-      >
-        <img
-          alt=""
-          className="euiCard__image"
-          src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
-        />
-      </span>
-      <span
-        className="euiCard__content"
-      >
-        <span
-          className="euiTitle euiTitle--medium euiCard__title"
-          id="generated-idTitle"
-        >
-          Data table
-        </span>
-        <div
-          className="euiText euiText--small euiCard__description"
-          id="generated-idDescription"
-        >
-          <p>
-            A scrollable grid for displaying data in a tabular format
-          </p>
-        </div>
-      </span>
-      <span
-        className="euiCard__footer"
-      />
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots components/ElementTypes/ElementGrid without controls 1`] = `
-<div
-  className="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
->
-  <div
-    className="euiFlexItem canvasElementCard"
-  >
-    <button
-      className="euiCard euiCard--leftAligned euiCard--isClickable canvasCard"
-      onClick={[Function]}
-    >
-      <span
-        className="euiCard__top"
-      >
-        <img
-          alt=""
-          className="euiCard__image"
-          src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
-        />
-      </span>
-      <span
-        className="euiCard__content"
-      >
-        <span
-          className="euiTitle euiTitle--medium euiCard__title"
-          id="generated-idTitle"
-        >
-          Area chart
-        </span>
-        <div
-          className="euiText euiText--small euiCard__description"
-          id="generated-idDescription"
-        >
-          <p>
-            A line chart with a filled body
-          </p>
-        </div>
-      </span>
-      <span
-        className="euiCard__footer"
-      />
-    </button>
-  </div>
-  <div
-    className="euiFlexItem canvasElementCard"
-  >
-    <button
-      className="euiCard euiCard--leftAligned euiCard--isClickable canvasCard"
-      onClick={[Function]}
-    >
-      <span
-        className="euiCard__top"
-      >
-        <img
-          alt=""
-          className="euiCard__image"
-          src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
-        />
-      </span>
-      <span
-        className="euiCard__content"
-      >
-        <span
-          className="euiTitle euiTitle--medium euiCard__title"
-          id="generated-idTitle"
-        >
-          Image
-        </span>
-        <div
-          className="euiText euiText--small euiCard__description"
-          id="generated-idDescription"
-        >
-          <p>
-            A static image
-          </p>
-        </div>
-      </span>
-      <span
-        className="euiCard__footer"
-      />
-    </button>
-  </div>
-  <div
-    className="euiFlexItem canvasElementCard"
-  >
-    <button
-      className="euiCard euiCard--leftAligned euiCard--isClickable canvasCard"
-      onClick={[Function]}
-    >
-      <span
-        className="euiCard__top"
-      >
-        <img
-          alt=""
-          className="euiCard__image"
-          src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
-        />
-      </span>
-      <span
-        className="euiCard__content"
-      >
-        <span
-          className="euiTitle euiTitle--medium euiCard__title"
-          id="generated-idTitle"
-        >
-          Data table
-        </span>
-        <div
-          className="euiText euiText--small euiCard__description"
-          id="generated-idDescription"
-        >
-          <p>
-            A scrollable grid for displaying data in a tabular format
-          </p>
-        </div>
-      </span>
-      <span
-        className="euiCard__footer"
-      />
-    </button>
-  </div>
-</div>
-`;

x-pack/legacy/plugins/canvas/public/components/element_types/element_controls.tsx

@@ -7,7 +7,7 @@
 import React, { FunctionComponent, MouseEvent } from 'react';
 import PropTypes from 'prop-types';
 import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import { ComponentStrings } from '../../../i18n';
+import { ComponentStrings } from '../../../i18n/components';
 
 const { ElementControls: strings } = ComponentStrings;
 

x-pack/legacy/plugins/canvas/public/components/keyboard_shortcuts_doc/keyboard_shortcuts_doc.tsx

@@ -17,11 +17,11 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { keymap } from '../../lib/keymap';
-import { ShortcutMap, ShortcutNameSpace } from '../../../types';
+import { ShortcutMap, ShortcutNameSpace } from '../../../types/shortcuts';
 import { getClientPlatform } from '../../lib/get_client_platform';
 import { getId } from '../../lib/get_id';
 import { getPrettyShortcut } from '../../lib/get_pretty_shortcut';
-import { ComponentStrings } from '../../../i18n';
+import { ComponentStrings } from '../../../i18n/components';
 
 const { KeyboardShortcutsDoc: strings } = ComponentStrings;
 

x-pack/legacy/plugins/canvas/public/components/popover/popover.tsx

@@ -5,25 +5,23 @@
  */
 
 /* eslint react/no-did-mount-set-state: 0, react/forbid-elements: 0 */
-import React, { ReactNode, ReactElement, Component, MouseEvent } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { EuiToolTip, ToolTipPositions, EuiPopover, PropsOf } from '@elastic/eui';
+import { EuiPopover, EuiToolTip } from '@elastic/eui';
 
-export interface PopoverChildrenProps {
-  closePopover: () => void;
-}
-
-type EuiPopoverProps = PropsOf<EuiPopover>;
-interface Props extends Omit<EuiPopoverProps, 'button' | 'isOpen' | 'closePopover' | 'container'> {
+interface Props {
+  button: (handleClick: React.MouseEventHandler<HTMLButtonElement>) => React.ReactElement;
+  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
+  children: (arg: { closePopover: () => void }) => React.ReactNode;
   isOpen?: boolean;
   ownFocus?: boolean;
-
-  button: (handleClick: (ev: MouseEvent) => void) => ReactElement<any>;
-
-  children: (props: PopoverChildrenProps) => ReactNode;
-
-  tooltip: string;
-  tooltipPosition: ToolTipPositions;
+  tooltip?: string;
+  panelClassName?: string;
+  anchorClassName?: string;
+  anchorPosition?: string;
+  panelPaddingSize?: 'none' | 's' | 'm' | 'l';
+  id?: string;
+  className?: string;
 }
 
 interface State {
@@ -47,8 +45,8 @@ export class Popover extends Component<Props, State> {
     tooltipPosition: 'top',
   };
 
-  state = {
-    isPopoverOpen: false,
+  state: State = {
+    isPopoverOpen: !!this.props.isOpen,
   };
 
   componentDidMount() {
@@ -58,7 +56,7 @@ export class Popover extends Component<Props, State> {
   }
 
   handleClick = () => {
-    this.setState(state => ({
+    this.setState((state: any) => ({
       isPopoverOpen: !state.isPopoverOpen,
     }));
   };
@@ -72,9 +70,9 @@ export class Popover extends Component<Props, State> {
   render() {
     const { button, children, tooltip, tooltipPosition, ...rest } = this.props;
 
-    const wrappedButton = (handleClick: (ev: MouseEvent) => void) => {
+    const wrappedButton = (handleClick: any) => {
       // wrap button in tooltip, if tooltip text is provided
-      if (!this.state.isPopoverOpen && tooltip.length) {
+      if (!this.state.isPopoverOpen && tooltip && tooltip.length) {
         return (
           <EuiToolTip position={tooltipPosition} content={tooltip}>
             {button(handleClick)}
@@ -86,17 +84,18 @@ export class Popover extends Component<Props, State> {
     };
 
     const appWrapper = document.querySelector('.app-wrapper');
+    const EuiPopoverAny = (EuiPopover as any) as React.FC<any>;
 
     return (
-      <EuiPopover
+      <EuiPopoverAny
         {...rest}
         button={wrappedButton(this.handleClick)}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}
-        container={appWrapper as HTMLElement}
+        container={appWrapper}
       >
         {children({ closePopover: this.closePopover })}
-      </EuiPopover>
+      </EuiPopoverAny>
     );
   }
 }

x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { MouseEvent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiLink, EuiPanel } from '@elastic/eui';
 import { Popover } from '../popover';
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export const ShapePickerPopover = ({ shapes, onChange, value, ariaLabel }: Props) => {
-  const button = (handleClick: (ev: MouseEvent) => void) => (
+  const button = (handleClick: React.MouseEventHandler<any>) => (
     <EuiPanel paddingSize="s" hasShadow={false}>
       <EuiLink aria-label={ariaLabel} style={{ fontSize: 0 }} onClick={handleClick}>
         <ShapePreview shape={value ? shapes[value] : undefined} />