@weni/unnnic-system 3.10.0 → 3.11.0-alpha.2

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

@@ -0,0 +1,227 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach } from 'vitest';
+import DatePicker from '../DatePicker.vue';
+
+const factory = (props = {}) =>
+  mount(DatePicker, {
+    props: {
+      size: 'large',
+      type: 'day',
+      ...props,
+    },
+    global: {
+      mocks: {
+        $i18n: { locale: 'en-us' },
+      },
+      stubs: {
+        UnnnicButton: true,
+      },
+    },
+  });
+
+const findFirstSelectableDay = (wrapper) =>
+  wrapper
+    .findAll('[data-testid="date-picker-day"]')
+    .find((day) => day.classes().includes('selectable'));
+
+describe('DatePicker.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = factory({
+      options: [
+        { name: 'Last 7 days', id: 'last-7-days' },
+        { name: 'Custom', id: 'custom' },
+      ],
+    });
+  });
+
+  it('renders day view with two months and options', () => {
+    expect(wrapper.find('[data-testid="date-picker-root"]').exists()).toBe(
+      true,
+    );
+    expect(
+      wrapper.findAll('[data-testid="date-picker-month-container"]').length,
+    ).toBe(2);
+    expect(wrapper.findAll('[data-testid="date-picker-option"]').length).toBe(
+      2,
+    );
+  });
+
+  it('selects a date range and emits change', async () => {
+    const first = findFirstSelectableDay(wrapper);
+    const second = wrapper
+      .findAll('[data-testid="date-picker-day"]')
+      .reverse()
+      .find((day) => day.classes().includes('selectable'));
+
+    await first.trigger('click');
+    await second.trigger('click');
+
+    const emittedChange = wrapper.emitted('change');
+    expect(emittedChange).toBeTruthy();
+    const [{ startDate, endDate }] = emittedChange.pop();
+    expect(startDate).not.toBe('');
+    expect(endDate).not.toBe('');
+  });
+
+  it('clears selection when clear button is clicked', async () => {
+    const day = findFirstSelectableDay(wrapper);
+    await day.trigger('click');
+
+    await wrapper.find('[data-testid="date-picker-clear"]').trigger('click');
+
+    expect(wrapper.vm.startDate).toBe('');
+    expect(wrapper.vm.endDate).toBe('');
+    expect(wrapper.vm.optionSelected).toBe('');
+  });
+
+  it('submits with selected period and emits equivalent option name', async () => {
+    await wrapper.vm.autoSelect('last-7-days');
+    await wrapper.find('[data-testid="date-picker-submit"]').trigger('click');
+
+    const submit = wrapper.emitted('submit');
+    const updateEquivalent = wrapper.emitted('update:equivalentOption');
+
+    expect(submit).toBeTruthy();
+    expect(submit[0][0]).toHaveProperty('startDate');
+    expect(submit[0][0]).toHaveProperty('endDate');
+
+    expect(updateEquivalent[0][0]).toBe('Last 7 days');
+  });
+
+  it('submits with custom selection and clears equivalent option', async () => {
+    wrapper.vm.optionSelected = 'custom';
+    await wrapper.find('[data-testid="date-picker-submit"]').trigger('click');
+
+    const updateEquivalent = wrapper.emitted('update:equivalentOption');
+    expect(updateEquivalent[0][0]).toBe('');
+  });
+
+  it('uses periodBaseDate to compute relative ranges', async () => {
+    const base = '2025-01-15';
+    wrapper = factory({
+      periodBaseDate: base,
+      options: [{ name: 'Last 7 days', id: 'last-7-days' }],
+    });
+
+    await wrapper.vm.autoSelect('last-7-days');
+
+    const [year, month, day] = base.split('-');
+    const baseDate = new Date(Number(year), Number(month) - 1, Number(day));
+    const expectedEnd = wrapper.vm.dateToString(baseDate);
+
+    expect(wrapper.vm.endDate).toBe(expectedEnd);
+  });
+
+  it('renders month view and selects a month', async () => {
+    wrapper = factory({
+      type: 'month',
+      options: [{ name: 'Last 12 months', id: 'last-12-months' }],
+    });
+
+    const monthCell = wrapper.find('[data-testid="date-picker-month-cell"]');
+    await monthCell.trigger('click');
+
+    expect(wrapper.vm.startDate).not.toBe('');
+    expect(wrapper.vm.endDate).not.toBe('');
+  });
+
+  it('renders year view and selects a year', async () => {
+    wrapper = factory({
+      type: 'year',
+      options: [{ name: 'Previous year', id: 'previous-year' }],
+    });
+
+    const yearCell = wrapper.find('[data-testid="date-picker-year-cell"]');
+    await yearCell.trigger('click');
+
+    expect(wrapper.vm.startDate).not.toBe('');
+    expect(wrapper.vm.endDate).not.toBe('');
+  });
+
+  it('hides options when size is small and respects disableClear', async () => {
+    wrapper = factory({
+      size: 'small',
+      options: [{ name: 'Last 7 days', id: 'last-7-days' }],
+    });
+    expect(wrapper.find('[data-testid="date-picker-options"]').exists()).toBe(
+      false,
+    );
+
+    wrapper = factory({
+      disableClear: true,
+      options: [{ name: 'Last 7 days', id: 'last-7-days' }],
+    });
+    expect(wrapper.find('[data-testid="date-picker-clear"]').exists()).toBe(
+      false,
+    );
+    expect(wrapper.find('[data-testid="date-picker-submit"]').exists()).toBe(
+      true,
+    );
+  });
+
+  it('navigates between months using navigation buttons', async () => {
+    const initialReference = wrapper.vm.referenceDate;
+
+    const nextButton = wrapper.find('[data-testid="date-picker-nav-right"]');
+    await nextButton.trigger('click');
+
+    expect(wrapper.vm.referenceDate).not.toBe(initialReference);
+  });
+
+  it('exposes i18n helper compatible with previous mixin', () => {
+    const text = wrapper.vm.i18n('clean', 'Clean');
+    expect(text).toBeTruthy();
+  });
+
+  it('computes previous-month period correctly based on periodBaseDate', () => {
+    const base = '2025-03-15';
+    wrapper = factory({
+      periodBaseDate: base,
+      options: [{ name: 'Previous month', id: 'previous-month' }],
+    });
+
+    const { startDate, endDate } =
+      wrapper.vm.getStartAndEndDateByPeriod('previous-month');
+
+    const baseDate = new Date(base);
+    const firstPrevMonth = new Date(
+      baseDate.getFullYear(),
+      baseDate.getMonth() - 1,
+      1,
+    );
+    const lastPrevMonth = new Date(
+      firstPrevMonth.getFullYear(),
+      firstPrevMonth.getMonth() + 1,
+      0,
+    );
+
+    const expectedStart = wrapper.vm.dateToString(firstPrevMonth);
+    const expectedEnd = wrapper.vm.dateToString(lastPrevMonth);
+
+    expect(startDate).toBe(expectedStart);
+    expect(endDate).toBe(expectedEnd);
+  });
+
+  it('marks dates outside minDate and maxDate as out of range', () => {
+    const min = '2025-02-10';
+    const max = '2025-02-20';
+
+    wrapper = factory({
+      minDate: min,
+      maxDate: max,
+    });
+
+    const [year, month] = min.split('-');
+    const reference = `${Number(month)} 1 ${year}`;
+
+    const dates = wrapper.vm.getDatesOfTheMonth(reference);
+
+    const hasOutOfRange = dates.some((d) =>
+      d.properties.includes('out of range'),
+    );
+
+    expect(hasOutOfRange).toBe(true);
+  });
+});

