@magicgol/polyjuice 0.33.2 → 0.33.5

package/package.json

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

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

@@ -1,7 +1,7 @@
 <template>
   <div
     class="text-uppercase pb-2 px-2"
-    :class="[classes, {'d-flex align-items-center': active, 'justify-content-center text-center': alignCenter}]"
+    :class="[classes, {'d-flex align-items-center': active, 'justify-content-center text-center': alignCenter, 'justify-content-start text-left': !alignCenter}]"
   >
     <div><slot></slot></div>
     <svgicon

package/src/components/context/footballer/horizontal-footballer/HFootballer.stories.js

@@ -79,3 +79,13 @@ Large.args = {
   lastname: 'Dybala',
 };
 
+export const ThemeInverted = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+ThemeInverted.args = {
+  size: 'large',
+  role: 'A',
+  firstname: 'Paulo',
+  lastname: 'Dybala',
+  themeInverted: true
+};
+

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

@@ -33,6 +33,7 @@
       <mg-role-badge
         :role="role"
         :size="size"
+        :theme-inverted="themeInverted"
       ></mg-role-badge>
     </div>
     <!-- end of ROLE BADGE -->
@@ -58,6 +59,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    themeInverted: {
+      type: Boolean,
+      default: false,
+    },
     role: {
       type: String,
       default: null,
@@ -86,8 +91,10 @@ export default {
     classes() {
       return {
         'mg-h-footballer': true,
-        'mg-h-footballer--disabled': this.disabled,
-        'mg-h-footballer--deactivated': this.deactivated,
+        'mg-h-footballer--disabled': this.disabled === true,
+        'mg-h-footballer--deactivated': this.deactivated === true,
+        'mg-h-footballer--inverted': this.inverted === true,
+        'mg-h-footballer--theme-inverted': this.themeInverted === true,
         'mg-h-footballer--size-normal': this.size === 'normal',
         'mg-h-footballer--size-large': this.size === 'large',
       };
@@ -150,6 +157,12 @@ export default {
       }
     }
 
+    &--theme-inverted {
+      .mg-h-footballer-subtext {
+        color: map-get($palette, 'text') !important;
+      }
+    }
+
     &--size {
       &-normal {
         font-size: 0.875rem;

package/src/components/context/footballer/list/footballer-list-body/FootballerListBody.vue

@@ -6,7 +6,7 @@
   >
     <div class="d-flex align-items-center h-100 rounded">
       <div
-        class="p-0 pl-3 py-2"
+        class="p-0 pl-2 py-2 text-left"
         :class="firstColClass"
       >
         <slot name="first-col"></slot>
@@ -26,7 +26,7 @@
       </div>
       <div
         v-if="actionsColVisibility"
-        class="p-0 pr-3 text-center"
+        class="p-0 pr-2 text-center"
         :class="actionsColClass"
       >
         <slot name="actions"></slot>
@@ -52,6 +52,10 @@ export default {
       type: Boolean,
       default: false
     },
+    unselectable: {
+      type: Boolean,
+      default: false
+    },
     role: {
       type: String,
       default: null,
@@ -67,6 +71,7 @@ export default {
         'mg-footballer-list-body': true,
         'mg-footballer-list-body--disabled': this.disabled === true,
         'mg-footballer-list-body--selected': this.selected === true,
+        'mg-footballer-list-body--unselectable': this.unselectable === true,
         'mg-footballer-list-body--goalkeeper': this.role === 'P',
         'mg-footballer-list-body--defender': this.role === 'D',
         'mg-footballer-list-body--midfielder': this.role === 'C',
@@ -89,7 +94,7 @@ export default {
       return 'col-' + ((this.secondColVisibility ? 8 : 10) - this.actionsCol);
     },
     thirdColClass () {
-      return this.actionsColVisibility ? 'col-2' : 'col-3 pr-3'
+      return this.actionsColVisibility ? 'col-2' : 'col-3 pr-2'
     }
   },
 
@@ -112,6 +117,7 @@ export default {
     > div {
       border: 1px solid #f6f6f6;
       background: #f6f6f6;
+      cursor: pointer;
     }
 
     &--disabled {
@@ -152,5 +158,14 @@ export default {
         }
       }
     }
+
+    &--unselectable {
+      > div {
+        border: 0 !important;
+        box-shadow: none !important;
+        background: none !important;
+        cursor: default !important;
+      }
+    }
   }
 </style>

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

@@ -66,3 +66,10 @@ export const Forward = Template.bind({});
 Forward.args = {
   role: 'A',
 };
+
+export const ThemeInverted = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+ThemeInverted.args = {
+  role: 'A',
+  themeInverted: true
+};

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

@@ -29,6 +29,10 @@ export default {
       validator: function (value) {
         return ['normal', 'large', 'huge'].indexOf(value) !== -1;
       },
+    },
+    themeInverted: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -36,6 +40,7 @@ export default {
     classes() {
       return {
         'mg-role-badge': true,
+        'mg-role-badge--theme-inverted': this.themeInverted === true,
         'mg-role-badge--goalkeeper': this.role === 'P',
         'mg-role-badge--defender': this.role === 'D',
         'mg-role-badge--midfielder': this.role === 'C',
@@ -98,5 +103,9 @@ export default {
     &--forward {
       background-color: map-get($palette, 'forward');
     }
+
+    &--theme-inverted {
+      background-color: #fff !important;
+    }
   }
 </style>

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

@@ -36,7 +36,7 @@ export default {
 <style lang="scss">
   .mg-selection-box {
     &-shadow {
-      height: 5.625rem;
+      height: 7.5rem;
     }
 
     &-content {