@magicgol/polyjuice 0.29.1 → 0.32.0

package/package.json

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

package/src/assets/svg/arrow-down.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'arrow-down': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 10 8',
+    data: '<path pid="0" d="M8.807 3.527a.667.667 0 00-.947 0l-2.193 2.2V.667a.667.667 0 10-1.334 0v5.06l-2.193-2.2a.67.67 0 00-.947.946l3.334 3.334c.063.06.138.108.22.14a.627.627 0 00.506 0 .667.667 0 00.22-.14l3.334-3.334a.667.667 0 000-.946z" _fill="#000"/>'
+  }
+})

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

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'circle-with-minus': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 18 18',
+    data: '<path pid="0" d="M9 0a9 9 0 100 18A9 9 0 009 0zm0 16.2A7.2 7.2 0 119 1.8a7.2 7.2 0 010 14.4zm3.6-8.1H5.4a.9.9 0 000 1.8h7.2a.9.9 0 000-1.8z" _fill="#D81159"/>'
+  }
+})

package/src/assets/svg/index.js

@@ -1,5 +1,7 @@
 /* eslint-disable */
+require('./arrow-down')
 require('./check-with-circle')
+require('./circle-with-minus')
 require('./facebook')
 require('./funnel-full')
 require('./funnel')

package/src/components/card/horizontal-card/HCard.stories.js

@@ -17,6 +17,18 @@ export default {
           summary: 'html',
         },
       }
+    },
+    actions: {
+      description: "The actions Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
     }
   },
 };
@@ -25,11 +37,21 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { MgHCard },
-  template: `<mg-h-card @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-h-card>`,
+  template: `<mg-h-card @click="$emit('click')" v-bind="$props">
+    <template v-if="${'default' in args}" v-slot>${args.default}</template>
+    <template v-if="${'actions' in args}" v-slot:actions>${args.actions}</template>
+  </mg-h-card>`,
 });
 
 export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
-  default: '<div>This is a vertical card.</div><div>What do you think about?</div>'
+  default: '<div>This is a vertical card.</div><div>What do you think about?</div>',
+};
+
+export const Actions = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Actions.args = {
+  default: '<div>This is a vertical card.</div><div>What do you think about?</div>',
+  actions: '<div>+</div>',
 };

package/src/components/card/horizontal-card/HCard.vue

@@ -1,21 +1,19 @@
 <template>
   <div
-    class="d-flex justify-content-between align-items-center rounded px-3 bg-white"
+    class="d-flex text-truncate justify-content-between align-items-center rounded px-3"
     v-bind:class="classes"
   >
     <div
       class="flex-fill"
     ><slot></slot></div>
-    <!-- ARROW -->
+    <!-- ACTIONS -->
     <div
+      v-if="actionsSlotVisibility"
       class="pl-3"
     >
-      <font-awesome-icon
-        icon="chevron-right"
-        class="mg-icon"
-      />
+      <slot name="actions"></slot>
     </div>
-    <!-- end of ARROW -->
+    <!-- end of ACTIONS -->
   </div>
 </template>
 
@@ -28,21 +26,18 @@ export default {
       return {
         'mg-h-card': true,
       };
+    },
+    actionsSlotVisibility() {
+      return 'actions' in this.$slots && !!this.$slots.actions;
     }
   },
 };
 </script>
 
 <style lang="scss">
-@import '../../../assets/palette';
-
-.mg-h-card {
-  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.25);
-  height: 3.75rem;
-
-  .mg-icon {
-    color: map-get($palette, 'brand');
-    cursor: pointer;
+  .mg-h-card {
+    background: #fff;
+    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.25);
+    height: 3.75rem;
   }
-}
 </style>

package/src/components/footballer/horizontal-footballer/HFootballer.vue

@@ -25,7 +25,7 @@
       <div
         v-if="slotVisibility"
         class="mg-h-footballer-subtext text-uppercase"
