@magicgol/polyjuice 0.14.1 → 0.16.0

package/.storybook/main.js

@@ -9,4 +9,12 @@ module.exports = {
     '@storybook/preset-scss',
   ],
   'framework': '@storybook/vue',
+  'previewHead': (head) => (`
+    ${head}
+    <style>
+      html, body {
+        background: #F6F9FC;
+      }
+    </style>
+  `),
 }

package/.storybook/preview-head.html

@@ -1,4 +1,4 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
-<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,600,700" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,600,700|Raleway:600,700" rel="stylesheet" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.14.1",
+  "version": "0.16.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/assets/palette.scss

@@ -5,6 +5,7 @@ $palette: (
     'coin': #ffcf73,
     'expertClub': #075169,
     // ALERT
+    'error': #ed4949,
     'warning': #ff614c,
     'success': #349B50,
     'info': #004781,

package/src/assets/svg/facebook.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'facebook': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 25 25',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M9.666 4.213c-.486 0-.972.593-.972 1.403V8.37H13.5v3.997H8.694V24.3h-4.59V12.367H0V8.37h4.104V6.048C4.104 2.7 6.48 0 9.666 0H13.5v4.213H9.666z" _fill="#fff"/>'
+  }
+})

package/src/assets/svg/google.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'google': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 18 18',
+    data: '<path pid="0" d="M9.003 7.415v3.439h4.9c-.64 2.084-2.381 3.576-4.9 3.576a5.431 5.431 0 010-10.86c1.349 0 2.58.496 3.528 1.31l2.532-2.534A8.966 8.966 0 009.003 0C4.03 0 0 4.03 0 9s4.03 9 9.003 9c7.555 0 9.224-7.067 8.482-10.573l-8.482-.012z" _fill="#fff"/>'
+  }
+})

package/src/assets/svg/index.js

@@ -1,5 +1,7 @@
 /* eslint-disable */
 require('./check-with-circle')
+require('./facebook')
+require('./google')
 require('./magic-coin')
 require('./message')
 require('./soccer-ball')

package/src/components/box/filing-cabinet/FilingCabinet.stories.js

@@ -0,0 +1,44 @@
+import MgFilingCabinet from './FilingCabinet.vue';
+import MgFilingCabinetTab from './FilingCabinetTab.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Box/Filing Cabinet',
+  component: MgFilingCabinet,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    }
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgFilingCabinet, MgFilingCabinetTab },
+  template: `<mg-filing-cabinet v-bind="$props">
+    <template v-slot:tab-left>
+      <mg-filing-cabinet-tab>left tab</mg-filing-cabinet-tab>
+    </template>
+    <template v-slot:tab-right>
+      <mg-filing-cabinet-tab active>right tab</mg-filing-cabinet-tab>
+    </template>
+    <template v-if="${'default' in args}" v-slot>${args.default}</template>
+  </mg-filing-cabinet>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'this is the content'
+};

package/src/components/box/filing-cabinet/FilingCabinet.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="bg-white">
+    <div class="d-flex">
+      <div class="w-50">
+        <slot name="tab-left"></slot>
+      </div>
+      <div class="w-50">
+        <slot name="tab-right"></slot>
+      </div>
+    </div>
+    <div class="p-4">
+      <div class="px-2">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-filing-cabinet'
+};
+</script>

package/src/components/box/filing-cabinet/FilingCabinetTab.stories.js

@@ -0,0 +1,43 @@
+import MgFilingCabinetTab from './FilingCabinetTab.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Box/Filing Cabinet/Tab',
+  component: MgFilingCabinetTab,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    }
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgFilingCabinetTab },
+  template: `<mg-filing-cabinet-tab @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-filing-cabinet-tab>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  active: false,
+  default: 'tab button'
+};
+
+export const Active = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Active.args = {
+  active: true,
+  default: 'tab button'
+};

package/src/components/box/filing-cabinet/FilingCabinetTab.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="d-block p-4 text-center text-uppercase"
+    :class="classes"
+    @click="$emit('click')"
+  >
+    <span class="pb-1"><slot></slot></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-filing-cabinet-tab',
+
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-filing-cabinet-tab': true,
+        'mg-filing-cabinet-tab--active': this.active === true,
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-filing-cabinet-tab {
+    background-color: #f3f3f3;
+    border: 1px solid #d8d8d8;
+    color: #000;
+    cursor: pointer;
+    text-decoration: none;
+    font-family: 'Raleway', sans-serif;
+    font-size: 1.125rem;
+    font-weight: 600;
+
+    &--active {
+      background-color: #fff !important;
+      border-color: #fff !important;
+
+      span {
+        border-bottom: 2px solid map-get($palette, 'brand');
+      }
+    }
+  }
+</style>

