@weni/unnnic-system 3.4.1-alpha.0 → 3.4.1-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.4.1-alpha.0",
+  "version": "3.4.1-alpha.1",
   "type": "commonjs",
   "files": [
     "dist",

package/src/assets/icons/checkbox-checked-disabled.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.60023 7.13135L9.96565 0.765935C10.0744 0.655796 10.2018 0.599407 10.3477 0.596768C10.4936 0.594129 10.6242 0.650518 10.7396 0.765935C10.855 0.881351 10.9127 1.00955 10.9127 1.15052C10.9127 1.29163 10.8577 1.41718 10.7477 1.52718L4.08586 8.19864C3.9503 8.33531 3.79224 8.40364 3.61169 8.40364C3.43099 8.40364 3.27224 8.33531 3.13544 8.19864L0.260439 5.32364C0.150439 5.2135 0.0928002 5.08711 0.0875224 4.94448C0.0821058 4.80198 0.137106 4.67302 0.252522 4.5576C0.367939 4.44218 0.496759 4.38448 0.638981 4.38448C0.781203 4.38448 0.907731 4.44218 1.01856 4.5576L3.60023 7.13135Z" fill="#B2B9C7"/>
+</svg>

package/src/assets/icons/checkbox-checked.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.60023 7.13135L9.96565 0.765935C10.0744 0.655796 10.2018 0.599407 10.3477 0.596768C10.4936 0.594129 10.6242 0.650518 10.7396 0.765935C10.855 0.881351 10.9127 1.00955 10.9127 1.15052C10.9127 1.29163 10.8577 1.41718 10.7477 1.52718L4.08586 8.19864C3.9503 8.33531 3.79224 8.40364 3.61169 8.40364C3.43099 8.40364 3.27224 8.33531 3.13544 8.19864L0.260439 5.32364C0.150439 5.2135 0.0928002 5.08711 0.0875224 4.94448C0.0821058 4.80198 0.137106 4.67302 0.252522 4.5576C0.367939 4.44218 0.496759 4.38448 0.638981 4.38448C0.781203 4.38448 0.907731 4.44218 1.01856 4.5576L3.60023 7.13135Z" fill="white"/>
+</svg>

package/src/components/Checkbox/Checkbox.vue

@@ -1,37 +1,41 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="unnnic-checkbox-wrapper">
-    <UnnnicIcon
-      class="unnnic-checkbox"
-      :class="{ disabled }"
-      :icon="icon"
-      :scheme="color"
-      :clickable="!disabled"
-      :size="size"
-      @click="click"
-    />
-
-    <div
-      v-if="textRight"
-      :class="[
-        'unnnic-checkbox__label',
-        'unnnic-checkbox__label__right',
-        `unnnic-checkbox__label__${size}`,
-      ]"
-      data-testid="checkbox-text-right"
+  <section class="unnnic-checkbox-wrapper">
+    <label>
+      <input
+        class="unnnic-checkbox"
+        type="checkbox"
+        :disabled="disabled"
+        :checked="modelValue"
+        @change="click"
+        v-bind="pick($attrs, ['id', 'name'])"
+      />
+
+      <p
+        v-if="label || textRight"
+        :class="[
+          'unnnic-checkbox__label',
+          { 'unnnic-checkbox__label--disabled': disabled },
+        ]"
+        data-testid="checkbox-text-right"
+      >
+        {{ label || textRight }}
+      </p>
+    </label>
+
+    <p
+      v-if="helper"
+      class="unnnic-checkbox__helper"
     >
-      {{ textRight }}
-    </div>
-  </div>
+      {{ helper }}
+    </p>
+  </section>
 </template>
 
 <script>
