@magicgol/polyjuice 0.18.2 → 0.19.1

package/package.json

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

package/src/assets/svg/index.js

@@ -6,6 +6,7 @@ require('./hand-down')
 require('./hand-up')
 require('./magic-coin')
 require('./message')
+require('./plus')
 require('./soccer-ball')
 require('./star-c')
 require('./star-stroke-p')

package/src/assets/svg/plus.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'plus': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    data: '<path pid="0" d="M15 7H9V1a1 1 0 00-2 0v6H1a1 1 0 000 2h6v6a1 1 0 102 0V9h6a1 1 0 100-2z" _fill="#D81159"/>'
+  }
+})

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

@@ -54,18 +54,13 @@ export default {
 @import '../../../assets/palette';
 
 .mg-v-card {
+  background: white;
   box-shadow: 0 8px 22px 0 rgba(0, 0, 0, 0.3);
 
-  &-content {
-    background: white;
-  }
-
   &--theme {
     &-club {
-      & .mg-v-card-body {
-        background: linear-gradient(90deg, #D1EFFF 0%, #DDDAFC 99.65%) !important;
-        color: #777;
-      }
+      background: linear-gradient(90deg, #D1EFFF 0%, #DDDAFC 99.65%) !important;
+      color: #777;
     }
   }
 

package/src/components/footballer/horizontal-placeholder/HPlaceholder.vue

@@ -3,7 +3,12 @@
     class="d-flex align-items-center rounded px-3"
     v-bind:class="classes"
   >
-    <div class="flex-fill"><slot></slot></div>
+    <div class="flex-fill">
+      <div class="d-flex align-items-center">
+        <div class="flex-fill"><slot></slot></div>
+        <div><svgicon name="plus"></svgicon></div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -51,6 +56,11 @@ export default {
   font-weight: 500;
   height: 3.5rem;
 
+  svg {
+    fill: map-get($palette, 'brand');
+    width: 1rem;
+  }
+
   &--ownership {
     &-owned {
       border-color: rgba(map-get($palette, 'owned'), 0.5);

package/src/components/icon/badge/IconBadge.vue

@@ -1,7 +1,8 @@
 <template>
   <div
     class="d-inline-flex rounded-circle align-items-center justify-content-center"
-    v-bind:class="classes"
+    :class="classes"
+    @click="onClick"
   >
     <svgicon
       :name="icon"
@@ -51,6 +52,12 @@ export default {
       };
     },
   },
+
+  methods: {
+    onClick () {
+      this.$emit('click');
+    }
+  }
 };
 </script>
 

package/src/components/typography/link/Link.stories.js

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

package/src/components/typography/link/Link.vue

@@ -0,0 +1,51 @@
+<template>
+  <span
+    :class="classes"
+    @click="onClick"
+  ><slot></slot></span>
+</template>
+
+<script>
+export default {
+  name: 'mg-link',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-link': true,
+        'mg-link--disabled': this.disabled === true,
+      };
+    }
+  },
+
+  methods: {
+    onClick () {
+      if (!this.disabled) {
+        this.$emit('click');
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-link {
+    color: map-get($palette, 'brand');
+    cursor: pointer;
+    font-weight: 400;
+
+    &--disabled {
+      opacity: 0.6 !important;
+      cursor: not-allowed !important;
+    }
+  }
+</style>

package/src/documentation/Typography.stories.mdx

@@ -1,6 +1,6 @@
 import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
 
-<Meta title="Colors/Brand" />
+<Meta title="Colors/Typography" />
 
 <ColorPalette>
     <ColorItem

package/src/svg/plus.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 7H9V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V7H1C0.734784 7 0.48043 7.10536 0.292893 7.29289C0.105357 7.48043 0 7.73478 0 8C0 8.26522 0.105357 8.51957 0.292893 8.70711C0.48043 8.89464 0.734784 9 1 9H7V15C7 15.2652 7.10536 15.5196 7.29289 15.7071C7.48043 15.8946 7.73478 16 8 16C8.26522 16 8.51957 15.8946 8.70711 15.7071C8.89464 15.5196 9 15.2652 9 15V9H15C15.2652 9 15.5196 8.89464 15.7071 8.70711C15.8946 8.51957 16 8.26522 16 8C16 7.73478 15.8946 7.48043 15.7071 7.29289C15.5196 7.10536 15.2652 7 15 7Z" fill="#D81159"/>
+</svg>