From a511a24f9b0c742e528fc429953a6bdb6f9677bd Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 14 Nov 2019 12:45:05 +0200
Subject: [PATCH] SeasonsBarPlaceholder story added to storybook

---
 .../Detail/VideosList/SeasonsBar/SeasonsBar.js       |  3 +++
 .../SeasonsBarPlaceholder/SeasonsBarPlaceholder.js   | 12 ++++++++++++
 .../SeasonsBar/SeasonsBarPlaceholder/index.js        |  1 +
 .../SeasonsBar/SeasonsBarPlaceholder/styles.less     |  5 +++++
 storybook/stories/SeasonsBar/index.js                |  1 +
 5 files changed, 22 insertions(+)
 create mode 100644 storybook/stories/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
 create mode 100644 storybook/stories/SeasonsBar/SeasonsBarPlaceholder/index.js
 create mode 100644 storybook/stories/SeasonsBar/SeasonsBarPlaceholder/styles.less

diff --git a/src/routes/Detail/VideosList/SeasonsBar/SeasonsBar.js b/src/routes/Detail/VideosList/SeasonsBar/SeasonsBar.js
index 8e50ce2a3..13f94594b 100644
--- a/src/routes/Detail/VideosList/SeasonsBar/SeasonsBar.js
+++ b/src/routes/Detail/VideosList/SeasonsBar/SeasonsBar.js
@@ -3,6 +3,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const { Button, Multiselect } = require('stremio/common');
+const SeasonsBarPlaceholder = require('./SeasonsBarPlaceholder');
 const styles = require('./styles');
 
 const SeasonsBar = ({ className, seasons, season, onSelect }) => {
@@ -69,6 +70,8 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
     );
 };
 
+SeasonsBar.Placeholder = SeasonsBarPlaceholder;
+
 SeasonsBar.propTypes = {
     className: PropTypes.string,
     seasons: PropTypes.arrayOf(PropTypes.number).isRequired,
diff --git a/storybook/stories/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js b/storybook/stories/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
new file mode 100644
index 000000000..e04109b34
--- /dev/null
+++ b/storybook/stories/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
@@ -0,0 +1,12 @@
+const React = require('react');
+const { storiesOf } = require('@storybook/react');
+const SeasonsBar = require('stremio/routes/Detail/VideosList/SeasonsBar');
+const styles = require('./styles');
+
+storiesOf('SeasonsBar', module).add('SeasonsBarPlaceholder', () => {
+    return (
+        <SeasonsBar.Placeholder
+            className={styles['seasons-bar']}
+        />
+    );
+});
diff --git a/storybook/stories/SeasonsBar/SeasonsBarPlaceholder/index.js b/storybook/stories/SeasonsBar/SeasonsBarPlaceholder/index.js
new file mode 100644
index 000000000..1b073fb5d
--- /dev/null
+++ b/storybook/stories/SeasonsBar/SeasonsBarPlaceholder/index.js
@@ -0,0 +1 @@
+require('./SeasonsBarPlaceholder');
diff --git a/storybook/stories/SeasonsBar/SeasonsBarPlaceholder/styles.less b/storybook/stories/SeasonsBar/SeasonsBarPlaceholder/styles.less
new file mode 100644
index 000000000..a62a204c7
--- /dev/null
+++ b/storybook/stories/SeasonsBar/SeasonsBarPlaceholder/styles.less
@@ -0,0 +1,5 @@
+.seasons-bar {
+    flex: none;
+    width: 28rem;
+    margin: 2rem;
+}
\ No newline at end of file
diff --git a/storybook/stories/SeasonsBar/index.js b/storybook/stories/SeasonsBar/index.js
index c3a9531b5..3d7a90e9c 100644
--- a/storybook/stories/SeasonsBar/index.js
+++ b/storybook/stories/SeasonsBar/index.js
@@ -1 +1,2 @@
 require('./SampleSeasonsBar');
+require('./SeasonsBarPlaceholder');