Add stories for Header & JoinUs

6 files changed, 95 insertions, 51 deletions

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/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/NavBar.vue b/components/TheHeader.vue
index 4bbae72..431b945 100644
--- a/components/NavBar.vue
+++ b/components/TheHeader.vue
@@ -1,28 +1,14 @@
 <template>
-  <nav :class="navbarClass">
+  <nav class="navbar" :class="{'menu-open': isMenuCollapsed}">
     <div class="title">
       <img v-if="logo" class="logo" :src="logo" alt="ZHR" />
-      <nuxt-link :class="titleClass" to="/">{{ title }}</nuxt-link>
+      <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="linksClass" @click="toggleMenu">
+    <ul class="links" :class="{show: this.isMenuCollapsed}" @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
-      />
+      <nav-link v-for="route in routes" :key="route.path" :link="route.path" :name="route.name" />
     </ul>
   </nav>
 </template>
@@ -31,47 +17,33 @@
 import NavLink from './NavLink'
 
 export default {
+  name: 'TheHeader',
   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'
+    routes: {
+      type: Array,
+      required: true
     },
-    navbarClass() {
-      if (this.menuCollapsed) {
-        return 'navbar'
-      }
-      return 'navbar menu-open'
+    title: {
+      type: String,
+      required: true
     },
-    linksClass() {
-      if (this.menuCollapsed) {
-        return 'links'
-      }
-      return 'links show'
+    logo: {
+      type: String,
+      required: false,
+      default: () => ''
     }
   },
   data: function() {
     return {
-      menuCollapsed: true
+      isMenuCollapsed: true
     }
   },
   methods: {
     toggleMenu() {
-      this.menuCollapsed = !this.menuCollapsed
-    },
-    linksClick() {
-      this.toggleMenu()
+      this.isMenuCollapsed = !this.isMenuCollapsed
     }
   }
 }