@magicgol/polyjuice 0.54.2 → 0.55.1

package/package.json

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

package/src/components/chart/bar/BarChart.stories.js

@@ -8,7 +8,7 @@ export default {
   argTypes: {
     theme: {
       control: { type: 'select' },
-      options: [null, 'winner'],
+      options: [null, 'winner', 'success', 'warning', 'error'],
       defaultValue: null
     },
   },

package/src/components/chart/bar/BarChart.vue

@@ -22,7 +22,7 @@ export default {
       type: String,
       default: null,
       validator: function (value) {
-        return ['winner'].indexOf(value) !== -1;
+        return ['winner', 'success', 'warning', 'error'].indexOf(value) !== -1;
       },
     },
   },
@@ -32,6 +32,9 @@ export default {
       return {
         'mg-bar-chart': true,
         'mg-bar-chart--theme-winner': this.theme === 'winner',
+        'mg-bar-chart--theme-success': this.theme === 'success',
+        'mg-bar-chart--theme-warning': this.theme === 'warning',
+        'mg-bar-chart--theme-error': this.theme === 'error',
       };
     },
 
@@ -65,5 +68,23 @@ export default {
         background-color: map_get($palette, 'winner') !important;
       }
     }
+
+    &--theme-success {
+      > div {
+        background-color: map_get($palette, 'success') !important;
+      }
+    }
+
+    &--theme-warning {
+      > div {
+        background-color: map_get($palette, 'warning') !important;
+      }
+    }
+
+    &--theme-error {
+      > div {
+        background-color: map_get($palette, 'error') !important;
+      }
+    }
   }
 </style>

package/src/components/content/card/vertical-card/VCard.vue

@@ -10,12 +10,18 @@
     >
       <slot name="header"></slot>
     </div>
-    <div class="mg-v-card-body p-3"><slot></slot></div>
     <div
-      class="mg-v-card-footer px-3 pb-3"
+      class="mg-v-card-body"
+      :class="{'p-3': size === 'normal', 'p-2': size === 'small', 'py-1 px-2': size === 'x-small'}"
+    ><slot></slot></div>
+    <div
+      class="mg-v-card-footer"
+      :class="{'px-3 pb-3': size === 'normal', 'px-2 pb-2': size === 'small'}"
       v-if="footerVisibility"
     >
-      <div class="pt-3">
+      <div
+        :class="{'pt-3': size === 'normal', 'pt-2': size === 'small'}"
+      >
         <slot name="footer"></slot>
       </div>
     </div>
@@ -43,6 +49,17 @@ export default {
         ].indexOf(value) !== -1;
       },
     },
+    size: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return [
+          'x-small',
+          'small',
+          'normal',
+        ].indexOf(value) !== -1;
+      },
+    },
     highlighted: {
       type: Boolean,
       default: false
@@ -54,7 +71,9 @@ export default {
       return {
         'mg-v-card': true,
         'mg-v-card--highlighted': this.highlighted === true,
-        'mg-v-card--theme-club': this.theme === 'club',
+        'mg-v-card--size-x-small': this.size === 'x-small',
+        'mg-v-card--size-small': this.size === 'small',
+        'mg-v-card--size-normal': this.size === 'normal',
         'mg-v-card--theme-rating': this.theme === 'rating',
         'mg-v-card--theme-goalkeeper': this.theme === 'goalkeeper',
         'mg-v-card--theme-defender': this.theme === 'defender',
@@ -85,9 +104,19 @@ export default {
 
 .mg-v-card {
   background: white;
-  border-radius: 16px;
   box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.3);
 
+  &--size {
+    &-small,
+    &-normal {
+      border-radius: 16px;
+    }
+
+    &-x-small {
+      border-radius: 9px;
+    }
+  }
+
   &--highlighted {
     border: 2px solid map-get($palette, 'highlighted');
   }
@@ -125,6 +154,7 @@ export default {
 
     &-transparent {
       background: rgba(255, 255, 255, 0.95) !important;
+      border: 1px solid #eee;
       box-shadow: none;
     }
   }