@magicgol/polyjuice 0.7.0 → 0.9.0

package/package.json

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

package/src/assets/palette.scss

@@ -1,5 +1,7 @@
 $palette: (
     'brand': #d81159,
+    'freemium' :#004781,
+    'coin': #ffcf73,
     'expertClub': #075169,
     'warning': #ff614c,
     'success': #349B50,

package/src/assets/svg/check-with-circle.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'check-with-circle': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 129 129',
+    data: '<g _fill="#349B50" fill-rule="nonzero"><path pid="0" d="M110.108 18.891C97.926 6.71 81.728 0 64.5 0 47.271 0 31.074 6.71 18.891 18.891 6.71 31.074 0 47.271 0 64.5c0 17.229 6.709 33.426 18.891 45.608C31.074 122.291 47.271 129 64.5 129c17.229 0 33.426-6.71 45.608-18.892C122.291 97.926 129 81.728 129 64.5c0-17.229-6.71-33.426-18.892-45.609zM64.5 121.441c-31.398 0-56.941-25.543-56.941-56.941 0-31.398 25.543-56.941 56.941-56.941 31.398 0 56.941 25.543 56.941 56.941 0 31.398-25.543 56.941-56.941 56.941z"/><path pid="1" d="M97.873 42.117a3.872 3.872 0 00-5.441 0L58.454 75.793 40.568 58.066a3.872 3.872 0 00-5.441 0 3.79 3.79 0 000 5.393l20.606 20.424A3.853 3.853 0 0058.454 85c.985 0 1.97-.372 2.72-1.117L97.874 47.51a3.79 3.79 0 000-5.393z"/></g>'
+  }
+})

package/src/assets/svg/index.js

@@ -1,3 +1,6 @@
 /* eslint-disable */
+require('./check-with-circle')
+require('./magic-coin')
+require('./soccer-ball')
 require('./star-c')
 require('./star-stroke-p')

package/src/assets/svg/magic-coin.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'magic-coin': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 18 18',
+    data: '<path pid="0" d="M9.257 7.467l3.508-3.365A.361.361 0 0113.017 4h.61c.206 0 .373.176.373.392v9.215a.403.403 0 01-.109.278.364.364 0 01-.264.115h-1.763a.384.384 0 01-.374-.393V9.756a.393.393 0 00-.222-.36.359.359 0 00-.402.07l-1.61 1.547a.36.36 0 01-.501 0L7.133 9.47a.359.359 0 00-.401-.068.393.393 0 00-.222.359v3.843a.384.384 0 01-.374.394H4.373a.364.364 0 01-.264-.116.403.403 0 01-.109-.278V4.392C4 4.176 4.167 4 4.373 4h.614c.093 0 .182.037.25.102l3.52 3.365a.36.36 0 00.5 0zM9 18A9 9 0 109 0a9 9 0 000 18z" _fill="#FFD166" fill-rule="nonzero"/>'
+  }
+})

