@magicgol/polyjuice 0.13.0 → 0.15.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.13.0",
+  "version": "0.15.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

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,6 +1,10 @@
 /* eslint-disable */
 require('./check-with-circle')
+require('./facebook')
+require('./google')
 require('./magic-coin')
+require('./message')
 require('./soccer-ball')
 require('./star-c')
 require('./star-stroke-p')
+require('./timer')

package/src/assets/svg/message.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'message': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    data: '<path pid="0" d="M13.333 1.333H2.667c-.736 0-1.334.598-1.334 1.334v8c0 .735.598 1.333 1.334 1.333h2v2.511L8.85 12h4.482c.736 0 1.334-.598 1.334-1.333v-8c0-.736-.598-1.334-1.334-1.334zm0 9.334H8.482L6 12.155v-1.488H2.667v-8h10.666v8z" _fill="#D81159"/><path pid="1" d="M4.667 4.667h6.666V6H4.667V4.667zm0 2.666h4.666v1.334H4.667V7.333z" _fill="#D81159"/>'
+  }
+})

package/src/assets/svg/timer.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'timer': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    data: '<path pid="0" d="M4 .667A.667.667 0 014.667 0H10a.666.666 0 110 1.333H4.667A.667.667 0 014 .667zM6.667 10A.667.667 0 108 10V6a.667.667 0 00-1.333 0v4zm.666-7.333a6 6 0 100 12 6 6 0 000-12zm-4.666 6a4.667 4.667 0 119.333 0 4.667 4.667 0 01-9.333 0zm10.864-3.53a.667.667 0 10.941-.944l-1.336-1.33a.666.666 0 10-.941.944l1.336 1.33z" _fill="#D81159"/>'
+  }
+})

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,52 @@
+<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="py-4 px-3">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-filing-cabinet',
+
+  props: {
+    // icon: {
+    //   type: String
+    // },
+    // level: {
+    //   type: String,
+    //   default: 'normal',
+    //   validator: function (value) {
+    //     return ['normal', 'club'].indexOf(value) !== -1;
+    //   },
+    // }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-filing-cabinet': true,
+        // 'mg-icon-badge--club': this.level === 'club',
+        // 'mg-icon-badge--normal': this.level === 'normal',
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-filing-cabinet {
+
+  }
+</style>

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.vue

@@ -23,7 +23,7 @@ export default {
       };
     },
     footerVisibility() {
-      return 'footer' in this.$slots;
+      return 'footer' in this.$slots && !!this.$slots.footer;
     }
   },
 

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,19 @@ export default {
     }
 
     &--large {
-      font-size: 0.875rem;
+      font-size: 1rem;
       height: 1.5rem;
       width: 1.5rem;
       min-width: 1.5rem;
     }
 
+    &--huge {
+      font-size: 1.25rem;
+      height: 2.5rem;
+      width: 2.5rem;
+      min-width: 2.5rem;
+    }
+
     &--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/icon/badge/IconBadge.stories.js

