@magicgol/polyjuice 0.34.3 → 0.35.0

package/package.json

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

package/src/assets/svg/check.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'check': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 12 16',
+    data: '<path pid="0" _fill="#fff" d="M3.03 11.03l7.274-7.273 1.212 1.211-7.274 7.274z"/><path pid="1" _fill="#fff" d="M3.03 11.03L4.244 9.82 1.212 6.788 0 8z"/>'
+  }
+})

package/src/assets/svg/index.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 require('./arrow-down')
 require('./check-with-circle')
+require('./check')
 require('./circle-with-minus')
 require('./facebook')
 require('./funnel-full')

package/src/components/components/filter-option/FilterOption.vue

@@ -55,6 +55,9 @@ export default {
       svg {
         fill: map-get($palette, 'brand');
         height: 0.75rem;
+        min-height: 0.75rem;
+        min-width: 0.75rem;
+        width: 0.75rem;
       }
     }
   }

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

@@ -73,6 +73,8 @@ export default {
 
         svg {
           height: 1rem;
+          min-height: 1rem;
+          min-width: 1rem;
           width: 1rem;
         }
       }
@@ -84,6 +86,8 @@ export default {
 
         svg {
           height: 1.25rem;
+          min-height: 1.25rem;
+          min-width: 1.25rem;
           width: 1.25rem;
         }
       }

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

