Added storybook.

src/dev/storybook/aliases.ts

@@ -17,6 +17,7 @@ export const storybookAliases = {
   dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',
   data_enhanced: 'x-pack/plugins/data_enhanced/.storybook',
   embeddable: 'src/plugins/embeddable/.storybook',
+  expression_reveal_image: 'src/plugins/expression_reveal_image/.storybook',
   infra: 'x-pack/plugins/infra/.storybook',
   security_solution: 'x-pack/plugins/security_solution/.storybook',
   ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',

src/plugins/expression_reveal_image/.storybook/main.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// eslint-disable-next-line import/no-commonjs
+module.exports = require('@kbn/storybook').defaultConfig;

src/plugins/expression_reveal_image/public/__stories__/index.tsx

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './render';

src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image.scss

@@ -0,0 +1,18 @@
+.revealImage {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+
+  .revealImageAligner {
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  // disables selection and dragging
+  .revealImage__image {
+    user-select: none;
+  }
+}

src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { revealImageRenderer } from '../';
+import { Render } from '../../__stories__';
+import { elasticOutline } from '../../../common/lib/elastic_outline';
+import { elasticLogo } from '../../../common/lib/elastic_logo';
+import { Origin } from '../../expression_functions';
+import './reveal_image.scss';
+
+storiesOf('renderers/revealImage', module).add('default', () => {
+  const config = {
+    image: elasticLogo,
+    emptyImage: elasticOutline,
+    origin: Origin.LEFT,
+    percent: 0.45,
+  };
+
+  return <Render renderer={revealImageRenderer} config={config} />;
+});

src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/reveal_image.scss

@@ -0,0 +1,18 @@
+.revealImage {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+
+  .revealImageAligner {
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  // disables selection and dragging
+  .revealImage__image {
+    user-select: none;
+  }
+}

src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/reveal_image.stories.tsx

@@ -9,10 +9,11 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { revealImage } from '../';
-import { Render } from './render';
+import { Render } from '../../__stories__';
 import { elasticOutline } from '../../../common/lib/elastic_outline';
-import { elasticOutline } from '../../../common/lib/elastic_logo';
+import { elasticLogo } from '../../../common/lib/elastic_logo';
 import { Origin } from '../../expression_functions';
+import './reveal_image.scss';
 
 storiesOf('renderers/revealImage_legacy', module).add('default', () => {
   const config = {