From dec87e2a665c5cd1c75686dda388c042a1b042f6 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Sat, 9 Nov 2019 08:28:09 +0100
Subject: Add stories for Header & JoinUs

---
 components/JoinUs.stories.js    |  16 +++
 components/JoinUs.vue           |   5 +-
 components/NavBar.vue           | 211 ----------------------------------------
 components/NavLink.stories.js   |  19 ++++
 components/NavLink.vue          |  20 +++-
 components/TheHeader.stories.js |  24 +++++
 components/TheHeader.vue        | 183 ++++++++++++++++++++++++++++++++++
 layouts/default.vue             |   6 +-
 8 files changed, 264 insertions(+), 220 deletions(-)
 create mode 100644 components/JoinUs.stories.js
 delete mode 100644 components/NavBar.vue
 create mode 100644 components/NavLink.stories.js
 create mode 100644 components/TheHeader.stories.js
 create mode 100644 components/TheHeader.vue

diff --git a/components/JoinUs.stories.js b/components/JoinUs.stories.js
new file mode 100644
index 0000000..81bf934
--- /dev/null
+++ b/components/JoinUs.stories.js
@@ -0,0 +1,16 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../.storybook/decorators'
+
+import JoinUs from './JoinUs'
+
+const joinUs = {}
+
+storiesOf('JoinUs', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { JoinUs },
+      template: `<join-us />`,
+      data: () => joinUs
+    }
+  })
diff --git a/components/JoinUs.vue b/components/JoinUs.vue
index f534d22..6ffec91 100644
--- a/components/JoinUs.vue
+++ b/components/JoinUs.vue
@@ -5,7 +5,7 @@
         <div class="text">Rozpocznij swoją harcerską przygodę!</div>
       </div>
       <div class="button">
-        <router-link to="/kontakt">Dołącz do nas!</router-link>
+        <nuxt-link to="/kontakt">Dołącz do nas!</nuxt-link>
       </div>
     </div>
   </section>
@@ -53,10 +53,11 @@
   background-color: #507b34;
   padding: 10px;
   max-width: 150px;
+  color: #ffffff;
+  text-align: center;
 }
 
 .button a {
-  color: #ffffff;
   text-decoration: none;
 }
 
