@magicgol/polyjuice 0.16.2 → 0.18.0

package/package.json

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

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

@@ -4,11 +4,15 @@
     :class="classes"
     @click="onClick"
   >
-    <div class="mg-v-card-content p-3"><slot></slot></div>
+    <div class="mg-v-card-body p-3"><slot></slot></div>
     <div
-      class="mg-v-card-footer p-3"
+      class="mg-v-card-footer px-3 pb-3"
       v-if="footerVisibility"
-    ><slot name="footer"></slot></div>
+    >
+      <div class="mg-v-card-content pt-3">
+        <slot name="footer"></slot>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -58,7 +62,7 @@ export default {
 
   &--theme {
     &-club {
-      & .mg-v-card-content {
+      & .mg-v-card-body {
         background: linear-gradient(90deg, #D1EFFF 0%, #DDDAFC 99.65%) !important;
         color: #777;
       }
@@ -66,7 +70,9 @@ export default {
   }
 
   &-footer {
-    background-color: rgba(map-get($palette, 'brand'), 0.04);
+    .mg-v-card-content {
+      border-top: 1px solid #cecece;
+    }
   }
 }
 </style>

package/src/components/footballer/horizontal-placeholder/HPlaceholder.stories.js

@@ -0,0 +1,70 @@
+import MgHPlaceholder from './HPlaceholder.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Footballer/HPlaceholder',
+  component: MgHPlaceholder,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    role: {
+      control: { type: 'select' },
+      options: ['P', 'D', 'C', 'A'],
+      defaultValue: 'A'
+    },
+    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: { MgHPlaceholder },
+  template: `<mg-h-placeholder @click="$emit('click')" v-bind="$props">
+    <template v-if="${'default' in args}" v-slot>${args.default}</template>
+  </mg-h-placeholder>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: '<div>This is a horizontal placeholder.</div><div>What do you think about?</div>'
+};
+
+export const Goalkeeper = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Goalkeeper.args = {
+  role: 'P',
+  default: '<div>This is a horizontal placeholder.</div><div>What do you think about?</div>',
+};
+
+export const Defender = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Defender.args = {
+  role: 'D',
+  default: '<div>This is a horizontal placeholder.</div><div>What do you think about?</div>',
+};
+
+export const Midfielder = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Midfielder.args = {
+  role: 'C',
+  default: '<div>This is a horizontal placeholder.</div><div>What do you think about?</div>',
+};
+
+export const Forward = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Forward.args = {
+  role: 'A',
+  default: '<div>This is a horizontal placeholder.</div><div>What do you think about?</div>',
+};

package/src/components/footballer/horizontal-placeholder/HPlaceholder.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="d-flex align-items-center rounded px-3"
+    v-bind:class="classes"
+  >
+    <div class="flex-fill"><slot></slot></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-h-placeholder',
+
+  props: {
+    role: {
+      type: String,
+      default: 'A',
+      validator: function (value) {
+        return ['P', 'D', 'C', 'A'].indexOf(value) !== -1;
+      },
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-h-placeholder': true,
+        'mg-h-placeholder--role-goalkeeper': this.role === 'P',
+        'mg-h-placeholder--role-defender': this.role === 'D',
+        'mg-h-placeholder--role-midfielder': this.role === 'C',
+        'mg-h-placeholder--role-forward': this.role === 'A',
+      };
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/palette';
+
+.mg-h-placeholder {
+  background: white;
+  border: 2px dashed;
+  color: #777777;
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
+  height: 3.5rem;
+
+  &--role {
+    &-goalkeeper {
+      border-color: map-get($palette, 'goalkeeper');
+    }
+
+    &-defender {
+      border-color: map-get($palette, 'defender');
+    }
+
+    &-midfielder {
+      border-color: map-get($palette, 'midfielder');
+    }
+
+    &-forward {
+      border-color: map-get($palette, 'forward');
+    }
+  }
+}
+</style>

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

@@ -44,7 +44,7 @@ export default {
       };
     },
     contentVisibility() {
-      return 'content' in this.$slots && this.value === true;
+      return 'content' in this.$slots && !!this.$slots.content && this.value === true;
     }
   },
 };

package/src/components/icon/badge/IconBadge.stories.js

@@ -6,9 +6,14 @@ export default {
   component: MgIconBadge,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
-    level: {
+    size: {
       control: { type: 'select' },
-      options: ['normal', 'club'],
+      options: ['normal', 'large'],
+      defaultValue: 'normal'
+    },
+    context: {
+      control: { type: 'select' },
+      options: ['normal', 'club', 'success', 'failure'],
       defaultValue: 'normal'
     },
   },
@@ -25,13 +30,9 @@ export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
   icon: 'message',
-  level: 'normal',
+  context: 'normal',
+  size: 'normal',
+  active: false
 };
 
-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

@@ -17,21 +17,37 @@ export default {
     icon: {
       type: String
     },
-    level: {
+    size: {
       type: String,
       default: 'normal',
       validator: function (value) {
-        return ['normal', 'club'].indexOf(value) !== -1;
+        return ['normal', 'large'].indexOf(value) !== -1;
       },
-    }
+    },
+    context: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['normal', 'club', 'success', 'failure'].indexOf(value) !== -1;
+      },
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
     classes() {
       return {
         'mg-icon-badge': true,
-        'mg-icon-badge--club': this.level === 'club',
-        'mg-icon-badge--normal': this.level === 'normal',
+        'mg-icon-badge--active': this.active === true,
+        'mg-icon-badge--size-normal': this.size === 'normal',
+        'mg-icon-badge--size-large': this.size === 'large',
+        'mg-icon-badge--context-club': this.context === 'club',
+        'mg-icon-badge--context-normal': this.context === 'normal',
+        'mg-icon-badge--context-success': this.context === 'success',
+        'mg-icon-badge--context-failure': this.context === 'failure',
       };
     },
   },
@@ -42,28 +58,99 @@ export default {
   @import '../../../assets/palette';
 
   .mg-icon-badge {
-    height: 2rem;
-    min-width: 2rem;
-    width: 2rem;
+    &--size {
+      &-normal {
+        height: 2rem;
+        min-width: 2rem;
+        width: 2rem;
+
+        svg {
+          height: 1rem;
+          width: 1rem;
+        }
+      }
+
+      &-large {
+        height: 2.5rem;
+        min-width: 2.5rem;
+        width: 2.5rem;
 
-    svg {
-      height: 1rem;
-      width: 1rem;
+        svg {
+          height: 1.25rem;
+          width: 1.25rem;
+        }
+      }
     }
 
-    &--normal {
-      background-color: white;
+    &--context {
+      &-normal {
+        background-color: #f5f5f5;
 
-      svg {
-        fill: map-get($palette, 'brand');
+        svg {
+          fill: map-get($palette, 'brand');
+        }
+      }
+
+      &-club {
+        background-color: rgba(map-get($palette, 'expertClub'), 0.05);
+
+        svg {
+          fill: map-get($palette, 'expertClub');
+        }
+      }
+
+      &-success {
+        background-color: #f5f5f5;
+
+        svg {
+          fill: map-get($palette, 'success');
+        }
+      }
+
+      &-failure {
+        background-color: #f5f5f5;
+
+        svg {
+          fill: map-get($palette, 'error');
+        }
       }
     }
 
-    &--club {
-      background-color: map-get($palette, 'expertClub');
+    &--active {
+      &.mg-icon-badge {
+        &--context {
+          &-normal {
+            background-color: map-get($palette, 'brand');
+
+            svg {
+              fill: #f5f5f5;
+            }
+          }
+
+          &-club {
+            background-color: map-get($palette, 'expertClub');
+
+            svg {
+              fill: mix(white, map-get($palette, 'expertClub'), 90%);
+            }
+          }
+
+          &-success {
+            background-color: map-get($palette, 'success');
+
+            svg {
+              fill: #f5f5f5;
+            }
+          }
+
+          &-failure {
+            background-color: map-get($palette, 'error');
 
-      svg {
-        fill: white;
+            svg {
+              fill: #f5f5f5;
+            }
+          }
+        }
       }
     }
   }

package/src/components/label/anchor/Anchor.stories.js

@@ -0,0 +1,40 @@
+import MgAnchor from './Anchor.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Label/Anchor',
+  component: MgAnchor,
+  // 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: { MgAnchor },
+  template: `<mg-anchor v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-anchor>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'bozza',
+};

package/src/components/label/anchor/Anchor.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="mg-anchor">
+    <div class="mg-anchor-content position-relative d-inline-flex align-items-center text-uppercase text-white">
+      <div><slot></slot></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-anchor',
+
+  computed: {
+    classes() {
+      return {
+        'mg-anchor': true,
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  .mg-anchor {
+    padding-left: 10px;
+
+    .mg-anchor-content {
+      background: #444444;
+      border-radius: 0 4px 4px 0;
+      font-family: 'Ubuntu', sans-serif;
+      font-size: 0.75rem;
+      font-weight: 500;
+      height: 1.625rem;
+      padding-right: 0.6875rem;
+      padding-left: 0.375rem;
+
+      &::after {
+        content: '';
+        position: absolute;
+        border-radius: 50%;
+        border-top: 16px solid transparent;
+        border-right: 16px solid #444444;
+        border-bottom: 16px solid transparent;
+        left: 0;
+        margin-left: -13px;
+      }
+    }
+  }
+</style>

package/src/components/label/label/Label.stories.js

@@ -0,0 +1,46 @@
+import MgLabel from './Label.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Label/Label',
+  component: MgLabel,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['normal', 'x-small'],
+      defaultValue: 'normal'
+    },
+    theme: {
+      control: { type: 'select' },
+      options: ['light', 'dark'],
+      defaultValue: 'light'
+    },
+    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: { MgLabel },
+  template: `<mg-label v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-label>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'etichetta',
+  size: 'x-small'
+};

package/src/components/label/label/Label.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="d-inline-flex align-items-center px-2 text-uppercase"
+    :class="classes"
+  >
+    <div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-label',
+
+  props: {
+    size: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['normal', 'x-small'].indexOf(value) !== -1;
+      },
+    },
+    theme: {
+      type: String,
+      default: 'light',
+      validator: function (value) {
+        return ['light', 'dark'].indexOf(value) !== -1;
+      },
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-label': true,
+        'mg-label--size-x-small': this.size === 'x-small',
+        'mg-label--size-normal': this.size === 'normal',
+        'mg-label--theme-light': this.theme === 'light',
+        'mg-label--theme-dark': this.theme === 'dark',
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  .mg-label {
+    border-radius: 32px;
+    padding-top: 0.0625rem;
+    padding-bottom: 0.0625rem;
+
+    > div {
+      font-family: 'Raleway', sans-serif;
+      font-weight: 700;
+    }
+
+    &--size {
+      &-x-small {
+        font-size: 0.625rem;
+      }
+
+      &-normal {
+        font-size: 0.875rem;
+      }
+    }
+
+    &--theme {
+      &-light {
+        background: #f7f7f7;
+        color: #343434;
+      }
+
+      &-dark {
+        background: #5b5b5b;
+        color: #fff;
+      }
+    }
+  }
+</style>

package/src/components/typography/h2/HeadingTwo.stories.js

@@ -0,0 +1,34 @@
+import MgHeadingTwo from './HeadingTwo.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Typography/Heading/H2',
+  component: MgHeadingTwo,
+  // 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: { MgHeadingTwo },
+  template: `<mg-heading-two><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-two>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'heading 2'
+};

package/src/components/typography/h2/HeadingTwo.vue

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

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

@@ -18,8 +18,9 @@ export default {
 
 <style lang="scss">
   .mg-h3 {
+    color: #343434;
     font-family: 'Ubuntu', sans-serif;
     font-size: 1rem;
-    font-weight: 500;
+    font-weight: 400;
   }
 </style>

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

@@ -6,6 +6,11 @@ export default {
   component: MgHeadingFour,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
+    level: {
+      control: { type: 'select' },
+      options: [null, 'club'],
+      defaultValue: null
+    },
     default: {
       description: "The default Vue slot",
       control: {
@@ -22,9 +27,10 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = args => ({
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
   components: { MgHeadingFour },
-  template: `<mg-heading-four><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-four>`,
+  template: `<mg-heading-four v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-four>`,
 });
 
 export const Default = Template.bind({});

package/src/components/typography/h4/HeadingFour.vue

@@ -6,10 +6,21 @@
 export default {
   name: 'mg-heading-four',
 
+  props: {
+    level: {
+      type: String,
+      default: null,
+      validator: function (value) {
+        return ['club'].indexOf(value) !== -1;
+      },
+    }
+  },
+
   computed: {
     classes() {
       return {
         'mg-h4': true,
+        'mg-h4--level-club': this.level === 'club',
       };
     }
   },
@@ -17,9 +28,18 @@ export default {
 </script>
 
 <style lang="scss">
+  @import '../../../assets/palette';
+
   .mg-h4 {
+    color: #343434;
     font-family: 'Ubuntu', sans-serif;
     font-size: 0.875rem;
     font-weight: 700;
+
+    &--level {
+      &-club {
+        color: map-get($palette, 'expertClub') !important;
+      }
+    }
   }
 </style>