@magicgol/polyjuice 0.28.1 → 0.29.1

package/package.json

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

package/src/assets/svg/funnel-full.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'funnel-full': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 18 19',
+    data: '<path pid="0" d="M0 1.5l4.5-1H13l4 1 1 1V5l-7 6.5V17l-4 2v-6.5L4.5 10 0 5V1.5z" _fill="#D81159"/>'
+  }
+})

package/src/assets/svg/funnel.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'funnel': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 20 20',
+    data: '<path pid="0" d="M17 0H3a3 3 0 00-3 3v1.17a3 3 0 00.25 1.2v.06c.141.321.341.613.59.86L7 12.41V19a1 1 0 001 1 1 1 0 00.45-.11l4-2A1 1 0 0013 17v-4.59l6.12-6.12a2.81 2.81 0 00.59-.86v-.06a3 3 0 00.29-1.2V3a3 3 0 00-3-3zm-5.71 11.29A1 1 0 0011 12v4.38l-2 1V12a1 1 0 00-.29-.71L3.41 6h13.18l-5.3 5.29zM18 4H2V3a1 1 0 011-1h14a1 1 0 011 1v1z" _fill="#D81159"/>'
+  }
+})

package/src/assets/svg/index.js

@@ -1,6 +1,8 @@
 /* eslint-disable */
 require('./check-with-circle')
 require('./facebook')
+require('./funnel-full')
+require('./funnel')
 require('./google')
 require('./hand-down')
 require('./hand-up')

package/src/components/footballer/box/FootballerBox.vue

@@ -83,7 +83,13 @@ export default {
         background-color: map-get($palette, 'goalkeeper');
 
         &.mg-footballer-box--opacity {
-          background-color: rgba(map-get($palette, 'goalkeeper'), 0.1);
+          &-low {
+            background-color: rgba(map-get($palette, 'goalkeeper'), 0.1);
+          }
+
+          &-high {
+            background-color: rgba(map-get($palette, 'goalkeeper'), 0.8);
+          }
         }
       }
     }
@@ -95,7 +101,13 @@ export default {
         background-color: map-get($palette, 'defender');
 
         &.mg-footballer-box--opacity {
-          background-color: rgba(map-get($palette, 'defender'), 0.1);
+          &-low {
+            background-color: rgba(map-get($palette, 'defender'), 0.1);
+          }
+
+          &-high {
+            background-color: rgba(map-get($palette, 'defender'), 0.8);
+          }
         }
       }
     }
@@ -107,7 +119,13 @@ export default {
         background-color: map-get($palette, 'midfielder');
 
         &.mg-footballer-box--opacity {
-          background-color: rgba(map-get($palette, 'midfielder'), 0.1);
+          &-low {
+            background-color: rgba(map-get($palette, 'midfielder'), 0.1);
+          }
+
+          &-high {
+            background-color: rgba(map-get($palette, 'midfielder'), 0.8);
+          }
         }
       }
     }
@@ -119,7 +137,13 @@ export default {
         background-color: map-get($palette, 'forward');
 
         &.mg-footballer-box--opacity {
-          background-color: rgba(map-get($palette, 'forward'), 0.1);
+          &-low {
+            background-color: rgba(map-get($palette, 'forward'), 0.1);
+          }
+
+          &-high {
+            background-color: rgba(map-get($palette, 'forward'), 0.8);
+          }
         }
       }
     }

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

@@ -2,6 +2,7 @@
   <div
     class="align-items-center d-flex text-truncate"
     :class="classes"
+    @click="onClick"
   >
     <!-- FOOTBALLER NAME -->
     <div
@@ -111,7 +112,9 @@ export default {
 
   methods: {
     onClick() {
-      this.$emit('click');
+      if (!this.disabled && !this.deactivated) {
+        this.$emit('click');
+      }
     },
   },
 };

package/src/components/form/advanced/filter/Filter.stories.js

