From 010b7b9212df34ea1a4e45649aaca410109f2962 Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Fri, 11 Jun 2021 16:45:37 +0300
Subject: [PATCH] Added storybook.

---
 src/dev/storybook/aliases.ts                  |  1 +
 .../.storybook/main.js                        | 10 +++++++
 .../public/__stories__/index.tsx              |  9 +++++++
 .../__stories__/render.tsx                    |  0
 .../reveal_image.stories.storyshot            | 14 ++++++++++
 .../__stories__/reveal_image.scss             | 18 +++++++++++++
 .../reveal_image_renderer.stories.tsx         | 27 +++++++++++++++++++
 .../reveal_image.stories.storyshot            |  2 +-
 .../__stories__/reveal_image.scss             | 18 +++++++++++++
 .../__stories__/reveal_image.stories.tsx      |  5 ++--
 10 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 src/plugins/expression_reveal_image/.storybook/main.js
 create mode 100644 src/plugins/expression_reveal_image/public/__stories__/index.tsx
 rename src/plugins/expression_reveal_image/public/{expression_renderers_legacy => }/__stories__/render.tsx (100%)
 create mode 100644 src/plugins/expression_reveal_image/public/expression_renderers/__stories__/__snapshots__/reveal_image.stories.storyshot
 create mode 100644 src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image.scss
 create mode 100644 src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx
 create mode 100644 src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/reveal_image.scss

diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts
index e0f0432c61463..6fc0841551fad 100644
--- a/src/dev/storybook/aliases.ts
+++ b/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',
diff --git a/src/plugins/expression_reveal_image/.storybook/main.js b/src/plugins/expression_reveal_image/.storybook/main.js
new file mode 100644
index 0000000000000..742239e638b8a
--- /dev/null
+++ b/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;
diff --git a/src/plugins/expression_reveal_image/public/__stories__/index.tsx b/src/plugins/expression_reveal_image/public/__stories__/index.tsx
new file mode 100644
index 0000000000000..078a16cb8cab2
--- /dev/null
+++ b/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';
diff --git a/src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/render.tsx b/src/plugins/expression_reveal_image/public/__stories__/render.tsx
similarity index 100%
rename from src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/render.tsx
rename to src/plugins/expression_reveal_image/public/__stories__/render.tsx
diff --git a/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/__snapshots__/reveal_image.stories.storyshot b/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/__snapshots__/reveal_image.stories.storyshot
new file mode 100644
index 0000000000000..b9963565a09f5
--- /dev/null
+++ b/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/__snapshots__/reveal_image.stories.storyshot
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots renderers/revealImage default 1`] = `
+<div
+  style={
+    Object {
+      "height": "200px",
+      "width": "200px",
+    }
+  }
+>
+   
+</div>
+`;
diff --git a/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image.scss b/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image.scss
new file mode 100644
index 0000000000000..f94668b7cdfa2
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx b/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx
new file mode 100644
index 0000000000000..7f164fa9f2448
--- /dev/null
+++ b/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} />;
+});
diff --git a/src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/__snapshots__/reveal_image.stories.storyshot b/src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/__snapshots__/reveal_image.stories.storyshot
index b9963565a09f5..d8a4ea0e11a5c 100644
--- a/src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/__snapshots__/reveal_image.stories.storyshot
+++ b/src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/__snapshots__/reveal_image.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots renderers/revealImage default 1`] = `
+exports[`Storyshots renderers/revealImage_legacy default 1`] = `
 <div
   style={
     Object {
diff --git a/src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/reveal_image.scss b/src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/reveal_image.scss
new file mode 100644
index 0000000000000..f94668b7cdfa2
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/reveal_image.stories.tsx b/src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/reveal_image.stories.tsx
index 7d4d1ea392deb..ef0dd67019336 100644
--- a/src/plugins/expression_reveal_image/public/expression_renderers_legacy/__stories__/reveal_image.stories.tsx
+++ b/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 = {