package/src/assets/svg/soccer-ball.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'soccer-ball': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 480 480',
+    data: '<path pid="0" d="M240 0C107.453 0 0 107.453 0 240s107.453 240 240 240 240-107.453 240-240C479.852 107.516 372.484.148 240 0zm8.566 69.191L332 35.84a224.492 224.492 0 0127.414 14.777l.219.137a225.29 225.29 0 0124.695 18.11l.672.585a227.354 227.354 0 0110.223 9.262c.418.41.855.8 1.273 1.219a234.39 234.39 0 0110.09 10.484c.27.305.527.625.797.93 2.855 3.199 5.601 6.511 8.265 9.879.641.8 1.282 1.601 1.903 2.402 2.89 3.742 5.687 7.55 8.328 11.48l-16.633 70.704-81.832 27.28-78.828-63.073zm-186.125 34.48c.621-.8 1.254-1.6 1.895-2.398a224.935 224.935 0 018.168-9.777c.305-.336.586-.68.887-1.016A217.481 217.481 0 0183.44 80c.399-.39.797-.8 1.215-1.16a228.569 228.569 0 0110.137-9.207l.8-.672a226.15 226.15 0 0124.462-18l.312-.2A224.738 224.738 0 01147.617 36l83.817 33.191v80.801l-78.832 63.063-81.832-27.23-16.633-70.704a233.682 233.682 0 018.304-11.45zm-9.64 259.09a222.72 222.72 0 01-6.746-10.96l-.52-.899a210.277 210.277 0 01-6.055-11.293l-.066-.12a222.882 222.882 0 01-10.535-24.802v-.078c-1.422-4-2.719-8.097-3.918-12.218l-.434-1.52a220.618 220.618 0 01-2.984-11.742c-.078-.387-.176-.754-.254-1.137a222.66 222.66 0 01-4.227-27.097l48.84-58.606 81.266 27.086 23.586 94.336L132 375.273zm240.472 94.782c-4 .992-8.105 1.848-12.21 2.617-.575.113-1.16.207-1.735.313-3.496.625-7.031 1.16-10.574 1.597-.945.121-1.883.25-2.824.364-3.29.382-6.61.671-9.938.91-1.047.07-2.082.176-3.129.242-4.254.262-8.543.414-12.863.414-3.957 0-7.89-.105-11.8-.313-.473 0-.927-.078-1.4-.113-3.48-.199-6.945-.46-10.402-.797l-.398-.074a227.948 227.948 0 01-22.559-3.598l-47.32-74.09 38.145-50.863h111.468l38.77 51.2zM458.77 288c-.082.383-.176.754-.258 1.137a230.481 230.481 0 01-2.985 11.742l-.43 1.52a224.8 224.8 0 01-3.921 12.218v.078a222.149 222.149 0 01-10.535 24.801l-.067.121a221.793 221.793 0 01-6.054 11.293l-.52.899a198.32 198.32 0 01-6.734 10.945l-78.93 12.445-39.023-51.52 23.574-94.312 81.265-27.086 48.84 58.606A222.142 222.142 0 01458.77 288zm0 0"/>'
+  }
+})

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

@@ -6,11 +6,7 @@
     :disabled="disabled"
     @click="$emit('click')"
   >
-    <svgicon
-      name="star-c"
-      color="#fff"
-      style="height: 16px"
-    ></svgicon>
+    <svgicon name="star-c"></svgicon>
     <div class="ml-2">
       <slot></slot>
     </div>