package/src/components/card/vertical-card/VCard.stories.js

@@ -18,6 +18,11 @@ export default {
         },
       }
     },
+    theme: {
+      control: { type: 'select' },
+      options: [null, 'club'],
+      defaultValue: null
+    },
     footer: {
       description: "The footer content goes here",
       control: {

package/src/components/card/vertical-card/VCard.vue

@@ -4,9 +4,9 @@
     :class="classes"
     @click="onClick"
   >
-    <div class="p-3 bg-white"><slot></slot></div>
+    <div class="mg-v-card-content p-3"><slot></slot></div>
     <div
-      class="mg-footer p-3"
+      class="mg-v-card-footer p-3"
       v-if="footerVisibility"
     ><slot name="footer"></slot></div>
   </div>
@@ -16,14 +16,25 @@
 export default {
   name: 'mg-v-card',
 
+  props: {
+    theme: {
+      type: String,
+      default: null,
+      validator: function (value) {
+        return ['club'].indexOf(value) !== -1;
+      },
+    }
+  },
+
   computed: {
     classes() {
       return {
         'mg-v-card': true,
+        'mg-v-card--theme-club': this.theme === 'club',
       };
     },
     footerVisibility() {
-      return 'footer' in this.$slots;
+      return 'footer' in this.$slots && !!this.$slots.footer;
     }
   },
 
@@ -41,7 +52,20 @@ export default {
 .mg-v-card {
   box-shadow: 0 8px 22px 0 rgba(0, 0, 0, 0.3);
 
-  .mg-footer {
+  &-content {
+    background: white;
+  }
+
+  &--theme {
+    &-club {
+      & .mg-v-card-content {
+        background: linear-gradient(90deg, #D1EFFF 0%, #DDDAFC 99.65%) !important;
+        color: #777;
+      }
+    }
+  }
+
+  &-footer {
     background-color: rgba(map-get($palette, 'brand'), 0.04);
   }
 }

package/src/components/footballer/role-badge/RoleBadge.stories.js

@@ -13,9 +13,21 @@ export default {
     },
     size: {
       control: { type: 'select' },
-      options: ['large', 'normal'],
+      options: ['huge', 'large', 'normal'],
       defaultValue: 'normal'
     },
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    },
   },
 };
 
@@ -23,7 +35,7 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { MgRoleBadge },
-  template: `<mg-role-badge v-bind="$props"></mg-role-badge>`,
+  template: `<mg-role-badge v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-role-badge>`,
 });
 
 export const Default = Template.bind({});

package/src/components/footballer/role-badge/RoleBadge.vue

@@ -3,7 +3,8 @@
     class="d-inline-flex text-center text-white rounded-circle justify-content-center align-items-center"
     :class="classes"
   >
-    {{ role }}
+    <slot v-if="slotVisibility"></slot>
+    <template v-else>{{ role }}</template>
   </div>
 </template>
 
@@ -23,7 +24,7 @@ export default {
       type: String,
       default: 'normal',
       validator: function (value) {
-        return ['normal', 'large'].indexOf(value) !== -1;
+        return ['normal', 'large', 'huge'].indexOf(value) !== -1;
       },
     }
   },
@@ -38,7 +39,11 @@ export default {
         'mg-role-badge--forward': this.role === 'A',
         'mg-role-badge--normal': this.size === 'normal',
         'mg-role-badge--large': this.size === 'large',
+        'mg-role-badge--huge': this.size === 'huge',
       };
+    },
+    slotVisibility() {
+      return 'default' in this.$slots && !!this.$slots.default;
     }
   },
 };
@@ -59,12 +64,20 @@ export default {
     }
 
     &--large {
-      font-size: 0.875rem;
+      font-size: 1rem;
       height: 1.5rem;
       width: 1.5rem;
       min-width: 1.5rem;
     }
 
+    &--huge {
+      border: 2px solid #fff;
+      font-size: 1.25rem;
+      height: 2.75rem;
+      width: 2.75rem;
+      min-width: 2.75rem;
+    }
+
     &--goalkeeper {
       background-color: map-get($palette, 'goalkeeper');
     }

package/src/components/form/checkbox/checkbox/Checkbox.vue

@@ -17,7 +17,7 @@
     <span class="mg-checkbox-check align-middle d-inline-block position-relative"></span>
     <!-- end of THE SQUARE -->
     <!-- TEXT AS LABEL -->
