@magicgol/polyjuice 0.33.7 → 0.34.1

package/.storybook/main.js

@@ -15,10 +15,6 @@ module.exports = {
       html, body {
         background: #F6F9FC;
       }
-      .mg-selection-box-content {
-        position: absolute !important;
-        padding: 16px !important;
-      }
     </style>
   `),
 }

package/package.json

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

package/src/components/components/badge/Badge.vue

@@ -25,6 +25,7 @@ export default {
   .mg-badge {
     background-color: #84485E;
     font-family: 'Ubuntu', sans-serif;
+    font-size: 1rem;
     font-weight: 500;
     height: 2rem;
     width: 2rem;

package/src/components/components/traffic-light/TrafficLight.stories.js

@@ -39,3 +39,10 @@ Default.args = {
   light: 'green',
   default: '300',
 };
+
+export const HTML = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+HTML.args = {
+  light: 'green',
+  default: '<div>Per Utente</div><div><span>91</span><span>/</span><span>50</span></div>',
+};

package/src/components/components/traffic-light/TrafficLight.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="d-inline-flex bg-white align-items-center px-3"
-    :class="classes"
+    :class="[classes, {'py-1': stretched}]"
   >
     <div><slot></slot></div>
   </div>
@@ -19,6 +19,11 @@ export default {
         return ['red', 'yellow', 'green'].indexOf(value) !== -1;
       },
     },
+
+    stretched: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -39,11 +44,7 @@ export default {
 
   .mg-traffic-light {
     border: 2px solid;
-    border-radius: 50px;
-    font-family: 'Ubuntu', sans-serif;
-    font-size: 1.3125rem;
-    font-weight: 500;
-    height: 2.25rem;
+    border-radius: 15px;
 
     &--error {
       border-color: map-get($palette, 'error');

package/src/components/modal/selection-box/SelectionBox.stories.js

@@ -20,6 +20,18 @@ export default {
           summary: 'html',
         },
       }
+    },
+    detail: {
+      description: "The detail Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
     }
   },
 };
@@ -30,6 +42,7 @@ const Template = (args, { argTypes }) => ({
   components: { MgSelectionBox, MgPrimaryButton, MgTertiaryButton },
   template: `<mg-selection-box v-bind="$props">
     <template v-if="${'default' in args}" v-slot>${args.default}</template>
+    <template v-if="${'detail' in args}" v-slot:detail>${args.detail}</template>
     <template v-slot:cancel>
       <mg-tertiary-button>Annulla</mg-tertiary-button>
     </template> 
@@ -42,7 +55,8 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
-  default: 'this is the content'
+  default: 'this is the content',
+  detail: 'this is the detail'
 };
 
 const PaymentTemplate = (args, { argTypes }) => ({

package/src/components/modal/selection-box/SelectionBox.vue

@@ -2,9 +2,15 @@
   <div
     :class="classes"
   >
-    <div class="mg-selection-box-content fixed-bottom p-2">
-      <div class="bg-white rounded w-100 h-100 p-2">
-        <div class="text-center text-uppercase"><slot></slot></div>
+    <div
+      class="mg-selection-box-curtain h-50 w-100 position-fixed"
+      @click="onClickOutside"
+    ></div>
+    <div class="mg-selection-box-content fixed-bottom px-3 py-2">
+      <div class="d-flex flex-column bg-white rounded w-100 h-100 px-3 py-2">
+        <div class="mg-selection-box-title text-uppercase text-center"><slot></slot></div>
+        <div><slot name="summary"></slot></div>
+        <div class="flex-fill" v-if="expanded"><slot name="detail"></slot></div>
         <div class="d-flex align-items-center mt-2">
           <div class="w-50 text-center">
             <slot name="cancel"></slot>
@@ -23,30 +29,75 @@
 export default {
   name: 'mg-selection-box',
 
+  props: {
+    expanded: {
+      type: Boolean,
+      default: false
+    }
+  },
+
   computed: {
     classes() {
       return {
         'mg-selection-box': true,
+        'mg-selection-box--expanded': this.expanded === true,
       };
-    },
+    }
+  },
+
+  watch: {
+    expanded (value) {
+      if (value) {
+        document.body.classList.add('overflow-hidden');
+      } else {
+        document.body.classList.remove('overflow-hidden');
+      }
+    }
   },
+
+  methods: {
+    onClickOutside () {
+      this.$emit('click-outside');
+    }
+  }
 };
 </script>
 
 <style lang="scss">
   .mg-selection-box {
+    &-curtain {
+      left: 0;
+      top: 0;
+    }
+
     &-shadow {
       height: 7.5rem;
     }
 
+    &-title {
+      font-size: 0.8125rem;
+      font-weight: 500;
+    }
+
     &-content {
       bottom: 0;
 
       > div {
         box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
         font-family: 'Ubuntu', sans-serif;
-        font-size: 0.8125rem;
-        font-weight: 500;
+      }
+    }
+
+    &--expanded {
+      background-color: rgba(0, 0, 0, 0.7);
+      height: 100%;
+      left: 0;
+      position: fixed;
+      top: 0;
+      width: 100%;
+
+      .mg-selection-box-content {
+        height: 50%;
       }
     }
   }