@magicgol/polyjuice 0.26.1 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.26.1",
+  "version": "0.27.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,
@@ -41,6 +45,7 @@ export default {
     classes() {
       return {
         'mg-footballer-box': true,
+        'mg-footballer-box--background': this.background === true,
         'mg-footballer-box--goalkeeper': this.role === 'P',
         'mg-footballer-box--defender': this.role === 'D',
         'mg-footballer-box--midfielder': this.role === 'C',
@@ -64,18 +69,34 @@ export default {
 
     &--goalkeeper {
       border-color: map-get($palette, 'goalkeeper');
+
+      &.mg-footballer-box--background {
+        background-color: rgba(map-get($palette, 'goalkeeper'), 0.1);
+      }
     }
 
     &--defender {
       border-color: map-get($palette, 'defender');
+
+      &.mg-footballer-box--background {
+        background-color: rgba(map-get($palette, 'defender'), 0.1);
+      }
     }
 
     &--midfielder {
       border-color: map-get($palette, 'midfielder');
+
+      &.mg-footballer-box--background {
+        background-color: rgba(map-get($palette, 'midfielder'), 0.1);
+      }
     }
 
     &--forward {
       border-color: map-get($palette, 'forward');
+
+      &.mg-footballer-box--background {
+        background-color: rgba(map-get($palette, 'forward'), 0.1);
+      }
     }
 
     &--left {