Feat/stories button (#159)

* feat(stories-button): add button and story selector mode

* feat(stories-button): add position for button and multiple languages

* feat(stories-button): add translations

* refactor(stories-button): remove typo

i18n/de.json

@@ -2,5 +2,8 @@
   "layerSelector.main": "Haupt",
   "layerSelector.compare": "Vergleich",
   "language.en": "Englisch",
-  "language.de": "Deutsch"
-}
+  "language.de": "Deutsch",
+  "stories": "Geschichten",
+  "goBack": "Zurück",
+  "storymode": "Geschichtsmodus"
+}

i18n/en.json

@@ -2,5 +2,8 @@
   "layerSelector.main": "Main",
   "layerSelector.compare": "Compare",
   "language.en": "English",
-  "language.de": "German"
-}
+  "language.de": "German",
+  "stories": "Stories",
+  "goBack": "Go back",
+  "storymode": "Story Mode"
+}

src/scripts/components/app/app.tsx

@@ -14,10 +14,11 @@ import Menu from '../menu/menu';
 import ProjectionMenu from '../projection-menu/projection-menu';
 import PresentationSelector from '../presentation-selector/presentation-selector';
 import ShowcaseSelector from '../showcase-selector/showcase-selector';
+import StoriesSelector from '../stories-selector/stories-selector';
+import StoriesButton from '../stories-button/stories-button';
 import UrlSync from '../url-sync/url-sync';
 
 import translations from '../../i18n';
-
 import styles from './app.styl';
 
 const store = createStore(
@@ -41,6 +42,7 @@ const TranslatedApp: FunctionComponent<{}> = () => {
           <Switch>
             <Route path="/" exact>
               <Globes />
+              <StoriesButton />
 
               <div className={styles.layoutContainer}>
                 <Menu />
@@ -57,6 +59,10 @@ const TranslatedApp: FunctionComponent<{}> = () => {
             <Route path="/showcase">
               <ShowcaseSelector />
             </Route>
+
+            <Route path="/stories">
+              <StoriesSelector />
+            </Route>
           </Switch>
         </div>
       </IntlProvider>

src/scripts/components/menu/menu.styl

@@ -1,6 +1,5 @@
 .menuContainer
   position: relative
-  align-self: left
   margin: 20px
 
 .menuButton

src/scripts/components/stories-button/stories-button.styl

@@ -0,0 +1,10 @@
+.storiesButton
+  position: absolute
+  top: 15px
+  right: 15px
+  padding: 10px
+  border-radius: 5px
+  background-color: #ccc
+  color: #000
+  text-decoration: none
+  cursor: pointer

src/scripts/components/stories-button/stories-button.tsx

@@ -0,0 +1,13 @@
+import React, {FunctionComponent} from 'react';
+import {Link} from 'react-router-dom';
+import {FormattedMessage} from 'react-intl';
+
+import styles from './stories-button.styl';
+
+const StoriesButton: FunctionComponent<{}> = () => (
+  <Link to={'/stories'} className={styles.storiesButton}>
+    <FormattedMessage id="stories" />
+  </Link>
+);
+
+export default StoriesButton;

src/scripts/components/stories-selector/stories-selector.styl

@@ -0,0 +1,12 @@
+.storiesSelector
+  width: 100%
+  height: 100%
+
+.title
+  text-align: center
+  font-size: 1.7em
+
+.backButton
+  display: block
+  padding: 20px 0 0 20px
+  cursor: pointer

src/scripts/components/stories-selector/stories-selector.tsx

@@ -0,0 +1,21 @@
+import React, {FunctionComponent} from 'react';
+import {Link} from 'react-router-dom';
+import {FormattedMessage} from 'react-intl';
+
+import StoryList from '../story-list/story-list';
+
+import styles from './stories-selector.styl';
+
+const StoriesSelector: FunctionComponent<{}> = () => (
+  <div className={styles.storiesSelector}>
+    <Link to="/" className={styles.backButton}>
+      <FormattedMessage id="goBack" />
+    </Link>
+    <h1 className={styles.title}>
+      <FormattedMessage id="storymode" />
+    </h1>
+    <StoryList />
+  </div>
+);
+
+export default StoriesSelector;