Merge pull request #134 from weni-ai/feature/card-data-crossing

[ENGAGE-1413] - Card config data crossing

__tests__/components/CheckboxList.spec.js

@@ -0,0 +1,52 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import CheckboxList from '@/components/CheckboxList.vue';
+
+const checkboxesMock = [
+  { value: 'check1', label: 'Check 1', disabled: true, selected: false },
+  { value: 'check2', label: 'Check 2', selected: false },
+  { value: 'check3', label: 'Check 3', selected: true },
+];
+
+const createWrapper = (props) => {
+  return mount(CheckboxList, { props });
+};
+
+describe('CheckboxList', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = createWrapper({
+      label: 'Label',
+      checkboxes: checkboxesMock,
+    });
+  });
+  it('should render label and list', async () => {
+    const label = wrapper.find('[data-testid="checkbox-list-label"]');
+    expect(label.exists()).toBe(true);
+
+    const checkboxes = wrapper.findAllComponents('[data-testid="checkbox"]');
+    expect(checkboxes.length).toBe(checkboxesMock.length);
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+  it('should emit click events', async () => {
+    const checkboxes = wrapper.findAllComponents('[data-testid="checkbox"]');
+
+    // Click disabled checkbox
+    await checkboxes[0].find('svg').trigger('click');
+    expect(wrapper.emitted('update:checkboxes')).toBe(undefined);
+
+    // Update checkbox value to true
+    await checkboxes[1].find('svg').trigger('click');
+    let clickEventData = wrapper.emitted('update:checkboxes')[0][0];
+    expect(clickEventData).toBeTruthy();
+    expect(clickEventData[1].selected).toBe(true);
+
+    // Update checkbox value to false
+    await checkboxes[2].find('svg').trigger('click');
+    clickEventData = wrapper.emitted('update:checkboxes')[1][0];
+    expect(clickEventData).toBeTruthy();
+    expect(clickEventData[2].selected).toBe(false);
+  });
+});

__tests__/components/RadioList.spec.js

