@magicgol/polyjuice 0.39.3 → 0.40.1

package/package.json

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

package/src/components/{components → badge}/badge/Badge.stories.js

@@ -2,7 +2,7 @@ import MgBadge from './Badge.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Components/Badge',
+  title: 'Badge/Badge',
   component: MgBadge,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {},

package/src/components/badge/counter/CounterBadge.stories.js

@@ -0,0 +1,30 @@
+import MgCounterBadge from './CounterBadge.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Badge/Counter',
+  component: MgCounterBadge,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {},
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgCounterBadge },
+  template: `<mg-counter-badge v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-counter-badge>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  count: 1
+};
+
+export const Many = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Many.args = {
+  count: 10
+};
+
+

package/src/components/badge/counter/CounterBadge.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    class="d-inline-flex align-items-center rounded-circle justify-content-center"
+    :class="classes"
+    v-if="visible"
+  >
+    <span>{{ count >= 9 ? '9+' : count }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-counter-badge',
+
+  props: {
+    count: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-counter-badge': true,
+      };
+    },
+
+    visible () {
+      return this.count > 0;
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-counter-badge {
+    background-color: map-get($palette, 'brand');
+    color: #fff;
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 0.75rem;
+    font-weight: 600;
+    height: 1.125rem;
+    min-height: 1.125rem;
+    min-width: 1.125rem;
+    width: 1.125rem;
+  }
+</style>

package/src/components/{components/icon-badge → badge/icon}/IconBadge.stories.js

@@ -2,7 +2,7 @@ import MgIconBadge from './IconBadge.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Components/Icon Badge',
+  title: 'Badge/Icon',
   component: MgIconBadge,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

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

@@ -13,7 +13,7 @@ export default {
     },
     theme: {
       control: { type: 'select' },
-      options: ['light', 'dark', 'club', 'trial', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'],
+      options: ['light', 'dark', 'tag', 'club', 'trial', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'],
       defaultValue: 'light'
     },
     default: {
@@ -41,6 +41,5 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
-  default: 'etichetta',
-  size: 'x-small'
+  default: 'etichetta'
 };

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

@@ -25,7 +25,7 @@ export default {
       type: String,
       default: 'light',
       validator: function (value) {
-        return ['light', 'dark', 'club', 'trial', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'].indexOf(value) !== -1;
+        return ['light', 'dark', 'tag', 'club', 'trial', '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-tag': this.theme === 'tag',
         'mg-label--theme-club': this.theme === 'club',
         'mg-label--theme-trial': this.theme === 'trial',
         'mg-label--theme-goalkeeper': this.theme === 'goalkeeper',
@@ -97,6 +98,14 @@ export default {
         color: #fff;
       }
 
+      &-tag {
+        background-color: lighten(map-get($palette, 'brand'), 50%);
+        > div {
+          background: lighten(map-get($palette, 'brand'), 50%);
+        }
+        color: map-get($palette, 'brand');
+      }
+
       &-club {
         background: map-get($palette, 'club');
         > div {

package/src/components/content/card/vertical-card/VCard.stories.js

@@ -33,6 +33,18 @@ export default {
       ],
       defaultValue: null
     },
+    header: {
+      description: "The header content goes here",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    },
     footer: {
       description: "The footer content goes here",
       control: {
@@ -53,6 +65,7 @@ const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { MgVCard },
   template: `<mg-v-card @click="$emit('click')" v-bind="$props">
+    <template v-if="${'header' in args}" v-slot:header>${args.header}</template>
     <template v-if="${'default' in args}" v-slot>${args.default}</template>
     <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
   </mg-v-card>`,
@@ -64,6 +77,13 @@ Default.args = {
   default: '<div>This is a vertical card.</div><div>What do you think about?</div>'
 };
 
+export const Header = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Header.args = {
+  default: '<div>This is a vertical card.</div><div>What do you think about?</div>',
+  header: '<div>The header content goes here</div>'
+};
+
 export const Footer = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Footer.args = {

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

@@ -4,12 +4,18 @@
     :class="classes"
     @click="onClick"
   >
+    <div
+      class="mg-v-card-header"
+      v-if="headerVisibility"
+    >
+      <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"
       v-if="footerVisibility"
     >
-      <div class="mg-v-card-content pt-3">
+      <div class="pt-3">
         <slot name="footer"></slot>
       </div>
     </div>
@@ -53,6 +59,9 @@ export default {
         'mg-v-card--theme-transparent': this.theme === 'transparent',
       };
     },
+    headerVisibility() {
+      return 'header' in this.$slots && !!this.$slots.header;
+    },
     footerVisibility() {
       return 'footer' in this.$slots && !!this.$slots.footer;
     }
@@ -75,8 +84,8 @@ export default {
 
   &--theme {
     &-club {
-      background: map-get($palette, 'club');
-      color: #fff;
+      background: linear-gradient(90deg, #d1efff 0%, #dddafc 99.65%);;
+      color: #777;
     }
 
     &-rating {
@@ -111,7 +120,7 @@ export default {
   }
 
   &-footer {
-    .mg-v-card-content {
+    > div {
       border-top: 1px solid #cecece;
     }
   }

package/src/components/context/club/IconBadge.stories.js

@@ -1,4 +1,4 @@
-import MgIconBadge from '../../components/icon-badge/IconBadge.vue';
+import MgIconBadge from '../../badge/icon/IconBadge.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {