From fe81f3d551f00d8a5ee5ee4c738e02ffc2d06ecb Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Wed, 27 Nov 2019 23:42:38 +0100
Subject: Add PlainButton

---
 components/Buttons/PlainButton.stories.js | 18 ++++++++++++++++++
 components/Buttons/PlainButton.vue        | 30 ++++++++++++++++++++++++++++++
 components/JoinUs.vue                     | 15 ++++++++++++---
 3 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 components/Buttons/PlainButton.stories.js
 create mode 100644 components/Buttons/PlainButton.vue

(limited to 'components')

diff --git a/components/Buttons/PlainButton.stories.js b/components/Buttons/PlainButton.stories.js
new file mode 100644
index 0000000..67a657d
--- /dev/null
+++ b/components/Buttons/PlainButton.stories.js
@@ -0,0 +1,18 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import PlainButton from './PlainButton'
+
+const plainButton = {
+  text: 'Plain Button'
+}
+
+storiesOf('PlainButton', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { PlainButton },
+      template: `<plain-button :text="text" />`,
+      data: () => plainButton
+    }
+  })
diff --git a/components/Buttons/PlainButton.vue b/components/Buttons/PlainButton.vue
new file mode 100644
index 0000000..6e0cde2
--- /dev/null
+++ b/components/Buttons/PlainButton.vue
@@ -0,0 +1,30 @@
+<template>
+  <button class="button" @click="$emit('click')">{{text}}</button>
+</template>
+
+<script>
+export default {
+  name: 'PlainButton',
+  props: {
+    text: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.button {
+  background-color: #507b34;
+  padding: 10px;
+  max-width: 150px;
+  border: none;
+
+  cursor: pointer;
+
+  color: #ffffff;
+  text-align: center;
+  font: 16px 'Roboto Slab';
+}
+</style>
\ No newline at end of file
diff --git a/components/JoinUs.vue b/components/JoinUs.vue
index 6ffec91..d8bfadf 100644
--- a/components/JoinUs.vue
+++ b/components/JoinUs.vue
@@ -4,13 +4,22 @@
       <div class="title">
         <div class="text">Rozpocznij swoją harcerską przygodę!</div>
       </div>
-      <div class="button">
-        <nuxt-link to="/kontakt">Dołącz do nas!</nuxt-link>
-      </div>
+      <plain-button @click="$router.push('/kontakt')" text="Dołącz do nas" />
     </div>
   </section>
 </template>
 
+<script>
+import PlainButton from './Buttons/PlainButton'
+
+export default {
+  name: 'JoinUs',
+  components: {
+    PlainButton
+  }
+}
+</script>
+
 <style scoped>
 .joinus {
   width: 100%;
-- 
cgit 1.4.1