@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/Tag/BrandTag.vue

@@ -7,9 +7,9 @@
     }"
   >
     <span class="unnnic-brand-tag__label">{{ text }}</span>
-    <unnnic-icon-svg
+    <UnnnicIconSvg
       :icon="disabled ? 'close-1' : 'add-1'"
-      :scheme="disabled ? 'neutral-snow': 'brand-weni-dark'"
+      :scheme="disabled ? 'neutral-snow' : 'brand-weni-dark'"
       class="unnnic-brand-tag__icon"
       size="xs"
     />
@@ -52,7 +52,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-brand-tag {
   display: flex;
@@ -74,7 +74,10 @@ export default {
     color: $unnnic-color-brand-weni-dark;
     background-color: $unnnic-color-background-snow;
     &:hover {
-      background-color: rgba($unnnic-color-brand-weni, $unnnic-opacity-level-extra-light);
+      background-color: rgba(
+        $unnnic-color-brand-weni,
+        $unnnic-opacity-level-extra-light
+      );
     }
   }
   &--clickable {

package/src/components/Tag/DefaultTag.vue

@@ -1,23 +1,22 @@
 <template>
   <div
-  :class="`unnnic-tag
-        ${!disabled
-        ? `unnnic-tag-scheme--${scheme}`
-        : `unnnic-tag--disabled`}
-        ${ clickable ? 'unnnic-tag--clickable' : '' }`"
-    @click="$emit('click')"
+    :class="`unnnic-tag
+        ${!disabled ? `unnnic-tag-scheme--${scheme}` : `unnnic-tag--disabled`}
+        ${clickable ? 'unnnic-tag--clickable' : ''}`"
   >
     <span
       :class="`unnnic-tag__label
       ${hasCloseIcon ? 'unnnic-tag__label--hasIcon' : ''}
-      ${disabled ? 'unnnic-tag__label--disabled' : ''}`">{{text}}</span>
-    <unnnic-icon-svg
+      ${disabled ? 'unnnic-tag__label--disabled' : ''}`"
+      >{{ text }}</span
+    >
+    <UnnnicIconSvg
       v-if="hasCloseIcon"
       icon="close-1"
       class="unnnic-tag__icon"
       scheme="neutral-darkest"
       size="xs"
-      @click.native.stop="$emit('close')"
+      @click.stop="$emit('close')"
     />
   </div>
 </template>
@@ -65,7 +64,7 @@ export default {
 @import '../../assets/scss/unnnic.scss';
 
 @each $name, $color in $scheme-colors {
-  &.unnnic-tag-scheme--#{$name} {
+  .unnnic-tag-scheme--#{$name} {
     background-color: rgba($color, $unnnic-opacity-level-light);
     outline-style: solid;
     outline-color: rgba($color, $unnnic-opacity-level-extra-light);
@@ -80,45 +79,44 @@ export default {
   justify-content: center;
   border-radius: $unnnic-border-radius-pill;
 
-    &--disabled {
-      background-color: $unnnic-color-background-sky;
-    }
+  &--disabled {
+    background-color: $unnnic-color-background-sky;
+  }
 
-    &--clickable{
-      cursor: pointer;
+  &--clickable {
+    cursor: pointer;
 
-      @each $name, $color in $scheme-colors {
-        &.unnnic-tag-scheme--#{$name}:hover {
-          outline-style: solid;
-          outline-color: $unnnic-color-neutral-clean;
-          outline-width: $unnnic-border-width-thinner;
-          outline-offset: -$unnnic-border-width-thinner;
-        }
+    @each $name, $color in $scheme-colors {
+      &.unnnic-tag-scheme--#{$name}:hover {
+        outline-style: solid;
+        outline-color: $unnnic-color-neutral-cleanest;
+        outline-width: $unnnic-border-width-thinner;
+        outline-offset: -$unnnic-border-width-thinner;
       }
     }
+  }
 
-    &__label{
-      font-family: $unnnic-font-family-secondary;
-      font-size: $unnnic-font-size-body-md;
-      font-weight: $unnnic-font-weight-regular;
-      line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
-      padding: $unnnic-spacing-stack-nano $unnnic-inline-ant;
-      color: $unnnic-color-neutral-darkest;
-
-      &--disabled {
-        color: $unnnic-color-neutral-cloudy;
-      }
+  &__label {
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-md;
+    font-weight: $unnnic-font-weight-regular;
+    line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
+    padding: $unnnic-spacing-stack-nano $unnnic-inline-ant;
+    color: $unnnic-color-neutral-darkest;
 
-      &--hasIcon {
-        padding-left: $unnnic-inline-ant;
-        padding-right: $unnnic-spacing-stack-nano;
-      }
+    &--disabled {
+      color: $unnnic-color-neutral-cloudy;
     }
 
-    &__icon {
-      margin-right: $unnnic-inline-ant;
-      cursor: pointer;
+    &--hasIcon {
+      padding-left: $unnnic-inline-ant;
+      padding-right: $unnnic-spacing-stack-nano;
     }
-}
+  }
 
+  &__icon {
+    margin-right: $unnnic-inline-ant;
+    cursor: pointer;
+  }
+}
 </style>

package/src/components/Tag/IndicatorTag.vue

@@ -3,11 +3,15 @@
     :class="`unnnic-tag
         ${clickable ? 'unnnic-tag--clickable' : ''}`"
   >
-    <tool-tip :enabled="enableTooltip" :text="tooltipText" side="bottom">
+    <ToolTip
+      :enabled="enableTooltip"
+      :text="tooltipText"
+      side="bottom"
+    >
       <span class="unnnic-tag__count">{{ count }}</span>
-    </tool-tip>
+    </ToolTip>
     <span class="unnnic-tag__label">{{ text }}</span>
-    <unnnic-icon-svg
+    <UnnnicIconSvg
       v-if="hasBackButton"
       icon="arrow-right-1-1"
       class="unnnic-tag__icon"
@@ -57,7 +61,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-tag {
   display: flex;
@@ -69,7 +73,7 @@ export default {
   border: $unnnic-border-width-thinner solid $unnnic-color-background-sky;
 
   &:hover {
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
   }
 
   &--clickable {
@@ -85,7 +89,6 @@ export default {
     font-weight: $unnnic-font-weight-regular;
     line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
     color: $unnnic-color-neutral-darkest;
-
   }
 
   &__label {

package/src/components/Tag/Tag.vue

@@ -1,21 +1,19 @@
 <template>
-    <component
-      class="unnnic-tag-content"
-      :is="currentComponent"
-      :v-bind="$attrs"
-      :text="text"
-      :disabled="disabled"
-      :hasCloseIcon="hasCloseIcon"
-      :scheme="scheme"
-      :count="count"
-      :hasBackButton="hasBackButton"
-      :clickable="clickable"
-      :tooltipText="tooltipText"
-      :enableTooltip="enableTooltip"
-      :icon="icon"
-      @click="$emit('click')"
-      @close="$emit('close')"
-    />
+  <component
+    class="unnnic-tag-content"
+    :is="currentComponent"
+    v-bind="$attrs"
+    :text="text"
+    :disabled="disabled"
+    :hasCloseIcon="hasCloseIcon"
+    :scheme="scheme"
+    :count="count"
+    :hasBackButton="hasBackButton"
+    :clickable="clickable"
+    :tooltipText="tooltipText"
+    :enableTooltip="enableTooltip"
+    :icon="icon"
+  />
 </template>
 
 <script>
@@ -30,9 +28,7 @@ export default {
       type: String,
       default: 'default',
       validator(value) {
-        return (
-          ['default', 'indicator', 'brand'].indexOf(value) !== -1
-        );
+        return ['default', 'indicator', 'brand'].indexOf(value) !== -1;
       },
     },
     text: {

package/src/components/TextArea/TextArea.vue

@@ -1,21 +1,35 @@
 <template>
   <div :class="['unnnic-text-area', { disabled }, size, type]">
-    <div v-if="label" class="label">{{ label }}</div>
+    <div
+      v-if="label"
+      class="label"
+    >
+      {{ label }}
+    </div>
 
     <textarea
       ref="textarea"
       :placeholder="placeholder"
       :maxlength="maxLength"
       :disabled="disabled"
-      :value="value"
-      @input="$emit('input', $event.srcElement.value)"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.srcElement.value)"
     ></textarea>
 
-    <div v-if="(maxLength && type === 'normal')" class="helper">
-      {{ value.length }}/{{ maxLength }}
+    <div
+      v-if="maxLength && type === 'normal'"
+      class="helper"
+    >
+      {{ modelValue.length }}/{{ maxLength }}
     </div>
-    <div v-if="type === 'error'" class="error-list">
-      <span v-for="(error, index) in errors" :key="index">
+    <div
+      v-if="type === 'error'"
+      class="error-list"
+    >
+      <span
+        v-for="(error, index) in errors"
+        :key="index"
+      >
         {{ error }}
       </span>
     </div>
@@ -38,7 +52,7 @@ export default {
       type: String,
     },
 
-    value: {
+    modelValue: {
       type: String,
     },
 

package/src/components/ToolTip/ToolTip.vue

@@ -7,26 +7,25 @@
     }"
     @mouseover="handleResize"
   >
-  <slot />
-  <span
-    v-show="enabled"
-    ref="label"
-    :class="[
-            'unnnic-tooltip-label',
-            `unnnic-tooltip-label-${side}`,
-            ]"
-    :style="{ maxWidth: maxWidth, left:leftPos, top:topPos }"
-  >
-    <template v-for="(line, index) in text.split('\n')">
-      {{ line }}
-      <br :key="index">
-    </template>
-  </span>
+    <slot />
+    <span
+      v-show="enabled"
+      ref="label"
+      :class="['unnnic-tooltip-label', `unnnic-tooltip-label-${side}`]"
+      :style="{ maxWidth: maxWidth, left: leftPos, top: topPos }"
+    >
+      <template
+        v-for="(line, index) in text.split('\n')"
+        :key="index"
+      >
+        {{ line }}
+        <br />
+      </template>
+    </span>
   </div>
 </template>
 
 <script>
-
 export default {
   name: 'unnnic-tooltip',
   mounted() {
@@ -35,7 +34,7 @@ export default {
     window.addEventListener('scroll', this.handleResize);
     window.addEventListener('resize', this.handleResize);
   },
-  destroyed() {
+  unmounted() {
     window.removeEventListener('scroll', this.handleResize);
     window.removeEventListener('resize', this.handleResize);
   },
@@ -84,15 +83,31 @@ export default {
       if (element && this.$refs.label) {
         if (this.side === 'right') {
           this.leftPos = `${elementPos.x + elementPos.width + 8}px`;
-          this.topPos = `${elementPos.y + (elementPos.height / 2) - (this.$refs.label.offsetHeight / 2)}px`;
+          this.topPos = `${
+            elementPos.y +
+            elementPos.height / 2 -
+            this.$refs.label.offsetHeight / 2
+          }px`;
         } else if (this.side === 'left') {
           this.leftPos = `${elementPos.x - this.$refs.label.offsetWidth - 8}px`;
-          this.topPos = `${elementPos.y + (elementPos.height / 2) - (this.$refs.label.offsetHeight / 2)}px`;
+          this.topPos = `${
+            elementPos.y +
+            elementPos.height / 2 -
+            this.$refs.label.offsetHeight / 2
+          }px`;
         } else if (this.side === 'top') {
-          this.leftPos = `${elementPos.x + (elementPos.width / 2) - (this.$refs.label.clientWidth / 2)}px`;
+          this.leftPos = `${
+            elementPos.x +
+            elementPos.width / 2 -
+            this.$refs.label.clientWidth / 2
+          }px`;
           this.topPos = `${elementPos.y - this.$refs.label.offsetHeight - 8}px`;
         } else if (this.side === 'bottom') {
-          this.leftPos = `${elementPos.x + (elementPos.width / 2) - (this.$refs.label.clientWidth / 2)}px`;
+          this.leftPos = `${
+            elementPos.x +
+            elementPos.width / 2 -
+            this.$refs.label.clientWidth / 2
+          }px`;
           this.topPos = `${elementPos.y + elementPos.height + 8}px`;
         }
       }
@@ -102,7 +117,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
- @import '../../assets/scss/unnnic.scss';
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-tooltip {
   position: relative;
@@ -110,7 +125,7 @@ export default {
   overflow-wrap: break-word;
 }
 
-.unnnic-tooltip-label{
+.unnnic-tooltip-label {
   z-index: 1;
   visibility: hidden;
   text-align: center;
@@ -131,62 +146,65 @@ export default {
   line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
 
   &::after {
-    content: "";
+    content: '';
     position: absolute;
     border-width: 5px;
     border-style: solid;
   }
 
-    &-top{
-      position: fixed;
-      &::after {
-        top: 100%;
-        left: 50%;
-        margin-left: -5px;
-        border-color: $unnnic-color-neutral-black transparent transparent transparent;
-      }
+  &-top {
+    position: fixed;
+    &::after {
+      top: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-color: $unnnic-color-neutral-black transparent transparent
+        transparent;
     }
+  }
 
-    &-bottom{
-      position: fixed;
-      &::after {
-          bottom: 100%;
-          left: 50%;
-          margin-left: -5px;
-          border-color: transparent transparent $unnnic-color-neutral-black transparent;
-      }
+  &-bottom {
+    position: fixed;
+    &::after {
+      bottom: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-color: transparent transparent $unnnic-color-neutral-black
+        transparent;
     }
-    &-right{
-      position: fixed;
-      &::after {
-        top: 50%;
-        right: 100%;
-        margin-top: -5px;
-        border-color: transparent $unnnic-color-neutral-black transparent transparent;
-      }
+  }
+  &-right {
+    position: fixed;
+    &::after {
+      top: 50%;
+      right: 100%;
+      margin-top: -5px;
+      border-color: transparent $unnnic-color-neutral-black transparent
+        transparent;
     }
-    &-left{
-      position: fixed;
-      &::after {
-        top: 50%;
-        left: 100%;
-        margin-top: -5px;
-        border-color: transparent transparent transparent $unnnic-color-neutral-black;
-      }
+  }
+  &-left {
+    position: fixed;
+    &::after {
+      top: 50%;
+      left: 100%;
+      margin-top: -5px;
+      border-color: transparent transparent transparent
+        $unnnic-color-neutral-black;
     }
+  }
 }
 
 .unnnic-tooltip.force-open {
-  .unnnic-tooltip-label{
-      visibility: visible;
-    }
+  .unnnic-tooltip-label {
+    visibility: visible;
+  }
 }
 
 .unnnic-tooltip:hover {
-  .unnnic-tooltip-label{
-      visibility: visible;
-      width: auto;
-    }
+  .unnnic-tooltip-label {
+    visibility: visible;
+    width: auto;
+  }
 }
-
 </style>

package/src/components/TransitionRipple/TransitionRipple.vue

@@ -0,0 +1,126 @@
+<template>
+  <TransitionGroup
+    class="ripples"
+    name="grow"
+    tag="div"
+  >
+    <div
+      class="ripple"
+      v-for="ripple in ripples"
+      :key="ripple.id"
+      :style="{
+        top: ripple.top,
+        left: ripple.left,
+        width: ripple.width,
+        height: ripple.height,
+      }"
+      :class="`ripples-color--${color}`"
+    ></div>
+  </TransitionGroup>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'neutral-white',
+    },
+  },
+  data() {
+    return {
+      ripples: [],
+      rippleWidth: 0,
+      halfRippleWidth: 0,
+    };
+  },
+  mounted() {
+    const { transitionContainer } = this.$parent.$refs;
+
+    if (transitionContainer) {
+      this.$parent.$refs.transitionContainer.style.position = 'relative';
+      this.$parent.$refs.transitionContainer.style.overflow = 'hidden';
+    }
+
+    const width = transitionContainer.offsetWidth;
+    const height = transitionContainer.offsetHeight;
+    this.rippleWidth = width > height ? width : height;
+    this.halfRippleWidth = this.rippleWidth / 2;
+
+    window.addEventListener('mouseup', this.purgeRipples);
+  },
+  beforeUnmount() {
+    window.removeEventListener('mouseup', this.purgeRipples);
+  },
+  methods: {
+    addRipple(e) {
+      const { left, top } =
+        this.$parent.$refs.transitionContainer.getBoundingClientRect();
+      const rippleId = Date.now();
+      this.ripples.push({
+        width: `${this.rippleWidth}px`,
+        height: `${this.rippleWidth}px`,
+        left: `${e.clientX - left - this.halfRippleWidth}px`,
+        top: `${e.clientY - top - this.halfRippleWidth}px`,
+        id: rippleId,
+      });
+    },
+    purgeRipples() {
+      this.ripples = [];
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../assets/scss/unnnic.scss';
+
+.ripples {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+
+  @each $name, $color in $scheme-colors {
+    &-color--#{$name} {
+      background-color: $color;
+    }
+  }
+}
+
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  opacity: 0.05;
+  animation: grow 1s ease-out;
+}
+
+.grow-enter-active,
+.grow-enter-to-active {
+  transition: all 1.5s ease-out;
+}
+.grow-leave-active,
+.grow-leave-to-active {
+  transition: all 1s ease-out;
+}
+
+.grow-enter {
+  transform: scale(0);
+  opacity: 0.1;
+}
+
+.grow-enter-to {
+  transform: scale(4);
+  opacity: 0.1;
+}
+
+.grow-leave {
+  transform: scale(4);
+  opacity: 0.1;
+}
+.grow-leave-to {
+  transform: scale(4);
+  opacity: 0;
+}
+</style>