package/src/components/Drawer/Drawer.vue

@@ -1,198 +1,196 @@
 <template>
-  <aside
-    v-if="modelValue"
+  <Drawer
     class="unnnic-drawer"
     data-testid="drawer"
+    :open="modelValue"
+    @update:open="$emit('update:modelValue', $event)"
   >
-    <section
-      v-if="!withoutOverlay"
-      class="unnnic-drawer__overlay"
-      data-testid="overlay"
-      @click.stop="close"
-    />
-    <Transition
-      appear
-      name="drawer"
+    <DrawerContent
+      :showOverlay="!withoutOverlay"
+      data-testid="drawer-container"
+      :size="mappedSize"
+      :class="['unnnic-drawer__container', `unnnic-drawer__container--${size}`]"
     >
-      <section
-        v-if="showDrawer"
-        data-testid="drawer-container"
-        :class="[
-          'unnnic-drawer__container',
-          `unnnic-drawer__container--${size}`,
-        ]"
-      >
-        <header class="unnnic-drawer__header">
-          <section class="unnnic-drawer__title-container">
-            <slot
-              v-if="$slots.title"
-              name="title"
-            />
-
-            <template v-else>
-              <h1
-                class="unnnic-drawer__title"
-                data-testid="drawer-title"
-              >
-                {{ title }}
-              </h1>
-              <p
-                v-if="description"
-                class="unnnic-drawer__description"
-                data-testid="drawer-description"
-              >
-                {{ description }}
-              </p>
-            </template>
-          </section>
-          <UnnnicIcon
-            class="unnnic-drawer__close"
-            data-testid="close-icon"
-            :icon="closeIcon"
-            size="avatar-nano"
-            clickable
-            @click="back"
+      <DrawerHeader class="unnnic-drawer__header">
+        <section class="unnnic-drawer__title-container">
+          <slot
+            v-if="$slots.title"
+            name="title"
           />