diff --git a/components/NavBar.vue b/components/NavBar.vue
deleted file mode 100644
index 4bbae72..0000000
--- a/components/NavBar.vue
+++ /dev/null
@@ -1,211 +0,0 @@
-<template>
-  <nav :class="navbarClass">
-    <div class="title">
-      <img v-if="logo" class="logo" :src="logo" alt="ZHR" />
-      <nuxt-link :class="titleClass" to="/">{{ title }}</nuxt-link>
-    </div>
-    <div class="space"></div>
-    <button @click="toggleMenu" class="menu-toggler">Menu</button>
-    <ul :class="linksClass" @click="toggleMenu">
-      <!-- Loop for generating links -->
-      <NavLink v-for="route in routes" :key="route.path" :link="route.path" :name="route.name" />
-      <NavLink
-        v-for="route in staticRoutes"
-        :key="route.path"
-        :link="route.path"
-        :name="route.name"
-        pure
-      />
-      <NavLink
-        v-for="route in externalRoutes"
-        :key="route.path"
-        :link="route.path"
-        :name="route.name"
-        external
-      />
-    </ul>
-  </nav>
-</template>
-
-<script>
-import NavLink from './NavLink'
-
-export default {
-  components: {
-    NavLink
-  },
-  props: {
-    routes: Array,
-    externalRoutes: Array,
-    staticRoutes: Array,
-    title: String,
-    logo: String
-  },
-  computed: {
-    titleClass() {
-      if (this.logo) {
-        return 'title-name margin'
-      }
-      return 'title-name'
-    },
-    navbarClass() {
-      if (this.menuCollapsed) {
-        return 'navbar'
-      }
-      return 'navbar menu-open'
-    },
-    linksClass() {
-      if (this.menuCollapsed) {
-        return 'links'
-      }
-      return 'links show'
-    }
-  },
-  data: function() {
-    return {
-      menuCollapsed: true
-    }
-  },
-  methods: {
-    toggleMenu() {
-      this.menuCollapsed = !this.menuCollapsed
-    },
-    linksClick() {
-      this.toggleMenu()
-    }
-  }
-}
-</script>
-
-<style scoped>
-.navbar {
-  font-family: 'Roboto Slab', serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #181818;
-
-  box-sizing: border-box;
-  width: 100%;
-  height: 80px;
-
-  background: #ffffff;
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
-
-  padding: 0 200px 0 200px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.space {
-  flex: 1;
-  max-width: 500px;
-}
-
-.title {
-  font-size: 30px;
-  flex-shrink: 0;
-
-  display: flex;
-}
-
-.title-name {
-  text-decoration: none;
-  color: #181818;
-  padding: 10px;
-}
-
-.title-name.margin {
-  margin-left: 100px;
-}
-
-.links {
-  display: flex;
-  flex-direction: row;
-  padding: 0;
-}
-
-.logo {
-  position: absolute;
-  top: 0;
-  z-index: 1;
-}
-
-.menu-toggler {
-  display: none;
-}
-
-@media (max-width: 1300px) {
-  .navbar {
-    padding: 0 50px 0 50px;
-  }
-}
-
-@media (max-width: 900px) {
-  .navbar.menu-open {
-    box-shadow: none;
-  }
-
-  .title {
-    font-size: 24px;
-  }
-
-  .links {
-    position: absolute;
-    /* width: 100vw; */
-
-    margin-top: 80px;
-
-    flex-direction: column;
-    display: none;
-  }
-
-  .menu-toggler {
-    display: block;
-  }
-
-  .links.show {
-    display: flex !important;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-
-    margin-bottom: 0;
-    padding: 50px 10px;
-
-    width: 100%;
-    left: 0;
-    top: 0;
-
-    background: #fff;
-  }
-
-  .links.show li {
-    padding: 2vh;
-    font-size: 30px;
-  }
-}
-
-@media (max-width: 500px) {
-  .navbar {
-    padding: 0 10px 0 10px;
-  }
-
-  .logo {
-    width: 65px;
-  }
-
-  .title-name {
-    font-size: 20px;
-  }
-
-  .title-name.margin {
-    margin-left: 70px;
-  }
-
-  .links.show {
-    height: calc(100% - 80px);
-  }
-}
-</style>
\ No newline at end of file
diff --git a/components/NavLink.stories.js b/components/NavLink.stories.js
new file mode 100644
index 0000000..44fe6ae
--- /dev/null
+++ b/components/NavLink.stories.js
@@ -0,0 +1,19 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../.storybook/decorators'
+
+import NavLink from './NavLink'
+
+const navLink = {
+  name: 'Test',
+  link: '/test'
+}
+
+storiesOf('NavLink', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { NavLink },
+      template: `<nav-link :name="name" :link="link" />`,
+      data: () => navLink
+    }
+  })
diff --git a/components/NavLink.vue b/components/NavLink.vue
index bb86ef8..0418172 100644
--- a/components/NavLink.vue
+++ b/components/NavLink.vue
@@ -9,10 +9,22 @@
 <script>
 export default {
   props: {
-    link: String,
-    name: String,
-    external: { type: Boolean, default: false },
-    pure: { type: Boolean, default: false }
+    link: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    external: {
+      type: Boolean,
+      default: false
+    },
+    pure: {
+      type: Boolean,
+      default: false
+    }
   }
 }
 </script>