@@ -58,6 +54,11 @@ export default {
     font-weight: 500;
     outline: none;
 
+    svg {
+      fill: #fff;
+      height: 1rem;
+    }
+
     &--disabled {
       opacity: 0.6 !important;
       cursor: not-allowed !important;

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

@@ -1,16 +1,13 @@
 <template>
   <button
-    class="d-block bg-white w-100 p-2 rounded text-uppercase text-center text-decoration-none"
+    class="d-block bg-white w-100 rounded text-uppercase text-center text-decoration-none"
     type="button"
     :class="classes"
     :disabled="disabled"
     @click="$emit('click')"
   >
-    <div class="d-inline-flex align-items-center">
-      <svgicon
-        name="star-stroke-p"
-        style="height: 20px"
-      ></svgicon>
+    <div class="d-flex justify-content-center align-items-center">
+      <svgicon name="star-stroke-p"></svgicon>
       <div class="ml-2"><slot></slot></div>
     </div>
   </button>
@@ -56,10 +53,12 @@ export default {
     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;
     }
 
     &--disabled {

package/src/components/form/{primary-button → button/primary-button}/PrimaryButton.vue

@@ -53,7 +53,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import '../../../assets/palette';
+  @import '../../../../assets/palette';
 
   .mg-primary-button {
     appearance: none;

package/src/components/form/{secondary-button → button/secondary-button}/SecondaryButton.vue

@@ -36,7 +36,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../assets/palette';
+@import '../../../../assets/palette';
 
 .mg-secondary-button {
   appearance: none;

package/src/components/form/{tertiary-button → button/tertiary-button}/TertiaryButton.vue

@@ -36,7 +36,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../assets/palette';
+@import '../../../../assets/palette';
 
 .mg-tertiary-button {
   color: map-get($palette, 'brand');

package/src/components/form/{toggle-button → button/toggle-button}/ToggleButton.vue

@@ -57,7 +57,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../assets/palette';
+@import '../../../../assets/palette';
 
 .mg-toggle-button {
   appearance: none;

package/src/components/form/checkbox/checkbox/Checkbox.stories.js

@@ -0,0 +1,51 @@
+import MgCheckbox from './Checkbox.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Checkbox/Checkbox',
+  component: MgCheckbox,
+  // 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: { MgCheckbox },
+  template: `<mg-checkbox @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-checkbox>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  disabled: false,
+  value: false,
+  default: 'checkbox'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  value: false,
+  default: 'checkbox'
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+  disabled: false,
+  value: true,
+  default: 'checkbox'
+};

package/src/components/form/checkbox/checkbox/Checkbox.vue

@@ -0,0 +1,99 @@
+<template>
+  <label
+    class="mg-checkbox m-0"
+    v-bind:class="classes"
+  >
+    <!-- HIDDEN CHECKBOX -->
+    <input
+      type="checkbox"
+      class="d-none"
+      v-bind:name="name"
+      v-on:change="$emit('input', $event.target.checked)"
+      v-bind:checked="value"
+      v-bind:disabled="disabled"
+    />
+    <!-- end of HIDDEN CHECKBOX -->
+    <!-- THE SQUARE -->
+    <span class="mg-checkbox-check align-middle d-inline-block position-relative"></span>
+    <!-- end of THE SQUARE -->
+    <!-- TEXT AS LABEL -->
+    <span class="align-middle">
+      <slot></slot>
+    </span>
+    <!-- end of TEXT AS LABEL -->
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'mg-checkbox',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    name: {
+      type: String
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-checkbox': true,
+        'mg-checkbox--disabled': this.disabled,
+      };
+    }
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../../assets/palette';
+
+  .mg-checkbox {
+    .mg-checkbox-check {
+      border: 2px solid map-get($palette, 'brand');
+      border-radius: 2px;
+      box-sizing: border-box;
+      height: 20px;
+      vertical-align: sub;
+      width: 20px;
+    }
+
+    input:checked {
+      + .mg-checkbox-check {
+        background-color: map-get($palette, 'brand');
+
+        &::after {
+          border-left: 2px solid #fff;
+          border-bottom: 2px solid #fff;
+          content: '';
+          height: 8px;
+          left: 50%;
+          margin-left: -7px;
+          position: absolute;
+          top: 2px;
+          transform: rotate(-45deg);
+          width: 14px;
+        }
+      }
+    }
+
+    &--disabled {
+      opacity: 0.6 !important;
+      cursor: not-allowed !important;
+    }
+  }
+</style>

package/src/components/form/checkbox/switch/Switch.stories.js

@@ -0,0 +1,39 @@
+import MgSwitch from './Switch.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Checkbox/Switch',
+  component: MgSwitch,
+  // 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: { MgSwitch },
+  template: `<mg-switch @input="$emit('input')" v-bind="$props"></mg-switch>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  value: false
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+  value: true
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  value: false
+};
+
+export const Blocked = Template.bind({});
+Blocked.args = {
+  value: true,
+  reversible: false
+};

package/src/components/form/checkbox/switch/Switch.vue

@@ -0,0 +1,167 @@
+<template>
+  <label
+    class="mg-switch"
+    v-bind:class="classes"
+  >
+    <input
+      type="checkbox"
+      v-bind:checked="value"
+      v-bind:disabled="disabled"
+      v-on:input="onInput"
+    >
+    <span class="mg-switch-slider"></span>
+    <span class="mg-switch-icon">
+      <svgicon
+        name="check-with-circle"
+      ></svgicon>
+    </span>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'mg-switch',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    reversible: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+  },
+
+  computed: {
+    checked() {
+      return this.value === true;
+    },
+    blocked() {
+      return this.checked && this.reversible === false;
+    },
+    classes() {
+      return {
+        'mg-switch': true,
+        'mg-switch--disabled': this.disabled,
+        'mg-switch--checked': this.checked,
+        'mg-switch--blocked': this.blocked
+      };
+    },
+  },
+
+  methods: {
+    onInput($event) {
+      if (!this.blocked) {
+        this.$emit('input', $event.target.checked);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../../assets/palette';
+
+  .mg-switch {
+    cursor: pointer;
+    display: inline-block;
+    height: 32px;
+    position: relative;
+    width: 60px;
+
+    input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    &-slider {
+      background-color: #ccc;
+      border-radius: 32px;
+      bottom: 0;
+      cursor: pointer;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transition: .4s;
+
+      &:before {
+        background-color: white;
+        border-radius: 50%;
+        bottom: 4px;
+        content: "";
+        height: 24px;
+        left: 4px;
+        position: absolute;
+        transition: .4s;
+        width: 24px;
+      }
+    }
+
+    &-icon {
+      display: none;
+      left: 50%;
+      top: 50%;
+      margin-top: -.6125rem;
+      margin-left: -.6125rem;
+      position: absolute;
+      width: 1.25rem;
+
+      svg {
+        fill: #fff;
+      }
+    }
+
+    &--checked {
+      .mg-switch-slider {
+        background-color: map-get($palette, 'brand') !important;
+
+        &:before {
+          transform: translateX(28px);
+        }
+      }
+    }
+
+    &--blocked {
+      .mg-switch-slider {
+        background-color: map-get($palette, 'success') !important;
+
+        &:before {
+          content: none;
+        }
+      }
+
+      .mg-switch-icon {
+        display: block !important;
+      }
+    }
+
+
+    &--disabled {
+      opacity: 0.6 !important;
+      cursor: not-allowed !important;
+    }
+  //
+
+  //
+  //  &--blocked {
+  //    .mg-switch-slider {
+  //      background-color: map-get($palette, 'success');
+  //
+  //      &:before {
+  //        content: none;
+  //      }
+  //    }
+  //
+  //    .mg-switch-check {
+  //      display: block !important;
+  //    }
+  //  }
+  }
+</style>

package/src/components/loader/soccer-ball/SoccerBall.stories.js

@@ -0,0 +1,19 @@
+import MgSoccerBall from './SoccerBall.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Loader/Soccer Ball',
+  component: MgSoccerBall,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/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: { MgSoccerBall },
+  template: `<mg-soccer-ball></mg-soccer-ball>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {};

package/src/components/loader/soccer-ball/SoccerBall.vue

@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="d-flex justify-content-center"
+    :class="classes"
+  >
+    <div>
+      <div class="d-inline-block">
+        <svgicon name="soccer-ball" class="h-100"></svgicon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-soccer-ball',
+
+  computed: {
+    classes() {
+      return {
+        'mg-soccer-ball': true,
+      };
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.mg-soccer-ball {
+  height: 75px;
+
+  > div {
+    animation: bounce 0.5s;
+    animation-direction: alternate;
+    animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
+    animation-iteration-count: infinite;
+
+    > div {
+      height: 40px;
+      animation: rotation 2s linear infinite;
+    }
+  }
+
+  svg {
+    height: 100%;
+  }
+}
+
+@keyframes rotation {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(359deg); }
+}
+
+@keyframes bounce {
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(0, 50px, 0); }
+}
+</style>

package/src/components/magic-coin/button/MagicCoinButton.stories.js

@@ -0,0 +1,44 @@
+import MgMagicCoinButton from './MagicCoinButton.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'MagicCoin/Button/Magic Coin Button',
+  component: MgMagicCoinButton,
+  // 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: { MgMagicCoinButton },
+  template: `<mg-magic-coin-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-magic-coin-button>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  disabled: false,
+  value: 100,
+  default: 'magic coin button'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  value: 100,
+  default: 'magic coin button'
+};

package/src/components/magic-coin/button/MagicCoinButton.vue

@@ -0,0 +1,81 @@
+<template>
+  <button
+    class="align-items-center d-flex w-100 justify-content-center rounded py-2 px-3 border-0 text-white text-uppercase"
+    style="line-height: 1"
+    :class="classes"
+    :type="type"
+    :disabled="disabled"
+    @click="onClick"
+  >
+    <span
+      class="pr-3"
+    ><slot></slot></span>
+    <mg-credits :value="value"></mg-credits>
+  </button>
+</template>
+
+<script>
+import MgCredits from "../credits/Credits";
+
+export default {
+  name: 'mg-magic-coin-button',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: 'button',
+      validator: function (value) {
+        return ['button', 'submit'].indexOf(value) !== -1;
+      },
+    },
+    value: {
+      type: Number,
+      validator: function (value) {
+        return value > 0;
+      },
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-magic-coin-button': true,
+        'mg-magic-coin-button--disabled': this.disabled,
+      };
+    }
+  },
+
+  components: {
+    MgCredits,
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/palette';
+
+.mg-magic-coin-button {
+  appearance: none;
+  background-color: map-get($palette, 'freemium');
+  cursor: pointer;
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  outline: none;
+
+  &--disabled {
+    opacity: 0.6 !important;
+    cursor: not-allowed !important;
+  }
+}
+</style>

package/src/components/magic-coin/credits/Credits.stories.js

@@ -0,0 +1,21 @@
+import MgCredits from './Credits.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'MagicCoin/Credits/Credits',
+  component: MgCredits,
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgCredits },
+  template: `<mg-credits @click="$emit('click')" v-bind="$props"></mg-credits>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  disabled: false,
+  value: 100,
+};

package/src/components/magic-coin/credits/Credits.vue

@@ -0,0 +1,45 @@
+<template>
+  <span
+    class="d-inline-flex align-items-center"
+    :class="classes"
+  >
+    <span
+      class="pr-1"
+      style="line-height: 1"
+    >{{ value }}</span>
+    <svgicon
+      name="magic-coin"
+    ></svgicon>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'mg-credits',
+
+  props: {
+    value: {
+      type: Number
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-credits': true,
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/palette';
+
+.mg-credits {
+  svg {
+    fill: map-get($palette, 'coin');
+    height: 1.125rem;
+  }
+}
+</style>

package/src/documentation/Brand.stories.mdx

@@ -7,6 +7,14 @@ import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
         title="Brand Color"
         colors={{'Razzmatazz': '#d81159'}}
     />
+    <ColorItem
+        title="Freemium"
+        colors={{'Congress Blue': '#004781'}}
+    />
+    <ColorItem
+        title="Coin"
+        colors={{'Goldenrod': '#ffcf73'}}
+    />
     <ColorItem
         title="Expert Club Color"
         colors={{'Teal Blue': '#075169'}}

package/src/main.js

@@ -22,8 +22,11 @@ export MgHCard from './components/card/horizontal-card/HCard';
 export MgVCard from './components/card/vertical-card/VCard';
 export MgPrimaryClubButton from './components/club/button/primary-club-button/PrimaryClubButton';
 export MgSecondaryClubButton from './components/club/button/secondary-club-button/SecondaryClubButton';
-export MgPrimaryButton from './components/form/primary-button/PrimaryButton';
-export MgSecondaryButton from './components/form/secondary-button/SecondaryButton';
-export MgTertiaryButton from './components/form/tertiary-button/TertiaryButton';
-export MgToggleButton from './components/form/toggle-button/ToggleButton';
+export MgPrimaryButton from './components/form/button/primary-button/PrimaryButton';
+export MgSecondaryButton from './components/form/button/secondary-button/SecondaryButton';
+export MgTertiaryButton from './components/form/button/tertiary-button/TertiaryButton';
+export MgToggleButton from './components/form/button/toggle-button/ToggleButton';
+export MgMagicCoinButton from './components/magic-coin/button/MagicCoinButton';
+export MgCredits from './components/magic-coin/credits/Credits';
+export MgSoccerBall from './components/loader/soccer-ball/SoccerBall';
 export MgTabButton from './components/navigation/tab-button/TabButton';

package/src/svg/check-with-circle.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 129 129" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>verified</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Lega" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Lega---Nuova-Lega---Creata" transform="translate(-123.000000, -104.000000)" fill="#349B50" fill-rule="nonzero">
+            <g id="verified" transform="translate(123.000000, 104.000000)">
+                <path d="M110.108303,18.8914453 C97.9258652,6.70925977 81.7285547,0 64.5,0 C47.2711934,0 31.0736309,6.70925977 18.8914453,18.8914453 C6.70900781,31.0738828 0,47.2714453 0,64.5 C0,81.7285547 6.70900781,97.9258652 18.8914453,110.108303 C31.0738828,122.29074 47.2711934,129 64.5,129 C81.7285547,129 97.9258652,122.29074 110.108303,110.108303 C122.29074,97.9258652 129,81.7285547 129,64.5 C129,47.2714453 122.29074,31.0741348 110.108303,18.8914453 Z M64.5,121.441406 C33.1023574,121.441406 7.55859375,95.8976426 7.55859375,64.5 C7.55859375,33.1023574 33.1023574,7.55859375 64.5,7.55859375 C95.8976426,7.55859375 121.441406,33.1023574 121.441406,64.5 C121.441406,95.8976426 95.8976426,121.441406 64.5,121.441406 Z" id="Shape"></path>
+                <path d="M97.8730081,42.1165964 C96.3706087,40.6277588 93.9342438,40.6277588 92.4318444,42.1168506 L58.4543268,75.7934108 L40.5684121,58.0659215 C39.0660128,56.5768297 36.6296478,56.5768297 35.1269919,58.0659215 C33.624336,59.5550133 33.624336,61.969798 35.1269919,63.4591441 L55.7334884,83.8831176 C56.4848164,84.6277906 57.4695716,85 58.4540703,85 C59.438569,85 60.4235807,84.6275364 61.1746521,83.8831176 L97.8730081,47.509819 C99.375664,46.0207272 99.375664,43.6059425 97.8730081,42.1165964 Z" id="Path"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/svg/magic-coin.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Shape Copy 2</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Email" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Newsletter" transform="translate(-982.000000, -162.000000)" fill="#FFD166" fill-rule="nonzero">
+            <path d="M991.257273,169.466549 L994.765327,166.102441 C994.833941,166.036415 994.923599,165.999861 995.016589,166 L995.627312,166 C995.833141,166 996,166.175531 996,166.392058 L996,175.606678 C996.000318,175.710877 995.961194,175.810923 995.891267,175.884722 C995.82134,175.958521 995.726363,176 995.627312,176 L993.863668,176 C993.657176,176 993.48978,175.823904 993.48978,175.606678 L993.48978,171.75566 C993.489803,171.600319 993.40264,171.459614 993.267542,171.396906 C993.132443,171.334197 992.974891,171.361313 992.865832,171.466043 L991.256071,173.012774 C991.113931,173.148674 990.896889,173.148674 990.754749,173.012774 L989.132965,171.471102 C989.023678,171.367067 988.866374,171.340562 988.731665,171.403483 C988.596957,171.466405 988.510154,171.606932 988.51022,171.761983 L988.51022,175.605413 C988.51022,175.822639 988.342824,175.998735 988.136332,175.998735 L986.372688,175.998735 C986.273637,175.998736 986.17866,175.957256 986.108733,175.883457 C986.038806,175.809659 985.999682,175.709612 986,175.605413 L986,166.392058 C986,166.175531 986.166859,166 986.372688,166 L986.987018,166 C987.079593,166.000177 987.16877,166.03671 987.237078,166.102441 L990.757153,169.466549 C990.899327,169.6011 991.115099,169.6011 991.257273,169.466549 L991.257273,169.466549 Z M991,180 C995.970563,180 1000,175.970563 1000,171 C1000,166.029437 995.970563,162 991,162 C986.029437,162 982,166.029437 982,171 C982,175.970563 986.029437,180 991,180 Z" id="Shape-Copy-2"></path>
+        </g>
+    </g>
+</svg>

package/src/svg/soccer-ball.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg"><path d="m240 0c-132.546875 0-240 107.453125-240 240s107.453125 240 240 240 240-107.453125 240-240c-.148438-132.484375-107.515625-239.851562-240-240zm8.566406 69.191406 83.433594-33.351562c9.46875 4.285156 18.628906 9.222656 27.414062 14.777344l.21875.136718c8.632813 5.46875 16.882813 11.519532 24.695313 18.109375l.671875.585938c3.503906 2.984375 6.910156 6.074219 10.222656 9.261719.417969.410156.855469.800781 1.273438 1.21875 3.472656 3.390624 6.835937 6.886718 10.089844 10.484374.269531.304688.527343.625.796874.929688 2.855469 3.199219 5.601563 6.511719 8.265626 9.878906.640624.800782 1.28125 1.601563 1.902343 2.402344 2.890625 3.742188 5.6875 7.550781 8.328125 11.480469l-16.632812 70.703125-81.832032 27.28125-78.828124-63.074219zm-186.125 34.480469c.621094-.800781 1.253906-1.601563 1.894532-2.398437 2.632812-3.339844 5.355468-6.597657 8.167968-9.777344.304688-.335938.585938-.679688.886719-1.015625 3.234375-3.605469 6.582031-7.097657 10.050781-10.480469.398438-.390625.796875-.800781 1.214844-1.160156 3.285156-3.167969 6.664062-6.238282 10.136719-9.207032l.800781-.671874c7.742188-6.542969 15.914062-12.554688 24.460938-18l.3125-.199219c8.734374-5.542969 17.835937-10.472657 27.25-14.761719l83.816406 33.191406v80.800782l-78.832032 63.0625-81.832031-27.230469-16.632812-70.703125c2.664062-3.921875 5.429687-7.722656 8.304687-11.449219zm-9.640625 259.089844c-2.351562-3.585938-4.601562-7.238281-6.746093-10.960938l-.519532-.898437c-2.132812-3.703125-4.152344-7.46875-6.054687-11.292969l-.066407-.121094c-4.007812-8.046875-7.527343-16.328125-10.535156-24.800781v-.078125c-1.421875-4-2.71875-8.097656-3.917968-12.21875l-.433594-1.519531c-1.097656-3.871094-2.09375-7.785156-2.984375-11.742188-.078125-.386718-.175781-.753906-.253907-1.136718-1.964843-8.9375-3.375-17.984376-4.226562-27.097657l48.839844-58.605469 81.265625 27.085938 23.585937 94.335938-38.753906 51.5625zm240.472657 94.78125c-4 .992187-8.105469 1.847656-12.210938 2.617187-.574219.113282-1.160156.207032-1.734375.3125-3.496094.625-7.03125 1.160156-10.574219 1.597656-.945312.121094-1.882812.25-2.824218.363282-3.289063.382812-6.609376.671875-9.9375.910156-1.046876.070312-2.082032.175781-3.128907.242188-4.253906.261718-8.542969.414062-12.863281.414062-3.957031 0-7.890625-.105469-11.800781-.3125-.472657 0-.925781-.078125-1.398438-.113281-3.480469-.199219-6.945312-.460938-10.402343-.796875l-.398438-.074219c-7.574219-.820313-15.105469-2.023437-22.558594-3.597656l-47.320312-74.089844 38.144531-50.863281h111.46875l38.769531 51.199218zm165.496093-169.542969c-.082031.382812-.175781.753906-.257812 1.136719-.894531 3.953125-1.890625 7.867187-2.984375 11.742187l-.429688 1.519532c-1.203125 4.121093-2.496094 8.203124-3.921875 12.21875v.078124c-3.007812 8.472657-6.523437 16.753907-10.535156 24.800782l-.066406.121094c-1.914063 3.828124-3.929688 7.59375-6.054688 11.292968l-.519531.898438c-2.132812 3.734375-4.378906 7.378906-6.734375 10.945312l-78.929687 12.445313-39.023438-51.519531 23.574219-94.3125 81.265625-27.085938 48.839844 58.605469c-.847657 9.117187-2.257813 18.171875-4.222657 27.113281zm0 0"/></svg>