@magicgol/polyjuice 0.46.1 → 0.47.1

package/package.json

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

package/src/components/content/box/vertical-box/VBox.stories.js

@@ -18,6 +18,11 @@ export default {
         },
       }
     },
+    theme: {
+      control: { type: 'select' },
+      options: ['normal', 'club'],
+      defaultValue: 'normal'
+    },
     header: {
       description: "The header Vue slot",
       control: {

package/src/components/content/box/vertical-box/VBox.vue

@@ -4,8 +4,10 @@
     :selected="selected"
     @click="$emit('click')"
   >
-    <div class="mg-v-box--header" v-if="headerSlotVisibility"><slot name="header"></slot></div>
-    <div class="p-3"><slot></slot></div>
+    <div class="mg-v-box--container">
+      <div class="mg-v-box--header" v-if="headerSlotVisibility"><slot name="header"></slot></div>
+      <div class="p-3"><slot></slot></div>
+    </div>
   </div>
 </template>
 
@@ -18,6 +20,17 @@ export default {
       type: Boolean,
       default: false
     },
+
+    theme: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return [
+          'normal',
+          'club',
+        ].indexOf(value) !== -1;
+      },
+    },
   },
 
   computed: {
@@ -25,6 +38,8 @@ export default {
       return {
         'mg-v-box': true,
         'mg-v-box--selected': this.selected === true,
+        'mg-v-box--theme-normal': this.theme === 'normal',
+        'mg-v-box--theme-club': this.theme === 'club',
       };
     },
     headerSlotVisibility() {
@@ -44,6 +59,11 @@ export default {
   cursor: pointer;
   overflow: hidden;
 
+  &--container {
+    border-radius: 7px;
+    overflow: hidden;
+  }
+
   &--header {
     background-color: map-get($palette, 'brand');
     color: white;
@@ -53,6 +73,22 @@ export default {
     text-align: center;
   }
 
+  &--theme {
+    &-club {
+      background: map-get($palette, 'club') !important;
+      border: 0 !important;
+      padding: 3px;
+
+      [class$="--container"] {
+        background: rgba(255, 255, 255, 0.8);
+      }
+
+      .mg-v-box--header {
+        background: map-get($palette, 'club') !important;
+      }
+    }
+  }
+
   &--selected {
     background: rgba(map-get($palette, 'brand'), 0.05);
     border-color: map-get($palette, 'brand');

package/src/components/form/radio/Radio.stories.js

@@ -6,6 +6,11 @@ export default {
   component: MgRadio,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
+    theme: {
+      control: { type: 'select' },
+      options: ['normal', 'club'],
+      defaultValue: 'normal'
+    },
   },
 };
 

package/src/components/form/radio/Radio.vue

@@ -32,6 +32,17 @@ export default {
       type: String,
       default: 'radio'
     },
+
+    theme: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return [
+          'normal',
+          'club',
+        ].indexOf(value) !== -1;
+      },
+    },
   },
 
   computed: {
@@ -39,6 +50,7 @@ export default {
       return {
         'mg-radio': true,
         'mg-radio--checked': this.checked === true,
+        'mg-radio--theme-club': this.theme === 'club',
       };
     }
   },
@@ -81,5 +93,16 @@ export default {
         }
       }
     }
+
+    &--theme {
+      &-club {
+        &.mg-radio--checked {
+          span {
+            background: map-get($palette, 'club') !important;
+            border: 0;
+          }
+        }
+      }
+    }
   }
 </style>

package/src/components/typography/h1/HeadingOne.stories.js

