@weni/unnnic-system 3.31.1-alpha.2 → 3.32.0

package/src/components/Radio/__test__/Radio.spec.js

@@ -0,0 +1,145 @@
+import { mount } from '@vue/test-utils';
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import Radio from '@/components/Radio/Radio.vue';
+import RadioGroup from '@/components/RadioGroup/RadioGroup.vue';
+import UnnnicIcon from '@/components/Icon.vue';
+
+describe('Radio.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Radio, {
+      props: {
+        modelValue: '',
+        value: 'option1',
+        disabled: false,
+        size: 'md',
+      },
+      global: {
+        components: {
+          UnnnicIcon,
+        },
+      },
+      slots: {
+        default: 'Option 1',
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  test('renders input with correct attributes', () => {
+    const input = wrapper.find('input');
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('type')).toBe('radio');
+    expect(input.attributes('disabled')).toBe(undefined);
+    expect(input.attributes('checked')).toBe(undefined);
+  });
+
+  test('applies disabled class when disabled prop is true', async () => {
+    await wrapper.setProps({ disabled: true });
+    expect(wrapper.find('.unnnic-radio__label').classes()).toContain(
+      'unnnic-radio__label--disabled',
+    );
+  });
+
+  test('icon changes based on valueName', async () => {
+    await wrapper.setProps({ modelValue: 'option1' });
+    const input = wrapper.find('input');
+    expect(input.attributes()).toHaveProperty('checked');
+  });
+
+  test('icon and color change when disabled is true', async () => {
+    await wrapper.setProps({ disabled: true });
+    const input = wrapper.find('input');
+    expect(input.attributes()).toHaveProperty('disabled');
+  });
+
+  test('emits update:modelValue with correct value when clicked and not disabled', async () => {
+    await wrapper.find('input').trigger('change');
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['option1']);
+  });
+
+  test('does not emit update:modelValue when clicked and disabled', async () => {
+    await wrapper.setProps({ disabled: true });
+    await wrapper.trigger('click');
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+  });
+
+  test('matches the snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test('renders helper text when provided', async () => {
+    await wrapper.setProps({ helper: 'Radio helper' });
+    expect(wrapper.find('.unnnic-radio__helper').text()).toBe('Radio helper');
+  });
+
+  test('renders label prop', async () => {
+    await wrapper.setProps({ label: 'Radio label' });
+    expect(wrapper.find('.unnnic-radio__label').text()).toContain(
+      'Radio label',
+    );
+  });
+
+  test('uses name prop when radio is standalone', () => {
+    const standalone = mount(Radio, {
+      props: {
+        modelValue: '',
+        value: 'option1',
+        name: 'standalone-radio',
+      },
+      global: { components: { UnnnicIcon } },
+    });
+
+    expect(standalone.find('input').attributes('name')).toBe(
+      'standalone-radio',
+    );
+    standalone.unmount();
+  });
+
+  test('uses injected name when inside RadioGroup without name prop', () => {
+    const groupWrapper = mount(RadioGroup, {
+      props: { modelValue: '', name: 'group-name' },
+      slots: {
+        default: '<Radio value="option1" label="Option 1" />',
+      },
+      global: {
+        components: { Radio },
+        stubs: { UnnnicLabel: true },
+      },
+    });
+
+    expect(groupWrapper.find('input[type="radio"]').attributes('name')).toBe(
+      'group-name',
+    );
+    groupWrapper.unmount();
+  });
+
+  test('updates group context value when used inside RadioGroup', async () => {
+    const groupWrapper = mount(RadioGroup, {
+      props: { modelValue: '' },
+      slots: {
+        default: '<Radio value="option1" label="Option 1" />',
+      },
+      global: {
+        components: { Radio },
+        stubs: {
+          UnnnicLabel: true,
+        },
+      },
+    });
+
+    await groupWrapper.find('input[type="radio"]').trigger('change');
+
+    expect(groupWrapper.emitted('update:modelValue')[0]).toEqual(['option1']);
+    groupWrapper.unmount();
+  });
+});