diff --git a/components/TheHeader.stories.js b/components/TheHeader.stories.js
new file mode 100644
index 0000000..ee320b7
--- /dev/null
+++ b/components/TheHeader.stories.js
@@ -0,0 +1,24 @@
+import { storiesOf } from '@storybook/vue'
+import { routes } from './TheFooter.stories'
+
+import TheHeader from './TheHeader'
+
+const header = {
+  routes,
+  title: '19 PDH Puszcza',
+  logo: '/assets/krajka-logo.svg'
+}
+
+const alwaysTop = () => ({
+  template: `<div style="display:flex;flex-direction:column;min-height:100vh"><story/><div style="flex:1"></div></div>`
+})
+
+storiesOf('TheHeader', module)
+  .addDecorator(alwaysTop)
+  .add('default', () => {
+    return {
+      components: { TheHeader },
+      template: `<the-header :routes="routes" :title="title" :logo="logo"/>`,
+      data: () => header
+    }
+  })
diff --git a/components/TheHeader.vue b/components/TheHeader.vue
new file mode 100644
index 0000000..431b945
--- /dev/null
+++ b/components/TheHeader.vue
@@ -0,0 +1,183 @@
+<template>
+  <nav class="navbar" :class="{'menu-open': isMenuCollapsed}">
+    <div class="title">
+      <img v-if="logo" class="logo" :src="logo" alt="ZHR" />
+      <nuxt-link class="title-name" :class="{margin: logo}" to="/">{{ title }}</nuxt-link>
+    </div>
+    <div class="space"></div>
+    <button @click="toggleMenu" class="menu-toggler">Menu</button>
+    <ul class="links" :class="{show: this.isMenuCollapsed}" @click="toggleMenu">
+      <!-- Loop for generating links -->
+      <nav-link v-for="route in routes" :key="route.path" :link="route.path" :name="route.name" />
+    </ul>
+  </nav>
+</template>
+
+<script>
+import NavLink from './NavLink'
+
+export default {
+  name: 'TheHeader',
+  components: {
+    NavLink
+  },
+  props: {
+    routes: {
+      type: Array,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    logo: {
+      type: String,
+      required: false,
+      default: () => ''
+    }
+  },
+  data: function() {
+    return {
+      isMenuCollapsed: true
+    }
+  },
+  methods: {
+    toggleMenu() {
+      this.isMenuCollapsed = !this.isMenuCollapsed
+    }
+  }
+}
+</script>
+
+<style scoped>
+.navbar {
+  font-family: 'Roboto Slab', serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #181818;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 80px;
+
+  background: #ffffff;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+
+  padding: 0 200px 0 200px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.space {
+  flex: 1;
+  max-width: 500px;
+}
+
+.title {
+  font-size: 30px;
+  flex-shrink: 0;
+
+  display: flex;
+}
+
+.title-name {
+  text-decoration: none;
+  color: #181818;
+  padding: 10px;
+}
+
+.title-name.margin {
+  margin-left: 100px;
+}
+
+.links {
+  display: flex;
+  flex-direction: row;
+  padding: 0;
+}
+
+.logo {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+}
+
+.menu-toggler {
+  display: none;
+}
+
+@media (max-width: 1300px) {
+  .navbar {
+    padding: 0 50px 0 50px;
+  }
+}
+
+@media (max-width: 900px) {
+  .navbar.menu-open {
+    box-shadow: none;
+  }
+
+  .title {
+    font-size: 24px;
+  }
+
+  .links {
+    position: absolute;
+    /* width: 100vw; */
+
+    margin-top: 80px;
+
+    flex-direction: column;
+    display: none;
+  }
+
+  .menu-toggler {
+    display: block;
+  }
+
+  .links.show {
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+
+    margin-bottom: 0;
+    padding: 50px 10px;
+
+    width: 100%;
+    left: 0;
+    top: 0;
+
+    background: #fff;
+  }
+
+  .links.show li {
+    padding: 2vh;
+    font-size: 30px;
+  }
+}
+
+@media (max-width: 500px) {
+  .navbar {
+    padding: 0 10px 0 10px;
+  }
+
+  .logo {
+    width: 65px;
+  }
+
+  .title-name {
+    font-size: 20px;
+  }
+
+  .title-name.margin {
+    margin-left: 70px;
+  }
+
+  .links.show {
+    height: calc(100% - 80px);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 53416bf..58970ba 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,18 +1,18 @@
 <template>
   <div id="app">
-    <NavBar :routes="routes" title="19 PDH Puszcza" logo="/assets/krajka-logo.svg" />
+    <the-header :routes="routes" title="19 PDH Puszcza" logo="/assets/krajka-logo.svg" />
     <nuxt id="content" :key="$route.path" />
     <the-footer :routes="routes" />
   </div>
 </template>
 
 <script>
-import NavBar from '../components/NavBar.vue'
+import TheHeader from '../components/TheHeader.vue'
 import TheFooter from '../components/TheFooter.vue'
 
 export default {
   name: 'app',
-  components: { NavBar, TheFooter },
+  components: { TheHeader, TheFooter },
   data() {
     return {
       routes: [
-- 
cgit 1.4.1