@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/Button/Button.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <button
     v-bind="$attrs"
@@ -6,48 +7,55 @@
       'unnnic-button',
       `unnnic-button--size-${size}`,
       `unnnic-button--${type}`,
-      `unnnic-button-scheme--${buttonScheme}`,
-      iconCenter ? `unnnic-button--icon-on-center` : null
+      iconCenter ? `unnnic-button--icon-on-center` : null,
+      float ? `unnnic-button--float` : null,
     ]"
-    v-on="$listeners">
-
-    <unnnic-icon-svg
+  >
+    <UnnnicIconSvg
       v-if="loading"
       icon="loading-circle-1"
       :scheme="iconScheme"
       :size="iconSize"
       :style="{ position: 'absolute' }"
       class="rotation"
+      :next="next"
     />
 
-    <unnnic-icon-svg
+    <UnnnicIconSvg
       v-if="iconLeft"
       :icon="iconLeft"
       :scheme="iconScheme"
       :size="iconSize"
       :class="{ 'unnnic-button__icon-left': hasText }"
       :style="{ visibility: loading ? 'hidden' : null }"
+      :next="next"
     />
 
-    <unnnic-icon-svg
+    <UnnnicIconSvg
       v-if="iconCenter"
       :icon="iconCenter"
       :scheme="iconScheme"
       :style="{ visibility: loading ? 'hidden' : null }"
       :size="iconSize"
+      :next="next"
     />
 
-    <span class="unnnic-button__label" :style="{ visibility: loading ? 'hidden' : null }">
+    <span
+      v-if="!float"
+      class="unnnic-button__label"
+      :style="{ visibility: loading ? 'hidden' : null }"
+    >
       <slot /> {{ text }}
     </span>
 
-    <unnnic-icon-svg
+    <UnnnicIconSvg
       v-if="iconRight"
       :icon="iconRight"
       :scheme="iconScheme"
       :size="iconSize"
       :class="{ 'unnnic-button__icon-right': hasText }"
       :style="{ visibility: loading ? 'hidden' : null }"
+      :next="next"
     />
   </button>
 </template>
