@magicgol/polyjuice 0.37.1 → 0.37.3

package/package.json

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

package/src/components/context/club/button/primary-club-button/PrimaryClubButton.stories.js

@@ -6,6 +6,11 @@ export default {
   component: MgPrimaryClubButton,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['normal', 'large'],
+      defaultValue: 'normal'
+    },
     default: {
       description: "The default Vue slot",
       control: {
@@ -39,3 +44,9 @@ Disabled.args = {
   disabled: true,
   default: 'primary club button'
 };
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  default: 'primary button'
+};

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

@@ -1,12 +1,12 @@
 <template>
   <button
     type="button"
-    class="w-100 rounded justify-content-center align-items-center p-2 border-0 text-white text-uppercase d-flex"
+    class="w-100 rounded justify-content-center align-items-center px-2 border-0 text-white text-uppercase d-flex"
     :class="classes"
     :disabled="disabled"
     @click="onClick"
   >
-    <svgicon name="star-c"></svgicon>
+    <mg-club-star negative></mg-club-star>
     <div class="ml-2">
       <slot></slot>
     </div>
@@ -14,6 +14,8 @@
 </template>
 
 <script>
+import MgClubStar from "../../star/ClubStar";
+
 export default {
   name: 'mg-primary-club-button',
 
@@ -22,17 +24,31 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    size: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['large', 'normal'].indexOf(value) !== -1;
+      },
+    }
   },
 
   computed: {
     classes() {
       return {
         'mg-primary-club-button': true,
+        'mg-primary-club-button-size-normal': this.size === 'normal',
+        'mg-primary-club-button-size-large': this.size === 'large',
         'mg-primary-club-button--disabled': this.disabled,
       };
     }
   },
 
