@magicgol/polyjuice 0.15.0 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "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/components/box/filing-cabinet/FilingCabinet.vue

@@ -8,45 +8,16 @@
         <slot name="tab-right"></slot>
       </div>
     </div>
-    <div class="py-4 px-3">
-      <slot></slot>
+    <div class="p-4">
+      <div class="px-2">
+        <slot></slot>
+      </div>
     </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',
-      };
-    },
-  },
+  name: 'mg-filing-cabinet'
 };
 </script>
-
-<style lang="scss">
-  @import '../../../assets/palette';
-
-  .mg-filing-cabinet {
-
-  }
-</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,10 +16,21 @@
 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() {
@@ -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.vue

@@ -71,10 +71,11 @@ export default {
     }
 
     &--huge {
+      border: 2px solid #fff;
       font-size: 1.25rem;
-      height: 2.5rem;
-      width: 2.5rem;
-      min-width: 2.5rem;
+      height: 2.75rem;
+      width: 2.75rem;
+      min-width: 2.75rem;
     }
 
     &--goalkeeper {

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,60 @@
+<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;
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 1.3125rem;
+    font-weight: 500;
+    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/social/button/SocialButton.vue

@@ -1,14 +1,14 @@
 <template>
-  <a
+  <button
+    type="button"
     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>
+  </button>
 </template>
 
 <script>
@@ -26,9 +26,6 @@ export default {
       validator: function (value) {
         return ['facebook', 'google'].indexOf(value) !== -1;
       },
-    },
-    href: {
-      type: String
     }
   },
 
@@ -61,6 +58,7 @@ export default {
     font-size: 0.8125rem;
     font-weight: 700;
     outline: none;
+    text-decoration: none;
 
     svg {
       fill: white;

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'
 };