@@ -56,7 +64,6 @@
 import UnnnicIconSvg from '../Icon.vue';
 
 export default {
-  name: 'unnnic-button',
   components: {
     UnnnicIconSvg,
   },
@@ -64,9 +71,6 @@ export default {
     size: {
       type: String,
       default: 'large',
-      validator(value) {
-        return ['small', 'large'].indexOf(value) !== -1;
-      },
     },
     text: {
       type: String,
@@ -75,9 +79,10 @@ export default {
     type: {
       type: String,
       default: 'primary',
-      validator(value) {
-        return ['primary', 'secondary', 'terciary', 'ghost', 'warning'].indexOf(value) !== -1;
-      },
+    },
+    float: {
+      type: Boolean,
+      default: false,
     },
     iconLeft: {
       type: String,
@@ -91,20 +96,19 @@ export default {
       type: String,
       default: null,
     },
+    next: {
+      type: Boolean,
+      default: null,
+    },
 
     disabled: {
       type: Boolean,
+      default: null,
     },
 
     loading: {
       type: Boolean,
     },
-    scheme: {
-      type: String,
-      validator(value) {
-        return ['feedback-green', 'feedback-red', 'feedback-yellow'].indexOf(value) !== -1;
-      },
-    },
   },
   computed: {
     buttonDisabled() {
@@ -120,34 +124,65 @@ export default {
       return this.text && this.text.length > 0;
     },
     iconScheme() {
-      if (this.type === 'primary') {
-        return this.buttonDisabled ? 'neutral-clean' : 'neutral-white';
+      if (this.buttonDisabled) {
+        return 'neutral-clean';
       }
 
-      if (this.type === 'secondary') {
-        return this.buttonDisabled ? 'neutral-clean' : 'weni-900';
-      }
+      const typeToSchemeMap = {
+        primary: 'neutral-white',
+        secondary: 'neutral-dark',
+        tertiary: 'neutral-dark',
+        warning: 'neutral-white',
+        attention: 'neutral-white',
+      };
 
-      if (this.type === 'terciary') {
-        return this.buttonDisabled ? 'neutral-clean' : 'neutral-dark';
-      }
+      return typeToSchemeMap[this.type] || '';
+    },
 
-      if (this.type === 'ghost') {
-        return this.buttonDisabled ? 'neutral-clean' : 'neutral-dark';
-      }
+    isSizePropValid() {
+      return (
+        this.size === 'large' ||
+        (!this.float && this.size === 'small') ||
+        (this.float && this.size === 'extra-large')
+      );
+    },
+    isTypePropValid() {
+      const validTypes = [
+        'primary',
+        'secondary',
+        'tertiary',
+        'alternative',
+        'warning',
+        'attention',
+      ];
+      return validTypes.includes(this.type);
+    },
+  },
+  methods: {
+    validateProps() {
+      if (!this.isSizePropValid || !this.isTypePropValid) {
+        let errorMessage = 'TypeError:';
 
-      if (this.type === 'warning') {
-        return this.buttonDisabled ? 'neutral-clean' : 'neutral-white';
-      }
+        if (!this.isSizePropValid) {
+          errorMessage += ' Invalid size prop.';
+          errorMessage += ` Please provide 'large', 'small' (only if float prop is false), or 'extra-large' (only if float prop is true).`;
+        }
 
-      return '';
-    },
-    buttonScheme() {
-      if (this.type === 'primary') {
-        return this.scheme;
-      }
+        if (!this.isTypePropValid) {
+          errorMessage += ' Invalid type prop.';
+        }
 
-      return '';
+        throw new Error(errorMessage);
+      }
+    },
+  },
+  watch: {
+    $props: {
+      deep: true,
+      immediate: true,
+      handler() {
+        this.validateProps();
+      },
     },
   },
 };
@@ -159,7 +194,8 @@ export default {
 }
 
 @keyframes rotation {
-  0% {}
+  0% {
+  }
 
   100% {
     transform: rotate(360deg);
@@ -167,13 +203,8 @@ export default {
 }
 </style>
 
-<style lang="scss">
-@import "../../assets/scss/unnnic.scss";
-
-$scheme-colors:
-  "feedback-red" $unnnic-color-feedback-red,
-  "feedback-green" $unnnic-color-feedback-green,
-  "feedback-yellow" $unnnic-color-feedback-yellow;
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-button {
   display: inline-flex;
@@ -187,6 +218,7 @@ $scheme-colors:
   font-weight: $unnnic-font-weight-regular;
   font-family: $unnnic-font-family-secondary;
   cursor: pointer;
+  position: relative;
 
   &__icon {
     &-left {
@@ -206,52 +238,41 @@ $scheme-colors:
       background-color: $unnnic-color-weni-700;
     }
 
-    &:disabled {
-      background-color: $unnnic-color-neutral-soft;
-      color: $unnnic-color-neutral-clean;
-      cursor: not-allowed;
-    }
-
     &:active:enabled {
       background-color: $unnnic-color-weni-800;
     }
   }
 
   &--secondary {
-    background-color: $unnnic-color-weni-50;
-    color: $unnnic-color-weni-800;
+    background-color: $unnnic-color-neutral-white;
+    color: $unnnic-color-neutral-dark;
+    box-shadow: inset 0 0 0 $unnnic-border-width-thinner
+      $unnnic-color-neutral-cleanest;
 
     &:hover:enabled {
-      background-color: $unnnic-color-weni-100;
+      background-color: $unnnic-color-neutral-light;
     }
 
     &:disabled {
-      background-color: $unnnic-color-neutral-soft;
-      color: $unnnic-color-neutral-clean;
-      cursor: not-allowed;
-
+      box-shadow: none;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-weni-200;
-      color: $unnnic-color-weni-900;
+      background-color: $unnnic-color-neutral-soft;
     }
   }
 
-  &--terciary {
-    background-color: $unnnic-color-neutral-white;
+  &--tertiary {
+    background-color: transparent;
     color: $unnnic-color-neutral-dark;
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
 
     &:hover:enabled {
       background-color: $unnnic-color-neutral-light;
     }
 
     &:disabled {
-      background-color: $unnnic-color-neutral-soft;
       color: $unnnic-color-neutral-clean;
       cursor: not-allowed;
-      border: 0;
     }
 
     &:active:enabled {
@@ -259,21 +280,43 @@ $scheme-colors:
     }
   }
 
-  &--ghost {
-    background-color: transparent;
-    color: $unnnic-color-neutral-dark;
+  &--alternative {
+    background-color: $unnnic-color-weni-50;
+    color: $unnnic-color-weni-800;
+
+    :deep(svg .primary) {
+      fill: $unnnic-color-weni-800;
+    }
+
+    :deep(svg .primary-stroke) {
+      stroke: $unnnic-color-weni-800;
+    }
 
     &:hover:enabled {
-      background-color: $unnnic-color-neutral-light;
+      background-color: $unnnic-color-weni-100;
     }
 
     &:disabled {
-      color: $unnnic-color-neutral-clean;
-      cursor: not-allowed;
+      :deep(svg .primary) {
+        fill: $unnnic-color-neutral-clean;
+      }
+
+      :deep(svg .primary-stroke) {
+        stroke: $unnnic-color-neutral-clean;
+      }
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-neutral-soft;
+      background-color: $unnnic-color-weni-200;
+      color: $unnnic-color-weni-900;
+
+      :deep(svg .primary) {
+        fill: $unnnic-color-weni-900;
+      }
+
+      :deep(svg .primary-stroke) {
+        stroke: $unnnic-color-weni-900;
+      }
     }
   }
 
@@ -282,58 +325,90 @@ $scheme-colors:
     color: $unnnic-color-neutral-white;
 
     &:hover:enabled {
-      background-color:$unnnic-color-aux-red-700;
+      background-color: $unnnic-color-aux-red-700;
     }
 
-    &:disabled {
-      background-color: $unnnic-color-neutral-soft;
-      color: $unnnic-color-neutral-clean;
-      cursor: not-allowed;
+    &:active:enabled {
+      background-color: $unnnic-color-aux-red-900;
+    }
+  }
+
+  &--attention {
+    background-color: $unnnic-color-aux-yellow-500;
+    color: $unnnic-color-neutral-white;
+
+    &:hover:enabled {
+      background-color: $unnnic-color-aux-yellow-700;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-aux-red-900;
+      background-color: $unnnic-color-aux-yellow-900;
     }
   }
 
+  &--primary:disabled,
+  &--secondary:disabled,
+  &--alternative:disabled,
+  &--warning:disabled,
+  &--attention:disabled {
+    background-color: $unnnic-color-neutral-soft;
+    color: $unnnic-color-neutral-clean;
+    cursor: not-allowed;
+  }
+
+  &--float {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+
+    border-radius: $unnnic-border-radius-pill;
+    box-shadow: $unnnic-shadow-level-near;
+  }
+
   &--size {
-    &-large {
+    &-extra-large,
+    &-large,
+    &-small {
       padding: $unnnic-squish-xs;
       font-size: $unnnic-font-size-body-gt;
       line-height: ($unnnic-font-size-body-gt + $unnnic-line-height-medium);
+    }
+
+    &-extra-large {
+      height: 58px;
+    }
+
+    &-large {
       height: 46px;
     }
 
     &-small {
-      padding: $unnnic-squish-xs;
-      font-size: $unnnic-font-size-body-gt;
-      line-height: ($unnnic-font-size-body-gt + $unnnic-line-height-medium);
       height: 38px;
     }
   }
 }
-
-@each $name,
-$color in $scheme-colors {
-  .unnnic-button-scheme {
-    &--#{$name} {
-      background-color: $color;
-    }
-  }
-}
 </style>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-button--icon-on-center {
   min-width: auto;
 
   &.unnnic-button--size {
+    &-extra-large {
+      height: 58px;
+      width: 58px;
+    }
+
     &-large {
-      padding: $unnnic-inset-xs;
       height: 46px;
       width: 46px;
+    }
+
+    &-large,
+    &-extra-large {
+      padding: $unnnic-inset-xs;
 
       .unnnic-icon {
         width: $unnnic-icon-size-md;

package/src/components/Button/ButtonIcon.vue

@@ -1,13 +1,13 @@
 <template>
   <button
     :class="['button-icon', size, type]"
-    v-on="$listeners"
+    v-bind="$attrs"
   >
-    <unnnic-icon
+    <UnnnicIcon
       :icon="icon"
       :scheme="iconScheme"
       size="ant"
-    ></unnnic-icon>
+    ></UnnnicIcon>
   </button>
 </template>
 
@@ -52,7 +52,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .button-icon {
   border: 0;
@@ -76,11 +76,14 @@ export default {
   }
 
   &.secondary {
-    background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-light);
+    background-color: rgba(
+      $unnnic-color-neutral-soft,
+      $unnnic-opacity-level-light
+    );
     position: relative;
 
     &:before {
-      content: " ";
+      content: ' ';
       position: absolute;
       left: 0;
       right: 0;
@@ -92,7 +95,10 @@ export default {
     }
 
     &:hover {
-      background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-overlay);
+      background-color: rgba(
+        $unnnic-color-neutral-soft,
+        $unnnic-opacity-level-overlay
+      );
 
       &:before {
         border: 0;

package/src/components/Card/AccountCard.vue

@@ -7,12 +7,12 @@
     }"
   >
     <div class="icon">
-      <unnnic-avatar-icon
+      <UnnnicAvatarIcon
         size="xs"
         :scheme="scheme"
         :icon="icon"
         :enabled="enabled"
-      ></unnnic-avatar-icon>
+      ></UnnnicAvatarIcon>
     </div>
 
     <div class="content">
@@ -57,7 +57,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-card-account {
   display: flex;

package/src/components/Card/BlankCard.vue

@@ -1,15 +1,17 @@
 <template>
-  <div :class="{
+  <div
+    :class="{
       'unnnic-card-blank': true,
       'unnnic-card-blank__clickable': clickable,
-    }">
+    }"
+  >
     <div class="unnnic-card-blank__content">
-        <unnnic-icon-svg
-          :icon="icon"
-          scheme="neutral-clean"
-          class="unnnic-card-blank__content__icon"
-          size="xl"
-        />
+      <UnnnicIconSvg
+        :icon="icon"
+        scheme="neutral-clean"
+        class="unnnic-card-blank__content__icon"
+        size="xl"
+      />
 
       <div class="unnnic-card-blank__content__text">{{ text }}</div>
     </div>
@@ -42,7 +44,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-card-blank {
   display: flex;