@weni/unnnic-system 3.8.2-alpha.1 → 3.9.0

package/src/components/Checkbox/Checkbox.vue

@@ -1,49 +1,37 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <section class="unnnic-checkbox">
-    <label
+  <div class="unnnic-checkbox-wrapper">
+    <UnnnicIcon
+      class="unnnic-checkbox"
+      :class="{ disabled }"
+      :icon="icon"
+      :scheme="color"
+      :clickable="!disabled"
+      :size="size"
+      @click="click"
+    />
+
+    <div
+      v-if="textRight"
       :class="[
-        'unnnic-checkbox__input-wrapper',
-        { 'unnnic-checkbox__input-wrapper--disabled': disabled },
+        'unnnic-checkbox__label',
+        'unnnic-checkbox__label__right',
+        `unnnic-checkbox__label__${size}`,
       ]"
+      data-testid="checkbox-text-right"
     >
-      <input
-        :class="[
-          'unnnic-checkbox__input',
-          { 'unnnic-checkbox__input--less': modelValue === 'less' },
-        ]"
-        type="checkbox"
-        :disabled="disabled"
-        :checked="modelValue === 'less' || modelValue"
-        @change="click"
-        v-bind="pick($attrs, ['id', 'name'])"
-      />
-
-      <p
-        v-if="label || textRight"
-        :class="[
-          'unnnic-checkbox__label',
-          { 'unnnic-checkbox__label--disabled': disabled },
-        ]"
-        data-testid="checkbox-text-right"
-      >
-        {{ label || textRight }}
-      </p>
-    </label>
-
-    <p
-      v-if="helper"
-      class="unnnic-checkbox__helper"
-    >
-      {{ helper }}
-    </p>
-  </section>
+      {{ textRight }}
+    </div>
+  </div>
 </template>
 
 <script>
-import { pick } from 'lodash';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
+  components: {
+    UnnnicIcon,
+  },
   model: {
     event: 'change',
   },
@@ -62,16 +50,13 @@ export default {
       default: false,
     },
 
