@weni/unnnic-system 2.0.9 → 2.0.11

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/Disclaimer/Disclaimer.vue

@@ -0,0 +1,64 @@
+<template>
+  <section class="unnnic-disclaimer">
+    <unnnic-icon
+      class="unnnic-disclaimer__icon"
+      size="avatar-nano"
+      :icon="icon"
+      :scheme="iconColor"
+    />
+    <p class="unnnic-disclaimer__text">{{ text }}</p>
+  </section>
+</template>
+
+<script>
+import icons from '../../utils/iconList';
+import colors from '../../utils/colorsList';
+
+import unnnicIcon from '../Icon.vue';
+
+export default {
+  name: 'unnnic-disclaimer',
+  components: { unnnicIcon },
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      default: 'alert-circle-1-1',
+      validator(value) {
+        return icons.includes(value);
+      },
+    },
+    iconColor: {
+      type: String,
+      validator(value) {
+        return colors.includes(value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+.unnnic-disclaimer {
+  display: inline-flex;
+  align-items: center;
+  gap: $unnnic-spacing-xs;
+  padding: $unnnic-spacing-sm;
+  border-radius: $unnnic-border-radius-sm;
+  border: 1px solid $unnnic-color-neutral-soft;
+  background: $unnnic-color-background-lightest;
+  .unnnic-disclaimer__text {
+    margin: 0;
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-line-height-large * 1.375;
+    font-weight: $unnnic-font-weight-regular;
+    color: $unnnic-color-neutral-dark;
+  }
+}
+
+</style>

package/src/components/Drawer/Drawer.vue

@@ -0,0 +1,234 @@
+<template>
+  <aside v-if="modelValue" class="unnnic-drawer">
+    <section class="unnnic-drawer__overlay"></section>
+    <transition appear name="drawer">
+      <section
+        v-if="showDrawer"
+        :class="['unnnic-drawer__container', wide && 'unnnic-drawer__container--wide']"
+      >
+        <header class="unnnic-drawer__header">
+          <section class="unnnic-drawer__title-container">
+            <h1 class="unnnic-drawer__title">{{ title }}</h1>
+            <p
+              v-if="description"
+              class="unnnic-drawer__description"
+            >
+              {{ description }}
+            </p>
+          </section>
+          <unnnic-icon
+            class="unnnic-drawer__close"
+            icon="arrow_back"
+            size="avatar-nano"
+            clickable
+            @click="close"
+          />
+        </header>
+        <section class="unnnic-drawer__content">
+          <slot name="content"></slot>
+        </section>
+        <footer v-if="showFooter" class="unnnic-drawer__footer">
+          <unnnic-button
+            v-if="secondaryButtonText"
+            size="large"
+            type="tertiary"
+            :text="secondaryButtonText"
+            @click="$emit('secondaryButtonClick')"
+          />
+          <unnnic-button
+            v-if="primaryButtonText"
+            size="large"
+            :type="primaryButtonType"
+            :text="primaryButtonText"
+            @click="$emit('primaryButtonClick')"
+          />
+        </footer>
+      </section>
+    </transition>
+  </aside>
+</template>
+
+<script>
+import unnnicIcon from '../Icon.vue';
+import unnnicButton from '../Button/Button.vue';
+
+export default {
+  name: 'unnnic-drawer',
+  emits: ['primaryButtonClick', 'secondaryButtonClick', 'close'],
+  components: {
+    unnnicIcon,
+    unnnicButton,
+  },
+  data() {
+    return {
+      showDrawer: true,
+    };
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+    },
+    primaryButtonText: {
+      type: String,
+    },
+    primaryButtonType: {
+      type: String,
+      default: 'primary',
+    },
+    secondaryButtonText: {
+      type: String,
+    },
+    wide: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    showFooter() {
+      return !!(this.primaryButtonText || this.secondaryButtonText)
+    }
+  },
+  methods: {
+    close() {
+      this.showDrawer = false;
+      setTimeout(() => {
+        this.$emit('close');
+        this.showDrawer = true;
+      }, 200);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+@keyframes drawerOpen {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes drawerClose {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+.drawer-enter-active,
+.drawer-enter-to {
+  animation: drawerOpen 200ms ease-in;
+}
+
+.drawer-leave-active,
+.drawer-leave-to {
+   display: none;
+   animation: drawerClose 200ms ease-in;
+}
+
+.unnnic-drawer {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 8;
+}
+
+.unnnic-drawer__overlay {
+  z-index: 9;
+  background-color: rgba(0,0,0,0.4);
+  width: 100%;
+  height: 100%;
+
+}
+
+.unnnic-drawer__container {
+  z-index: 10;
+  top: 0;
+  right: 0;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  font-family: $unnnic-font-family-secondary;
+  justify-content: space-between;
+  height: 100%;
+  background-color: $unnnic-color-neutral-white;
+  width: calc(100%/3);
+
+  &--wide {
+    width: 50%;
+  }
+
+  .unnnic-drawer__header {
+    display: flex;
+    justify-content: space-between;
+    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;
+        font-size: $unnnic-font-size-title-sm;
+        font-weight: $unnnic-font-weight-black;
+        line-height: $unnnic-line-height-large * 1.75;
+      }
+
+      .unnnic-drawer__description {
+        color: $unnnic-color-neutral-cloudy;
+        font-family: $unnnic-font-family-secondary;
+        font-size: $unnnic-font-size-body-gt;
+        font-weight: $unnnic-font-weight-regular;
+        line-height: $unnnic-line-height-large * 1.375;
+      }
+    }
+
+    .unnnic-drawer__close {
+      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 ;
+    flex: 1 0 0;
+    :deep(*) {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+  }
+
+  .unnnic-drawer__footer {
+    display: flex;
+    padding: $unnnic-spacing-md;
+    gap: $unnnic-spacing-ant;
+    > * {
+      flex-grow: 1;
+    }
+  }
+}
+</style>

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 */