@magicgol/polyjuice 0.53.0 → 0.54.1

package/package.json

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

package/src/assets/palette.scss

@@ -8,8 +8,8 @@ $palette: (
     'club': linear-gradient(134.42deg, #0df2bb 0.99%, #a714ed 100%),
     'text': #343434,
     // ALERT
-    'error': #ed4949,
-    'warning': #ff614c,
+    'error': #f00,
+    'warning': #ffa44c,
     'success': #349B50,
     'info': #004781,
     'highlighted': #ffdb59,

package/src/components/content/card/horizontal-card/HCard.vue

@@ -1,15 +1,24 @@
 <template>
   <div
-    class="d-flex text-truncate justify-content-between align-items-center rounded px-3"
+    class="d-flex text-truncate justify-content-between align-items-center px-3 position-relative"
     v-bind:class="classes"
   >
+    <div
+      v-if="progressBar"
+      class="position-absolute h-100"
+      style="top: 0; left: 0; border-radius: 16px"
+      :class="progressBarClass"
+      :style="{ width: progressBar + '%' }"
+    ></div>
     <div
       class="flex-fill text-truncate"
+      style="z-index: 1"
     ><slot></slot></div>
     <!-- ACTIONS -->
     <div
       v-if="actionsSlotVisibility"
       class="pl-3"
+      style="z-index: 1"
     >
       <slot name="actions"></slot>
     </div>
@@ -21,6 +30,18 @@
 export default {
   name: 'mg-h-card',
 
+  props: {
+    progressBar: {
+      type: Number,
+      default: null
+    },
+
+    progressBarClass: {
+      type: String,
+      default: null,
+    },
+  },
+
   computed: {
     classes() {
       return {
@@ -37,6 +58,7 @@ export default {
 <style lang="scss">
   .mg-h-card {
     background: #fff;
+    border-radius: 16px;
     box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.25);
     height: 3.75rem;
   }

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="rounded overflow-hidden"
+    class="overflow-hidden"
     :class="classes"
     @click="onClick"
   >
@@ -85,6 +85,7 @@ export default {
 
 .mg-v-card {
   background: white;
+  border-radius: 16px;
   box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.3);
 
   &--highlighted {

package/src/components/context/footballer/horizontal-footballer-card/HFootballerCard.vue

@@ -1,6 +1,8 @@
 <template>
   <mg-h-card
     :class="classes"
+    :progress-bar="progressBar"
+    :progress-bar-class="progressBarClass"
   >
     <template v-slot:default>
       <mg-h-footballer
@@ -15,8 +17,8 @@
 </template>
 
 <script>
-import MgHFootballer from "../horizontal-footballer/HFootballer";
-import MgHCard from "../../../content/card/horizontal-card/HCard";
+import MgHFootballer from '../horizontal-footballer/HFootballer';
+import MgHCard from '../../../content/card/horizontal-card/HCard';
 
 export default {
   name: 'mg-h-footballer-card',
@@ -42,18 +44,34 @@ export default {
         type: Boolean,
         default: false
       }
-    }
+    },
+    progressBar: {
+      type: Number,
+      default: null
+    },
   },
 
   computed: {
-    classes() {
+    classes () {
       return {
         'mg-h-footballer-card': true,
         'mg-h-footballer-card--pressed': this.pressed === true,
       };
     },
-    actionsSlotVisibility() {
+    actionsSlotVisibility () {
       return 'actions' in this.$slots && !!this.$slots.actions;
+    },
+    progressBarClass () {
+      if (!this.progressBar) {
+        return null;
+      }
+
+      if (this.progressBar > 66) {
+        return 'mg-h-footballer-card--theme-success';
+      } else if (this.progressBar > 33) {
+        return 'mg-h-footballer-card--theme-warning';
+      }
+      return 'mg-h-footballer-card--theme-error';
     }
   },
 
@@ -65,10 +83,24 @@ export default {
 </script>
 
 <style lang="scss">
+  @import '../../../../assets/palette';
+
   .mg-h-footballer-card {
     &--pressed {
       background: #daf0d9 !important;
       box-shadow: inset 0 4px 9px rgba(0, 0, 0, 0.1) !important;
     }
+
+    &--theme {
+      &-success {
+        background-color: rgba(map-get($palette, 'success'), 0.2);
+      }
+      &-warning {
+        background-color: rgba(map-get($palette, 'warning'), 0.2);
+      }
+      &-error {
+        background-color: rgba(map-get($palette, 'error'), 0.2);
+      }
+    }
   }
 </style>

package/src/documentation/Alert.stories.mdx

@@ -6,12 +6,12 @@ import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
     <ColorItem
         title="Error"
         subtitle="Used for error messages"
-        colors={{'Cinnabar': '#ed4949'}}
+        colors={{'Red': '#f00'}}
     />
     <ColorItem
         title="Warning"
         subtitle="Used for warning messages"
-        colors={{'Persimmon': '#ff614c'}}
+        colors={{'Yellow Orange': '#ffa44c'}}
     />
     <ColorItem
         title="Success"