Add Link Component

src/components/Link/Link.stories.js

@@ -0,0 +1,18 @@
+import { Link } from '.'
+
+export default {
+  title: 'Components/Link',
+  component: Link
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Link },
+  template: '<Link v-bind="$props" />'
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'Software engineer',
+  destination: 'https://google.es'
+}

src/components/Link/Link.vue

@@ -0,0 +1,43 @@
+<template>
+  <h5>
+    <a class="Link"
+      :href="destination"
+      @click="$emit('on-click')">
+      {{ label }}
+    </a>
+  </h5>
+</template>
+
+<script>
+export default {
+  name: 'Link',
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    destination: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['on-click']
+}
+</script>
+
+<style scoped lang="scss">
+  .Link {
+    font-family: "Montserrat",Helvetica,Arial,sans-serif;
+    font-weight: 700;
+    line-height: 1.2;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #ff7473;
+    text-decoration: none;
+
+    &:focus, &:hover {
+      color: #ff2827;
+      text-decoration: underline;
+    }
+  }
+</style>

src/components/Link/index.js

@@ -0,0 +1 @@
+export { default as Link } from './Link.vue'

src/pages/index.vue

@@ -2,22 +2,31 @@
 <template>
 <div>
   <Header />
-   <Button
+  <Button
     label="Click me!"
     @on-click="onButtonClick"
   />
+  <Link
+    label="Software engineer"
+    destination="https://google.es"
+    @on-click="onLinkClick"
+  />
 </div>
 </template>
 
 <script>
 import { Button } from '../components/Button'
 import { Header } from '../components/Header'
+import { Link } from '../components/Link'
 
 export default {
-  components: { Button, Header },
+  components: { Button, Header, Link },
   methods: {
     onButtonClick () {
       alert('Button have been clicked')
+    },
+    onLinkClick () {
+      alert('Link have been clicked')
     }
   }
 }