feat(showcase-mode): show number of selected stories

ubilabs · Nov 21, 2019 · 232c0fa · 232c0fa
1 parent 055e591
commit 232c0fa
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 42 deletions.
diff --git a/src/scripts/components/showcase-selector/showcase-selector.styl b/src/scripts/components/showcase-selector/showcase-selector.styl
@@ -5,10 +5,24 @@
   background-color: #fff
   pointer-events: auto
 
+.header
+  display: flex
+  flex-direction: column
+
 .title
+  margin: 0
   text-align: center
   font-size: 1.7em
 
+.play
+  display: flex
+  align-self: flex-end
+  align-items: center
+  padding-right: 20px
+
+  svg
+    padding-left: 10px
+
 .backButton
   display: block
   padding: 20px 0 0 20px
diff --git a/src/scripts/components/showcase-selector/showcase-selector.tsx b/src/scripts/components/showcase-selector/showcase-selector.tsx
@@ -1,6 +1,7 @@
 import React, {FunctionComponent, useState} from 'react';
 import {Link, useHistory} from 'react-router-dom';
 import {FormattedMessage} from 'react-intl';
+import {PlayIcon} from '../icons/play-icon';
 
 import StoryList from '../story-list/story-list';
 
@@ -29,12 +30,18 @@ const ShowcaseSelector: FunctionComponent = () => {
 
   return (
     <div className={styles.showcaseSelector}>
-      <Link to="/" className={styles.backButton}>
-        <FormattedMessage id="goBack" />
-      </Link>
-      <h1 className={styles.title}>
-        <FormattedMessage id="showcaseMode" />
-      </h1>
+      <div className={styles.header}>
+        <Link to="/" className={styles.backButton}>
+          <FormattedMessage id="goBack" />
+        </Link>
+        <h1 className={styles.title}>
+          <FormattedMessage id="showcaseMode" />
+        </h1>
+        <div className={styles.play}>
+          <span>{selectedIds.length} stories selected</span>
+          <PlayIcon />
+        </div>
+      </div>
       <StoryList
         mode={StoryMode.Showcase}
         onSelectStory={id => onSelectStory(id)}

diff --git a/storage/layers/layers-de.json b/storage/layers/layers-de.json
@@ -32,17 +32,5 @@
     "description": "Das ist der dritte Layer",
     "link": "http://...",
     "subLayers": []
-  },
-  {
-    "id": "layer3",
-    "name": "Layer 3",
-    "description": "Das ist der dritte Layer",
-    "subLayers": []
-  },
-  {
-    "id": "layer3",
-    "name": "Layer 3",
-    "description": "Das ist der dritte Layer",
-    "subLayers": []
   }
 ]
diff --git a/storage/layers/layers-en.json b/storage/layers/layers-en.json
@@ -32,17 +32,5 @@
     "description": "This is the third layer",
     "link": "http://...",
     "subLayers": []
-  },
-  {
-    "id": "layer3",
-    "name": "Layer 3",
-    "description": "This is the third layer",
-    "subLayers": []
-  },
-  {
-    "id": "layer3",
-    "name": "Layer 3",
-    "description": "This is the third layer",
-    "subLayers": []
   }
 ]
diff --git a/storage/layers/layers-es.json b/storage/layers/layers-es.json
@@ -32,17 +32,5 @@
     "description": "Das ist der dritte Layer",
     "link": "http://...",
     "subLayers": []
-  },
-  {
-    "id": "layer3",
-    "name": "Layer 3",
-    "description": "Das ist der dritte Layer",
-    "subLayers": []
-  },
-  {
-    "id": "layer3",
-    "name": "Layer 3",
-    "description": "Das ist der dritte Layer",
-    "subLayers": []
   }
 ]