@magicgol/polyjuice 0.29.1 → 0.30.0

package/package.json

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

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

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

@@ -1,4 +1,5 @@
 import MgHCard from './HCard.vue';
+import SvgIcon from "vue-svgicon";
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
@@ -17,6 +18,18 @@ export default {
           summary: 'html',
         },
       }
+    },
+    actions: {
+      description: "The actions Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
     }
   },
 };
@@ -24,8 +37,11 @@ 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: { 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>`,
+  components: { MgHCard, SvgIcon },
+  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({});
@@ -33,3 +49,10 @@ export const Default = Template.bind({});
 Default.args = {
   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

@@ -6,16 +6,14 @@
     <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,17 @@ 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 {
+    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.25);
+    height: 3.75rem;
   }
-}
 </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>