@magicgol/polyjuice 0.37.4 → 0.37.6

package/package.json

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

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

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

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

@@ -25,7 +25,7 @@ export default {
       type: String,
       default: 'light',
       validator: function (value) {
-        return ['light', 'dark', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'].indexOf(value) !== -1;
+        return ['light', 'dark', 'club', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'].indexOf(value) !== -1;
       },
     },
   },
@@ -38,6 +38,7 @@ 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-club': this.theme === 'club',
         'mg-label--theme-goalkeeper': this.theme === 'goalkeeper',
         'mg-label--theme-defender': this.theme === 'defender',
         'mg-label--theme-midfielder': this.theme === 'midfielder',
@@ -90,6 +91,12 @@ export default {
         color: #fff;
       }
 
+      &-club {
+        background: #fff;
+        border-color: map-get($palette, 'expertClub');;
+        color: map-get($palette, 'expertClub');;
+      }
+
       &-goalkeeper {
         background: map-get($palette, 'goalkeeper');
         border-color: map-get($palette, 'text');

package/src/components/context/club/square/ClubSquare.stories.js

@@ -6,6 +6,11 @@ export default {
   component: MgClubSquare,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['normal', 'small'],
+      defaultValue: 'normal'
+    },
     default: {
       description: "The default Vue slot",
       control: {

package/src/components/context/club/square/ClubSquare.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="d-inline-block rounded p-2"
+    class="d-inline-block rounded"
     :class="classes"
   >
-    <mg-club-star :trial="trial" :disabled="disabled"><slot></slot></mg-club-star>
+    <mg-club-star :size="size" :trial="trial" :disabled="disabled"><slot></slot></mg-club-star>
   </div>
 </template>
 
@@ -23,6 +23,14 @@ export default {
       type: Boolean,
       default: false
     },
+
+    size: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['small', 'normal'].indexOf(value) !== -1;
+      },
+    }
   },
 
   computed: {
@@ -30,6 +38,8 @@ export default {
       return {
         'mg-club-square': true,
         'mg-club-square--disabled': this.disabled === true,
+        'mg-club-square--size-small': this.size === 'small',
+        'mg-club-square--size-normal': this.size === 'normal',
       };
     }
   },
@@ -44,7 +54,17 @@ export default {
   @import '../../../../assets/palette';
 
   .mg-club-square {
-    background-color: lighten(map-get($palette, 'expertClub'), 55%);
+    background-color: lighten(map-get($palette, 'expertClub'), 45%);
+
+    &--size {
+      &-small {
+        padding: 0.25rem 0.5rem;
+      }
+
+      &-normal {
+        padding: 0.5rem;
+      }
+    }
 
     &--disabled {
       background-color: #efefef;

package/src/components/context/club/star/ClubStar.vue

@@ -67,7 +67,6 @@ export default {
 
     div {
       font-family: Ubuntu, sans-serif;
-      font-size: 1rem;
       font-weight: 500;
       line-height: 11px;
     }
@@ -78,6 +77,10 @@ export default {
 
     &-size {
       &-small {
+        div {
+          font-size: 0.75rem;
+        }
+
         svg {
           height: 1rem;
           min-height: 1rem;
@@ -87,6 +90,10 @@ export default {
       }
 
       &-normal {
+        div {
+          font-size: 1rem;
+        }
+
         svg {
           height: 1.25rem;
           min-height: 1.25rem;
@@ -96,6 +103,10 @@ export default {
       }
 
       &-large {
+        div {
+          font-size: 1rem;
+        }
+
         svg {
           height: 1.5rem;
           min-height: 1.5rem;