-    <span class="align-middle">
+    <span class="align-middle pl-2">
       <slot></slot>
     </span>
     <!-- end of TEXT AS LABEL -->
@@ -62,6 +62,9 @@ export default {
       border-radius: 2px;
       box-sizing: border-box;
       height: 20px;
+      font-family: 'Raleway', sans-serif;
+      font-size: 0.875rem;
+      font-weight: 600;
       vertical-align: sub;
       width: 20px;
     }

package/src/components/form/input/input/Input.vue

@@ -110,7 +110,8 @@ export default {
     border-bottom: 1px solid #d8d8d8;
 
     input {
-      color: #666666;
+      background-color: #fff;
+      color: #666;
       font-family: 'Raleway', sans-serif;
       font-size: 1rem;
       font-weight: 600;

package/src/components/image/profile-image/ProfileImage.vue

@@ -121,7 +121,7 @@ export default {
     }
 
     .mg-acronym {
-      background-color: #5770bc;
+      background-color: #777777;
       border-radius: 50%;
     }
 

package/src/components/label/dot/Dot.stories.js

@@ -0,0 +1,19 @@
+import MgDot from './Dot.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Label/Dot',
+  component: MgDot,
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgDot },
+  template: `<mg-dot v-bind="$props"></mg-dot>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+};

package/src/components/label/dot/Dot.vue

@@ -0,0 +1,30 @@
+<template>
+  <span
+    class="d-inline-block rounded-circle"
+    :class="classes"
+  ></span>
+</template>
+
+<script>
+export default {
+  name: 'mg-dot',
+
+  computed: {
+    classes() {
+      return {
+        'mg-dot': true,
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/palette';
+
+.mg-dot {
+  background-color: map-get($palette, 'brand');
+  height: 0.75rem;
+  width: 0.75rem;
+}
+</style>

package/src/components/label/traffic-light/TrafficLight.stories.js

@@ -0,0 +1,41 @@
+import MgTrafficLight from './TrafficLight.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Label/Traffic Light',
+  component: MgTrafficLight,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    light: {
+      control: { type: 'select' },
+      options: ['red', 'yellow', 'green'],
+      defaultValue: 'green'
+    },
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    }
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgTrafficLight },
+  template: `<mg-traffic-light v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-traffic-light>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  light: 'green',
+  default: '300',
+};

