@weni/unnnic-system 3.11.1-alpha.2 → 3.11.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,196 +1,198 @@
 <template>
-  <Drawer
+  <aside
+    v-if="modelValue"
     class="unnnic-drawer"
     data-testid="drawer"
-    :open="modelValue"
-    @update:open="$emit('update:modelValue', $event)"
   >
-    <DrawerContent
-      :showOverlay="!withoutOverlay"
-      data-testid="drawer-container"
-      :size="mappedSize"
-      :class="['unnnic-drawer__container', `unnnic-drawer__container--${size}`]"
+    <section
+      v-if="!withoutOverlay"
+      class="unnnic-drawer__overlay"
+      data-testid="overlay"
+      @click.stop="close"
+    />
+    <Transition
+      appear
+      name="drawer"
     >
-      <DrawerHeader class="unnnic-drawer__header">
-        <section class="unnnic-drawer__title-container">
-          <slot
-            v-if="$slots.title"
-            name="title"
-          />
-
-          <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>
-        <template #close>
-          <DrawerClose>
-            <UnnnicButton
-              class="unnnic-drawer__close-icon"
-              data-testid="close-icon"
-              :iconCenter="closeIcon"
-              size="small"
-              type="tertiary"
-              @click="back"
+      <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"
             />
-          </DrawerClose>
-        </template>
-      </DrawerHeader>
 
-      <section class="unnnic-drawer__content">
-        <slot name="content"></slot>
+            <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"
+          />
+        </header>
+        <section class="unnnic-drawer__content">
+          <slot name="content"></slot>
+        </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>
       </section>
-
-      <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>
+    </Transition>
+  </aside>
 </template>
 
-<script setup>
-import { computed } from 'vue';
-
+<script>
+import UnnnicIcon from '../Icon.vue';
 import UnnnicButton from '../Button/Button.vue';
-import {
-  Drawer,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerClose,
-  DrawerTitle,
-  DrawerDescription,
-} from '../ui/drawer';
-
-defineOptions({
-  name: 'UnnnicDrawer',
-});
 
-const props = defineProps({
-  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: '',
+export default {
+  name: 'UnnnicDrawer',
+  components: {
+    UnnnicIcon,
+    UnnnicButton,
   },
-  size: {
-    type: String,
-    default: 'md',
-    validator(val) {
-      return ['md', 'lg', 'xl', 'gt'].includes(val);
+  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,
     },
   },
-  modelValue: {
-    type: Boolean,
-    required: true,
-  },
-  withoutOverlay: {
-    type: Boolean,
-    default: false,
+  emits: ['primaryButtonClick', 'secondaryButtonClick', 'close', 'back'],
+  data() {
+    return {
+      showDrawer: true,
+    };
   },
-  closeIcon: {
-    type: String,
-    default: 'arrow_forward',
+  computed: {
+    showFooter() {
+      return !!(this.primaryButtonText || this.secondaryButtonText);
+    },
   },
-  distinctCloseBack: {
-    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();
+      }
+    },
   },
-});
-
-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>
 
@@ -202,16 +204,107 @@ const back = () => {
   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;
 
-  .unnnic-drawer__close-icon {
-    margin: $unnnic-spacing-nano;
+  &--md {
+    width: calc(100% / 3);
+  }
+
+  &--lg {
+    width: 50%;
+  }
+
+  &--xl {
+    width: 66%;
+  }
+
+  &--gt {
+    width: 75%;
+  }
+
+  .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 {