Merge pull request #14 from 19pdh/develop

Storybook and license

23 files changed, 597 insertions, 401 deletions

diff --git a/tests/components/FacebookFeed.test.js b/tests/components/FacebookFeed.test.js
deleted file mode 100644
index 7abedf6..0000000
--- a/tests/components/FacebookFeed.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import FacebookFeed from '../../components/FacebookFeed'
-
-describe('FacebookFeed', () => {
-  // Now mount the component and you have the wrapper
-  const wrapper = shallowMount(FacebookFeed)
-
-  it('match snapshot', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-})
diff --git a/tests/components/FacebookFindUsButton.test.js b/tests/components/FacebookFindUsButton.test.js
deleted file mode 100644
index d74e16f..0000000
--- a/tests/components/FacebookFindUsButton.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import FacebookFindUsButton from '../../components/FacebookFindUsButton'
-
-describe('FacebookFindUsButton', () => {
-  // Now mount the component and you have the wrapper
-  const wrapper = shallowMount(FacebookFindUsButton)
-
-  it('match snapshot', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-})
diff --git a/tests/components/Footer.test.js b/tests/components/Footer.test.js
deleted file mode 100644
index e284b5a..0000000
--- a/tests/components/Footer.test.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import Footer from '../../components/Footer'
-
-describe('Footer', () => {
-  // Now mount the component and you have the wrapper
-  const wrapper = shallowMount(Footer)
-
-  wrapper.setProps({
-    routes: [
-      {
-        path: '/',
-        name: 'Home'
-      }
-    ]
-  })
-
-  it('match snapshot', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-})
diff --git a/tests/components/JoinUs.test.js b/tests/components/JoinUs.test.js
deleted file mode 100644
index c831459..0000000
--- a/tests/components/JoinUs.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import JoinUs from '../../components/JoinUs'
-
-describe('JoinUs', () => {
-  // Now mount the component and you have the wrapper
-  const wrapper = shallowMount(JoinUs)
-
-  it('match snapshot', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-})
diff --git a/tests/components/NavBar.test.js b/tests/components/NavBar.test.js
deleted file mode 100644
index be61915..0000000
--- a/tests/components/NavBar.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import NavBar from '../../components/NavBar'
-
-describe('NavBar', () => {
-  // Now mount the component and you have the wrapper
-  const wrapper = shallowMount(NavBar)
-
-  wrapper.setProps({
-    title: 'Title',
-    routes: [
-      {
-        path: '/',
-        name: 'Home'
-      }
-    ]
-  })
-
-  it('check title', () => {
-    expect(wrapper.html()).toContain(
-      '<nuxt-link to="/" class="title-name">Title</nuxt-link>'
-    )
-  })
-
-  it('match snapshot', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-})
diff --git a/tests/components/NavLink.test.js b/tests/components/NavLink.test.js
deleted file mode 100644
index d35e6db..0000000
--- a/tests/components/NavLink.test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import NavLink from '../../components/NavLink'
-
-describe('NavLink', () => {
-  // Now mount the component and you have the wrapper
-  const wrapper = shallowMount(NavLink)
-
-  wrapper.setProps({ link: '/link', name: 'Link' })
-
-  it('renders the correct markup', () => {
-    expect(wrapper.html()).toContain(
-      `<li class="navlink"><nuxt-link class="link" to="/link">Link</nuxt-link></li>`
-    )
-  })
-
-  it('check text', () => {
-    expect(wrapper.text()).toBe('Link')
-  })
-
-  it('match snapshot', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-})
diff --git a/tests/components/__snapshots__/FacebookFeed.test.js.snap b/tests/components/__snapshots__/FacebookFeed.test.js.snap
deleted file mode 100644
index 6819e12..0000000
--- a/tests/components/__snapshots__/FacebookFeed.test.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FacebookFeed match snapshot 1`] = `
-<section
-  class="feed"
->
-  <h1>
-    Zobacz co się dzieje!
-  </h1>
-   
-  <facebookfindusbutton-stub />
-</section>
-`;
diff --git a/tests/components/__snapshots__/FacebookFindUsButton.test.js.snap b/tests/components/__snapshots__/FacebookFindUsButton.test.js.snap
deleted file mode 100644
index 98783c4..0000000
--- a/tests/components/__snapshots__/FacebookFindUsButton.test.js.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FacebookFindUsButton match snapshot 1`] = `
-<a
-  href="https://facebook.com/19pdhpuszcza"
-  rel="noopener"
-  target="_blank"
->
-  <div
-    class="button"
-  >
-    <img
-      alt="Find us on Facebook"
-      class="image"
-      src="/assets/social/find_us_fb.png"
-    />
-  </div>
-</a>
-`;
diff --git a/tests/components/__snapshots__/Footer.test.js.snap b/tests/components/__snapshots__/Footer.test.js.snap
deleted file mode 100644
index 577f85e..0000000
--- a/tests/components/__snapshots__/Footer.test.js.snap
+++ /dev/null
@@ -1,66 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Footer match snapshot 1`] = `
-<div
-  class="footer"
-  style="background-color: rgb(80, 123, 52);"
->
-  <div
-    class="map"
-  >
-    <div
-      class="routes"
-    >
-      <nuxt-link
-        to="/"
-      >
-        Home
-      </nuxt-link>
-    </div>
-     
-    <div
-      class="routes"
-    />
-  </div>
-   
-  <div
-    class="space"
-  />
-   
-  <div
-    class="author"
-  >
-    <p>
-      19 Poznańska Drużyna Harcerzy Puszcza
-    </p>
-     
-    <div
-      class="social"
-    >
-      <a
-        href="https://github.com/19pdh/"
-        rel="”noopener”"
-        target="_blank"
-      >
-        <img
-          alt="Github"
-          class="icon"
-          src="/assets/social/github.png"
-        />
-      </a>
-       
-      <a
-        href="https://www.facebook.com/19pdhpuszcza/"
-        rel="”noopener”"
-        target="_blank"
-      >
-        <img
-          alt="Facebook"
-          class="icon"
-          src="/assets/social/facebook.png"
-        />
-      </a>
-    </div>
-  </div>
-</div>
-`;
diff --git a/tests/components/__snapshots__/JoinUs.test.js.snap b/tests/components/__snapshots__/JoinUs.test.js.snap
deleted file mode 100644
index 832268c..0000000
--- a/tests/components/__snapshots__/JoinUs.test.js.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`JoinUs match snapshot 1`] = `
-<section
-  class="joinus"
->
-  <div
-    class="heading"
-  >
-    <div
-      class="title"
-    >
-      <div
-        class="text"
-      >
-        Rozpocznij swoją harcerską przygodę!
-      </div>
-    </div>
-     
-    <div
-      class="button"
-    >
-      <router-link
-        to="/kontakt"
-      >
-        Dołącz do nas!
-      </router-link>
-    </div>
-  </div>
-</section>
-`;
diff --git a/tests/components/__snapshots__/NavBar.test.js.snap b/tests/components/__snapshots__/NavBar.test.js.snap
deleted file mode 100644
index 89ef8e5..0000000
--- a/tests/components/__snapshots__/NavBar.test.js.snap
+++ /dev/null
@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NavBar match snapshot 1`] = `
-<nav
-  class="navbar"
->
-  <div
-    class="title"
-  >
-    <!---->
-     
-    <nuxt-link
-      class="title-name"
-      to="/"
-    >
-      Title
-    </nuxt-link>
-  </div>
-   
-  <div
-    class="space"
-  />
-   
-  <button
-    class="menu-toggler"
-  >
-    Menu
-  </button>
-   
-  <ul
-    class="links"
-  >
-    <navlink-stub
-      link="/"
-      name="Home"
-    />
-      
-  </ul>
-</nav>
-`;
diff --git a/tests/components/__snapshots__/NavLink.test.js.snap b/tests/components/__snapshots__/NavLink.test.js.snap
deleted file mode 100644
index 122e5c8..0000000
--- a/tests/components/__snapshots__/NavLink.test.js.snap
+++ /dev/null
@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NavLink match snapshot 1`] = `
-<li
-  class="navlink"
->
-  <nuxt-link
-    class="link"
-    to="/link"
-  >
-    Link
-  </nuxt-link>
-</li>
-`;
diff --git a/tests/pages/404.test.js b/tests/pages/404.test.js
deleted file mode 100644
index 76322da..0000000
--- a/tests/pages/404.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import page404 from '../../pages/404'
-
-describe('404', () => {
-  // Now mount the component and you have the wrapper
-  const wrapper = shallowMount(page404)
-
-  it('match snapshot', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-})
diff --git a/tests/pages/__snapshots__/404.test.js.snap b/tests/pages/__snapshots__/404.test.js.snap
deleted file mode 100644
index 44419f9..0000000
--- a/tests/pages/__snapshots__/404.test.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`404 match snapshot 1`] = `
-<div>
-  <h1>
-    404
-  </h1>
-   
-  <p>
-    Nie znaleziono strony
-  </p>
-</div>
-`;
diff --git a/tests/pages/__snapshots__/index.test.js.snap b/tests/pages/__snapshots__/index.test.js.snap
deleted file mode 100644
index af3d906..0000000
--- a/tests/pages/__snapshots__/index.test.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`index match snapshot 1`] = `
-<div>
-  <joinus-stub />
-   
-  <facebookfeed-stub />
-</div>
-`;
diff --git a/tests/pages/__snapshots__/kontakt.test.js.snap b/tests/pages/__snapshots__/kontakt.test.js.snap
deleted file mode 100644
index 22be789..0000000
--- a/tests/pages/__snapshots__/kontakt.test.js.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`kontakt match snapshot 1`] = `
-<div>
-  <h1>
-    Kontakt z drużynowym
-  </h1>
-   
-  <p>
-    
-    tel:
-    
-    <a
-      href="tel:+48695516492"
-    >
-      +48695516492
-    </a>
-  </p>
-   
-  <p>
-    
-    email:
-    
-    <a
-      href="mailto:patryk.niedzwiedzinski@zhr.pl"
-    >
-      patryk.niedzwiedzinski@zhr.pl
-    </a>
-  </p>
-</div>
-`;
diff --git a/tests/pages/__snapshots__/o-nas.test.js.snap b/tests/pages/__snapshots__/o-nas.test.js.snap
deleted file mode 100644
index fbdc54c..0000000
--- a/tests/pages/__snapshots__/o-nas.test.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Onas match snapshot 1`] = `
-<h1>
-  O nas
-</h1>
-`;
diff --git a/tests/pages/do-pobrania.js b/tests/pages/do-pobrania.js
deleted file mode 100644
index d4bd649..0000000
--- a/tests/pages/do-pobrania.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import doPobrania from '../../pages/do-pobrania'
-
-describe('doPobrania', () => {
-  // Now mount the component and you have the wrapper
-  const wrapper = shallowMount(doPobrania)
-
-  it('match snapshot', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-})
diff --git a/tests/pages/index.test.js b/tests/pages/index.test.js
deleted file mode 100644
index 1e262b3..0000000
--- a/tests/pages/index.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import index from '../../pages/index'
-
-describe('index', () => {
-  // Now mount the component and you have the wrapper
-  const wrapper = shallowMount(index)
-
-  it('match snapshot', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-})
diff --git a/tests/pages/kontakt.test.js b/tests/pages/kontakt.test.js
deleted file mode 100644
index d99e120..0000000
--- a/tests/pages/kontakt.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import kontakt from '../../pages/kontakt'
-
-describe('kontakt', () => {
-  // Now mount the component and you have the wrapper
-  const wrapper = shallowMount(kontakt)
-
-  it('match snapshot', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-})
diff --git a/tests/pages/o-nas.test.js b/tests/pages/o-nas.test.js
deleted file mode 100644
index 8b87253..0000000
--- a/tests/pages/o-nas.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import Onas from '../../pages/o-nas'
-
-describe('Onas', () => {
-  // Now mount the component and you have the wrapper
-  const wrapper = shallowMount(Onas)
-
-  it('match snapshot', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-})
diff --git a/tests/unit/__snapshots__/storybook.test.js.snap b/tests/unit/__snapshots__/storybook.test.js.snap
new file mode 100644
index 0000000..9310514
--- /dev/null
+++ b/tests/unit/__snapshots__/storybook.test.js.snap
@@ -0,0 +1,592 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Buttons/PlainButton default 1`] = `
+<div
+  style="height: 100vh; display: flex; align-items: center; justify-content: center;"
+>
+  <button
+    class="button"
+  >
+    Plain Button
+  </button>
+</div>
+`;
+
+exports[`Storyshots Facebook/FacebookFeed default 1`] = `
+<div
+  style="height: 100vh; display: flex; align-items: center; justify-content: center;"
+>
+  <section
+    class="feed"
+  >
+    <h1>
+      Zobacz co się dzieje!
+    </h1>
+     
+    <a
+      class="button"
+      href="https://facebook.com/19pdhpuszcza"
+      rel="noopener"
+      target="_blank"
+    >
+      <div
+        class="button-container"
+      >
+        <img
+          alt="Find us on Facebook"
+          class="image"
+          src="/assets/social/find_us_fb.png"
+        />
+      </div>
+    </a>
+  </section>
+</div>
+`;
+
+exports[`Storyshots Facebook/FacebookFindUsButton default 1`] = `
+<div
+  style="height: 100vh; display: flex; align-items: center; justify-content: center;"
+>
+  <a
+    class="button"
+    href="https://facebook.com/19pdhpuszcza"
+    rel="noopener"
+    target="_blank"
+  >
+    <div
+      class="button-container"
+    >
+      <img
+        alt="Find us on Facebook"
+        class="image"
+        src="/assets/social/find_us_fb.png"
+      />
+    </div>
+  </a>
+</div>
+`;
+
+exports[`Storyshots JoinUs default 1`] = `
+<div
+  style="height: 100vh; display: flex; align-items: center; justify-content: center;"
+>
+  <section
+    class="joinus"
+  >
+    <div
+      class="heading"
+    >
+      <div
+        class="title"
+      >
+        <div
+          class="text"
+        >
+          Rozpocznij swoją harcerską przygodę!
+        </div>
+      </div>
+       
+      <button
+        class="button"
+      >
+        Dołącz do nas
+      </button>
+    </div>
+  </section>
+</div>
+`;
+
+exports[`Storyshots NavLink default 1`] = `
+<div
+  style="height: 100vh; display: flex; align-items: center; justify-content: center;"
+>
+  <li
+    class="navlink"
+  >
+    <nuxt-link
+      class="link"
+      to="/test"
+    >
+      Test
+    </nuxt-link>
+  </li>
+</div>
+`;
+
+exports[`Storyshots Posts/PostLink default 1`] = `
+<div
+  style="height: 100vh; display: flex; align-items: center; justify-content: center;"
+>
+  <div
+    class="post-link"
+  >
+    <a
+      href="/kronika/2019/20/11/test"
+    >
+      <div
+        class="post-container"
+      >
+        <h4
+          class="post-title"
+        >
+          Test PostLink
+        </h4>
+         
+        <p
+          class="post-description"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+        </p>
+      </div>
+    </a>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Posts/PurePostList default 1`] = `
+<div
+  class="post-list"
+>
+  <!---->
+   
+  <div
+    class="post-list-container"
+  >
+    <div
+      class="post-link"
+    >
+      <a
+        href="/kronika/2019/20/11/test"
+      >
+        <div
+          class="post-container"
+        >
+          <h4
+            class="post-title"
+          >
+            Test PostLink
+          </h4>
+           
+          <p
+            class="post-description"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+          </p>
+        </div>
+      </a>
+    </div>
+    <div
+      class="post-link"
+    >
+      <a
+        href="/kronika/2019/20/11/test"
+      >
+        <div
+          class="post-container"
+        >
+          <h4
+            class="post-title"
+          >
+            Test PostLink
+          </h4>
+           
+          <p
+            class="post-description"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+          </p>
+        </div>
+      </a>
+    </div>
+    <div
+      class="post-link"
+    >
+      <a
+        href="/kronika/2019/20/11/test"
+      >
+        <div
+          class="post-container"
+        >
+          <h4
+            class="post-title"
+          >
+            Test PostLink
+          </h4>
+           
+          <p
+            class="post-description"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+          </p>
+        </div>
+      </a>
+    </div>
+    <div
+      class="post-link"
+    >
+      <a
+        href="/kronika/2019/20/11/test"
+      >
+        <div
+          class="post-container"
+        >
+          <h4
+            class="post-title"
+          >
+            Test PostLink
+          </h4>
+           
+          <p
+            class="post-description"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+          </p>
+        </div>
+      </a>
+    </div>
+    <div
+      class="post-link"
+    >
+      <a
+        href="/kronika/2019/20/11/test"
+      >
+        <div
+          class="post-container"
+        >
+          <h4
+            class="post-title"
+          >
+            Test PostLink
+          </h4>
+           
+          <p
+            class="post-description"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+          </p>
+        </div>
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Posts/PurePostList loading 1`] = `
+<div
+  class="post-list"
+>
+  <div
+    class="post-list-container"
+  >
+    <div
+      class="loading-post"
+    />
+    <div
+      class="loading-post"
+    />
+    <div
+      class="loading-post"
+    />
+    <div
+      class="loading-post"
+    />
+  </div>
+   
+  <!---->
+</div>
+`;
+
+exports[`Storyshots Posts/PurePostList no posts 1`] = `
+<div
+  class="post-list"
+>
+  <!---->
+   
+  <div
+    class="post-list-container"
+  />
+</div>
+`;
+
+exports[`Storyshots Ranking/RankingEntry default 1`] = `
+<div
+  style="height: 100vh; display: flex; align-items: center; justify-content: center;"
+>
+  <li
+    class="ranking-entry"
+  >
+    <div
+      class="ranking-entry__troop"
+    >
+      Test
+    </div>
+     
+    <div
+      class="ranking-entry__points"
+    >
+      32
+    </div>
+  </li>
+</div>
+`;
+
+exports[`Storyshots Ranking/RankingFirstEntry default 1`] = `
+<div
+  style="height: 100vh; display: flex; align-items: center; justify-content: center;"
+>
+  <li
+    class="ranking-first-entry"
+  >
+    <img
+      class="crown"
+      src="/assets/crown.svg"
+    />
+     
+    <div
+      class="ranking-first-entry__troop"
+    >
+      Test
+    </div>
+     
+    <div
+      class="ranking-first-entry__points"
+    >
+      32
+    </div>
+  </li>
+</div>
+`;
+
+exports[`Storyshots Ranking/RankingList default 1`] = `
+<div
+  style="height: 100vh; display: flex; align-items: center; justify-content: center;"
+>
+  <ol
+    class="ranking-list"
+  >
+    <li
+      class="ranking-first-entry"
+    >
+      <img
+        class="crown"
+        src="/assets/crown.svg"
+      />
+       
+      <div
+        class="ranking-first-entry__troop"
+      >
+        Troop0
+      </div>
+       
+      <div
+        class="ranking-first-entry__points"
+      >
+        32
+      </div>
+    </li>
+     
+    <li
+      class="ranking-entry"
+    >
+      <div
+        class="ranking-entry__troop"
+      >
+        Troop1
+      </div>
+       
+      <div
+        class="ranking-entry__points"
+      >
+        32
+      </div>
+    </li>
+    <li
+      class="ranking-entry"
+    >
+      <div
+        class="ranking-entry__troop"
+      >
+        Troop2
+      </div>
+       
+      <div
+        class="ranking-entry__points"
+      >
+        32
+      </div>
+    </li>
+  </ol>
+</div>
+`;
+
+exports[`Storyshots TheFooter default 1`] = `
+<div
+  style="display: flex; flex-direction: column; min-height: 100vh;"
+>
+  <div
+    style="flex: 1;"
+  />
+  <div
+    class="footer"
+    style="background-color: rgb(80, 123, 52);"
+  >
+    <div
+      class="map"
+    >
+      <div
+        class="routes"
+      >
+        <nuxt-link
+          to="/"
+        >
+          Strona główna
+        </nuxt-link>
+        <nuxt-link
+          to="/download"
+        >
+          Do pobrania
+        </nuxt-link>
+        <nuxt-link
+          to="/kontakt"
+        >
+          Kontakt
+        </nuxt-link>
+        <nuxt-link
+          to="/kronika"
+        >
+          Kronika
+        </nuxt-link>
+      </div>
+       
+      <div
+        class="routes"
+      />
+    </div>
+     
+    <div
+      class="space"
+    />
+     
+    <div
+      class="author"
+    >
+      <p>
+        19 Poznańska Drużyna Harcerzy Puszcza
+      </p>
+       
+      <div
+        class="social"
+      >
+        <a
+          href="https://github.com/19pdh/"
+          rel="”noopener”"
+          target="_blank"
+        >
+          <img
+            alt="Github"
+            class="icon"
+            src="/assets/social/github.png"
+          />
+        </a>
+         
+        <a
+          href="https://www.facebook.com/19pdhpuszcza/"
+          rel="”noopener”"
+          target="_blank"
+        >
+          <img
+            alt="Facebook"
+            class="icon"
+            src="/assets/social/facebook.png"
+          />
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots TheHeader default 1`] = `
+<div
+  style="display: flex; flex-direction: column; min-height: 100vh;"
+>
+  <nav
+    class="navbar"
+  >
+    <div
+      class="title"
+    >
+      <img
+        alt="ZHR"
+        class="logo"
+        src="/assets/krajka-logo.svg"
+      />
+       
+      <nuxt-link
+        class="title-name margin"
+        to="/"
+      >
+        19 PDH Puszcza
+      </nuxt-link>
+    </div>
+     
+    <div
+      class="space"
+    />
+     
+    <button
+      class="menu-toggler"
+    >
+      Menu
+    </button>
+     
+    <ul
+      class="links"
+    >
+      <li
+        class="navlink"
+      >
+        <nuxt-link
+          class="link"
+          to="/"
+        >
+          Strona główna
+        </nuxt-link>
+      </li>
+      <li
+        class="navlink"
+      >
+        <nuxt-link
+          class="link"
+          to="/download"
+        >
+          Do pobrania
+        </nuxt-link>
+      </li>
+      <li
+        class="navlink"
+      >
+        <nuxt-link
+          class="link"
+          to="/kontakt"
+        >
+          Kontakt
+        </nuxt-link>
+      </li>
+      <li
+        class="navlink"
+      >
+        <nuxt-link
+          class="link"
+          to="/kronika"
+        >
+          Kronika
+        </nuxt-link>
+      </li>
+    </ul>
+  </nav>
+  <div
+    style="flex: 1;"
+  />
+</div>
+`;
diff --git a/tests/unit/storybook.test.js b/tests/unit/storybook.test.js
new file mode 100644
index 0000000..ed81be4
--- /dev/null
+++ b/tests/unit/storybook.test.js
@@ -0,0 +1,5 @@
+import registerRequireContextHook from 'babel-plugin-require-context-hook/register'
+import initStoryshots from '@storybook/addon-storyshots'
+
+registerRequireContextHook()
+initStoryshots()