@magicgol/polyjuice 0.12.0 → 0.14.1

package/package.json

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

package/src/assets/svg/index.js

@@ -1,6 +1,8 @@
 /* eslint-disable */
 require('./check-with-circle')
 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/card/vertical-card/VCard.vue

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

package/src/components/club/plate/ClubPlate.vue

@@ -2,6 +2,7 @@
   <div
     class="d-inline-flex flex-column text-center"
     :class="classes"
+    @click="$emit('click')"
   >
     <svgicon
       name="star-c"
@@ -48,7 +49,7 @@ export default {
 
     svg {
       fill: map-get($palette, 'expertClub');
-      height: 1.25rem;
+      height: 1.5rem;
     }
   }
 </style>

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

@@ -0,0 +1,56 @@
+import MgRoleBadge from './RoleBadge.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Footballer/Role Badge',
+  component: MgRoleBadge,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    role: {
+      control: { type: 'select' },
+      options: ['P', 'D', 'C', 'A'],
+      defaultValue: 'A'
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['large', 'normal'],
+      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: { MgRoleBadge },
+  template: `<mg-role-badge v-bind="$props"></mg-role-badge>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+};
+
+export const Goalkeeper = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Goalkeeper.args = {
+  role: 'P',
+};
+
+export const Defender = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Defender.args = {
+  role: 'D',
+};
+
+export const Midfielder = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Midfielder.args = {
+  role: 'C',
+};
+
+export const Forward = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Forward.args = {
+  role: 'A',
+};

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

@@ -0,0 +1,84 @@
+<template>
+  <div
+    class="d-inline-flex text-center text-white rounded-circle justify-content-center align-items-center"
+    :class="classes"
+  >
+    {{ role }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-role-badge',
+
+  props: {
+    role: {
+      type: String,
+      default: 'A',
+      validator: function (value) {
+        return ['P', 'D', 'C', 'A'].indexOf(value) !== -1;
+      },
+    },
+    size: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['normal', 'large'].indexOf(value) !== -1;
+      },
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-role-badge': true,
+        'mg-role-badge--goalkeeper': this.role === 'P',
+        'mg-role-badge--defender': this.role === 'D',
+        'mg-role-badge--midfielder': this.role === 'C',
+        'mg-role-badge--forward': this.role === 'A',
+        'mg-role-badge--normal': this.size === 'normal',
+        'mg-role-badge--large': this.size === 'large',
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-role-badge {
+    font-family: 'Ubuntu', sans-serif;
+    font-weight: 600;
+
+    &--normal {
+      font-size: 0.75rem;
+      height: 1.125rem;
+      width: 1.125rem;
+      min-width: 1.125rem;
+    }
+
+    &--large {
+      font-size: 0.875rem;
+      height: 1.5rem;
+      width: 1.5rem;
+      min-width: 1.5rem;
+    }
+
+    &--goalkeeper {
+      background-color: map-get($palette, 'goalkeeper');
+    }
+
+    &--defender {
+      background-color: map-get($palette, 'defender');
+    }
+
+    &--midfielder {
+      background-color: map-get($palette, 'midfielder');
+    }
+
+    &--forward {
+      background-color: map-get($palette, 'forward');
+    }
+  }
+</style>

package/src/components/form/button/toggle-button/ToggleButton.vue

@@ -40,11 +40,11 @@ export default {
     classes() {
       return {
         'mg-toggle-button': true,
-        'mg-toggle-button--on': this.value === true
+        'mg-toggle-button--on': this.value === true,
       };
     },
     contentVisibility() {
-      return this.$slots['content'] && this.value === true
+      return 'content' in this.$slots && this.value === true;
     }
   },
 };

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,9 +8,14 @@ export default {
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['large', 'normal'],
+      options: ['huge', 'large', 'normal', 'small', 'x-small'],
       defaultValue: 'normal'
     },
+    liveBadge: {
+      control: { type: 'select' },
+      options: [true, false],
+      defaultValue: false
+    },
     online: {
       control: { type: 'select' },
       options: [true, false],
@@ -43,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

@@ -20,13 +20,14 @@
       v-bind:style="{ backgroundImage: 'url(' + imageUrl + ')' }"
     ></div>
     <!-- end of PROFILE IMAGE LAYER -->
-    <!-- ONLINE BADGE -->
+    <!-- LIVE BADGE -->
     <div
+      v-if="liveBadge"
       class="mg-live-badge position-absolute w-100"
     >
       <div class="w-100"></div>
     </div>
-    <!-- end of ONLINE BADGE -->
+    <!-- end of LIVE BADGE -->
   </div>
 </template>
 
@@ -45,9 +46,13 @@ export default {
       type: String,
       default: 'normal',
       validator: function (value) {
-        return ['large', 'normal'].indexOf(value) !== -1;
+        return ['huge', 'large', 'normal', 'small', 'x-small'].indexOf(value) !== -1;
       },
     },
+    liveBadge: {
+      type: Boolean,
+      default: true
+    },
     online: {
       type: Boolean,
       default: false
@@ -58,15 +63,15 @@ export default {
     classes() {
       return {
         'mg-profile-image': true,
+        'mg-profile-image--x-small': this.size === 'x-small',
+        '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,
       };
     },
-    acronym() {
-      return '';
-    }
   },
 };
 </script>
@@ -76,21 +81,45 @@ export default {
 
   .mg-profile-image {
     border-radius: 50%;
+    display: inline-flex;
     font-family: 'Ubuntu', sans-serif;
     font-weight: 600;
 
+    &--x-small {
+      height: 2rem;
+      min-width: 2rem;
+      font-size: 0.6875rem;
+      width: 2rem;
+    }
+
+    &--small {
+      height: 2.5rem;
+      min-width: 2.5rem;
+      font-size: 0.8125rem;
+      width: 2.5rem;
+    }
+
     &--normal {
       height: 3rem;
+      min-width: 3rem;
       font-size: 1.125rem;
       width: 3rem;
     }
 
     &--large {
       height: 5rem;
+      min-width: 5rem;
       font-size: 2rem;
       width: 5rem;
     }
 
+    &--huge {
+      height: 6.25rem;
+      min-width: 6.25rem;
+      font-size: 2.5rem;
+      width: 6.25rem;
+    }
+
     .mg-acronym {
       background-color: #5770bc;
       border-radius: 50%;

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>