Merge pull request #13 from 19pdh/storybook

Storybook

4 files changed, 103 insertions, 0 deletions

diff --git a/components/Facebook/FacebookFeed.stories.js b/components/Facebook/FacebookFeed.stories.js
new file mode 100644
index 0000000..d9ec30a
--- /dev/null
+++ b/components/Facebook/FacebookFeed.stories.js
@@ -0,0 +1,13 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import FacebookFeed from './FacebookFeed'
+
+storiesOf('Facebook/FacebookFeed', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { FacebookFeed },
+      template: `<facebook-feed />`
+    }
+  })
diff --git a/components/Facebook/FacebookFeed.vue b/components/Facebook/FacebookFeed.vue
new file mode 100644
index 0000000..56172f4
--- /dev/null
+++ b/components/Facebook/FacebookFeed.vue
@@ -0,0 +1,29 @@
+<template>
+  <section class="feed">
+    <h1>Zobacz co się dzieje!</h1>
+    <facebook-find-us-button />
+  </section>
+</template>
+
+<script>
+import FacebookFindUsButton from './FacebookFindUsButton.vue'
+
+export default {
+  components: {
+    FacebookFindUsButton
+  },
+  props: {
+    pageId: String
+  }
+}
+</script>
+
+<style scoped>
+.feed {
+  margin: 50px 0;
+}
+
+.feed > h1 {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/components/Facebook/FacebookFindUsButton.stories.js b/components/Facebook/FacebookFindUsButton.stories.js
new file mode 100644
index 0000000..e6a298b
--- /dev/null
+++ b/components/Facebook/FacebookFindUsButton.stories.js
@@ -0,0 +1,13 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import FacebookFindUsButton from './FacebookFindUsButton'
+
+storiesOf('Facebook/FacebookFindUsButton', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { FacebookFindUsButton },
+      template: `<facebook-find-us-button />`
+    }
+  })
diff --git a/components/Facebook/FacebookFindUsButton.vue b/components/Facebook/FacebookFindUsButton.vue
new file mode 100644
index 0000000..b955b0b
--- /dev/null
+++ b/components/Facebook/FacebookFindUsButton.vue
@@ -0,0 +1,48 @@
+<template>
+  <a
+    class="button"
+    href="https://facebook.com/19pdhpuszcza"
+    target="_blank"
+    rel="noopener"
+  >
+    <div class="button-container">
+      <img
+        class="image"
+        src="/assets/social/find_us_fb.png"
+        alt="Find us on Facebook"
+      />
+    </div>
+  </a>
+</template>
+
+<style scoped>
+.button {
+  margin: 10px;
+}
+
+.button:hover .button-container {
+  background-color: #efefef;
+}
+
+.button-container {
+  border: 2px solid #c4c4c4;
+  border-radius: 4px;
+  padding: 15px 40px;
+}
+
+.image {
+  width: 200px;
+  display: block;
+  margin: auto;
+}
+
+@media (max-width: 500px) {
+  a {
+    width: 100%;
+  }
+
+  .image {
+    width: 150px;
+  }
+}
+</style>