@weni/unnnic-system 2.22.0 → 2.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/SelectSmart/SelectSmart.vue

@@ -1,7 +1,10 @@
 <template>
   <div
     v-on-click-outside="onClickOutside"
-    class="unnnic-select-smart"
+    :class="[
+      'unnnic-select-smart',
+      { 'unnnic-select-smart--secondary': type === 'secondary' },
+    ]"
     data-testid="select-smart"
     @keydown="onKeyDownSelect"
   >
@@ -13,7 +16,10 @@
     >
       <TextInput
         ref="selectSmartInput"
-        class="unnnic-select-smart__input"
+        :class="[
+          'unnnic-select-smart__input',
+          { 'unnnic-select-smart__input--secondary': type === 'secondary' },
+        ]"
         data-testid="select-smart-input"
         :modelValue="inputValue"
         :placeholder="placeholder || autocompletePlaceholder || selectedLabel"
@@ -75,6 +81,7 @@
                 "
                 :focused="focusedOption && focusedOption.value === option.value"
                 :allowCheckbox="!!multiple"
+                :activeColor="type === 'secondary' ? 'secondary' : 'primary'"
                 @click="handleSelect(option)"
               />
               <p
@@ -140,7 +147,7 @@ export default {
       type: String,
       default: 'normal',
       validator(value) {
-        return ['normal', 'error'].indexOf(value) !== -1;
+        return ['normal', 'error', 'secondary'].indexOf(value) !== -1;
       },
     },
     disabled: {
@@ -640,11 +647,27 @@ export default {
       display: block;
       z-index: 2;
     }
+
+    .unnnic-select-smart--secondary & {
+      border-radius: 0.25rem;
+      margin-top: -1px;
+      box-shadow: $unnnic-shadow-level-near;
+    }
   }
 
-  .unnnic-select-smart__input input {
-    // entire class name to have higher priority in styles
+  &--secondary {
+    .unnnic-select-smart__input {
+      .unnnic-input {
+        border-radius: $unnnic-border-radius-sm $unnnic-border-radius-sm 0 0;
+      }
 
+      &.active .unnnic-input {
+        border-bottom-color: transparent;
+      }
+    }
+  }
+
+  .unnnic-select-smart__input input {
     &:read-only {
       cursor: pointer;
     }
@@ -653,6 +676,14 @@ export default {
       cursor: not-allowed;
     }
   }
+
+  .unnnic-select-smart__input--secondary input {
+    border: none;
+    color: $unnnic-color-neutral-darkest;
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-line-height-md + $unnnic-font-size-body-gt;
+  }
 }
 
 ::-webkit-scrollbar {

package/src/components/SelectSmart/SelectSmartOption.vue

@@ -4,6 +4,8 @@
       'unnnic-select-smart-option': true,
       'unnnic-select-smart-option--focused': focused,
       'unnnic-select-smart-option--active': active,
+      'unnnic-select-smart-option--active-secondary':
+        active && activeColor === 'secondary',
       'unnnic--clickable': selectable,
       'unnnic-select-smart-option--selectable': selectable,
       'unnnic-select-smart-option--with-checkbox': allowCheckbox,
@@ -79,6 +81,13 @@ export default {
       default: false,
     },
     isMultiple: Boolean,
+    activeColor: {
+      type: String,
+      default: 'primary',
+      validator(value) {
+        return ['primary', 'secondary'].indexOf(value) !== -1;
+      },
+    },
   },
 };
 </script>
@@ -114,6 +123,10 @@ export default {
   &--active:not(&--with-checkbox) {
     color: $unnnic-color-weni-600;
     font-weight: $unnnic-font-weight-bold;
+
+    &.unnnic-select-smart-option--active-secondary {
+      color: $unnnic-color-neutral-darkest;
+    }
   }
 
   &--with-checkbox {

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

@@ -237,4 +237,70 @@ describe('SelectSmart.vue', () => {
       expect(wrapper.emitted('update:modelValue')[0][0]).toEqual([options[1]]);
     });
   });