-      ><span v-if="!isLarge" class="mx-2">-</span><slot></slot></div>
+      ><span v-if="!isLarge" class="mx-1">-</span><slot></slot></div>
     </div>
     <!-- end of FOOTBALLER NAME -->
     <!-- ROLE BADGE -->
@@ -132,6 +132,7 @@ export default {
     }
 
     &-subtext {
+      color: #979797;
       font-size: 0.875rem;
     }
 

package/src/components/footballer/horizontal-footballer-card/HFootballerCard.stories.js

@@ -0,0 +1,75 @@
+import MgHFootballerCard from './HFootballerCard.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Footballer/HFootballerCard',
+  component: MgHFootballerCard,
+  // 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',
+        },
+      }
+    },
+    actions: {
+      description: "The actions 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: { MgHFootballerCard },
+  template: `<mg-h-footballer-card @click="$emit('click')" v-bind="$props">
+    <template v-if="${'default' in args}" v-slot>${args.default}</template>
+    <template v-if="${'actions' in args}" v-slot:actions>${args.actions}</template>
+  </mg-h-footballer-card>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  firstname: 'P',
+  lastname: 'Dybala',
+  role: 'A',
+  default: '<span><b>MIL</b></span> - <span>JUV</span>',
+  pressed: false
+};
+
+export const Actions = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Actions.args = {
+  firstname: 'P',
+  lastname: 'Dybala',
+  role: 'A',
+  default: '<span><b>MIL</b></span> - <span>JUV</span>',
+  actions: '<div>+</div>',
+  pressed: false
+};
+
+export const Pressed = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Pressed.args = {
+  firstname: 'P',
+  lastname: 'Dybala',
+  role: 'A',
+  default: '<span><b>MIL</b></span> - <span>JUV</span>',
+  pressed: true
+};

package/src/components/footballer/horizontal-footballer-card/HFootballerCard.vue

@@ -0,0 +1,74 @@
+<template>
+  <mg-h-card
+    :class="classes"
+  >
+    <template v-slot:default>
+      <mg-h-footballer
+        size="large"
+        :firstname="firstname"
+        :lastname="lastname"
+        :role="role"
+      ><slot></slot></mg-h-footballer>
+    </template>
+    <template v-slot:actions><slot name="actions"></slot></template>
+  </mg-h-card>
+</template>
+
+<script>
+import MgHFootballer from "../horizontal-footballer/HFootballer";
+import MgHCard from "../../card/horizontal-card/HCard";
+
+export default {
+  name: 'mg-h-footballer-card',
+
+  props: {
+    firstname: {
+      type: String,
+      default: null
+    },
+    lastname: {
+      type: String,
+      default: null
+    },
+    role: {
+      type: String,
+      default: null,
+      validator: function (value) {
+        return ['P', 'D', 'C', 'A'].indexOf(value) !== -1;
+      },
+    },
+    pressed: {
+      props: {
+        type: Boolean,
+        default: false
+      }
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-h-footballer-card': true,
+        'mg-h-footballer-card--pressed': this.pressed === true,
+      };
+    },
+    actionsSlotVisibility() {
+      return 'actions' in this.$slots && !!this.$slots.actions;
+    }
+  },
+
+  components: {
+    MgHFootballer,
+    MgHCard,
+  },
+};
+</script>
+
+<style lang="scss">
+  .mg-h-footballer-card {
+    &--pressed {
+      background: #daf0d9 !important;
+      box-shadow: inset 0 4px 9px rgba(0, 0, 0, 0.1) !important;
+    }
+  }
+</style>

package/src/components/form/advanced/{filter/Filter.stories.js → filter-button/FilterButton.stories.js}

@@ -1,9 +1,9 @@
-import MgFilter from './Filter.vue';
+import MgFilterButton from './FilterButton.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Form/Advanced/Filter',
-  component: MgFilter,
+  title: 'Form/Advanced/FilterButton',
+  component: MgFilterButton,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
   },
@@ -12,8 +12,8 @@ export default {
 // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { MgFilter },
-  template: `<mg-filter @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-filter>`,
+  components: { MgFilterButton },
+  template: `<mg-filter-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-filter-button>`,
 });
 
 export const Default = Template.bind({});
@@ -21,16 +21,3 @@ export const Default = Template.bind({});
 Default.args = {
   default: 'test'
 };
-//
-// export const Disabled = Template.bind({});
-// Disabled.args = {
-//   disabled: true,
-//   value: 'given input',
-// };
-//
-// export const Error = Template.bind({});
-// Error.args = {
-//   disabled: false,
-//   value: 'given input',
-//   error: true
-// };

package/src/components/form/advanced/{filter/Filter.vue → filter-button/FilterButton.vue}

@@ -20,7 +20,7 @@
 import MgTertiaryButton from "../../button/tertiary-button/TertiaryButton";
 
 export default {
-  name: 'mg-filter',
+  name: 'mg-filter-button',
 
   props: {
     enabledFiltersCount: {
@@ -32,7 +32,7 @@ export default {
   computed: {
     classes() {
       return {
-        'mg-filter': true,
+        'mg-filter-button': true,
       };
     },
 
@@ -56,7 +56,7 @@ export default {
 <style lang="scss">
   @import '../../../../assets/palette';
 
-  .mg-filter {
+  .mg-filter-button {
     svg {
       fill: map-get($palette, 'brand');
       width: 1.25rem;

package/src/components/form/advanced/remove-button/RemoveButton.stories.js

@@ -0,0 +1,22 @@
+import MgRemoveButton from './RemoveButton.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Advanced/RemoveButton',
+  component: MgRemoveButton,
+  // 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: { MgRemoveButton },
+  template: `<mg-remove-button @click="$emit('click')" v-bind="$props"></mg-remove-button>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+};