@@ -6,6 +6,11 @@ export default {
   component: MgHeadingOne,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
+    theme: {
+      control: { type: 'select' },
+      options: [null, 'club'],
+      defaultValue: null
+    },
     default: {
       description: "The default Vue slot",
       control: {
@@ -22,13 +27,14 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = args => ({
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
   components: { MgHeadingOne },
-  template: `<mg-heading-one><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-one>`,
+  template: `<mg-heading-one v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-one>`,
 });
 
 export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
-  default: 'heading 1'
+  default: 'heading 1',
 };

package/src/components/typography/h1/HeadingOne.vue

@@ -1,15 +1,26 @@
 <template>
-  <div v-bind:class="classes"><slot></slot></div>
+  <div v-bind:class="classes"><span><slot></slot></span></div>
 </template>
 
 <script>
 export default {
   name: 'mg-heading-one',
 
+  props: {
+    theme: {
+      type: String,
+      default: null,
+      validator: function (value) {
+        return ['club'].indexOf(value) !== -1;
+      },
+    }
+  },
+
   computed: {
     classes() {
       return {
         'mg-h1': true,
+        'mg-h1--theme-club': this.theme === 'club',
       };
     }
   },
@@ -25,5 +36,15 @@ export default {
     font-size: 1.25rem;
     font-weight: 500;
     line-height: 1.1;
+
+    &--theme {
+      &-club {
+        > span {
+          background: map-get($palette, 'club');
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+    }
   }
 </style>

package/src/components/typography/h2/HeadingTwo.stories.js

@@ -6,6 +6,11 @@ export default {
   component: MgHeadingTwo,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
+    theme: {
+      control: { type: 'select' },
+      options: [null, 'club'],
+      defaultValue: null
+    },
     default: {
       description: "The default Vue slot",
       control: {
@@ -22,9 +27,10 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = args => ({
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
   components: { MgHeadingTwo },
-  template: `<mg-heading-two><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-two>`,
+  template: `<mg-heading-two v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-two>`,
 });
 
 export const Default = Template.bind({});

package/src/components/typography/h2/HeadingTwo.vue

@@ -1,15 +1,26 @@
 <template>
-  <div v-bind:class="classes"><slot></slot></div>
+  <div v-bind:class="classes"><span><slot></slot></span></div>
 </template>
 
 <script>
 export default {
   name: 'mg-heading-two',
 
+  props: {
+    theme: {
+      type: String,
+      default: null,
+      validator: function (value) {
+        return ['club'].indexOf(value) !== -1;
+      },
+    }
+  },
+
   computed: {
     classes() {
       return {
         'mg-h2': true,
+        'mg-h2--theme-club': this.theme === 'club',
       };
     }
   },
@@ -24,5 +35,15 @@ export default {
     font-family: 'Ubuntu', sans-serif;
     font-size: 1.125rem;
     font-weight: 500;
+
+    &--theme {
+      &-club {
+        > span {
+          background: map-get($palette, 'club');
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+    }
   }
 </style>

package/src/components/typography/h3/HeadingThree.stories.js

@@ -6,6 +6,11 @@ export default {
   component: MgHeadingThree,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
+    theme: {
+      control: { type: 'select' },
+      options: [null, 'club'],
+      defaultValue: null
+    },
     default: {
       description: "The default Vue slot",
       control: {
@@ -22,9 +27,10 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = args => ({
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
   components: { MgHeadingThree },
-  template: `<mg-heading-three><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-three>`,
+  template: `<mg-heading-three v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-three>`,
 });
 
 export const Default = Template.bind({});

package/src/components/typography/h3/HeadingThree.vue

@@ -1,15 +1,26 @@
 <template>
-  <div v-bind:class="classes"><slot></slot></div>
+  <div v-bind:class="classes"><span><slot></slot></span></div>
 </template>
 
 <script>
 export default {
   name: 'mg-heading-three',
 
+  props: {
+    theme: {
+      type: String,
+      default: null,
+      validator: function (value) {
+        return ['club'].indexOf(value) !== -1;
+      },
+    }
+  },
+
   computed: {
     classes() {
       return {
         'mg-h3': true,
+        'mg-h3--theme-club': this.theme === 'club',
       };
     }
   },
@@ -25,5 +36,15 @@ export default {
     font-size: 1rem;
     font-weight: 500;
     line-height: 1.17;
+
+    &--theme {
+      &-club {
+        > span {
+          background: map-get($palette, 'club');
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+    }
   }
 </style>

package/src/components/typography/h4/HeadingFour.stories.js

@@ -6,6 +6,11 @@ export default {
   component: MgHeadingFour,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
+    theme: {
+      control: { type: 'select' },
+      options: [null, 'club'],
+      defaultValue: null
+    },
     default: {
       description: "The default Vue slot",
       control: {
@@ -22,9 +27,10 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = args => ({
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
   components: { MgHeadingFour },
-  template: `<mg-heading-four><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-four>`,
+  template: `<mg-heading-four v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-four>`,
 });
 
 export const Default = Template.bind({});

package/src/components/typography/h4/HeadingFour.vue

@@ -1,15 +1,26 @@
 <template>
-  <div v-bind:class="classes"><slot></slot></div>
+  <div v-bind:class="classes"><span><slot></slot></span></div>
 </template>
 
 <script>
 export default {
   name: 'mg-heading-four',
 
+  props: {
+    theme: {
+      type: String,
+      default: null,
+      validator: function (value) {
+        return ['club'].indexOf(value) !== -1;
+      },
+    }
+  },
+
   computed: {
     classes() {
       return {
         'mg-h4': true,
+        'mg-h4--theme-club': this.theme === 'club',
       };
     }
   },
@@ -24,5 +35,15 @@ export default {
     font-family: 'Ubuntu', sans-serif;
     font-size: 1rem;
     font-weight: 400;
+
+    &--theme {
+      &-club {
+        > span {
+          background: map-get($palette, 'club');
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+    }
   }
 </style>

package/src/components/typography/h5/HeadingFive.vue

@@ -20,7 +20,7 @@ export default {
     classes() {
       return {
         'mg-h5': true,
-        'mg-h5-theme--club': this.theme === 'club',
+        'mg-h5--theme-club': this.theme === 'club',
       };
     }
   },
@@ -36,8 +36,8 @@ export default {
     font-size: 0.875rem;
     font-weight: 700;
 
-    &-theme {
-      &--club {
+    &--theme {
+      &-club {
         > span {
           background: map-get($palette, 'club');
           -webkit-background-clip: text;

package/src/components/typography/h6/HeadingSix.vue

@@ -20,7 +20,7 @@ export default {
     classes() {
       return {
         'mg-h6': true,
-        'mg-h6-theme--club': this.theme === 'club',
+        'mg-h6--theme-club': this.theme === 'club',
       };
     }
   },
@@ -36,8 +36,8 @@ export default {
     font-size: 0.75rem;
     font-weight: 400;
 
-    &-theme {
-      &--club {
+    &--theme {
+      &-club {
         > span {
           background: map-get($palette, 'club');
           -webkit-background-clip: text;