-        </header>
-        <section class="unnnic-drawer__content">
-          <slot name="content"></slot>
+
+          <template v-else>
+            <DrawerTitle
+              class="unnnic-drawer__title"
+              data-testid="drawer-title"
+            >
+              {{ title }}
+            </DrawerTitle>
+            <DrawerDescription
+              v-if="description"
+              class="unnnic-drawer__description"
+              data-testid="drawer-description"
+            >
+              {{ description }}
+            </DrawerDescription>
+          </template>
         </section>
-        <footer
-          v-if="showFooter"
-          class="unnnic-drawer__footer"
-          data-testid="footer"
-        >
-          <UnnnicButton
-            v-if="secondaryButtonText"
-            data-testid="secondary-button"
-            size="large"
-            type="tertiary"
-            :disabled="disabledSecondaryButton"
-            :loading="loadingSecondaryButton"
-            :text="secondaryButtonText"
-            @click="$emit('secondaryButtonClick')"
-          />
-          <UnnnicButton
-            v-if="primaryButtonText"
-            data-testid="primary-button"
-            size="large"
-            :disabled="disabledPrimaryButton"
-            :loading="loadingPrimaryButton"
-            :type="primaryButtonType"
-            :text="primaryButtonText"
-            @click="$emit('primaryButtonClick')"
-          />
-        </footer>
+        <template #close>
+          <DrawerClose>
+            <UnnnicButton
+              class="unnnic-drawer__close-icon"
+              data-testid="close-icon"
+              :iconCenter="closeIcon"
+              size="small"
+              type="tertiary"
+              @click="back"
+            />
+          </DrawerClose>
+        </template>
+      </DrawerHeader>
+
+      <section class="unnnic-drawer__content">
+        <slot name="content"></slot>
       </section>
-    </Transition>
-  </aside>
+
+      <DrawerFooter
+        v-if="showFooter"
+        class="unnnic-drawer__footer"
+        data-testid="footer"
+      >
+        <UnnnicButton
+          v-if="secondaryButtonText"
+          data-testid="secondary-button"
+          size="large"
+          type="tertiary"
+          :disabled="disabledSecondaryButton"
+          :loading="loadingSecondaryButton"
+          :text="secondaryButtonText"
+          @click="$emit('secondaryButtonClick')"
+        />
+        <UnnnicButton
+          v-if="primaryButtonText"
+          data-testid="primary-button"
+          size="large"
+          :disabled="disabledPrimaryButton"
+          :loading="loadingPrimaryButton"
+          :type="primaryButtonType"
+          :text="primaryButtonText"
+          @click="$emit('primaryButtonClick')"
+        />
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
 </template>
 
-<script>
-import UnnnicIcon from '../Icon.vue';
-import UnnnicButton from '../Button/Button.vue';
+<script setup>
+import { computed } from 'vue';
 