-    label: {
-      type: String,
-      default: '',
-    },
-
-    helper: {
+    size: {
       type: String,
-      default: '',
+      default: 'md',
+      validator(value) {
+        return ['md', 'sm'].includes(value);
+      },
     },
-
     textRight: {
       type: String,
       default: '',
@@ -90,11 +75,25 @@ export default {
 
       return 'less';
     },
+
+    icon() {
+      return {
+        checked: 'checkbox-select',
+        default: this.disabled ? 'checkbox-disable' : 'checkbox-default',
+        less: 'checkbox-less',
+      }[this.valueName];
+    },
+
+    color() {
+      if (this.valueName === 'default') {
+        return 'neutral-clean';
+      }
+
+      return 'brand-weni';
+    },
   },
 
   methods: {
-    pick,
-
     click() {
       const isChecked = ['checked', 'less'].includes(this.valueName);
       this.$emit('change', !isChecked);
@@ -107,86 +106,35 @@ export default {
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 
-$checkbox-size: 21px;
-
-.unnnic-checkbox {
+.unnnic-checkbox-wrapper {
   display: flex;
-  flex-direction: column;
   align-items: flex-start;
+  cursor: pointer;
+}
 
-  &__input-wrapper {
-    width: fit-content;
-
-    display: flex;
-    align-items: center;
-    column-gap: $unnnic-space-2;
-
-    cursor: pointer;
-
-    &--disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  &__input {
-    appearance: none;
-    width: $checkbox-size;
-    min-width: $checkbox-size;
-    height: $checkbox-size;
-    margin: 0;
-    background-color: $unnnic-color-bg-base;
-    border: 1px solid $unnnic-color-border-base;
-    border-radius: $unnnic-radius-1;
-    box-sizing: border-box;
-
-    outline: none;
-
-    cursor: pointer;
-
-    &:checked {
-      border-width: 0;
-      background-color: $unnnic-color-bg-active;
-      background-image: url('../../assets/icons/checkbox-checked.svg');
-      background-repeat: no-repeat;
-      background-position: center;
-
-      &.unnnic-checkbox__input--less {
-        background-image: url('../../assets/icons/checkbox-less.svg');
-      }
-    }
-
-    &:disabled,
-    &:disabled:checked {
-      background-color: $unnnic-color-bg-muted;
-      border: 1px solid $unnnic-color-border-muted;
-
-      cursor: not-allowed;
-    }
-
-    &:disabled:checked {
-      background-image: url('../../assets/icons/checkbox-checked-disabled.svg');
-
-      &.unnnic-checkbox__input--less {
-        background-image: url('../../assets/icons/checkbox-less-disabled.svg');
-      }
+.unnnic-checkbox {
+  &.disabled {
+    :deep(.primary) {
+      fill: $unnnic-color-neutral-cleanest;
     }
   }
+}
 
-  &__label {
-    margin: 0;
-    font: $unnnic-font-body;
-    color: $unnnic-color-fg-emphasized;
+.unnnic-checkbox__label {
+  font-family: $unnnic-font-family-secondary;
+  font-weight: $unnnic-font-weight-regular;
+  color: $unnnic-color-neutral-darkest;
 
-    &--disabled {
-      color: $unnnic-color-fg-muted;
-    }
+  &__sm {
+    margin-left: $unnnic-inline-nano;
+    font-size: $unnnic-font-size-body-md;
+    line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
   }
 
-  &__helper {
-    margin: 0;
-    margin-left: $checkbox-size + $unnnic-space-2;
-    font: $unnnic-font-caption-2;
-    color: $unnnic-color-fg-base;
+  &__md {
+    margin-left: $unnnic-inline-xs;
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
   }
 }
 </style>

package/src/components/Checkbox/__tests__/Checkbox.spec.js

@@ -24,28 +24,43 @@ describe('Checkbox', () => {
 
   it('should checkbox emit change events', async () => {
     wrapper = createWrapper();
-    const checkbox = wrapper.find('input[type="checkbox"]');
+    const checkbox = wrapper.findComponent({ name: 'UnnnicIcon' });
 
     // click false to true
-    await checkbox.trigger('change');
+    await checkbox.trigger('click');
     expect(wrapper.emitted('change')[0][0]).eq(true);
 
     // click true to false
     await wrapper.setProps({ modelValue: true });
-    await checkbox.trigger('change');
+    await checkbox.trigger('click');
     expect(wrapper.emitted('change')[1][0]).eq(false);
 
     // click less to false
     await wrapper.setProps({ modelValue: 'less' });
-    expect(wrapper.vm.valueName).eq('less');
-    await checkbox.trigger('change');
+    expect(wrapper.vm.icon).eq('checkbox-less');
+    await checkbox.trigger('click');
     expect(wrapper.emitted('change')[2][0]).eq(false);
   });
 
   it('should checkbox disabled', async () => {
     wrapper = createWrapper({ disabled: true });
-    const checkbox = wrapper.find('input[type="checkbox"]');
+    const checkbox = wrapper.findComponent({ name: 'UnnnicIcon' });
     await checkbox.trigger('click');
     expect(wrapper.emitted('change')).eq(undefined);
   });
+
+  it('should define sizes', async () => {
+    wrapper = createWrapper({ size: 'sm', textRight: 'Label' });
+    const checkbox = wrapper.findComponent({ name: 'UnnnicIcon' });
+    const label = wrapper.find('.unnnic-checkbox__label');
+
+    // sm
+    expect(checkbox.classes()).include('unnnic-icon__size--sm');
+    expect(label.classes()).include('unnnic-checkbox__label__sm');
+
+    // md
+    await wrapper.setProps({ size: 'md' });
+    expect(checkbox.classes()).include('unnnic-icon__size--md');
+    expect(label.classes()).include('unnnic-checkbox__label__md');
+  });
 });

package/src/components/Collapse/__tests__/__snapshots__/Collapse.spec.js.snap

@@ -2,9 +2,7 @@
 
 exports[`Collapse.vue > matches the snapshot 1`] = `
 "<div data-v-7d0d9fbd="" data-testid="collapse" class="unnnic-collapse unnnic-collapse--size-lg">
-  <div data-v-7d0d9fbd="" data-testid="collapse-header" class="unnnic-collapse__header">Test Title<svg data-v-26446d8e="" data-v-7d0d9fbd="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--xs unnnic-icon-scheme--neutral-cloudy" data-testid="old-map-icons">
-      <path d="M5.31471 14.0096L19.0432 29.5967C19.1676 29.7264 19.3169 29.8296 19.4822 29.9001C19.6474 29.9707 19.8253 30.007 20.005 30.007C20.1847 30.007 20.3625 29.9707 20.5278 29.9001C20.6931 29.8296 20.8424 29.7264 20.9668 29.5967L34.689 14.0096C34.7987 13.886 34.8825 13.7415 34.9353 13.5849C34.9882 13.4282 35.009 13.2625 34.9965 13.0977C34.984 12.9328 34.9385 12.7721 34.8627 12.6252C34.7869 12.4783 34.6824 12.3481 34.5553 12.2423L32.243 10.2963C31.9852 10.0789 31.6522 9.97163 31.316 9.99759C30.9797 10.0235 30.6671 10.1807 30.4457 10.435L20.2406 22.25C20.2112 22.2841 20.1749 22.3114 20.134 22.3302C20.0931 22.3489 20.0487 22.3587 20.0037 22.3587C19.9588 22.3587 19.9143 22.3489 19.8734 22.3302C19.8326 22.3114 19.7962 22.2841 19.7669 22.25L9.558 10.4338C9.33639 10.1806 9.02374 10.0252 8.68809 10.0013C8.52167 9.9865 8.35397 10.0052 8.19489 10.0563C8.03582 10.1074 7.8886 10.1898 7.76195 10.2988L5.44845 12.2423C5.32061 12.3479 5.21534 12.4781 5.13889 12.6252C5.06245 12.7723 5.0164 12.9332 5.0035 13.0985C4.99099 13.2635 5.01212 13.4294 5.06562 13.586C5.11911 13.7426 5.20386 13.8868 5.31471 14.0096Z" fill="#3B414D" class="primary"></path>
-    </svg></div>
+  <div data-v-7d0d9fbd="" data-testid="collapse-header" class="unnnic-collapse__header">Test Title<span data-v-26446d8e="" data-v-7d0d9fbd="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--xs unnnic-icon__size--xs" data-testid="material-icon" translate="no">expand_more</span></div>
   <div data-v-7d0d9fbd="" class="unnnic-collapse__body" style="display: none;"></div>
 </div>"
 `;

package/src/components/Drawer/__tests__/__snapshots__/Drawer.spec.js.snap

@@ -10,12 +10,12 @@ exports[`Drawer.vue > Component Rendering > Component Rendering > matches the sn
           <h1 data-v-196de012="" class="unnnic-drawer__title" data-testid="drawer-title">Test Title</h1>
           <p data-v-196de012="" class="unnnic-drawer__description" data-testid="drawer-description">Test Description</p>
         </section>
-        <unnnic-icon-stub data-v-196de012="" filled="false" next="false" icon="arrow_back" clickable="true" size="avatar-nano" scheme="neutral-darkest" class="unnnic-drawer__close" data-testid="close-icon"></unnnic-icon-stub>
+        <unnnic-icon-stub data-v-196de012="" filled="false" icon="arrow_back" clickable="true" size="avatar-nano" scheme="neutral-darkest" class="unnnic-drawer__close" data-testid="close-icon"></unnnic-icon-stub>
       </header>
       <section data-v-196de012="" class="unnnic-drawer__content"></section>
       <footer data-v-196de012="" class="unnnic-drawer__footer" data-testid="footer">
-        <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" next="false" disabled="false" loading="false" data-testid="secondary-button"></unnnic-button-stub>
-        <unnnic-button-stub data-v-196de012="" size="large" text="Primary Action" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" next="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
+        <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="secondary-button"></unnnic-button-stub>
+        <unnnic-button-stub data-v-196de012="" size="large" text="Primary Action" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
       </footer>
     </section>
   </transition-stub>

package/src/components/FormElement/FormElement.vue

@@ -3,53 +3,66 @@
     class="unnnic-form-element"
     :class="{ 'unnnic-form-element--disabled': disabled }"
   >
-    <UnnnicLabel
+    <p
       v-if="label"
-      :label="label"
-      :tooltip="tooltip"
       :class="[
         'unnnic-form-element__label',
         {
           'unnnic-form-element__label--fixed': fixedLabel,
         },
       ]"
-    />
+    >
+      {{ fullySanitize(label) }}
+    </p>
 
     <slot></slot>
 
-    <section
-      class="unnnic-form-element__hints-container"
-      v-if="message || error || !!$slots.rightMessage"
+    <p
+      v-if="shouldShowErrorSection"
+      class="unnnic-form-element__error"
+    >
+      <template v-if="error !== true">
+        <UnnnicIcon
+          size="sm"
+          icon="warning"
+          scheme="aux-red-500"
+        />
+
+        {{ fullySanitize(error) }}
+      </template>
+
+      <span
+        v-if="!!$slots.rightMessage"
+        class="unnnic-form-element__right-message"
+      >
+        <slot name="rightMessage"></slot>
+      </span>
+    </p>
+
+    <p
+      v-if="message || !!$slots.rightMessage"
+      class="unnnic-form-element__message"
     >
-      <section class="unnnic-form-element__message-container">
-        <p
-          v-if="message"
-          class="unnnic-form-element__message"
-        >
-          {{ fullySanitize(message) }}
-        </p>
-        <p
-          v-if="!!error.length"
-          class="unnnic-form-element__message error"
-        >
-          {{ Array.isArray(error) ? error.join(', ') : error }}
-        </p>
-      </section>
-      <p v-if="!!$slots.rightMessage">
-        <slot name="rightMessage" />
-      </p>
-    </section>
+      {{ fullySanitize(message) }}
+
+      <span
+        v-if="!shouldShowErrorSection && !!$slots.rightMessage"
+        class="unnnic-form-element__right-message"
+      >
+        <slot name="rightMessage"></slot>
+      </span>
+    </p>
   </section>
 </template>
 
-<script lang="js">
+<script>
+import UnnnicIcon from '../../components/Icon.vue';
 import { fullySanitize } from '../../utils/sanitize';
-import UnnnicLabel from '../Label/Label.vue';
-
 export default {
   components: {
-    UnnnicLabel,
+    UnnnicIcon,
   },
+
   props: {
     size: {
       type: String,
@@ -57,20 +70,28 @@ export default {
       validator: (size) => ['md', 'sm'].includes(size),
     },
 
-    label: { type: String, default: '' },
+    label: String,
 
-    fixedLabel: { type: Boolean, default: false },
+    fixedLabel: Boolean,
 
     error: {
       type: [Boolean, String],
       default: false,
     },
 
-    message: { type: String, default: '' },
+    message: String,
 
-    disabled: { type: Boolean, default: false },
+    disabled: Boolean,
+  },
 
-    tooltip: { type: String, default: '' },
+  data() {
+    return {};
+  },
+
+  computed: {
+    shouldShowErrorSection() {
+      return this.error && (this.error !== true || !!this.$slots.rightMessage);
+    },
   },
   methods: {
     fullySanitize,
@@ -81,66 +102,75 @@ export default {
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 
-* {
-  margin: $unnnic-space-0;
-  padding: $unnnic-space-0;
-  box-sizing: border-box;
-}
-
 .unnnic-form-element {
   &__label {
-    font: $unnnic-font-body;
+    margin: 0;
+    margin-bottom: $unnnic-spacing-nano;
+
     color: $unnnic-color-neutral-cloudy;
-    margin-bottom: $unnnic-space-1;
-    display: flex;
-    align-items: center;
-    gap: $unnnic-space-2;
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+
+    $label-bottom-spacing: 3px;
 
     &--fixed {
-      margin-top: -$unnnic-font-size-body-gt - $unnnic-space-2 + $unnnic-space-1;
+      margin-top: -$unnnic-font-size-body-gt - $unnnic-line-height-md +
+        $label-bottom-spacing;
     }
 
     &--fixed {
-      margin-bottom: $unnnic-space-0;
+      margin-bottom: 0;
       position: absolute;
-      padding: $unnnic-space-0 $unnnic-space-1;
-      margin-left: $unnnic-space-2;
+      padding: 0 $unnnic-spacing-nano;
+      margin-left: $unnnic-spacing-xs;
 
       &:after {
         content: ' ';
         position: absolute;
-        left: $unnnic-space-0;
-        bottom: $unnnic-space-1 - $unnnic-border-width-thinner;
+        left: 0;
+        bottom: $label-bottom-spacing - $unnnic-border-width-thinner;
         width: 100%;
         height: $unnnic-border-width-thinner;
-        background-color: $unnnic-color-white;
+        background-color: $unnnic-color-neutral-white;
       }
     }
   }
 
+  &__error,
   &__message {
-    &.error {
-      color: $unnnic-color-fg-critical;
-    }
+    margin: 0;
+    margin-top: $unnnic-spacing-stack-nano;
+
+    color: $unnnic-color-neutral-cloudy;
+    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;
   }
 
-  &__hints-container {
+  &__message {
     display: flex;
-    justify-content: space-between;
-    margin-top: $unnnic-space-1;
-    font: $unnnic-font-caption-2;
-    color: $unnnic-color-fg-base;
+    column-gap: $unnnic-spacing-nano;
+  }
+
+  &__right-message {
+    margin-left: auto;
   }
 
-  &__message-container {
+  &__error {
     display: flex;
-    flex-direction: column;
-    gap: $unnnic-space-1;
+    column-gap: $unnnic-spacing-nano;
+    align-items: center;
+
+    color: $unnnic-color-aux-red-500;
   }
 
   &--disabled .unnnic-form-element__label,
   &--disabled .unnnic-form-element__message {
     user-select: none;
+    color: $unnnic-color-neutral-cleanest;
   }
 }
 </style>

package/src/components/Icon.vue

@@ -197,8 +197,6 @@ $icon-sizes:
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
 
-  user-select: none;
-
   &--filled {
     font-family: 'Material Symbols Rounded Filled';
   }

package/src/components/Input/BaseInput.vue

@@ -4,18 +4,16 @@
     v-mask="mask"
     v-bind="attributes"
     :value="fullySanitize(modelValue)"
-    :class="[classes, { focus: forceActiveStatus }]"
+    :class="classes"
     :type="nativeType"
-    :readonly="readonly"
   />
+
   <input
     v-else
     v-bind="attributes"
     :value="fullySanitize(modelValue)"
-    :class="[classes, { focus: forceActiveStatus }]"
+    :class="classes"
     :type="nativeType"
-    :maxlength="maxlength"
-    :readonly="readonly"
   />
 </template>
 
@@ -51,19 +49,6 @@ export default {
     },
     hasIconLeft: Boolean,
     hasIconRight: Boolean,
-    hasClearIcon: Boolean,
-    maxlength: {
-      type: Number,
-      default: null,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    forceActiveStatus: {
-      type: Boolean,
-      default: false,
-    },
   },
   emits: ['update:modelValue'],
   data() {
@@ -88,7 +73,6 @@ export default {
         {
           'input--has-icon-left': this.hasIconLeft,
           'input--has-icon-right': this.hasIconRight,
-          'input--has-clear-icon': this.hasClearIcon,
         },
       ];
     },
@@ -112,30 +96,27 @@ export default {
   &.size {
     &-md {
       @include input-md-font;
-      padding: $unnnic-space-3 $unnnic-space-4;
-      height: 45px;
+
+      padding: ($unnnic-spacing-ant - $unnnic-border-width-thinner)
+        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
     }
 
     &-sm {
       @include input-sm-font;
-      padding: $unnnic-space-2 $unnnic-space-4;
-      height: 37px;
+
+      padding: $unnnic-spacing-xs
+        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
     }
   }
 
   &.input--has-icon-left {
-    padding-left: $unnnic-space-10;
+    padding-left: $unnnic-spacing-sm + $unnnic-icon-size-sm +
+      $unnnic-spacing-xs - $unnnic-border-width-thinner;
   }
 
   &.input--has-icon-right {
-    padding-right: $unnnic-space-10;
-    &.input--has-clear-icon {
-      padding-right: $unnnic-space-10 + $unnnic-space-6;
-    }
-  }
-
-  &.input--has-clear-icon {
-    padding-right: $unnnic-space-10;
+    padding-right: $unnnic-spacing-sm + $unnnic-icon-size-sm +
+      $unnnic-spacing-xs - $unnnic-border-width-thinner;
   }
 
   &.error {
@@ -145,7 +126,7 @@ export default {
   &:-ms-input-placeholder,
   &::-ms-input-placeholder {
     /* Internet Explorer 10-11 */
-    color: $unnnic-color-fg-muted;
+    color: $unnnic-color-brand-sec;
   }
 }
 </style>