@weni/unnnic-system 2.0.8 → 2.0.10

package/src/components/Checkbox/Checkbox.vue

@@ -94,11 +94,8 @@ export default {
 
   methods: {
     click() {
-      if (this.valueName === 'checked') {
-        this.$emit('change', false);
-      } else {
-        this.$emit('change', true);
-      }
+      const isChecked = ['checked', 'less'].includes(this.valueName);
+      this.$emit('change', !isChecked);
     },
   },
 };
@@ -116,7 +113,7 @@ export default {
 .unnnic-checkbox {
   &.disabled {
     :deep(.primary) {
-      fill: $unnnic-color-neutral-soft;
+      fill: $unnnic-color-neutral-cleanest;
     }
   }
 }

package/src/components/Radio/Radio.vue

@@ -62,7 +62,7 @@ const color = computed(() => {
     return 'brand-sec';
   }
 
-  return valueName.value === 'selected' ? 'brand-weni' : 'neutral-soft';
+  return valueName.value === 'selected' ? 'brand-weni' : 'neutral-cleanest';
 });
 
 function click() {

package/src/components/Slider/Slider.vue

@@ -1,59 +1,103 @@
 <template>
-  <div
-    class="unnnic-slider"
-    :style="cssVars"
-  >
-    <div class="unnnic-slider__content">
+  <article>
+    <section class="unnnic-label">
+      <p
+        v-if="label"
+        class="unnnic-slider__label"
+      >
+        {{ label }}
+      </p>
       <UnnnicTooltip
-        ref="tooltip"
-        class="unnnic-slider__content__tooltip"
-        :text="sliderVal.toString()"
-        :forceOpen="true"
-        :enabled="showTooltip"
+        v-if="labelInfo"
+        class="unnnic-label__tooltip"
+        :text="labelInfo"
+        enabled
         side="top"
       >
-        <input
-          ref="input"
-          class="unnnic-slider__content__range-input"
-          v-model="sliderVal"
-          type="range"
-          :min="minValue"
-          :max="maxValue"
-          :step="step"
-          @change="handleValueChange"
-          @mouseover="showTooltip = true"
-          @mouseleave="showTooltip = false"
+        <UnnnicIcon
+          class="unnnic-label__tooltip__icon"
+          icon="info"
+          size="sm"
+          scheme="neutral-clean"
+          :filled="true"
         />
       </UnnnicTooltip>
+    </section>
 
-      <div class="unnnic-slider__content__labels">
-        <div class="unnnic-slider__content__labels__min">{{ minLabel }}</div>
-        <div class="unnnic-slider__content__labels__max">{{ maxLabel }}</div>
-      </div>
-    </div>
-
-    <div
-      ref="value-input"
-      class="value-input"
-      contenteditable="true"
-      @input="handleInput"
-    />
-  </div>
+    <section
+      class="unnnic-slider"
+      :style="cssVars"
+    >
+      <section class="unnnic-slider__content">
+        <section class="unnnic-slider__content__labels">
+          <span class="unnnic-slider__content__labels__min">{{
+            minLabel
+          }}</span>
+          <UnnnicTooltip
+            ref="tooltip"
+            class="unnnic-slider__content__tooltip"
+            :text="sliderVal.toString()"
+            :forceOpen="true"
+            :enabled="showTooltip"
+            side="top"
+          >
+            <input
+              ref="input"
+              class="unnnic-slider__content__range-input"
+              v-model="sliderVal"
+              type="range"
+              :min="minValue"
+              :max="maxValue"
+              :step="step"
+              @change="handleValueChange"
+              @mouseover="showTooltip = true"
+              @mouseleave="showTooltip = false"
+            />
+          </UnnnicTooltip>
+          <span class="unnnic-slider__content__labels__max">{{
+            maxLabel
+          }}</span>
+        </section>
+      </section>
+      <template v-if="showInputValue">
+        <input
+          ref="value-input"
+          class="value-input"
+          @input="handleInput"
+          :value="sliderVal"
+        />
+      </template>
+    </section>
+  </article>
 </template>
 
 <script>
-import unnnicTooltip from '../ToolTip/ToolTip.vue';
+import UnnnicTooltip from '../ToolTip/ToolTip.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'unnnic-slider',
   components: {
-    unnnicTooltip,
+    UnnnicTooltip,
+    UnnnicIcon,
   },
   props: {
     initialValue: {
       type: Number,
       default: 0,
     },
+    showInputValue: {
+      type: Boolean,
+      default: true,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    labelInfo: {
+      type: String,
+      default: '',
+    },
     minValue: {
       type: Number,
       default: 0,
@@ -102,7 +146,9 @@ export default {
       handler() {
         this.$nextTick(() => {
           this.configureTooltip();
-          if (this.$refs['value-input'].textContent !== this.sliderVal) {
+          const ValueInput = this.$refs['value-input'];
+
+          if (ValueInput && ValueInput.textContent !== this.sliderVal) {
             this.$refs['value-input'].textContent = this.sliderVal;
           }
         });
@@ -125,13 +171,13 @@ export default {
       this.$emit('valueChange', this.sliderVal);
     },
     handleInput(event) {
-      this.sliderVal = event.srcElement.textContent;
+      this.sliderVal = event.target.value;
 
       this.handleValueChange();
     },
     getNewTooltipPosition() {
       const haldThumbWidth = 12 / 2;
-      const halfLabelWidth = this.labelWidth / 2;
+      const halfLabelWidth = (this.labelWidth === 0 ? 32 : this.labelWidth) / 2;
       const centerPosition = this.sliderWidth / 2;
 
       let percentOfRange =
@@ -176,10 +222,18 @@ export default {
   box-sizing: border-box;
   font-size: $unnnic-font-size-body-md;
   line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
-  padding: $unnnic-squish-nano;
+  min-width: 70px;
+  max-width: 70px;
+  padding: $unnnic-spacing-xs $unnnic-spacing-sm $unnnic-spacing-xs
+    $unnnic-spacing-sm;
+  gap: $unnnic-spacing-xs;
   height: $unnnic-font-size-body-md + $unnnic-line-height-medium + 0.5 *
     $unnnic-font-size * 2;
   position: relative;
+  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 
   &:before {
     content: ' ';
@@ -188,13 +242,12 @@ export default {
     right: 0;
     top: 0;
     bottom: 0;
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
     border-radius: inherit;
     pointer-events: none;
   }
 
   &:focus:before {
-    border-color: $unnnic-color-neutral-cleanest;
+    border-color: $unnnic-color-neutral-clean;
   }
 
   &:focus {
@@ -206,9 +259,32 @@ export default {
 <style lang="scss">
 @import '../../assets/scss/unnnic.scss';
 
+.unnnic-label {
+  display: flex;
+  gap: $unnnic-spacing-xs;
+
+  &__tooltip {
+    display: flex;
+    align-self: center;
+
+    &__icon {
+      cursor: default;
+    }
+  }
+}
+
 .unnnic-slider {
   display: flex;
   width: 100%;
+
+  &__label {
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+    font-size: $unnnic-font-size-body-gt;
+    color: $unnnic-color-neutral-cloudy;
+    margin: $unnnic-spacing-stack-xs 0;
+  }
   &__content {
     display: flex;
     flex-direction: column;
@@ -216,22 +292,30 @@ export default {
     margin-top: $unnnic-spacing-stack-xs;
 
     &__tooltip {
-      display: flex !important;
+      display: flex;
       width: 100%;
       align-self: center;
     }
 
     &__labels {
       display: flex;
+      gap: $unnnic-spacing-ant;
 
-      font-family: $unnnic-font-family-secondary;
-      font-weight: $unnnic-font-weight-regular;
-      font-size: $unnnic-font-size-body-md;
-      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-      color: $unnnic-color-neutral-cloudy;
+      &__min {
+        font-family: $unnnic-font-family-secondary;
+        font-weight: $unnnic-font-weight-regular;
+        font-size: $unnnic-font-size-body-md;
+        line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+        color: $unnnic-color-neutral-cloudy;
+      }
 
       &__max {
         margin-left: auto;
+        font-family: $unnnic-font-family-secondary;
+        font-weight: $unnnic-font-weight-regular;
+        font-size: $unnnic-font-size-body-md;
+        line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+        color: $unnnic-color-neutral-cloudy;
       }
     }
 
@@ -244,14 +328,10 @@ export default {
         box-sizing: border-box;
         width: $unnnic-icon-size-xs;
         height: $unnnic-icon-size-xs;
-        background: $unnnic-color-neutral-snow;
-        border: $unnnic-border-width-thin solid $unnnic-color-aux-baby-blue;
+        background: $unnnic-color-weni-600;
+        border: $unnnic-border-width-thin solid $unnnic-color-weni-600;
         border-radius: 50%;
 
-        &:hover {
-          border: $unnnic-border-width-thin solid $unnnic-color-aux-blue;
-        }
-
         &:active {
           box-shadow: $unnnic-shadow-level-near;
         }
@@ -290,8 +370,8 @@ export default {
         );
         background: linear-gradient(
           to right,
-          $unnnic-color-aux-baby-blue 0%,
-          $unnnic-color-aux-baby-blue calc(var(--progress)),
+          $unnnic-color-weni-600 0%,
+          $unnnic-color-weni-600 calc(var(--progress)),
           $unnnic-color-neutral-soft calc(var(--progress)),
           $unnnic-color-neutral-soft 100%
         );
@@ -307,7 +387,7 @@ export default {
 
       @mixin fill() {
         height: 4px;
-        background: $unnnic-color-aux-baby-blue;
+        background: $unnnic-color-weni-600;
       }
 
       /* Firefox */

package/src/components/StarRating/StarRating.vue

@@ -12,8 +12,8 @@
       v-if="showValue"
       class="rating-title"
     >
-      <span class="highlight">{{ value.toFixed(1) }}</span
-      >/5.0
+      <span class="highlight"> {{ modelValue.toFixed(1) }} </span>
+      /5.0
     </div>
   </div>
 </template>
@@ -27,7 +27,7 @@ export default {
   },
 
   props: {
-    value: {
+    modelValue: {
       type: Number,
     },
 
@@ -46,7 +46,7 @@ export default {
 
   methods: {
     starScheme(star) {
-      return star <= this.value ? 'feedback-yellow' : 'neutral-clean';
+      return star <= this.modelValue ? 'feedback-yellow' : 'neutral-clean';
     },
   },
 };

package/src/components/Switch/Switch.vue

@@ -17,6 +17,8 @@
       :size="iconSize"
       :scheme="iconScheme"
       :lineHeight="iconLineHeight"
+      :disabled="disabled"
+      :clickable="!disabled"
       @click="toggleState"
     />
 

package/src/components/Tab/Tab.vue

@@ -13,6 +13,19 @@
           @click="change(tab)"
         >
           <slot :name="tabHeadSlotName(tab)">{{ tab }} </slot>
+          <UnnnicToolTip
+            v-if="getHeadTooltip(tab)"
+            enabled
+            :text="getHeadTooltip(tab)"
+            side="bottom"
+          >
+            <UnnnicIcon
+              icon="info"
+              :size="size === 'sm' ? 'xs' : 'sm'"
+              filled
+              scheme="neutral-cleanest"
+            />
+          </UnnnicToolTip>
         </li>
       </ul>
     </header>
@@ -23,11 +36,18 @@
 </template>
 
 <script>
+import UnnnicIcon from '../Icon.vue';
+import UnnnicToolTip from '../ToolTip/ToolTip.vue';
+
 export default {
   model: {
     prop: 'activeTab',
     event: 'change',
   },
+  components: {
+    UnnnicIcon,
+    UnnnicToolTip,
+  },
   props: {
     size: {
       type: String,
@@ -71,6 +91,17 @@ export default {
     tabHeadSlotName(tabName) {
       return `tab-head-${tabName}`;
     },
+    tabHeadTooltipSlotName(tabName) {
+      return tabName ? `tab-head-${tabName}-tooltip` : '';
+    },
+    getHeadTooltip(tabName) {
+      const tooltipSlot = this.$slots[this.tabHeadTooltipSlotName(tabName)];
+
+      if (tooltipSlot) {
+        return tooltipSlot()?.[0]?.children;
+      }
+      return '';
+    },
     change(value) {
       this.localValue = value;
       this.$emit('change', this.localValue);
@@ -86,40 +117,68 @@ export default {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  color: $unnnic-color-neutral-cleanest;
+  color: $unnnic-color-neutral-cloudy;
   font-family: $unnnic-font-family-secondary;
   font-weight: $unnnic-font-weight-bold;
   font-size: $unnnic-font-size-body-lg;
   line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
-  padding-bottom: $unnnic-inset-sm;
   margin-bottom: $unnnic-inset-sm;
   border-bottom: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
 }
 
 .tab-content {
   display: flex;
+  gap: $unnnic-spacing-sm;
+
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
 .tab-head {
+  display: flex;
+  gap: $unnnic-spacing-xs;
+  align-items: center;
+
   cursor: pointer;
-  margin-right: $unnnic-inset-md;
+  margin: $unnnic-spacing-xs $unnnic-spacing-sm;
+
+  .unnnic-tooltip {
+    display: flex;
+  }
+
+  &:hover {
+    color: $unnnic-color-neutral-black;
+  }
 }
 
 .tab-head--active {
   font-family: $unnnic-font-family-secondary;
   font-weight: $unnnic-font-weight-bold;
-  color: $unnnic-color-neutral-darkest;
+  color: $unnnic-color-neutral-black;
   font-size: $unnnic-font-size-body-lg;
   line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
   transition: 0.4s;
+
+  position: relative;
+
+  &::after {
+    content: '';
+
+    position: absolute;
+    bottom: -$unnnic-spacing-xs;
+    left: -$unnnic-spacing-sm;
+
+    display: block;
+
+    width: calc(100% + (#{$unnnic-spacing-sm} * 2));
+
+    border-bottom: $unnnic-border-width-thin solid $unnnic-color-weni-600;
+  }
 }
 
 .tab.size-sm {
   .tab-header {
-    padding-bottom: $unnnic-spacing-stack-xs;
     margin-bottom: $unnnic-spacing-stack-xs;
 
     .tab-head,

package/src/components/TextArea/TextArea.vue

@@ -147,7 +147,7 @@ export default {
     font-weight: $unnnic-font-weight-regular;
 
     &::placeholder {
-      color: $unnnic-color-neutral-cloudy;
+      color: $unnnic-color-neutral-cleanest;
       font-family: $unnnic-font-family-secondary;
       font-size: $unnnic-font-size-body-gt;
       line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
@@ -156,9 +156,6 @@ export default {
 
     &:focus {
       border-color: $unnnic-color-neutral-clean;
-      &::placeholder {
-        color: $unnnic-color-neutral-cleanest;
-      }
     }
   }
 

package/src/components/ToolTip/ToolTip.vue

@@ -21,6 +21,12 @@
         {{ line }}
         <br />
       </template>
+
+      <template v-if="shortcutText">
+        <span class="unnnic-tooltip-label-shortcut">
+          {{ shortcutText }}
+        </span>
+      </template>
     </span>
   </div>
 </template>
@@ -72,6 +78,10 @@ export default {
     maxWidth: {
       type: String,
     },
+    shortcutText: {
+      type: String,
+      default: null,
+    },
   },
   methods: {
     handleResize() {
@@ -83,31 +93,15 @@ 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`;
         }
       }
@@ -134,6 +128,10 @@ export default {
   min-width: 2 * $unnnic-font-size;
   box-sizing: border-box;
   width: auto;
+  display: flex;
+  justify-content: center;
+  gap: $unnnic-spacing-xs;
+  align-items: center;
 
   background-color: $unnnic-color-neutral-black;
   color: $unnnic-color-neutral-snow;
@@ -193,6 +191,12 @@ export default {
         $unnnic-color-neutral-black;
     }
   }
+
+  &-shortcut {
+    background-color: $unnnic-color-neutral-darkest;
+    border-radius: $unnnic-border-radius-sm;
+    padding: calc($unnnic-inset-nano / 2) $unnnic-inset-nano;
+  }
 }
 
 .unnnic-tooltip.force-open {

package/src/locales/en.json

@@ -1,15 +1,18 @@
-{
-  "upload_area": {
-    "title": {
-      "text": "Drag your file here or",
-      "highlight": "search it"
-    },
-    "invalid": {
-      "subtitle": "File not supported, select supported formats:"
-    },
-    "subtitle": "Supported formats:"
-  },
-  "import_card": {
-    "importing": "Importing"
-  }
-}
+{
+  "upload_area": {
+    "title": {
+      "text": "Drag your file here or",
+      "highlight": "search it"
+    },
+    "invalid": {
+      "subtitle": "File not supported, select supported formats:"
+    },
+    "subtitle": "Supported formats:"
+  },
+  "import_card": {
+    "importing": "Importing"
+  },
+  "audio_recorder": {
+    "discard_button" : "Discard"
+  }
+}

package/src/locales/es.json

@@ -1,15 +1,18 @@
-{
-  "upload_area": {
-    "title": {
-      "text": "Arrastra tu archivo aquí o",
-      "highlight": "búscalo"
-    },
-    "invalid": {
-      "subtitle": "Archivo no compatible, seleccione los formatos compatibles:"
-    },
-    "subtitle": "Formatos compatibles:"
-  },
-  "import_card": {
-    "importing": "Importando"
-  }
-}
+{
+  "upload_area": {
+    "title": {
+      "text": "Arrastra tu archivo aquí o",
+      "highlight": "búscalo"
+    },
+    "invalid": {
+      "subtitle": "Archivo no compatible, seleccione los formatos compatibles:"
+    },
+    "subtitle": "Formatos compatibles:"
+  },
+  "import_card": {
+    "importing": "Importando"
+  },
+  "audio_recorder": {
+    "discard_button" : "Descartar"
+  }
+}