-export default {
+import UnnnicButton from '../Button/Button.vue';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerClose,
+  DrawerTitle,
+  DrawerDescription,
+} from '../ui/drawer';
+
+defineOptions({
   name: 'UnnnicDrawer',
-  components: {
-    UnnnicIcon,
-    UnnnicButton,
+});
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
   },
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    description: {
-      type: String,
-      default: '',
-    },
-    disabledPrimaryButton: {
-      type: Boolean,
-      default: false,
-    },
-    disabledSecondaryButton: {
-      type: Boolean,
-      default: false,
-    },
-    loadingPrimaryButton: {
-      type: Boolean,
-      default: false,
-    },
-    loadingSecondaryButton: {
-      type: Boolean,
-      default: false,
-    },
-    primaryButtonText: {
-      type: String,
-      default: '',
-    },
-    primaryButtonType: {
-      type: String,
-      default: 'primary',
-    },
-    secondaryButtonText: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String,
-      default: 'md',
-      validator(val) {
-        return ['md', 'lg', 'xl', 'gt'].includes(val);
-      },
-    },
-    wide: {
-      type: Boolean,
-      default: false,
-    },
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-    withoutOverlay: {
-      type: Boolean,
-      default: false,
-    },
-    closeIcon: {
-      type: String,
-      default: 'arrow_back',
-    },
-    distinctCloseBack: {
-      type: Boolean,
-      default: false,
-    },
+  description: {
+    type: String,
+    default: '',
   },
-  emits: ['primaryButtonClick', 'secondaryButtonClick', 'close', 'back'],
-  data() {
-    return {
-      showDrawer: true,
-    };
+  disabledPrimaryButton: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    showFooter() {
-      return !!(this.primaryButtonText || this.secondaryButtonText);
-    },
+  disabledSecondaryButton: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    transitionClose(callback) {
-      this.showDrawer = false;
-      setTimeout(() => {
-        callback?.();
-        this.showDrawer = true;
-      }, 200);
-    },
-    close() {
-      this.transitionClose(() => this.$emit('close'));
-    },
-    back() {
-      if (this.distinctCloseBack) {
-        this.transitionClose(() => this.$emit('back'));
-      } else {
-        this.close();
-      }
+  loadingPrimaryButton: {
+    type: Boolean,
+    default: false,
+  },
+  loadingSecondaryButton: {
+    type: Boolean,
+    default: false,
+  },
+  primaryButtonText: {
+    type: String,
+    default: '',
+  },
+  primaryButtonType: {
+    type: String,
+    default: 'primary',
+  },
+  secondaryButtonText: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator(val) {
+      return ['md', 'lg', 'xl', 'gt'].includes(val);
     },
   },
+  modelValue: {
+    type: Boolean,
+    required: true,
+  },
+  withoutOverlay: {
+    type: Boolean,
+    default: false,
+  },
+  closeIcon: {
+    type: String,
+    default: 'arrow_forward',
+  },
+  distinctCloseBack: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'primaryButtonClick',
+  'secondaryButtonClick',
+  'close',
+  'back',
+]);
+const showFooter = computed(
+  () => !!(props.primaryButtonText || props.secondaryButtonText),
+);
+const mappedSize = computed(() => {
+  const sizes = {
+    md: 'medium',
+    lg: 'large',
+    xl: 'extra-large',
+    gt: 'giant',
+  };
+  return sizes[props.size] || 'medium';
+});
+
+const close = () => {
+  emit('close');
+};
+
+const back = () => {
+  if (props.distinctCloseBack) {
+    emit('back');
+  } else {
+    close();
+  }
 };
 </script>
 
@@ -204,107 +202,16 @@ export default {
   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;
 
-  &--md {
-    width: calc(100% / 3);
-  }
-
-  &--lg {
-    width: 50%;
-  }
-
-  &--xl {
-    width: 66%;
-  }
-
-  &--gt {
-    width: 75%;
-  }
-
-  .unnnic-drawer__header {
+  .unnnic-drawer__close-icon {
+    margin: $unnnic-spacing-nano;
     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 {