Image stories fixed

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'} />
+        )}
+    />
+));

storybook/stories/Image/ImageWithFallback/index.js

@@ -0,0 +1 @@
+require('./ImageWithFallback');

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;
+}

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'}
+    />
+));

storybook/stories/Image/SampleImage/index.js

@@ -0,0 +1 @@
+require('./SampleImage');

storybook/stories/Image/SampleImage/styles.less

@@ -0,0 +1,5 @@
+.image {
+    flex: none;
+    width: 10rem;
+    height: 10rem;
+}

storybook/stories/Image/index.js

@@ -0,0 +1,2 @@
+require('./SampleImage');
+require('./ImageWithFallback');

storybook/stories/index.js

@@ -1,6 +1,7 @@
 require('./Addon');
 require('./ColorInput');
 require('./ColorPicker');
+require('./Image');
 require('./MetaItem');
 require('./ModalDialog');
 require('./Multiselect');