@@ -5,7 +5,7 @@ import RadioList from '@/components/RadioList.vue';
 
 describe('RadioList.vue', () => {
   const radios = [
-    { value: 'option1', label: 'Option 1' },
+    { value: 'option1', label: 'Option 1', tooltip: 'Tooltip option 1' },
     { value: 'option2', label: 'Option 2' },
     { value: 'option3', label: 'Option 3' },
   ];
@@ -41,10 +41,6 @@ describe('RadioList.vue', () => {
   });
 
   it('emits update:selected-radio event when a radio is clicked', async () => {
-    const wrapper = mount(RadioList, {
-      props: { radios },
-    });
-
     const radio1 = wrapper.get('[data-testid=radio-option1]');
     await radio1.trigger('click');
 
@@ -71,4 +67,11 @@ describe('RadioList.vue', () => {
       'radio-list--wrap-radios',
     );
   });
+
+  it('should show tooltip if radio item have it key', () => {
+    const tooltipOption1 = wrapper.find('[data-testid=radio-option1-tooltip]');
+
+    expect(tooltipOption1.exists()).toBeTruthy();
+    expect(wrapper.text()).toContain(radios[0].tooltip);
+  });
 });

__tests__/components/__snapshots__/CheckboxList.spec.js.snap

@@ -0,0 +1,145 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CheckboxList > should render label and list 1`] = `
+<ol
+  data-v-2e73b81b=""
+>
+  <p
+    class="unnnic-label__label"
+    data-testid="checkbox-list-label"
+    data-v-2e73b81b=""
+  >
+    Label
+  </p>
+  <section
+    class="checkbox-list"
+    data-v-2e73b81b=""
+  >
+    
+    <li
+      class="checkbox-list__checkbox"
+      data-v-2e73b81b=""
+    >
+      <div
+        class="unnnic-checkbox-wrapper"
+        data-testid="checkbox"
+        data-v-2e73b81b=""
+        data-v-7fb32042=""
+      >
+        <svg
+          class="unnnic-icon unnnic-icon__size--md unnnic-icon-scheme--neutral-clean unnnic-checkbox disabled"
+          data-v-7fb32042=""
+          data-v-930380cc=""
+          fill="none"
+          height="40"
+          viewBox="0 0 40 40"
+          width="40"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            class="primary"
+            fill="#3B414D"
+            height="30"
+            rx="4"
+            width="30"
+            x="5"
+            y="5.00049"
+          />
+        </svg>
+        <div
+          class="unnnic-checkbox__label unnnic-checkbox__label__right unnnic-checkbox__label__md"
+          data-testid="checkbox-text-right"
+          data-v-7fb32042=""
+        >
+          Check 1
+        </div>
+      </div>
+    </li>
+    <li
+      class="checkbox-list__checkbox"
+      data-v-2e73b81b=""
+    >
+      <div
+        class="unnnic-checkbox-wrapper"
+        data-testid="checkbox"
+        data-v-2e73b81b=""
+        data-v-7fb32042=""
+      >
+        <svg
+          class="unnnic-icon unnnic-icon__size--md unnnic--clickable unnnic-icon-scheme--neutral-clean unnnic-checkbox"
+          data-v-7fb32042=""
+          data-v-930380cc=""
+          fill="none"
+          height="40"
+          viewBox="0 0 40 40"
+          width="40"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            class="primary-stroke"
+            height="29"
+            rx="3.5"
+            stroke="#3B414D"
+            width="29"
+            x="5.5"
+            y="5.50049"
+          />
+        </svg>
+        <div
+          class="unnnic-checkbox__label unnnic-checkbox__label__right unnnic-checkbox__label__md"
+          data-testid="checkbox-text-right"
+          data-v-7fb32042=""
+        >
+          Check 2
+        </div>
+      </div>
+    </li>
+    <li
+      class="checkbox-list__checkbox"
+      data-v-2e73b81b=""
+    >
+      <div
+        class="unnnic-checkbox-wrapper"
+        data-testid="checkbox"
+        data-v-2e73b81b=""
+        data-v-7fb32042=""
+      >
+        <svg
+          class="unnnic-icon unnnic-icon__size--md unnnic--clickable unnnic-icon-scheme--brand-weni unnnic-checkbox"
+          data-v-7fb32042=""
+          data-v-930380cc=""
+          fill="none"
+          height="40"
+          viewBox="0 0 40 40"
+          width="40"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            class="primary"
+            fill="#3B414D"
+            height="30"
+            rx="4"
+            width="30"
+            x="5"
+            y="5.00049"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M13.0626 19.6981L17.0001 23.9295L26.9376 13.2504L28.2501 14.6608L17.0001 26.7504L11.7501 21.1086L13.0626 19.6981Z"
+            fill="white"
+            fill-rule="evenodd"
+          />
+        </svg>
+        <div
+          class="unnnic-checkbox__label unnnic-checkbox__label__right unnnic-checkbox__label__md"
+          data-testid="checkbox-text-right"
+          data-v-7fb32042=""
+        >
+          Check 3
+        </div>
+      </div>
+    </li>
+    
+  </section>
+</ol>
+`;

src/components/CheckboxList.vue

@@ -0,0 +1,69 @@
+<template>
+  <ol>
+    <UnnnicLabel
+      v-if="label"
+      :label="label"
+      data-testid="checkbox-list-label"
+    />
+    <section :class="['checkbox-list']">
+      <template
+        v-for="(checkbox, index) in checkboxes"
+        :key="checkbox.value"
+      >
+        <li class="checkbox-list__checkbox">
+          <UnnnicCheckbox
+            :modelValue="checkbox.selected"
+            :textRight="checkbox.label"
+            :disabled="checkbox.disabled"
+            data-testid="checkbox"
+            @change="updateCheckboxSelected({ selected: $event, index })"
+          />
+        </li>
+      </template>
+    </section>
+  </ol>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+interface Checkbox {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  selected: boolean;
+}
+
+export default defineComponent({
+  name: 'CheckboxList',
+
+  props: {
+    checkboxes: {
+      type: Array as () => Checkbox[],
+      required: true,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+
+  emits: ['update:checkboxes'],
+
+  methods: {
+    updateCheckboxSelected({ selected, index }) {
+      const newCheckboxes = this.checkboxes;
+      newCheckboxes[index].selected = selected;
+      this.$emit('update:checkboxes', newCheckboxes);
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.checkbox-list {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: $unnnic-spacing-nano;
+}
+</style>

src/components/MetricAccordion.vue → src/components/FormAccordion.vue

@@ -1,15 +1,15 @@
 <template>
   <UnnnicCollapse
-    class="metric-accordion"
+    class="form-accordion"
     :class="{
-      'metric-accordion--active': active,
+      'form-accordion--active': active,
       highlighted: active && highlighted,
     }"
     :active="active"
     @change="$emit('update:active', $event)"
   >
     <template #header>
-      <header class="metric-accordion__header">
+      <header class="form-accordion__header">
         <UnnnicIcon
           icon="check_circle"
           :scheme="iconScheme"
@@ -25,7 +25,7 @@
 
 <script>
 export default {
-  name: 'MetricAccordion',
+  name: 'FormAccordion',
 
   props: {
     active: {
@@ -57,7 +57,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.metric-accordion {
+.form-accordion {
   border-radius: $unnnic-border-radius-sm;
   border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
 
@@ -74,6 +74,9 @@ export default {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+
+    margin-top: - calc($unnnic-spacing-ant + $unnnic-spacing-nano);
+    padding: $unnnic-spacing-xs $unnnic-spacing-ant 0;
   }
 
   &__header {

src/components/ModalResetWidget.vue

@@ -64,7 +64,7 @@ export default {
       try {
         await this.updateWidget({
           ...this.widget,
-          config: clearDeepValues(this.widget.config),
+          config: { ...clearDeepValues(this.widget.config), currency: false },
           name: '',
         });