package/src/components/Radio/__test__/__snapshots__/Radio.spec.js.snap

@@ -0,0 +1,8 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Radio.vue > matches the snapshot 1`] = `
+"<section data-v-38c6bf5e="" class="unnnic-radio" size="md"><label data-v-38c6bf5e="" class="unnnic-radio__input-wrapper"><input data-v-38c6bf5e="" class="unnnic-radio__input" type="radio" name="">
+    <p data-v-38c6bf5e="" class="unnnic-radio__label"> Option 1</p>
+    <!--v-if-->
+  </label></section>"
+`;

package/src/components/RadioGroup/RadioGroup.vue

@@ -0,0 +1,128 @@
+<template>
+  <section
+    :class="[
+      'unnnic-radio-group__container',
+      `unnnic-radio-group--state-${state}`,
+    ]"
+  >
+    <UnnnicLabel
+      v-if="label"
+      :label="label"
+      :tooltip="labelTooltip"
+      class="unnnic-radio-group__label"
+    />
+
+    <section class="unnnic-radio-group__radios">
+      <slot />
+    </section>
+
+    <footer
+      v-if="helper"
+      class="unnnic-radio-group__helper"
+    >
+      {{ helper }}
+    </footer>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, provide, watch, computed } from 'vue';
+import UnnnicLabel from '../Label/Label.vue';
+import { type TooltipProps } from '../ToolTip/ToolTip.vue';
+
+defineOptions({
+  name: 'UnnnicRadioGroup',
+});
+
+export interface RadioGroupProps {
+  modelValue?: string | number;
+  state?: 'horizontal' | 'vertical';
+  label?: string;
+  labelTooltip?: TooltipProps;
+  name?: string;
+  helper?: string;
+}
+
+const props = withDefaults(defineProps<RadioGroupProps>(), {
+  modelValue: '',
+  state: 'horizontal',
+  label: '',
+  labelTooltip: undefined,
+  name: '',
+  helper: '',
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const contextModelValue = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal !== contextModelValue.value) {
+      contextModelValue.value = newVal;
+    }
+  },
+);
+
+watch(contextModelValue, (newVal) => {
+  if (newVal !== props.modelValue) {
+    emit('update:modelValue', newVal);
+  }
+});
+
+const computedName = computed(() => {
+  return (
+    props.name ||
+    `unnnic-radio-group-${Math.random().toString(36).substring(2, 15)}`
+  );
+});
+
+provide('contextModelValue', contextModelValue);
+provide('contextName', computedName);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-radio-group {
+  &__container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__label {
+    margin-bottom: $unnnic-space-3;
+  }
+
+  &__radios {
+    display: flex;
+    gap: $unnnic-space-4 $unnnic-space-6;
+  }
+
+  &__helper {
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-base;
+  }
+
+  &--state-horizontal {
+    .unnnic-radio-group__radios {
+      flex-direction: row;
+    }
+
+    .unnnic-radio-group__helper {
+      margin-top: $unnnic-space-2;
+    }
+  }
+
+  &--state-vertical {
+    .unnnic-radio-group__radios {
+      flex-direction: column;
+    }
+
+    .unnnic-radio-group__helper {
+      margin-top: $unnnic-space-3;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import RadioGroup from '../RadioGroup.vue';
+import Radio from '../../Radio/Radio.vue';
+
+const mountRadioGroup = (props = {}, slots = {}) =>
+  mount(RadioGroup, {
+    props: {
+      modelValue: '',
+      ...props,
+    },
+    slots: {
+      default: `
+        <Radio value="a" label="Option A" />
+        <Radio value="b" label="Option B" />
+      `,
+      ...slots,
+    },
+    global: {
+      components: { Radio },
+      stubs: {
+        UnnnicLabel: {
+          props: ['label', 'tooltip'],
+          template:
+            '<label data-testid="radio-group-label">{{ label }}</label>',
+        },
+      },
+    },
+  });
+
+describe('RadioGroup', () => {
+  it('renders radios in slot', () => {
+    const wrapper = mountRadioGroup();
+
+    expect(wrapper.findAllComponents(Radio).length).toBe(2);
+  });
+
+  it('renders label and helper when provided', () => {
+    const wrapper = mountRadioGroup({
+      label: 'Choose one',
+      helper: 'Select an option',
+    });
+
+    expect(wrapper.find('[data-testid="radio-group-label"]').text()).toBe(
+      'Choose one',
+    );
+    expect(wrapper.find('.unnnic-radio-group__helper').text()).toBe(
+      'Select an option',
+    );
+  });
+
+  it('emits update:modelValue when a radio is selected', async () => {
+    const wrapper = mountRadioGroup();
+
+    await wrapper.findAll('input[type="radio"]')[0].trigger('change');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['a']);
+  });
+
+  it('syncs modelValue from parent', async () => {
+    const wrapper = mountRadioGroup({ modelValue: 'b' });
+
+    await wrapper.setProps({ modelValue: 'a' });
+
+    const inputs = wrapper.findAll('input[type="radio"]');
+    expect(inputs[0].element.checked).toBe(true);
+  });
+
+  it('does not emit when modelValue is already in sync', async () => {
+    const wrapper = mountRadioGroup({ modelValue: 'a' });
+
+    await wrapper.setProps({ modelValue: 'a' });
+
+    expect(wrapper.emitted('update:modelValue') ?? []).toHaveLength(0);
+  });
+
+  it('uses custom name when provided', () => {
+    const wrapper = mountRadioGroup({ name: 'custom-group' });
+
+    expect(wrapper.find('input[type="radio"]').attributes('name')).toBe(
+      'custom-group',
+    );
+  });
+
+  it('generates a random group name when name is not provided', () => {
+    const wrapper = mountRadioGroup();
+
+    expect(wrapper.find('input[type="radio"]').attributes('name')).toMatch(
+      /^unnnic-radio-group-/,
+    );
+  });
+
+  it('applies vertical state class', () => {
+    const wrapper = mountRadioGroup({ state: 'vertical' });
+
+    expect(wrapper.classes()).toContain('unnnic-radio-group--state-vertical');
+  });
+});

package/src/components/Select/SelectItem.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    :class="{
+      'unnnic-select-item': true,
+      'unnnic-select-item__active': active,
+      'unnnic--clickable': selectable,
+      'unnnic-select-item--selectable': selectable,
+      'text-focused': textFocused,
+    }"
+    @click="$emit('click')"
+  >
+    <span
+      :class="[
+        'unnnic-select-item__label',
+        `unnnic-select-item__label--${size}`,
+      ]"
+    >
+      <slot />
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UnnicSelectItem',
+  props: {
+    size: {
+      type: String,
+      default: '',
+    },
+    selectable: {
+      type: Boolean,
+      default: true,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    textFocused: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@use '@/assets/scss/unnnic' as *;
+.unnnic-select-item {
+  background-color: $unnnic-color-bg-base;
+  padding: $unnnic-spacing-stack-nano $unnnic-inline-xs;
+  margin: $unnnic-inline-xs;
+
+  font-family: $unnnic-font-family-secondary;
+  color: $unnnic-color-fg-base;
+  font-weight: $unnnic-font-weight-regular;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 100%;
+  -webkit-line-clamp: 1;
+
+  &.text-focused {
+    color: $unnnic-color-teal-8;
+    font-weight: $unnnic-font-weight-bold;
+  }
+
+  &--selectable:hover,
+  &__active {
+    background-color: $unnnic-color-bg-base-soft;
+    border-radius: $unnnic-border-radius-sm;
+  }
+
+  &__label {
+    &--md {
+      font-size: $unnnic-font-size-body-gt;
+      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+    }
+    &--sm {
+      font-size: $unnnic-font-size-body-md;
+      line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
+    }
+  }
+}
+</style>