@magicgol/polyjuice 0.14.0 → 0.15.1

package/.storybook/main.js

@@ -9,11 +9,11 @@ module.exports = {
     '@storybook/preset-scss',
   ],
   'framework': '@storybook/vue',
-  "previewHead": (head) => (`
+  'previewHead': (head) => (`
     ${head}
     <style>
       html, body {
-        background: #eee;
+        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.0",
+  "version": "0.15.1",
   "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,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,21 @@
+<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">
+      <slot></slot>
+    </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.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,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.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,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/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>