package/src/components/label/traffic-light/TrafficLight.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="d-inline-flex bg-white align-items-center px-3"
+    :class="classes"
+  >
+    <div><slot></slot></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-traffic-light',
+
+  props: {
+    light: {
+      type: String,
+      default: 'green',
+      validator: function (value) {
+        return ['red', 'yellow', 'green'].indexOf(value) !== -1;
+      },
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-traffic-light': true,
+        'mg-traffic-light--error': this.light === 'red',
+        'mg-traffic-light--warning': this.light === 'yellow',
+        'mg-traffic-light--success': this.light === 'green',
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-traffic-light {
+    border: 2px solid;
+    border-radius: 50px;
+    height: 2.25rem;
+
+    &--error {
+      border-color: map-get($palette, 'error');
+    }
+
+    &--warning {
+      border-color: map-get($palette, 'warning');
+    }
+
+    &--success {
+      border-color: map-get($palette, 'success');
+    }
+  }
+</style>

package/src/components/list/head/ListHead.stories.js

@@ -0,0 +1,43 @@
+import MgListHead from './ListHead.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'List/Head',
+  component: MgListHead,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgListHead },
+  template: `
+    <div class="row">
+      <div class="col-6 p-0">
+        <mg-list-head @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-list-head>
+      </div>
+      <div class="col-6 p-0">
+        <mg-list-head>Another head</mg-list-head>
+      </div>
+    </div>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'this is the list head'
+};

package/src/components/list/head/ListHead.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="text-uppercase pb-2 px-3"
+    :class="classes"
+  ><slot></slot></div>
+</template>
+
+<script>
+export default {
+  name: 'mg-list-head',
+
+  computed: {
+    classes() {
+      return {
+        'mg-list-head': true,
+      };
+    },
+    footerVisibility() {
+      return 'footer' in this.$slots && !!this.$slots.footer;
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/palette';
+
+.mg-list-head {
+  border-bottom: 1px solid #dee2e6;
+  color: #777777;
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+</style>

package/src/components/social/button/SocialButton.stories.js

@@ -0,0 +1,54 @@
+import MgSocialButton from './SocialButton.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Social/Button',
+  component: MgSocialButton,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    channel: {
+      control: { type: 'select' },
+      options: ['google', 'facebook'],
+      defaultValue: 'facebook'
+    },
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    }
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgSocialButton },
+  template: `<mg-social-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-social-button>`,
+});
+
+export const Facebook = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Facebook.args = {
+  channel: 'facebook',
+  default: 'Accedi con Facebook'
+};
+
+export const Google = Template.bind({});
+Google.args = {
+  channel: 'google',
+  default: 'Accedi con Google'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  channel: 'google',
+  default: 'Accedi con Google'
+};

package/src/components/social/button/SocialButton.vue

@@ -0,0 +1,81 @@
+<template>
+  <button
+    type="button"
+    class="p-3 d-flex align-items-center w-100 text-white border-0"
+    :class="classes"
+    :disabled="disabled"
+    @click="$emit('click')"
+  >
+    <span class="flex-grow-0"><svgicon :name="channel"></svgicon></span>
+    <span class="flex-grow-1 text-center"><slot></slot></span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'mg-social-button',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    channel: {
+      type: String,
+      default: 'facebook',
+      validator: function (value) {
+        return ['facebook', 'google'].indexOf(value) !== -1;
+      },
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-social-button': true,
+        'mg-social-button--disabled': this.disabled,
+        'mg-social-button--facebook': this.channel === 'facebook',
+        'mg-social-button--google': this.channel === 'google',
+      };
+    }
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-social-button {
+    appearance: none;
+    cursor: pointer;
+    font-family: 'Raleway', sans-serif;
+    font-size: 0.8125rem;
+    font-weight: 700;
+    outline: none;
+    text-decoration: none;
+
+    svg {
+      fill: white;
+      width: 1rem;
+    }
+
+    &--facebook {
+      background-color: #4671b8;
+    }
+
+    &--google {
+      background-color: #328bee;
+    }
+
+    &--disabled {
+      opacity: 0.6 !important;
+      cursor: not-allowed !important;
+    }
+  }
+</style>

package/src/components/typography/h1/HeadingOne.stories.js

@@ -30,5 +30,5 @@ const Template = args => ({
 export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
-  default: 'heading one'
+  default: 'heading 1'
 };

package/src/components/typography/h3/HeadingThree.stories.js

@@ -0,0 +1,34 @@
+import MgHeadingThree from './HeadingThree.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Typography/Heading/H3',
+  component: MgHeadingThree,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    }
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = args => ({
+  components: { MgHeadingThree },
+  template: `<mg-heading-three><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-three>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'heading 3'
+};

package/src/components/typography/h3/HeadingThree.vue

@@ -0,0 +1,25 @@
+<template>
+  <div v-bind:class="classes"><slot></slot></div>
+</template>
+
+<script>
+export default {
+  name: 'mg-heading-three',
+
+  computed: {
+    classes() {
+      return {
+        'mg-h3': true,
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  .mg-h3 {
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 1rem;
+    font-weight: 500;
+  }
+</style>

package/src/components/typography/h4/HeadingFour.stories.js

@@ -30,5 +30,5 @@ const Template = args => ({
 export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
-  default: 'heading four'
+  default: 'heading 4'
 };

package/src/components/typography/h6/HeadingSix.stories.js

@@ -30,5 +30,5 @@ const Template = args => ({
 export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
-  default: 'heading six'
+  default: 'heading 6'
 };

package/src/svg/facebook.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.666 4.2125C9.18 4.2125 8.694 4.806 8.694 5.616V8.37H13.5V12.3665H8.694V24.3005H4.104V12.3665H0V8.37H4.104V6.048C4.104 2.7 6.48 0 9.666 0H13.5V4.2125H9.666Z" fill="white"/>
+</svg>

package/src/svg/google.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00327 7.41519V10.854H13.9025C13.2635 12.9379 11.5216 14.4295 9.00327 14.4295C6.00472 14.429 3.5739 11.9986 3.573 9.00001C3.57278 7.55975 4.14483 6.17841 5.16325 5.15999C6.18167 4.14157 7.56301 3.56952 9.00327 3.56974C10.3516 3.56974 11.5822 4.06556 12.5313 4.88046L15.0627 2.34574C13.4073 0.833677 11.2453 -0.00324253 9.00327 9.4415e-06C4.03036 9.4415e-06 0 4.03037 0 9.00001C0 13.9696 4.03036 18 9.00327 18C16.5584 18 18.2266 10.9334 17.4854 7.42746L9.00327 7.41519Z" fill="white"/>
+</svg>