From 14af3796d3ce793f0c0497c23e114dee4d43b9a2 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Tue, 19 Nov 2019 08:48:15 +0200
Subject: [PATCH] Image stories fixed

---
 .../Image/ImageWithFallback/ImageWithFallback.js  | 15 +++++++++++++++
 .../stories/Image/ImageWithFallback/index.js      |  1 +
 .../stories/Image/ImageWithFallback/styles.less   | 12 ++++++++++++
 .../stories/Image/SampleImage/SampleImage.js      | 11 +++++++++++
 storybook/stories/Image/SampleImage/index.js      |  1 +
 storybook/stories/Image/SampleImage/styles.less   |  5 +++++
 storybook/stories/Image/index.js                  |  2 ++
 storybook/stories/index.js                        |  1 +
 8 files changed, 48 insertions(+)
 create mode 100644 storybook/stories/Image/ImageWithFallback/ImageWithFallback.js
 create mode 100644 storybook/stories/Image/ImageWithFallback/index.js
 create mode 100644 storybook/stories/Image/ImageWithFallback/styles.less
 create mode 100644 storybook/stories/Image/SampleImage/SampleImage.js
 create mode 100644 storybook/stories/Image/SampleImage/index.js
 create mode 100644 storybook/stories/Image/SampleImage/styles.less
 create mode 100644 storybook/stories/Image/index.js

diff --git a/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js b/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js
new file mode 100644
index 000000000..82cb90e2d
--- /dev/null
+++ b/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js
@@ -0,0 +1,15 @@
+const React = require('react');
+const { storiesOf } = require('@storybook/react');
+const Icon = require('stremio-icons/dom');
+const { Image } = require('stremio/common');
+const styles = require('./styles');
+
+storiesOf('Image', module).add('ImageWithFallback', () => (
+    <Image
+        className={styles['image']}
+        src={'/images/non_existing.png'}
+        renderFallback={() => (
+            <Icon className={styles['icon']} icon={'ic_broken_link'} />
+        )}
+    />
+));
diff --git a/storybook/stories/Image/ImageWithFallback/index.js b/storybook/stories/Image/ImageWithFallback/index.js
new file mode 100644
index 000000000..f6111b11f
--- /dev/null
+++ b/storybook/stories/Image/ImageWithFallback/index.js
@@ -0,0 +1 @@
+require('./ImageWithFallback');
diff --git a/storybook/stories/Image/ImageWithFallback/styles.less b/storybook/stories/Image/ImageWithFallback/styles.less
new file mode 100644
index 000000000..69c02638a
--- /dev/null
+++ b/storybook/stories/Image/ImageWithFallback/styles.less
@@ -0,0 +1,12 @@
+.image {
+    flex: none;
+    width: 10rem;
+    height: 10rem;
+}
+
+.icon {
+    flex: none;
+    width: 10rem;
+    height: 10rem;
+    fill: white;
+}
\ No newline at end of file
diff --git a/storybook/stories/Image/SampleImage/SampleImage.js b/storybook/stories/Image/SampleImage/SampleImage.js
new file mode 100644
index 000000000..10880fff4
--- /dev/null
+++ b/storybook/stories/Image/SampleImage/SampleImage.js
@@ -0,0 +1,11 @@
+const React = require('react');
+const { storiesOf } = require('@storybook/react');
+const { Image } = require('stremio/common');
+const styles = require('./styles');
+
+storiesOf('Image', module).add('SampleImage', () => (
+    <Image
+        className={styles['image']}
+        src={'/images/default_avatar.png'}
+    />
+));
diff --git a/storybook/stories/Image/SampleImage/index.js b/storybook/stories/Image/SampleImage/index.js
new file mode 100644
index 000000000..73a345825
--- /dev/null
+++ b/storybook/stories/Image/SampleImage/index.js
@@ -0,0 +1 @@
+require('./SampleImage');
diff --git a/storybook/stories/Image/SampleImage/styles.less b/storybook/stories/Image/SampleImage/styles.less
new file mode 100644
index 000000000..0527ceb9d
--- /dev/null
+++ b/storybook/stories/Image/SampleImage/styles.less
@@ -0,0 +1,5 @@
+.image {
+    flex: none;
+    width: 10rem;
+    height: 10rem;
+}
\ No newline at end of file
diff --git a/storybook/stories/Image/index.js b/storybook/stories/Image/index.js
new file mode 100644
index 000000000..8f625d6dc
--- /dev/null
+++ b/storybook/stories/Image/index.js
@@ -0,0 +1,2 @@
+require('./SampleImage');
+require('./ImageWithFallback');
diff --git a/storybook/stories/index.js b/storybook/stories/index.js
index 2b2af422f..8ee1de155 100644
--- a/storybook/stories/index.js
+++ b/storybook/stories/index.js
@@ -1,6 +1,7 @@
 require('./Addon');
 require('./ColorInput');
 require('./ColorPicker');
+require('./Image');
 require('./MetaItem');
 require('./ModalDialog');
 require('./Multiselect');