@weni/unnnic-system 2.0.11 → 2.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/Drawer/Drawer.vue

@@ -1,10 +1,22 @@
 <template>
-  <aside v-if="modelValue" class="unnnic-drawer">
-    <section class="unnnic-drawer__overlay"></section>
-    <transition appear name="drawer">
+  <aside
+    v-if="modelValue"
+    class="unnnic-drawer"
+  >
+    <section
+      class="unnnic-drawer__overlay"
+      @click.stop="close"
+    />
+    <transition
+      appear
+      name="drawer"
+    >
       <section
         v-if="showDrawer"
-        :class="['unnnic-drawer__container', wide && 'unnnic-drawer__container--wide']"
+        :class="[
+          'unnnic-drawer__container',
+          wide && 'unnnic-drawer__container--wide',
+        ]"
       >
         <header class="unnnic-drawer__header">
           <section class="unnnic-drawer__title-container">
@@ -27,17 +39,24 @@
         <section class="unnnic-drawer__content">
           <slot name="content"></slot>
         </section>
-        <footer v-if="showFooter" class="unnnic-drawer__footer">
+        <footer
+          v-if="showFooter"
+          class="unnnic-drawer__footer"
+        >
           <unnnic-button
             v-if="secondaryButtonText"
             size="large"
             type="tertiary"
+            :disabled="disabledSecondaryButton"
+            :loading="loadingSecondaryButton"
             :text="secondaryButtonText"
             @click="$emit('secondaryButtonClick')"
           />
           <unnnic-button
             v-if="primaryButtonText"
             size="large"
+            :disabled="disabledPrimaryButton"
+            :loading="loadingPrimaryButton"
             :type="primaryButtonType"
             :text="primaryButtonText"
             @click="$emit('primaryButtonClick')"
@@ -72,6 +91,22 @@ export default {
     description: {
       type: String,
     },
+    disabledPrimaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    disabledSecondaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    loadingPrimaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    loadingSecondaryButton: {
+      type: Boolean,
+      default: false,
+    },
     primaryButtonText: {
       type: String,
     },
@@ -93,8 +128,8 @@ export default {
   },
   computed: {
     showFooter() {
-      return !!(this.primaryButtonText || this.secondaryButtonText)
-    }
+      return !!(this.primaryButtonText || this.secondaryButtonText);
+    },
   },
   methods: {
     close() {
@@ -141,8 +176,8 @@ export default {
 
 .drawer-leave-active,
 .drawer-leave-to {
-   display: none;
-   animation: drawerClose 200ms ease-in;
+  display: none;
+  animation: drawerClose 200ms ease-in;
 }
 
 .unnnic-drawer {
@@ -156,10 +191,9 @@ export default {
 
 .unnnic-drawer__overlay {
   z-index: 9;
-  background-color: rgba(0,0,0,0.4);
+  background-color: rgba(0, 0, 0, 0.4);
   width: 100%;
   height: 100%;
-
 }
 
 .unnnic-drawer__container {
@@ -173,7 +207,7 @@ export default {
   justify-content: space-between;
   height: 100%;
   background-color: $unnnic-color-neutral-white;
-  width: calc(100%/3);
+  width: calc(100% / 3);
 
   &--wide {
     width: 50%;
@@ -185,7 +219,6 @@ export default {
     border-bottom: 1px solid $unnnic-color-neutral-soft;
     padding: $unnnic-spacing-md;
     .unnnic-drawer__title-container {
-
       .unnnic-drawer__title {
         color: $unnnic-color-neutral-darkest;
         font-family: $unnnic-font-family-secondary;
@@ -207,19 +240,14 @@ export default {
       margin: $unnnic-spacing-nano;
       transform: rotate(180deg);
       display: flex;
-   }
+    }
   }
 
   .unnnic-drawer__content {
     overflow-y: auto;
     color: $unnnic-color-neutral-cloudy;
-    padding: $unnnic-spacing-md $unnnic-spacing-md 0 $unnnic-spacing-md ;
+    padding: $unnnic-spacing-md $unnnic-spacing-md 0 $unnnic-spacing-md;
     flex: 1 0 0;
-    :deep(*) {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
   }
 
   .unnnic-drawer__footer {
@@ -231,4 +259,4 @@ export default {
     }
   }
 }
-</style>
+</style>

package/src/stories/Drawer.stories.js

@@ -1,7 +1,14 @@
 import unnnicDrawer from '../components/Drawer/Drawer.vue';
 import unnnicButton from '../components/Button/Button.vue';
 
-const primaryButtonTypeOptions = ['primary', 'secondary', 'tertiary', 'alternative', 'warning', 'attention']
+const primaryButtonTypeOptions = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'alternative',
+  'warning',
+  'attention',
+];
 
 export default {
   title: 'Example/Drawer',
@@ -9,7 +16,14 @@ export default {
   argTypes: {
     title: { control: { type: 'text' } },
     description: { control: { type: 'text' } },
-    primaryButtonType: { options: primaryButtonTypeOptions, control: { type: 'select' } },
+    primaryButtonType: {
+      options: primaryButtonTypeOptions,
+      control: { type: 'select' },
+    },
+    disabledPrimaryButton: { control: { type: 'boolean' } },
+    disabledSecondaryButton: { control: { type: 'boolean' } },
+    loadingPrimaryButton: { control: { type: 'boolean' } },
+    loadingSecondaryButton: { control: { type: 'boolean' } },
     primaryButtonText: { control: { type: 'text' } },
     secondaryButtonText: { control: { type: 'text' } },
     modelValue: { control: { type: 'boolean' } },
@@ -20,7 +34,7 @@ export default {
 const Template = (args) => ({
   props: Object.keys(args),
   setup() {
-    return { args }
+    return { args };
   },
   components: { unnnicDrawer, unnnicButton },
   data() {
@@ -30,11 +44,11 @@ const Template = (args) => ({
   },
   methods: {
     primaryClick() {
-      console.log('primaryClick')
+      console.log('primaryClick');
     },
     secondaryClick() {
-      console.log('secondaryClick')
-    }
+      console.log('secondaryClick');
+    },
   },
   template: `
   <div>
@@ -42,7 +56,7 @@ const Template = (args) => ({
     <button @click="opened = !opened">Change</button>
     <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false" @primaryButtonClick="primaryClick" @secondaryButtonClick="secondaryClick">
       <template #content>
-        <p>Conteúdo</p>
+        <p style="padding: 0; margin:0;">Conteúdo</p>
       </template>
     </unnnic-drawer>
   </div>
@@ -70,7 +84,7 @@ const TemplateOveflowed = (args) => ({
   props: Object.keys(args),
   components: { unnnicDrawer, unnnicButton },
   setup() {
-    return { args }
+    return { args };
   },
   data() {
     return {
@@ -83,7 +97,7 @@ const TemplateOveflowed = (args) => ({
     <button @click="opened = !opened">Change</button>
     <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false">
       <template #content>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+        <p style="padding: 0; margin:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
@@ -108,7 +122,7 @@ const TemplateVideo = (args) => ({
   props: Object.keys(args),
   components: { unnnicDrawer, unnnicButton },
   setup() {
-    return { args }
+    return { args };
   },
   data() {
     return {
@@ -133,4 +147,4 @@ ContentVideo.args = {
   title: 'Title',
   description: 'Description',
   wide: true,
-};
+};