Add Facebook components

4 files changed, 90 insertions, 0 deletions

diff --git a/components/Facebook/FacebookFeed.stories.js b/components/Facebook/FacebookFeed.stories.js
new file mode 100644
index 0000000..4eced7f
--- /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('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..e76f8f9
--- /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('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..9a27c11
--- /dev/null
+++ b/components/Facebook/FacebookFindUsButton.vue
@@ -0,0 +1,35 @@
+<template>
+  <a href="https://facebook.com/19pdhpuszcza" target="_blank" rel="noopener">
+    <div class="button">
+      <img class="image" src="/assets/social/find_us_fb.png" alt="Find us on Facebook" />
+    </div>
+  </a>
+</template>
+
+<style scoped>
+.button {
+  border: 2px solid #c4c4c4;
+  border-radius: 4px;
+
+  padding: 15px 40px;
+  margin: 10px;
+}
+
+.button:hover {
+  background-color: #efefef;
+}
+
+.image {
+  width: 200px;
+}
+
+@media (max-width: 500px) {
+  a {
+    width: 100%;
+  }
+
+  .image {
+    width: 150px;
+  }
+}
+</style>
\ No newline at end of file