package/src/components/form/advanced/remove-button/RemoveButton.vue

@@ -0,0 +1,45 @@
+<template>
+  <mg-tertiary-button
+    @click="onClick"
+    :class="classes"
+  >
+    <svgicon name="circle-with-minus"></svgicon>
+  </mg-tertiary-button>
+</template>
+
+<script>
+import MgTertiaryButton from "../../button/tertiary-button/TertiaryButton";
+
+export default {
+  name: 'mg-remove-button',
+
+  computed: {
+    classes() {
+      return {
+        'mg-remove-button': true,
+      };
+    }
+  },
+
+  components: {
+    MgTertiaryButton,
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+  @import '../../../../assets/palette';
+
+  .mg-remove-button {
+    svg {
+      fill: map-get($palette, 'brand');
+      width: 1.125rem;
+    }
+  }
+</style>

package/src/components/list/head/ListHead.stories.js

@@ -41,3 +41,10 @@ export const Default = Template.bind({});
 Default.args = {
   default: 'this is the list head'
 };
+
+export const Active = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Active.args = {
+  default: 'this is the list head',
+  active: true
+};

package/src/components/list/head/ListHead.vue

@@ -1,18 +1,33 @@
 <template>
   <div
-    class="text-uppercase pb-2 px-2"
+    class="d-flex align-items-center text-uppercase pb-2 px-2"
     :class="classes"
-  ><slot></slot></div>
+  >
+    <div><slot></slot></div>
+    <svgicon
+      v-if="active"
+      name="arrow-down"
+      class="ml-2"
+    ></svgicon>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'mg-list-head',
 
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+
   computed: {
     classes() {
       return {
         'mg-list-head': true,
+        'mg-list-head--active': this.active === true,
       };
     },
     footerVisibility() {
@@ -31,5 +46,18 @@ export default {
   font-family: 'Ubuntu', sans-serif;
   font-size: 0.75rem;
   font-weight: 500;
+
+  svg {
+    fill: #777;
+    height: 0.5rem;
+  }
+
+  &--active {
+    color: map-get($palette, 'text') !important;
+
+    svg {
+      fill: map-get($palette, 'text') !important;
+    }
+  }
 }
 </style>

package/src/svg/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.80666 3.52667C8.74469 3.46418 8.67095 3.41459 8.58971 3.38074C8.50847 3.34689 8.42134 3.32947 8.33333 3.32947C8.24532 3.32947 8.15818 3.34689 8.07694 3.38074C7.99571 3.41459 7.92197 3.46418 7.86 3.52667L5.66666 5.72667V0.666667C5.66666 0.489856 5.59643 0.320287 5.4714 0.195262C5.34638 0.070238 5.17681 0 5 0C4.82319 0 4.65362 0.070238 4.52859 0.195262C4.40357 0.320287 4.33333 0.489856 4.33333 0.666667V5.72667L2.14 3.52667C2.01446 3.40113 1.8442 3.33061 1.66666 3.33061C1.48913 3.33061 1.31887 3.40113 1.19333 3.52667C1.06779 3.6522 0.997269 3.82247 0.997269 4C0.997269 4.17753 1.06779 4.3478 1.19333 4.47333L4.52666 7.80667C4.59007 7.86736 4.66483 7.91494 4.74666 7.94667C4.82646 7.98194 4.91275 8.00016 5 8.00016C5.08724 8.00016 5.17353 7.98194 5.25333 7.94667C5.33516 7.91494 5.40993 7.86736 5.47333 7.80667L8.80666 4.47333C8.86915 4.41136 8.91874 4.33762 8.95259 4.25638C8.98644 4.17515 9.00386 4.08801 9.00386 4C9.00386 3.91199 8.98644 3.82486 8.95259 3.74362C8.91874 3.66238 8.86915 3.58864 8.80666 3.52667Z" fill="black"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0C7.21997 0 5.47991 0.527841 3.99987 1.51677C2.51983 2.50571 1.36628 3.91131 0.685088 5.55585C0.00389956 7.20038 -0.17433 9.00998 0.172937 10.7558C0.520203 12.5016 1.37737 14.1053 2.63604 15.364C3.89472 16.6226 5.49836 17.4798 7.24419 17.8271C8.99002 18.1743 10.7996 17.9961 12.4442 17.3149C14.0887 16.6337 15.4943 15.4802 16.4832 14.0001C17.4722 12.5201 18 10.78 18 9C18 7.8181 17.7672 6.64778 17.3149 5.55585C16.8626 4.46392 16.1997 3.47177 15.364 2.63604C14.5282 1.80031 13.5361 1.13738 12.4442 0.685084C11.3522 0.232792 10.1819 0 9 0ZM9 16.2C7.57598 16.2 6.18393 15.7777 4.9999 14.9866C3.81586 14.1954 2.89302 13.0709 2.34807 11.7553C1.80312 10.4397 1.66054 8.99201 1.93835 7.59535C2.21616 6.19868 2.9019 4.91577 3.90883 3.90883C4.91577 2.90189 6.19869 2.21616 7.59535 1.93835C8.99202 1.66053 10.4397 1.80312 11.7553 2.34807C13.071 2.89302 14.1954 3.81586 14.9866 4.99989C15.7777 6.18393 16.2 7.57597 16.2 9C16.2 10.9096 15.4414 12.7409 14.0912 14.0912C12.7409 15.4414 10.9096 16.2 9 16.2ZM12.6 8.1H5.4C5.16131 8.1 4.93239 8.19482 4.76361 8.3636C4.59482 8.53238 4.5 8.7613 4.5 9C4.5 9.23869 4.59482 9.46761 4.76361 9.63639C4.93239 9.80518 5.16131 9.9 5.4 9.9H12.6C12.8387 9.9 13.0676 9.80518 13.2364 9.63639C13.4052 9.46761 13.5 9.23869 13.5 9C13.5 8.7613 13.4052 8.53238 13.2364 8.3636C13.0676 8.19482 12.8387 8.1 12.6 8.1Z" fill="#D81159"/>
+</svg>