@magicgol/polyjuice 0.7.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.7.1",
+  "version": "0.8.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/index.js

@@ -1,4 +1,5 @@
 /* eslint-disable */
+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/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/Credit.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

@@ -26,4 +26,7 @@ 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 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/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>