@@ -0,0 +1,36 @@
+import MgFilter from './Filter.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Advanced/Filter',
+  component: MgFilter,
+  // 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: { MgFilter },
+  template: `<mg-filter @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-filter>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'test'
+};
+//
+// export const Disabled = Template.bind({});
+// Disabled.args = {
+//   disabled: true,
+//   value: 'given input',
+// };
+//
+// export const Error = Template.bind({});
+// Error.args = {
+//   disabled: false,
+//   value: 'given input',
+//   error: true
+// };

package/src/components/form/advanced/filter/Filter.vue

@@ -0,0 +1,75 @@
+<template>
+  <mg-tertiary-button
+    @click="onClick"
+    :class="classes"
+  >
+    <div class="d-flex">
+      <div class="position-relative">
+        <svgicon :name="icon"></svgicon>
+        <span
+          v-if="enabledFiltersCount"
+          class="position-absolute w-100 text-white"
+        >{{ enabledFiltersCount }}</span>
+      </div>
+      <div class="ml-2"><slot></slot></div>
+    </div>
+  </mg-tertiary-button>
+</template>
+
+<script>
+import MgTertiaryButton from "../../button/tertiary-button/TertiaryButton";
+
+export default {
+  name: 'mg-filter',
+
+  props: {
+    enabledFiltersCount: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-filter': true,
+      };
+    },
+
+    icon () {
+      return this.enabledFiltersCount > 0 ? 'funnel-full' : 'funnel';
+    }
+  },
+
+  components: {
+    MgTertiaryButton,
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+  @import '../../../../assets/palette';
+
+  .mg-filter {
+    svg {
+      fill: map-get($palette, 'brand');
+      width: 1.25rem;
+    }
+
+    .position-relative {
+      font-weight: 700;
+      font-size: 0.625rem;
+
+      span {
+        top: 0;
+        left: 0;
+      }
+    }
+  }
+</style>

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

@@ -87,25 +87,25 @@ export default {
 
       &-goalkeeper {
         background: map-get($palette, 'goalkeeper');
-        border-color: #f7f7f7;
+        border-color: map-get($palette, 'text');
         color: map-get($palette, 'text');
       }
 
       &-defender {
         background: map-get($palette, 'defender');
-        border-color: #f7f7f7;
+        border-color: map-get($palette, 'text');
         color: map-get($palette, 'text');
       }
 
       &-midfielder {
         background: map-get($palette, 'midfielder');
-        border-color: #f7f7f7;
+        border-color: map-get($palette, 'text');
         color: map-get($palette, 'text');
       }
 
       &-forward {
         background: map-get($palette, 'forward');
-        border-color: #f7f7f7;
+        border-color: map-get($palette, 'text');
         color: map-get($palette, 'text');
       }
     }

package/src/svg/funnel-full.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 1.5L4.5 0.5H13L17 1.5L18 2.5V5L11 11.5V17L7 19V12.5L4.5 10L0 5V1.5Z" fill="#D81159"/>
+</svg>

package/src/svg/funnel.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 1.80878e-07 2.20435 1.80878e-07 3V4.17C-0.000143207 4.58294 0.0849664 4.99147 0.25 5.37V5.43C0.39128 5.75097 0.591392 6.04266 0.84 6.29L7 12.41V19C6.99966 19.1699 7.04264 19.3372 7.12487 19.4859C7.20711 19.6346 7.32589 19.7599 7.47 19.85C7.62914 19.9486 7.81277 20.0006 8 20C8.15654 19.9991 8.31068 19.9614 8.45 19.89L12.45 17.89C12.6149 17.8069 12.7536 17.6798 12.8507 17.5227C12.9478 17.3656 12.9994 17.1847 13 17V12.41L19.12 6.29C19.3686 6.04266 19.5687 5.75097 19.71 5.43V5.37C19.8888 4.99443 19.9876 4.58578 20 4.17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM11.29 11.29C11.1973 11.3834 11.124 11.4943 11.0742 11.6161C11.0245 11.7379 10.9992 11.8684 11 12V16.38L9 17.38V12C9.00076 11.8684 8.97554 11.7379 8.92577 11.6161C8.87601 11.4943 8.80268 11.3834 8.71 11.29L3.41 6H16.59L11.29 11.29ZM18 4H2V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V4Z" fill="#D81159"/>
+</svg>