@magicgol/polyjuice 0.52.2 → 0.54.0

package/package.json

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

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/content/delimiter/vertical-delimiter/VDelimiter.stories.js

@@ -0,0 +1,36 @@
+import MgVDelimiter from './VDelimiter.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Content/Delimiter/VDelimiter',
+  component: MgVDelimiter,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgVDelimiter },
+  template: `<mg-v-delimiter v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-v-delimiter>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'this is the list head',
+  color: '#f00'
+};

package/src/components/content/delimiter/vertical-delimiter/VDelimiter.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="d-flex"
+    :class="classes"
+  >
+    <div
+      class="mr-3"
+      style="border: 2px solid; border-radius: 5px;"
+      :style="{borderColor: color, backgroundColor: color}"
+    ></div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-v-delimiter',
+
+  props: {
+    color: {
+      type: String,
+      validator: value => {
+        const regex = new RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);
+        return regex.test(value);
+      },
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-v-delimiter': true,
+      };
+    }
+  },
+};
+</script>

package/src/components/context/club/button/primary-club-button/PrimaryClubButton.vue

@@ -64,7 +64,6 @@ export default {
     appearance: none;
     background: map-get($palette, 'club');
     border-radius: 15px;
-    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.3);
     cursor: pointer;
     font-family: 'Ubuntu', sans-serif;
     font-size: 1rem;

package/src/components/context/club/button/secondary-club-button/SecondaryClubButton.vue

@@ -61,7 +61,6 @@ export default {
     appearance: none;
     background: map-get($palette, 'club');
     border-radius: 15px;
-    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.3);
     box-sizing: border-box;
     border: 0;
     cursor: pointer;

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,29 @@ 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;
+      }
+
+      return this.progressBar >= 50 ? 'mg-h-footballer-card--theme-success' : 'mg-h-footballer-card--theme-error';
     }
   },
 
@@ -65,10 +78,21 @@ 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);
+      }
+      &-error {
+        background-color: rgba(map-get($palette, 'error'), 0.2);
+      }
+    }
   }
 </style>