+
+  describe('Secondary Type', () => {
+    beforeEach(() => {
+      mountWrapper({
+        type: 'secondary',
+      });
+    });
+
+    it('should apply secondary class to root element when type is secondary', () => {
+      expect(selectSmart().classes()).toContain(
+        'unnnic-select-smart--secondary',
+      );
+    });
+
+    it('should apply secondary class to input when type is secondary', () => {
+      expect(input().classes()).toContain(
+        'unnnic-select-smart__input--secondary',
+      );
+    });
+
+    it('should maintain secondary styling when dropdown is opened', async () => {
+      await input().trigger('click');
+      expect(selectSmart().classes()).toContain(
+        'unnnic-select-smart--secondary',
+      );
+      expect(optionsContainer().exists()).toBe(true);
+    });
+  });
+
+  describe('SelectSmartOption activeColor', () => {
+    beforeEach(async () => {
+      mountWrapper({
+        options: [
+          { label: 'Apple', value: 'apple' },
+          { label: 'Banana', value: 'banana' },
+          { label: 'Orange', value: 'orange' },
+        ],
+      });
+    });
+
+    it('passes primary activeColor by default', async () => {
+      wrapper.vm.active = true;
+      await nextTick();
+
+      const option = wrapper.findComponent('[data-testid="option"]');
+      expect(option.props('activeColor')).toBe('primary');
+    });
+
+    it('passes secondary activeColor when type is secondary', async () => {
+      await wrapper.setProps({ type: 'secondary' });
+      wrapper.vm.active = true;
+      await nextTick();
+
+      const option = wrapper.findComponent('[data-testid="option"]');
+      expect(option.props('activeColor')).toBe('secondary');
+    });
+
+    it('maintains primary activeColor for error type', async () => {
+      await wrapper.setProps({ type: 'error' });
+      wrapper.vm.active = true;
+      await nextTick();
+
+      const option = wrapper.findComponent('[data-testid="option"]');
+      expect(option.props('activeColor')).toBe('primary');
+    });
+  });
 });

package/src/components/SelectSmart/__tests__/SelectSmartOption.spec.js

@@ -111,4 +111,29 @@ describe('SelectSmartOption.vue', () => {
       );
     });
   });
+
+  describe('Active color variants', () => {
+    it('uses primary color by default when active', async () => {
+      await wrapper.setProps({
+        active: true,
+        allowCheckbox: false,
+      });
+      expect(wrapper.classes()).toContain('unnnic-select-smart-option--active');
+      expect(wrapper.classes()).not.toContain(
+        'unnnic-select-smart-option--active-secondary',
+      );
+    });
+
+    it('uses secondary color when activeColor is secondary', async () => {
+      await wrapper.setProps({
+        active: true,
+        activeColor: 'secondary',
+        allowCheckbox: false,
+      });
+      expect(wrapper.classes()).toContain('unnnic-select-smart-option--active');
+      expect(wrapper.classes()).toContain(
+        'unnnic-select-smart-option--active-secondary',
+      );
+    });
+  });
 });

package/src/stories/SelectSmart.stories.js

@@ -74,6 +74,18 @@ const TemplateDisabled = (args, { argTypes }) => ({
   `,
 });
 
+const TemplateSecondary = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicSelectSmart },
+  setup() {
+    return { args };
+  },
+  data() {
+    return { exampleValue: [] };
+  },
+  template: `<unnnicSelectSmart v-bind="args" v-model="exampleValue"/>`,
+});
+
 export const Default = {
   args: {
     options: [
@@ -228,3 +240,18 @@ export const Multiple = {
     multipleWithoutSelectsMessage: 'No country selected yet :(',
   },
 };
+
+export const Secondary = TemplateSecondary.bind({});
+Secondary.args = {
+  type: 'secondary',
+  options: [
+    { value: '', label: 'Select some option' },
+    { value: '5', label: 'Option 5' },
+    { value: '3', label: 'Option 3' },
+    { value: '1', label: 'Option 1' },
+    { value: '4', label: 'Option 4' },
+    { value: '2', label: 'Option 2' },
+    { value: '6', label: 'Option 6' },
+    { value: '7', label: 'Option 7' },
+  ],
+};