@@ -8,12 +8,12 @@ export default {
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['normal', 'x-small'],
+      options: ['normal', 'small'],
       defaultValue: 'normal'
     },
     theme: {
       control: { type: 'select' },
-      options: ['light', 'dark', 'goalkeeper', 'defender', 'midfielder', 'forward',],
+      options: ['light', 'dark', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'],
       defaultValue: 'light'
     },
     default: {

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

@@ -18,14 +18,14 @@ export default {
       type: String,
       default: 'normal',
       validator: function (value) {
-        return ['normal', 'x-small'].indexOf(value) !== -1;
+        return ['normal', 'small'].indexOf(value) !== -1;
       },
     },
     theme: {
       type: String,
       default: 'light',
       validator: function (value) {
-        return ['light', 'dark', 'goalkeeper', 'defender', 'midfielder', 'forward'].indexOf(value) !== -1;
+        return ['light', 'dark', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'].indexOf(value) !== -1;
       },
     },
   },
@@ -34,7 +34,7 @@ export default {
     classes() {
       return {
         'mg-label': true,
-        'mg-label--size-x-small': this.size === 'x-small',
+        'mg-label--size-small': this.size === 'small',
         'mg-label--size-normal': this.size === 'normal',
         'mg-label--theme-light': this.theme === 'light',
         'mg-label--theme-dark': this.theme === 'dark',
@@ -42,6 +42,7 @@ export default {
         'mg-label--theme-defender': this.theme === 'defender',
         'mg-label--theme-midfielder': this.theme === 'midfielder',
         'mg-label--theme-forward': this.theme === 'forward',
+        'mg-label--theme-success': this.theme === 'success',
       };
     }
   },
@@ -63,8 +64,12 @@ export default {
     }
 
     &--size {
-      &-x-small {
+      &-small {
         font-size: 0.625rem;
+
+        > div {
+          line-height: 1.1;
+        }
       }
 
       &-normal {
@@ -75,13 +80,13 @@ export default {
     &--theme {
       &-light {
         background: #f7f7f7;
-        border-color: #f7f7f7;
+        border-color: #f1f1f1;
         color: map-get($palette, 'text');
       }
 
       &-dark {
         background: #5b5b5b;
-        border-color: #5b5b5b;
+        border-color: #555555;
         color: #fff;
       }
 
@@ -108,6 +113,12 @@ export default {
         border-color: map-get($palette, 'text');
         color: map-get($palette, 'text');
       }
+
+      &-success {
+        background: map-get($palette, 'success');
+        border-color: map-get($palette, 'success');
+        color: #fff;
+      }
     }
   }
 </style>

package/src/components/content/box/vertical-box/VBox.stories.js

@@ -0,0 +1,44 @@
+import MgVBox from './VBox.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Content/Box/VBox',
+  component: MgVBox,
+  // 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: { MgVBox },
+  template: `<mg-v-box @click="$emit('click')" v-bind="$props">
+    <template v-if="${'default' in args}" v-slot>${args.default}</template>
+  </mg-v-box>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: '<div>This is a vertical card.</div><div>What do you think about?</div>'
+};
+
+export const Selected = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Selected.args = {
+  default: '<div>This is a vertical card.</div><div>What do you think about?</div>',
+  selected: true
+};

package/src/components/content/box/vertical-box/VBox.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="p-3"
+    :class="classes"
+    :selected="selected"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-v-box',
+
+  props: {
+    selected: {
+      type: Boolean,
+      default: false
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-v-box': true,
+        'mg-v-box--selected': this.selected === true,
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../../assets/palette';
+
+.mg-v-box {
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #bababa;
+
+  &--selected {
+    background: rgba(map-get($palette, 'brand'), 0.05);
+    border-color: map-get($palette, 'brand');
+  }
+}
+</style>

package/src/components/content/list/head/ListHead.vue

@@ -54,6 +54,9 @@ export default {
   svg {
     fill: #777;
     height: 0.5rem;
+    min-height: 0.5rem;
+    min-width: 0.625rem;
+    width: 0.625rem;
   }
 
   &--active {

package/src/components/context/actions/filter-button/FilterButton.vue

@@ -59,6 +59,7 @@ export default {
   .mg-filter-button {
     svg {
       fill: map-get($palette, 'brand');
+      min-width: 1.25rem;
       width: 1.25rem;
     }
 

package/src/components/context/actions/remove-button/RemoveButton.vue

@@ -48,6 +48,7 @@ export default {
   .mg-remove-button {
     svg {
       fill: map-get($palette, 'brand');
+      min-width: 1.125rem;
       width: 1.125rem;
     }
   }

package/src/components/context/club/button/primary-club-button/PrimaryClubButton.vue

@@ -57,10 +57,13 @@ export default {
     svg {
       fill: #fff;
       height: 1rem;
+      min-height: 1rem;
+      min-width: 1rem;
+      width: 1rem;
     }
 
     &--disabled {
-      opacity: 0.6 !important;
+      opacity: 0.3 !important;
       cursor: not-allowed !important;
     }
   }

package/src/components/context/club/button/secondary-club-button/SecondaryClubButton.vue

@@ -59,10 +59,13 @@ export default {
     svg {
       fill: map-get($palette, 'expertClub');
       height: 1.25rem;
+      min-height: 1.25rem;
+      min-width: 1.25rem;
+      width: 1.25rem;
     }
 
     &--disabled {
-      opacity: 0.6 !important;
+      opacity: 0.3 !important;
       cursor: not-allowed !important;
     }
   }

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

@@ -50,6 +50,9 @@ export default {
     svg {
       fill: map-get($palette, 'expertClub');
       height: 1.5rem;
+      min-height: 1.5rem;
+      min-width: 1.5rem;
+      width: 1.5rem;
     }
   }
 </style>

package/src/components/context/footballer/horizontal-footballer/HFootballer.vue

@@ -144,7 +144,7 @@ export default {
     }
 
     &--disabled {
-      opacity: 0.6;
+      opacity: 0.3;
       cursor: not-allowed !important;
     }
 

package/src/components/context/footballer/horizontal-footballer-placeholder/HFootballerPlaceholder.vue

@@ -69,6 +69,7 @@ export default {
 
   svg {
     fill: map-get($palette, 'brand');
+    min-width: 1rem;
     width: 1rem;
   }
 

package/src/components/context/magic-coin/credits/Credits.vue

@@ -40,6 +40,7 @@ export default {
   svg {
     fill: map-get($palette, 'coin');
     height: 1.125rem;
+    min-height: 1.125rem;
   }
 }
 </style>

package/src/components/form/button/tertiary-button/TertiaryButton.vue

@@ -47,7 +47,7 @@ export default {
   outline: none;
 
   &--disabled {
-    opacity: 0.6 !important;
+    opacity: 0.3 !important;
     cursor: not-allowed !important;
   }
 }

package/src/components/form/checkbox/switch/Switch.vue

@@ -108,6 +108,7 @@ export default {
       margin-top: -.6125rem;
       margin-left: -.6125rem;
       position: absolute;
+      min-width: 1.25rem;
       width: 1.25rem;
     }
 

package/src/components/form/radio/Radio.stories.js

@@ -0,0 +1,30 @@
+import MgRadio from './Radio.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Radio',
+  component: MgRadio,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgRadio },
+  template: `<mg-radio @input="$emit('input')" v-bind="$props"></mg-radio>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  value: 'given input'
+};
+
+export const Checked = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Checked.args = {
+  checked: true,
+  value: 'given input'
+};

package/src/components/form/radio/Radio.vue

@@ -0,0 +1,105 @@
+<template>
+  <label :class="classes" class="m-0">
+    <input
+      class="d-none"
+      type="radio"
+      :value="value"
+      @input="onInput"
+    />
+    <span class="d-inline-flex justify-content-center align-items-center">
+      <svgicon name="check"></svgicon>
+    </span>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'mg-input',
+
+  props: {
+    value: {
+      type: [String, Number],
+      default: null
+    },
+
+    checked: {
+      type: Boolean,
+      default: false
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-radio': true,
+        'mg-radio--checked': this.checked === true,
+      };
+    }
+  },
+
+  methods: {
+    onInput($event) {
+      this.$emit('input', $event.target.value);
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-radio {
+    //border-bottom: 1px solid #d8d8d8;
+
+    input {
+      //background-color: #fff;
+      //color: #666;
+      //font-family: 'Raleway', sans-serif;
+      //font-size: 1rem;
+      //font-weight: 600;
+      //letter-spacing: 0.54px;
+      //padding: 0.5rem;
+
+      //&:-webkit-autofill {
+      //  -webkit-box-shadow: 0 0 0 30px white inset;
+      //  -webkit-text-fill-color: #666666;
+      //  caret-color: #666666;
+      //}
+
+      //&:focus {
+      //  outline: 0;
+      //}
+
+      //&::placeholder {
+      //  color: #ccc;
+      //  font-size: 0.8125rem;
+      //  font-weight: 600;
+      //}
+    }
+
+    span {
+      background-color: #fff;
+      border: 1px solid #989898;
+      border-radius: 50%;
+      height: 1.375rem;
+      width: 1.375rem;
+
+      svg {
+        display: none;
+      }
+    }
+
+    &--checked {
+      span {
+        background-color: map-get($palette, 'brand');
+        border-color: map-get($palette, 'brand');
+
+        svg {
+          display: block;
+          fill: white;
+          height: 18px;
+        }
+      }
+    }
+  }
+</style>

package/src/components/modal/selection-box/SelectionBox.vue

@@ -4,7 +4,7 @@
   >
     <div
       v-if="expanded"
-      class="mg-selection-box-curtain h-50 w-100 position-fixed"
+      class="mg-selection-box-curtain h-25 w-100 position-fixed"
       @click="onClickOutside"
     ></div>
     <div class="mg-selection-box-content fixed-bottom px-3 py-2">
@@ -101,7 +101,7 @@ export default {
       width: 100%;
 
       .mg-selection-box-content {
-        height: 50%;
+        height: 75%;
       }
     }
   }

package/src/components/social/button/SocialButton.vue

@@ -62,6 +62,7 @@ export default {
 
     svg {
       fill: white;
+      min-width: 1rem;
       width: 1rem;
     }
 

package/src/components/typography/paragraph/Paragraph.vue

@@ -19,7 +19,7 @@ export default {
 <style lang="scss">
   .mg-paragraph {
     font-family: 'Ubuntu', sans-serif;
-    font-size: 0.75rem;
+    font-size: 0.8125rem;
     font-weight: 400;
   }
 </style>

package/src/svg/check.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.03052" y="11.0305" width="10.2857" height="1.71429" transform="rotate(-45 3.03052 11.0305)" fill="white"/>
+<rect width="1.71429" height="4.28571" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 3.03052 11.0305)" fill="white"/>
+</svg>