-import UnnnicIcon from '../Icon.vue';
+import { pick } from 'lodash';
 
 export default {
-  components: {
-    UnnnicIcon,
-  },
   model: {
     event: 'change',
   },
@@ -50,13 +54,16 @@ export default {
       default: false,
     },
 
-    size: {
+    label: {
       type: String,
-      default: 'md',
-      validator(value) {
-        return ['md', 'sm'].includes(value);
-      },
+      default: '',
+    },
+
+    helper: {
+      type: String,
+      default: '',
     },
+
     textRight: {
       type: String,
       default: '',
@@ -75,25 +82,11 @@ export default {
 
       return 'less';
     },
-
-    icon() {
-      return {
-        checked: 'checkbox-select',
-        default: this.disabled ? 'checkbox-disable' : 'checkbox-default',
-        less: 'checkbox-less',
-      }[this.valueName];
-    },
-
-    color() {
-      if (this.valueName === 'default') {
-        return 'neutral-clean';
-      }
-
-      return 'brand-weni';
-    },
   },
 
   methods: {
+    pick,
+
     click() {
       const isChecked = ['checked', 'less'].includes(this.valueName);
       this.$emit('change', !isChecked);
@@ -106,35 +99,65 @@ export default {
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 
+$checkbox-size: 21px;
+
 .unnnic-checkbox-wrapper {
   display: flex;
+  flex-direction: column;
   align-items: flex-start;
-  cursor: pointer;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  column-gap: $unnnic-space-2;
 }
 
 .unnnic-checkbox {
-  &.disabled {
-    :deep(.primary) {
-      fill: $unnnic-color-neutral-cleanest;
-    }
+  appearance: none;
+  width: $checkbox-size;
+  height: $checkbox-size;
+  margin: 0;
+  background-color: $unnnic-color-bg-base;
+  border: 1px solid $unnnic-color-border-base;
+  border-radius: $unnnic-radius-1;
+  box-sizing: border-box;
+
+  outline: none;
+
+  &:checked {
+    border-width: 0;
+    background-color: $unnnic-color-bg-active;
+    background-image: url('../../assets/icons/checkbox-checked.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  &:disabled,
+  &:disabled:checked {
+    background-color: $unnnic-color-bg-muted;
+    border: 1px solid $unnnic-color-border-muted;
+  }
+
+  &:disabled:checked {
+    background-image: url('../../assets/icons/checkbox-checked-disabled.svg');
   }
 }
 
 .unnnic-checkbox__label {
-  font-family: $unnnic-font-family-secondary;
-  font-weight: $unnnic-font-weight-regular;
-  color: $unnnic-color-neutral-darkest;
-
-  &__sm {
-    margin-left: $unnnic-inline-nano;
-    font-size: $unnnic-font-size-body-md;
-    line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-  }
+  margin: 0;
+  font: $unnnic-font-body;
+  color: $unnnic-color-fg-emphasized;
 
-  &__md {
-    margin-left: $unnnic-inline-xs;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+  &--disabled {
+    color: $unnnic-color-fg-muted;
   }
 }
+
+.unnnic-checkbox__helper {
+  margin: 0;
+  margin-left: $checkbox-size + $unnnic-space-2;
+  font: $unnnic-font-caption-2;
+  color: $unnnic-color-fg-base;
+}
 </style>

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

@@ -24,43 +24,28 @@ describe('Checkbox', () => {
 
   it('should checkbox emit change events', async () => {
     wrapper = createWrapper();
-    const checkbox = wrapper.findComponent({ name: 'UnnnicIcon' });
+    const checkbox = wrapper.find('input[type="checkbox"]');
 
     // click false to true
-    await checkbox.trigger('click');
+    await checkbox.trigger('change');
     expect(wrapper.emitted('change')[0][0]).eq(true);
 
     // click true to false
     await wrapper.setProps({ modelValue: true });
-    await checkbox.trigger('click');
+    await checkbox.trigger('change');
     expect(wrapper.emitted('change')[1][0]).eq(false);
 
     // click less to false
     await wrapper.setProps({ modelValue: 'less' });
-    expect(wrapper.vm.icon).eq('checkbox-less');
-    await checkbox.trigger('click');
+    expect(wrapper.vm.valueName).eq('less');
+    await checkbox.trigger('change');
     expect(wrapper.emitted('change')[2][0]).eq(false);
   });
 
   it('should checkbox disabled', async () => {
     wrapper = createWrapper({ disabled: true });
-    const checkbox = wrapper.findComponent({ name: 'UnnnicIcon' });
+    const checkbox = wrapper.find('input[type="checkbox"]');
     await checkbox.trigger('click');
     expect(wrapper.emitted('change')).eq(undefined);
   });
-
-  it('should define sizes', async () => {
-    wrapper = createWrapper({ size: 'sm', textRight: 'Label' });
-    const checkbox = wrapper.findComponent({ name: 'UnnnicIcon' });
-    const label = wrapper.find('.unnnic-checkbox__label');
-
-    // sm
-    expect(checkbox.classes()).include('unnnic-icon__size--sm');
-    expect(label.classes()).include('unnnic-checkbox__label__sm');
-
-    // md
-    await wrapper.setProps({ size: 'md' });
-    expect(checkbox.classes()).include('unnnic-icon__size--md');
-    expect(label.classes()).include('unnnic-checkbox__label__md');
-  });
 });

package/src/components/CheckboxGroup/CheckboxGroup.vue

@@ -0,0 +1,96 @@
+<template>
+  <section
+    :class="[
+      'unnnic-checkbox-group__container',
+      `unnnic-checkbox-group--state-${state}`,
+    ]"
+  >
+    <UnnnicLabel
+      v-if="label"
+      :label="label"
+      :tooltip="labelTooltip"
+      :useHtmlTooltip="labelUseHtmlTooltip"
+    />
+
+    <section class="unnnic-checkbox-group__checkboxes">
+      <slot />
+    </section>
+
+    <footer
+      v-if="helper"
+      class="unnnic-checkbox-group__helper"
+    >
+      {{ helper }}
+    </footer>
+  </section>
+</template>
+
+<script setup>
+import UnnnicLabel from '../Label/Label.vue';
+
+const props = defineProps({
+  state: {
+    type: String,
+    default: 'horizontal',
+    validator(value) {
+      return ['horizontal', 'vertical'].includes(value);
+    },
+  },
+
+  label: {
+    type: String,
+  },
+
+  labelTooltip: {
+    type: String,
+  },
+
+  labelUseHtmlTooltip: {
+    type: Boolean,
+  },
+
+  helper: {
+    type: String,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-checkbox-group {
+  &__container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__checkboxes {
+    margin-top: $unnnic-space-3;
+
+    display: flex;
+    gap: $unnnic-space-4 $unnnic-space-6;
+  }
+
+  &__helper {
+    margin-top: $unnnic-space-2;
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-base;
+  }
+
+  &--state-horizontal {
+    .unnnic-checkbox-group__checkboxes {
+      flex-direction: row;
+    }
+  }
+
+  &--state-vertical {
+    .unnnic-checkbox-group__checkboxes {
+      flex-direction: column;
+    }
+
+    .unnnic-checkbox-group__helper {
+      margin-top: $unnnic-space-3;
+    }
+  }
+}
+</style>

package/src/components/index.ts

@@ -25,6 +25,7 @@ import cardImage from './CardImage/CardImage.vue';
 import cardProject from './CardProject/CardProject.vue';
 import cardInformation from './CardInformation/CardInformation.vue';
 import checkbox from './Checkbox/Checkbox.vue';
+import checkboxGroup from './CheckboxGroup/CheckboxGroup.vue';
 import collapse from './Collapse/Collapse.vue';
 import radio from './Radio/Radio.vue';
 import languageSelect from './Dropdown/LanguageSelect.vue';
@@ -131,6 +132,7 @@ export const components: ComponentsMap = {
   unnnicCardProject: cardProject,
   unnnicCardInformation: cardInformation,
   unnnicCheckbox: checkbox,
+  unnnicCheckboxGroup: checkboxGroup,
   unnnicCollapse: collapse,
   unnnicRadio: radio,
   unnnicLanguageSelect: languageSelect,
@@ -233,6 +235,7 @@ export const unnnicCardImage = cardImage as VueComponent;
 export const unnnicCardProject = cardProject as VueComponent;
 export const unnnicCardInformation = cardInformation;
 export const unnnicCheckbox = checkbox;
+export const unnnicCheckboxGroup = checkboxGroup;
 export const unnnicCollapse = collapse;
 export const unnnicRadio = radio;
 export const unnniclanguageSelect = languageSelect as VueComponent;
@@ -332,6 +335,7 @@ export const UnnnicCardImage = cardImage as VueComponent;
 export const UnnnicCardProject = cardProject as VueComponent;
 export const UnnnicCardInformation = cardInformation;
 export const UnnnicCheckbox = checkbox;
+export const UnnnicCheckboxGroup = checkboxGroup;
 export const UnnnicCollapse = collapse;
 export const UnnnicRadio = radio;
 export const UnnniclanguageSelect = languageSelect as VueComponent;

package/src/stories/Checkbox.stories.js

@@ -15,12 +15,12 @@ export default {
       },
     },
   },
-  args: { disabled: false, size: 'md' },
+  args: { disabled: false },
   argTypes: {
-    modelValue: { control: 'inline-radio', options: [true, false, 'less'] },
+    modelValue: { control: 'inline-radio', options: [true, false] },
     disabled: { control: 'boolean' },
-    size: { control: 'select', options: ['md', 'sm'] },
-    textRight: { control: 'text' },
+    label: { control: 'text' },
+    helper: { control: 'text' },
   },
   render: (args) => ({
     components: {
@@ -42,18 +42,15 @@ export default {
 export const Default = {
   args: {
     modelValue: false,
+    label: 'Label',
+    helper: 'Helper',
   },
 };
 
 export const Selected = {
   args: {
     modelValue: true,
-  },
-};
-
-export const LessSelected = {
-  args: {
-    modelValue: 'less',
+    label: 'Label',
   },
 };
 
@@ -61,6 +58,7 @@ export const Disabled = {
   args: {
     modelValue: false,
     disabled: true,
+    label: 'Label',
   },
 };
 
@@ -68,5 +66,6 @@ export const DisabledSelected = {
   args: {
     modelValue: true,
     disabled: true,
+    label: 'Label',
   },
 };

package/src/stories/CheckboxGroup.stories.js

@@ -0,0 +1,104 @@
+import { action } from '@storybook/addon-actions';
+import UnnnicCheckboxGroup from '../components/CheckboxGroup/CheckboxGroup.vue';
+import UnnnicCheckbox from '../components/Checkbox/Checkbox.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Form/CheckboxGroup',
+  component: UnnnicCheckboxGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `Allows the user to select multiple options from a category. It can also be 
+        used to display a single option that may require additional acceptance or confirmation 
+        before submission.`,
+      },
+    },
+  },
+  argTypes: {
+    label: { control: { type: 'text' } },
+    labelTooltip: { control: { type: 'text' } },
+    labelUseHtmlTooltip: { control: 'boolean' },
+    helper: { control: { type: 'text' } },
+    state: { control: 'select', options: ['horizontal', 'vertical'] },
+  },
+};
+
+export const Default = {
+  args: {
+    label: 'Checkbox Group 1',
+    helper: 'Helper text',
+  },
+
+  render: (args) => ({
+    components: {
+      UnnnicCheckboxGroup,
+      UnnnicCheckbox,
+    },
+
+    setup() {
+      return { args };
+    },
+
+    template: `
+      <section>
+        <UnnnicCheckboxGroup v-bind="args">
+          <UnnnicCheckbox :modelValue="true" label="Option 1" />
+          <UnnnicCheckbox :modelValue="false" label="Option 2" />
+          <UnnnicCheckbox :modelValue="false" label="Option 3" />
+        </UnnnicCheckboxGroup>
+      </section>
+    `,
+  }),
+};
+
+export const Horizontal = {
+  args: {
+    state: 'horizontal',
+    label: 'Label',
+    helper: 'Helper text',
+  },
+
+  render: (args) => ({
+    components: {
+      UnnnicCheckboxGroup,
+      UnnnicCheckbox,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UnnnicCheckboxGroup v-bind="args">
+        <UnnnicCheckbox :modelValue="true" label="Option 1" />
+        <UnnnicCheckbox :modelValue="false" label="Option 2" />
+        <UnnnicCheckbox :modelValue="false" label="Option 3" />
+      </UnnnicCheckboxGroup>
+    `,
+  }),
+};
+
+export const Vertical = {
+  args: {
+    state: 'vertical',
+    label: 'Label',
+    helper: 'Helper text',
+  },
+
+  render: (args) => ({
+    components: {
+      UnnnicCheckboxGroup,
+      UnnnicCheckbox,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UnnnicCheckboxGroup v-bind="args">
+        <UnnnicCheckbox :modelValue="true" label="Option 1" />
+        <UnnnicCheckbox :modelValue="false" label="Option 2" />
+        <UnnnicCheckbox :modelValue="false" label="Option 3" />
+      </UnnnicCheckboxGroup>
+    `,
+  }),
+};