+  components: {
+    MgClubStar,
+  },
+
   methods: {
     onClick() {
       this.$emit('click');
@@ -49,17 +65,18 @@ export default {
     background-color: map-get($palette, 'expertClub');
     box-shadow: 0 5px 22px rgba(0, 0, 0, 0.3);
     cursor: pointer;
-    font-size: 1rem;
     font-family: 'Ubuntu', sans-serif;
+    font-size: 1rem;
     font-weight: 500;
     outline: none;
 
-    svg {
-      fill: #fff;
-      height: 1rem;
-      min-height: 1rem;
-      min-width: 1rem;
-      width: 1rem;
+    &-size {
+      &-normal {
+        padding: 0.5rem;
+      }
+      &-large {
+        padding: 1rem;
+      }
     }
 
     &--disabled {

package/src/components/context/club/button/secondary-club-button/SecondaryClubButton.stories.js

@@ -31,11 +31,13 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
-  default: 'secondary club button'
+  default: 'secondary club button',
+  trial: true
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
-  default: 'secondary club button'
+  default: 'secondary club button',
+  trial: true
 };

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

@@ -7,13 +7,15 @@
     @click="onClick"
   >
     <div class="d-flex justify-content-center align-items-center">
-      <svgicon name="star-stroke-p"></svgicon>
+      <mg-club-star :trial="trial"></mg-club-star>
       <div class="ml-2"><slot></slot></div>
     </div>
   </button>
 </template>
 
 <script>
+import MgClubStar from "../../star/ClubStar";
+
 export default {
   name: 'mg-secondary-club-button',
 
@@ -22,6 +24,11 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    trial: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -33,6 +40,10 @@ export default {
     }
   },
 
+  components: {
+    MgClubStar,
+  },
+
   methods: {
     onClick() {
       this.$emit('click');
@@ -48,21 +59,14 @@ export default {
     appearance: none;
     border: 2px solid map-get($palette, 'expertClub');
     box-shadow: 0 5px 22px rgba(0, 0, 0, 0.3);
+    box-sizing: border-box;
     color: map-get($palette, 'expertClub');
     cursor: pointer;
     font-size: 1rem;
     font-family: 'Ubuntu', sans-serif;
     font-weight: 500;
-    height: 2.5rem;
     outline: none;
-
-    svg {
-      fill: map-get($palette, 'expertClub');
-      height: 1.25rem;
-      min-height: 1.25rem;
-      min-width: 1.25rem;
-      width: 1.25rem;
-    }
+    padding: calc(0.5rem - 2px);
 
     &--disabled {
       opacity: 0.3 !important;

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

@@ -4,18 +4,34 @@ import MgClubSquare from './ClubSquare.vue';
 export default {
   title: 'Context/Club/Square/Club Square',
   component: MgClubSquare,
+  // 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: { MgClubSquare },
-  template: `<mg-club-square v-bind="$props"></mg-club-square>`,
+  template: `<mg-club-square v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-club-square>`,
 });
 
 export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
+  default: 'this is a label'
 };
 
 export const Trial = Template.bind({});

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

@@ -1,13 +1,15 @@
 <template>
   <div
-    class="d-flex rounded p-2"
+    class="d-inline-block rounded p-2"
     :class="classes"
   >
-    <svgicon v-bind:name="icon"></svgicon>
+    <mg-club-star :trial="trial" :disabled="disabled"><slot></slot></mg-club-star>
   </div>
 </template>
 
 <script>
+import MgClubStar from "../star/ClubStar";
+
 export default {
   name: 'mg-club-square',
 
@@ -29,11 +31,12 @@ export default {
         'mg-club-square': true,
         'mg-club-square--disabled': this.disabled === true,
       };
-    },
-    icon () {
-      return this.trial ? 'star-stroke-p' : 'star-c';
     }
   },
+
+  components: {
+    MgClubStar
+  }
 };
 </script>
 
@@ -42,23 +45,9 @@ export default {
 
   .mg-club-square {
     background-color: lighten(map-get($palette, 'expertClub'), 55%);
-    height: 2.25rem;
-    width: 2.25rem;
-
-    svg {
-      fill: map-get($palette, 'expertClub');
-      height: 1.25rem;
-      min-height: 1.25rem;
-      min-width: 1.25rem;
-      width: 1.25rem;
-    }
 
     &--disabled {
       background-color: #efefef;
-
-      svg {
-        fill: #6d6d6d;
-      }
     }
   }
 </style>

package/src/components/context/club/star/ClubStar.stories.js

@@ -0,0 +1,52 @@
+import MgClubStar from './ClubStar.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Context/Club/Star/Club Star',
+  component: MgClubStar,
+  // 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: {
+        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: { MgClubStar },
+  template: `<mg-club-star v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-club-star>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'this is a label'
+};
+
+export const Trial = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Trial.args = {
+  trial: true
+};
+
+export const Disabled = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Disabled.args = {
+  disabled: true
+};

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

@@ -0,0 +1,114 @@
+<template>
+  <div
+    class="d-flex align-items-center"
+    :class="classes"
+  >
+    <svgicon v-bind:name="icon"></svgicon>
+    <div v-if="slotVisibility" class="ml-2"><slot></slot></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-club-star',
+
+  props: {
+    trial: {
+      type: Boolean,
+      default: false
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    negative: {
+      type: Boolean,
+      default: false
+    },
+
+    size: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['small', 'normal'].indexOf(value) !== -1;
+      },
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-club-star': true,
+        'mg-club-star--disabled': this.disabled === true,
+        'mg-club-star--negative': this.negative === true,
+        'mg-club-star-size-small': this.size === 'small',
+        'mg-club-star-size-normal': this.size === 'normal',
+      };
+    },
+    icon () {
+      return this.trial ? 'star-stroke-p' : 'star-c';
+    },
+
+    slotVisibility () {
+      return 'default' in this.$slots && !!this.$slots.default;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../../assets/palette';
+
+  .mg-club-star {
+    color: map-get($palette, 'expertClub');
+
+    div {
+      font-family: Ubuntu, sans-serif;
+      font-size: 1rem;
+      font-weight: 500;
+      line-height: 11px;
+    }
+
+    svg {
+      fill: map-get($palette, 'expertClub');
+    }
+
+    &-size {
+      &-small {
+        svg {
+          height: 1rem;
+          min-height: 1rem;
+          min-width: 1rem;
+          width: 1rem;
+        }
+      }
+
+      &-normal {
+        svg {
+          height: 1.25rem;
+          min-height: 1.25rem;
+          min-width: 1.25rem;
+          width: 1.25rem;
+        }
+      }
+    }
+
+    &--negative {
+      color: #fff;
+
+      svg {
+        fill: #fff;
+      }
+    }
+
+    &--disabled {
+      color: #6d6d6d !important;
+
+      svg {
+        fill: #6d6d6d !important;;
+      }
+    }
+  }
+</style>