@@ -0,0 +1,37 @@
+import MgIconBadge from './IconBadge.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Icon/Badge',
+  component: MgIconBadge,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    level: {
+      control: { type: 'select' },
+      options: ['normal', 'club'],
+      defaultValue: 'normal'
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgIconBadge },
+  template: `<mg-icon-badge v-bind="$props"></mg-icon-badge>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  icon: 'message',
+  level: 'normal',
+};
+
+export const Club = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Club.args = {
+  icon: 'star-c',
+  level: 'club',
+};
+

package/src/components/icon/badge/IconBadge.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    class="d-inline-flex rounded-circle align-items-center justify-content-center"
+    v-bind:class="classes"
+  >
+    <svgicon
+      :name="icon"
+    ></svgicon>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-icon-badge',
+
+  props: {
+    icon: {
+      type: String
+    },
+    level: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['normal', 'club'].indexOf(value) !== -1;
+      },
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-icon-badge': true,
+        'mg-icon-badge--club': this.level === 'club',
+        'mg-icon-badge--normal': this.level === 'normal',
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-icon-badge {
+    height: 2rem;
+    min-width: 2rem;
+    width: 2rem;
+
+    svg {
+      height: 1rem;
+      width: 1rem;
+    }
+
+    &--normal {
+      background-color: white;
+
+      svg {
+        fill: map-get($palette, 'brand');
+      }
+    }
+
+    &--club {
+      background-color: map-get($palette, 'expertClub');
+
+      svg {
+        fill: white;
+      }
+    }
+  }
+</style>

package/src/components/image/profile-image/ProfileImage.stories.js

@@ -8,7 +8,7 @@ export default {
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['large', 'normal', 'small', 'x-small'],
+      options: ['huge', 'large', 'normal', 'small', 'x-small'],
       defaultValue: 'normal'
     },
     liveBadge: {
@@ -48,12 +48,13 @@ export const Large = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Large.args = {
   name: 'VdF',
-  size: 'large',
+  size: 'large'
 };
 
 export const Online = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Online.args = {
   online: true,
-  name: 'VdF'
+  name: 'VdF',
+  liveBadge: true
 };

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

@@ -46,7 +46,7 @@ export default {
       type: String,
       default: 'normal',
       validator: function (value) {
-        return ['large', 'normal', 'small', 'x-small'].indexOf(value) !== -1;
+        return ['huge', 'large', 'normal', 'small', 'x-small'].indexOf(value) !== -1;
       },
     },
     liveBadge: {
@@ -67,6 +67,7 @@ export default {
         'mg-profile-image--small': this.size === 'small',
         'mg-profile-image--normal': this.size === 'normal',
         'mg-profile-image--large': this.size === 'large',
+        'mg-profile-image--huge': this.size === 'huge',
         'mg-profile-image--online': this.online === true,
         'mg-profile-image--offline': this.online === false,
       };
@@ -80,6 +81,7 @@ export default {
 
   .mg-profile-image {
     border-radius: 50%;
+    display: inline-flex;
     font-family: 'Ubuntu', sans-serif;
     font-weight: 600;
 
@@ -111,8 +113,15 @@ export default {
       width: 5rem;
     }
 
+    &--huge {
+      height: 6.25rem;
+      min-width: 6.25rem;
+      font-size: 2.5rem;
+      width: 6.25rem;
+    }
+
     .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/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,83 @@
+<template>
+  <a
+    class="p-3 d-flex align-items-center w-100 text-white border-0"
+    :class="classes"
+    :href="href"
+    :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>
+  </a>
+</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;
+      },
+    },
+    href: {
+      type: String
+    }
+  },
+
+  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;
+
+    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/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>

package/src/svg/message.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3334 1.33333H2.66671C1.93137 1.33333 1.33337 1.93133 1.33337 2.66666V10.6667C1.33337 11.402 1.93137 12 2.66671 12H4.66671V14.5113L8.85137 12H13.3334C14.0687 12 14.6667 11.402 14.6667 10.6667V2.66666C14.6667 1.93133 14.0687 1.33333 13.3334 1.33333ZM13.3334 10.6667H8.48204L6.00004 12.1553V10.6667H2.66671V2.66666H13.3334V10.6667Z" fill="#D81159"/>
+<path d="M4.66663 4.66667H11.3333V6.00001H4.66663V4.66667ZM4.66663 7.33334H9.33329V8.66667H4.66663V7.33334Z" fill="#D81159"/>
+</svg>

package/src/svg/timer.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.00004 0.666667C4.00004 0.489856 4.07028 0.320286 4.1953 0.195262C4.32033 0.0702379 4.4899 0 4.66671 0L10 0C10.1769 0 10.3464 0.0702379 10.4714 0.195262C10.5965 0.320286 10.6667 0.489856 10.6667 0.666667C10.6667 0.843478 10.5965 1.01305 10.4714 1.13807C10.3464 1.2631 10.1769 1.33333 10 1.33333H4.66671C4.4899 1.33333 4.32033 1.2631 4.1953 1.13807C4.07028 1.01305 4.00004 0.843478 4.00004 0.666667V0.666667ZM6.66671 10C6.66671 10.1768 6.73695 10.3464 6.86197 10.4714C6.98699 10.5964 7.15656 10.6667 7.33337 10.6667C7.51019 10.6667 7.67975 10.5964 7.80478 10.4714C7.9298 10.3464 8.00004 10.1768 8.00004 10V6C8.00004 5.82319 7.9298 5.65362 7.80478 5.5286C7.67975 5.40357 7.51019 5.33333 7.33337 5.33333C7.15656 5.33333 6.98699 5.40357 6.86197 5.5286C6.73695 5.65362 6.66671 5.82319 6.66671 6V10ZM7.33337 2.66667C6.54544 2.66667 5.76523 2.82186 5.03727 3.12339C4.30932 3.42492 3.64788 3.86687 3.09073 4.42403C2.53358 4.98118 2.09163 5.64261 1.7901 6.37057C1.48857 7.09852 1.33337 7.87874 1.33337 8.66667C1.33337 9.4546 1.48857 10.2348 1.7901 10.9628C2.09163 11.6907 2.53358 12.3522 3.09073 12.9093C3.64788 13.4665 4.30932 13.9084 5.03727 14.2099C5.76523 14.5115 6.54544 14.6667 7.33337 14.6667C8.92467 14.6667 10.4508 14.0345 11.576 12.9093C12.7012 11.7841 13.3334 10.258 13.3334 8.66667C13.3334 7.07537 12.7012 5.54924 11.576 4.42403C10.4508 3.29881 8.92467 2.66667 7.33337 2.66667V2.66667ZM2.66671 8.66667C2.66671 8.05383 2.78741 7.447 3.02194 6.88081C3.25646 6.31462 3.6002 5.80018 4.03354 5.36684C4.46688 4.9335 4.98133 4.58975 5.54752 4.35523C6.1137 4.12071 6.72054 4 7.33337 4C7.94621 4 8.55304 4.12071 9.11923 4.35523C9.68542 4.58975 10.1999 4.9335 10.6332 5.36684C11.0665 5.80018 11.4103 6.31462 11.6448 6.88081C11.8793 7.447 12 8.05383 12 8.66667C12 9.90434 11.5084 11.0913 10.6332 11.9665C9.75804 12.8417 8.57105 13.3333 7.33337 13.3333C6.0957 13.3333 4.90871 12.8417 4.03354 11.9665C3.15837 11.0913 2.66671 9.90434 2.66671 8.66667ZM13.5307 5.13733C13.5923 5.20091 13.6659 5.25159 13.7473 5.28641C13.8287 5.32123 13.9162 5.33949 14.0047 5.34014C14.0932 5.34078 14.181 5.32378 14.2629 5.29015C14.3448 5.25651 14.4191 5.20691 14.4816 5.14422C14.5441 5.08154 14.5935 5.00704 14.6269 4.92507C14.6603 4.84309 14.6771 4.75529 14.6762 4.66677C14.6753 4.57825 14.6568 4.4908 14.6217 4.40952C14.5867 4.32823 14.5358 4.25474 14.472 4.19333L13.136 2.86267C13.0745 2.79909 13.0008 2.74841 12.9194 2.71359C12.838 2.67877 12.7505 2.66051 12.662 2.65986C12.5735 2.65922 12.4858 2.67622 12.4039 2.70985C12.322 2.74349 12.2476 2.79309 12.1851 2.85578C12.1226 2.91846 12.0732 2.99296 12.0398 3.07493C12.0064 3.15691 11.9897 3.24471 11.9906 3.33323C11.9915 3.42175 12.01 3.5092 12.045 3.59048C12.0801 3.67177 12.131 3.74526 12.1947 3.80667L13.5307 5.13733V5.13733Z" fill="#D81159"/>
+</svg>