@magicgol/polyjuice 0.25.0 → 0.28.0

package/package.json

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

package/src/components/footballer/box/FootballerBox.stories.js

@@ -40,6 +40,7 @@ Default.args = {
   top: true,
   right: true,
   bottom: true,
+  background: true,
   default: 'contenuto generico'
 };
 

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="pl-2 py-1"
+    class="px-2 py-1"
     :class="classes"
   >
     <slot></slot>
@@ -19,6 +19,10 @@ export default {
         return ['P', 'D', 'C', 'A'].indexOf(value) !== -1;
       },
     },
+    background: {
+      type: Boolean,
+      default: false
+    },
     left: {
       type: Boolean,
       default: false,
@@ -35,12 +39,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    opacity: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
     classes() {
       return {
         'mg-footballer-box': true,
+        'mg-footballer-box--background': this.background === true,
+        'mg-footballer-box--opacity': this.opacity === true,
         'mg-footballer-box--goalkeeper': this.role === 'P',
         'mg-footballer-box--defender': this.role === 'D',
         'mg-footballer-box--midfielder': this.role === 'C',
@@ -64,18 +74,50 @@ export default {
 
     &--goalkeeper {
       border-color: map-get($palette, 'goalkeeper');
+
+      &.mg-footballer-box--background {
+        background-color: map-get($palette, 'goalkeeper');
+
+        &.mg-footballer-box--opacity {
+          background-color: rgba(map-get($palette, 'goalkeeper'), 0.1);
+        }
+      }
     }
 
     &--defender {
       border-color: map-get($palette, 'defender');
+
+      &.mg-footballer-box--background {
+        background-color: map-get($palette, 'defender');
+
+        &.mg-footballer-box--opacity {
+          background-color: rgba(map-get($palette, 'defender'), 0.1);
+        }
+      }
     }
 
     &--midfielder {
       border-color: map-get($palette, 'midfielder');
+
+      &.mg-footballer-box--background {
+        background-color: map-get($palette, 'midfielder');
+
+        &.mg-footballer-box--opacity {
+          background-color: rgba(map-get($palette, 'midfielder'), 0.1);
+        }
+      }
     }
 
     &--forward {
       border-color: map-get($palette, 'forward');
+
+      &.mg-footballer-box--background {
+        background-color: map-get($palette, 'forward');
+
+        &.mg-footballer-box--opacity {
+          background-color: rgba(map-get($palette, 'forward'), 0.1);
+        }
+      }
     }
 
     &--left {

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

@@ -6,7 +6,7 @@
     <!-- FOOTBALLER NAME -->
     <div
       class="d-flex flex-fill text-truncate"
-      :class="{'text-right': inverted, 'order-1': !inverted, 'flex-row': !isLarge, 'flex-column': isLarge}"
+      :class="{'justify-content-end': inverted, 'order-1': !inverted, 'flex-row': !isLarge, 'flex-column': isLarge}"
     >
       <div class="text-truncate">
         <!-- LAST NAME ONLY -->

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

@@ -13,7 +13,7 @@ export default {
     },
     theme: {
       control: { type: 'select' },
-      options: ['light', 'dark'],
+      options: ['light', 'dark', 'goalkeeper', 'defender', 'midfielder', 'forward',],
       defaultValue: 'light'
     },
     default: {

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

@@ -25,7 +25,7 @@ export default {
       type: String,
       default: 'light',
       validator: function (value) {
-        return ['light', 'dark'].indexOf(value) !== -1;
+        return ['light', 'dark', 'goalkeeper', 'defender', 'midfielder', 'forward'].indexOf(value) !== -1;
       },
     },
   },
@@ -38,6 +38,10 @@ export default {
         'mg-label--size-normal': this.size === 'normal',
         'mg-label--theme-light': this.theme === 'light',
         'mg-label--theme-dark': this.theme === 'dark',
+        'mg-label--theme-goalkeeper': this.theme === 'goalkeeper',
+        'mg-label--theme-defender': this.theme === 'defender',
+        'mg-label--theme-midfielder': this.theme === 'midfielder',
+        'mg-label--theme-forward': this.theme === 'forward',
       };
     }
   },
@@ -48,6 +52,7 @@ export default {
   @import '../../../assets/palette';
 
   .mg-label {
+    border: 2px solid;
     border-radius: 32px;
     padding-top: 0.0625rem;
     padding-bottom: 0.0625rem;
@@ -70,13 +75,39 @@ export default {
     &--theme {
       &-light {
         background: #f7f7f7;
+        border-color: #f7f7f7;
         color: map-get($palette, 'text');
       }
 
       &-dark {
         background: #5b5b5b;
+        border-color: #5b5b5b;
         color: #fff;
       }
+
+      &-goalkeeper {
+        background: map-get($palette, 'goalkeeper');
+        border-color: #f7f7f7;
+        color: map-get($palette, 'text');
+      }
+
+      &-defender {
+        background: map-get($palette, 'defender');
+        border-color: #f7f7f7;
+        color: map-get($palette, 'text');
+      }
+
+      &-midfielder {
+        background: map-get($palette, 'midfielder');
+        border-color: #f7f7f7;
+        color: map-get($palette, 'text');
+      }
+
+      &-forward {
+        background: map-get($palette, 'forward');
+        border-color: #f7f7f7;
+        color: map-get($palette, 'text');
+      }
     }
   }
 </style>