Basic template

2 files changed, 79 insertions, 0 deletions

diff --git a/components/GoogleDriveLink.stories.js b/components/GoogleDriveLink.stories.js
new file mode 100644
index 0000000..37d67e8
--- /dev/null
+++ b/components/GoogleDriveLink.stories.js
@@ -0,0 +1,19 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../.storybook/decorators'
+
+import GoogleDriveLink from './GoogleDriveLink'
+
+const googleDriveLink = {
+  text: 'Test',
+  link: 'https://drive.google.com/u/1'
+}
+
+storiesOf('GoogleDriveLink', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { GoogleDriveLink },
+      template: `<google-drive-link :text="text" :link="link" />`,
+      data: () => googleDriveLink
+    }
+  })
diff --git a/components/GoogleDriveLink.vue b/components/GoogleDriveLink.vue
new file mode 100644
index 0000000..729c03d
--- /dev/null
+++ b/components/GoogleDriveLink.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="google-drive-link">
+    <div class="image">
+      <img src="/assets/google-drive.png" alt="Drive" />
+    </div>
+    <p>
+      {{ text }}
+    </p>
+    <a :href="link">
+      <plain-button text="Przejdź" />
+    </a>
+  </div>
+</template>
+
+<script>
+import PlainButton from './Buttons/PlainButton'
+
+export default {
+  name: 'GoogleDriveLink',
+  components: { PlainButton },
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    link: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>

+.google-drive-link {
+  background: white;
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+
+  padding: 20px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 200px;
+}
+
+.google-drive-link img {
+  display: block;
+  margin: auto;
+}
+
+.google-drive-link .image {
+  background: #f3f3f3;
+  border-radius: 50px;
+  padding: 20px;
+  margin: 20%;
+}
+</style>