@weni/unnnic-system 2.13.0 → 2.13.1

package/src/components/TextArea/TextArea.vue

@@ -1,14 +1,18 @@
 <template>
-  <div :class="['unnnic-text-area', { disabled }, size, type]">
-    <div
-      v-if="label"
-      class="label"
-    >
-      {{ label }}
-    </div>
-
+  <UnnnicFormElement
+    :label="label"
+    :size="size"
+    :disabled="disabled"
+    :message="message"
+    :error="errors.join(', ') || type === 'error'"
+  >
     <textarea
       ref="textarea"
+      class="unnnic-text-area__textarea"
+      :class="[
+        `unnnic-text-area__textarea--size-${size}`,
+        `unnnic-text-area__textarea--type-${type}`,
+      ]"
       :placeholder="placeholder"
       :maxlength="maxLength"
       :disabled="disabled"
@@ -16,28 +20,22 @@
       @input="$emit('update:modelValue', $event.target.value)"
     ></textarea>
 
-    <div
-      v-if="maxLength && type === 'normal'"
-      class="helper"
+    <template
+      v-if="maxLength"
+      #rightMessage
+      >{{ modelValue.length }}/{{ maxLength }}</template
     >
-      {{ modelValue.length }}/{{ maxLength }}
-    </div>
-    <div
-      v-if="type === 'error'"
-      class="error-list"
-    >
-      <span
-        v-for="(error, index) in errors"
-        :key="index"
-      >
-        {{ error }}
-      </span>
-    </div>
-  </div>
+  </UnnnicFormElement>
 </template>
 
 <script>
+import UnnnicFormElement from '../FormElement/FormElement.vue';
+
 export default {
+  components: {
+    UnnnicFormElement,
+  },
+
   props: {
     size: {
       type: String,
@@ -60,6 +58,11 @@ export default {
       type: Number,
     },
 
+    message: {
+      type: String,
+      default: '',
+    },
+
     disabled: {
       type: Boolean,
     },
@@ -89,123 +92,37 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/scss/unnnic.scss';
+@import '../Input/Input.scss';
 
 .unnnic-text-area {
-  .label {
-    color: $unnnic-color-neutral-cloudy;
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-regular;
-    margin-bottom: $unnnic-spacing-stack-nano;
-  }
-
-  &.md {
-    .label {
-      font-size: $unnnic-font-size-body-gt;
-      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-    }
-
-    textarea {
-      font-size: $unnnic-font-size-body-gt;
-      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-
-      &::placeholder {
-        font-size: $unnnic-font-size-body-gt;
-        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-      }
-    }
-  }
-
-  &.sm {
-    .label {
-      font-size: $unnnic-font-size-body-md;
-      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-    }
-
-    textarea {
-      font-size: $unnnic-font-size-body-md;
-      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-
-      &::placeholder {
-        font-size: $unnnic-font-size-body-md;
-        line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-      }
-    }
-  }
+  &__textarea {
+    @include input-base;
 
-  textarea {
-    outline: none;
-    min-height: 6.5 * $unnnic-font-size;
+    display: block;
     width: 100%;
     resize: vertical;
     box-sizing: border-box;
-    padding: $unnnic-spacing-inset-nano;
-    border-radius: $unnnic-border-radius-sm;
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
-    background-color: $unnnic-color-neutral-snow;
-
-    color: $unnnic-color-neutral-dark;
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-regular;
-
-    &::placeholder {
-      color: $unnnic-color-neutral-cleanest;
-      font-family: $unnnic-font-family-secondary;
-      font-size: $unnnic-font-size-body-gt;
-      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-      font-weight: $unnnic-font-weight-regular;
-    }
 
-    &:focus {
-      border-color: $unnnic-color-neutral-clean;
-    }
-  }
+    scrollbar-width: thin;
 
-  .helper {
-    text-align: right;
-    color: $unnnic-color-neutral-cloudy;
-    font-family: $unnnic-font-family-secondary;
-    font-size: $unnnic-font-size-body-md;
-    line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-    font-weight: $unnnic-font-weight-regular;
-    margin-top: $unnnic-spacing-stack-nano;
-  }
+    &--size-md {
+      @include input-md-font;
 
-  &.disabled {
-    textarea::placeholder {
-      color: $unnnic-color-neutral-clean;
+      min-height: 6.25 * $unnnic-font-size;
+      padding: ($unnnic-spacing-ant - $unnnic-border-width-thinner)
+        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
     }
-  }
 
-  &.error {
-    .label {
-      color: $unnnic-color-feedback-red;
-    }
+    &--size-sm {
+      @include input-sm-font;
 
-    textarea {
-      border-color: $unnnic-color-feedback-red;
-      &::placeholder {
-        color: $unnnic-color-feedback-red;
-      }
+      min-height: 5 * $unnnic-font-size;
+      padding: ($unnnic-spacing-xs)
+        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
     }
 
-    .error-list {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      width: 100%;
-
-      color: $unnnic-color-feedback-red;
-      font-family: $unnnic-font-family-secondary;
-      font-size: $unnnic-font-size-body-md;
-      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-      font-weight: $unnnic-font-weight-regular;
-      margin-top: $unnnic-spacing-stack-nano;
-
-      span {
-        max-width: 100%;
-        word-wrap: break-word;
-        text-align: right;
-      }
+    &.unnnic-text-area__textarea--type-error {
+      @include input-error;
     }
   }
 }

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

@@ -29,9 +29,9 @@ describe('TextArea.vue', () => {
   });
 
   test('renders label when provided', () => {
-    const label = wrapper.find('.label');
-    expect(label.exists()).toBe(true);
-    expect(label.text()).toBe('Description');
+    expect(
+      wrapper.findComponent({ name: 'UnnnicFormElement' }).props('label'),
+    ).toBe('Description');
   });
 
   test('renders textarea with correct props', () => {
@@ -42,9 +42,7 @@ describe('TextArea.vue', () => {
   });
 
   test('renders character count when maxLength and type are normal', () => {
-    const helper = wrapper.find('.helper');
-    expect(helper.exists()).toBe(true);
-    expect(helper.text()).toBe('0/200');
+    expect(wrapper.text()).contains('0/200');
   });
 
   test('does not render character count when maxLength is not provided', async () => {
@@ -61,22 +59,25 @@ describe('TextArea.vue', () => {
 
   test('displays errors when type is error', async () => {
     await wrapper.setProps({ type: 'error', errors: ['Error 1', 'Error 2'] });
-    const errorList = wrapper.findAll('.error-list span');
-    expect(errorList.length).toBe(2);
-    expect(errorList[0].text()).toBe('Error 1');
-    expect(errorList[1].text()).toBe('Error 2');
+    expect(
+      wrapper.findComponent({ name: 'UnnnicFormElement' }).props('error'),
+    ).toBe('Error 1, Error 2');
   });
 
   test('applies disabled class and disables textarea when disabled is true', async () => {
     await wrapper.setProps({ disabled: true });
-    expect(wrapper.classes()).toContain('disabled');
+    expect(
+      wrapper.findComponent({ name: 'UnnnicFormElement' }).props('disabled'),
+    ).toBe(true);
     const textarea = wrapper.find('textarea');
     expect(textarea.element.disabled).toBe(true);
   });
 
   test('applies the correct size class', async () => {
     await wrapper.setProps({ size: 'sm' });
-    expect(wrapper.classes()).toContain('sm');
+    expect(wrapper.find('textarea').classes()).toContain(
+      'unnnic-text-area__textarea--size-sm',
+    );
   });
 
   test('focus method focuses the textarea element', () => {
@@ -97,8 +98,7 @@ describe('TextArea.vue', () => {
 
   test('updates character count on input when maxLength is provided', async () => {
     await wrapper.setProps({ modelValue: 'Hello' });
-    const helper = wrapper.find('.helper');
-    expect(helper.text()).toBe('5/200');
+    expect(wrapper.text()).contains('5/200');
   });
 
   test('does not render label when not provided', async () => {
@@ -109,7 +109,9 @@ describe('TextArea.vue', () => {
 
   test('applies correct class when type is "error"', async () => {
     await wrapper.setProps({ type: 'error' });
-    expect(wrapper.classes()).toContain('error');
+    expect(wrapper.find('textarea').classes()).toContain(
+      'unnnic-text-area__textarea--type-error',
+    );
   });
 
   test('does not emit input when disabled', async () => {
@@ -128,11 +130,15 @@ describe('TextArea.vue', () => {
 
   test('applies correct class when size is "sm"', async () => {
     await wrapper.setProps({ size: 'sm' });
-    expect(wrapper.classes()).toContain('sm');
+    expect(wrapper.find('textarea').classes()).toContain(
+      'unnnic-text-area__textarea--size-sm',
+    );
   });
 
   test('applies correct class when size is "md"', () => {
-    expect(wrapper.classes()).toContain('md');
+    expect(wrapper.find('textarea').classes()).toContain(
+      'unnnic-text-area__textarea--size-md',
+    );
   });
 
   test('validates type prop', () => {
@@ -181,11 +187,8 @@ describe('TextArea.vue', () => {
   test('renders all error messages when type is error', async () => {
     const errors = ['Error 1', 'Error 2', 'Error 3'];
     await wrapper.setProps({ type: 'error', errors });
-    const errorMessages = wrapper.findAll('.error-list span');
-    expect(errorMessages).toHaveLength(errors.length);
-    errorMessages.forEach((msg, index) => {
-      expect(msg.text()).toBe(errors[index]);
-    });
+    const formElement = wrapper.findComponent({ name: 'UnnnicFormElement' });
+    expect(formElement.props('error')).toBe('Error 1, Error 2, Error 3');
   });
 
   test('does not render error list when type is normal', () => {
@@ -195,8 +198,7 @@ describe('TextArea.vue', () => {
 
   test('updates character count correctly', async () => {
     await wrapper.setProps({ modelValue: 'Hello, world!' });
-    const helper = wrapper.find('.helper');
-    expect(helper.text()).toBe('13/200');
+    expect(wrapper.text()).contains('13/200');
   });
 
   test('focus method focuses the textarea', async () => {

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

@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`TextArea.vue > matches the snapshot 1`] = `
-"<div data-v-735b3c51="" class="unnnic-text-area md normal">
-  <div data-v-735b3c51="" class="label">Description</div><textarea data-v-735b3c51="" placeholder="Enter text" maxlength="200"></textarea>
-  <div data-v-735b3c51="" class="helper">0/200</div>
+"<section data-v-9f8d6c86="" data-v-735b3c51="" class="unnnic-form-element">
+  <p data-v-9f8d6c86="" class="unnnic-form-element__label">Description</p><textarea data-v-735b3c51="" class="unnnic-text-area__textarea unnnic-text-area__textarea--size-md unnnic-text-area__textarea--type-normal" placeholder="Enter text" maxlength="200"></textarea>
   <!--v-if-->
-</div>"
+  <p data-v-9f8d6c86="" class="unnnic-form-element__message"> <span data-v-9f8d6c86="" class="unnnic-form-element__right-message">0/200</span></p>
+</section>"
 `;

package/src/stories/Input.mdx

@@ -0,0 +1,76 @@
+import { Meta, Source, Story } from '@storybook/blocks';
+
+import * as InputStories from './Input.stories';
+
+<Meta of={InputStories}/>
+
+# Input
+
+The `Input` component is designed to provide an input field for users to enter texts or passwords.
+
+<Source
+  language='html'
+  dark
+  code={`<UnnnicFormElement
+  label="Label"
+  message="Helper text" | error="Error text"
+  :disabled="false | true"
+>
+  <UnnnicInput
+    v-model="value"
+    size="md"
+    type="normal"
+    nativeType="normal"
+    placeholder="Placeholder"
+    iconLeft="storefront"
+    iconRight="storefront"
+  />
+</UnnnicFormElement>`}
+/>
+
+
+---
+
+#### **Props Options:**
+
+| Key         | Description                              | Values                   | Default     |
+|-------------|------------------------------------------|--------------------------|-------------|
+| v-model     | `String` of the input content            | `''`                     | `''`        |
+| size        | `String` of the size                     | `'md'` \| `'sm'`         | `md`        |
+| type        | `String` of the input type               | `'normal'` \| `'error'`  | `'normal'`  |
+| nativeType  | `String` of the native input type        | `'text'` \| `'password'` | `'text'`    |
+| placeholder | `String` of the native input placeholder | `String`                 | `''`        |
+| iconLeft    | `String` of the left icon                | `String`                 | `undefined` |
+| iconRight   | `String` of the right icon               | `String`                 | `false`     |
+
+## Example
+Some examples of uses of the `UnnnicInput`
+
+### Normal
+
+<Story of={InputStories.Normal} />
+
+
+### Error
+
+<Story of={InputStories.Error} />
+
+
+### Disabled
+
+<Story of={InputStories.Disabled} />
+
+
+### Normal (small size)
+
+<Story of={InputStories.NormalSm} />
+
+
+### Error (small size)
+
+<Story of={InputStories.ErrorSm} />
+
+
+### Disabled (small size)
+
+<Story of={InputStories.DisabledSm} />

package/src/stories/Input.stories.js

@@ -1,3 +1,4 @@
+import unnnicFormElement from '../components/FormElement/FormElement.vue';
 import unnnicInput from '../components/Input/Input.vue';
 import iconList from '../utils/iconList';
 
@@ -18,6 +19,7 @@ export default {
   render: (args) => ({
     components: {
       unnnicInput,
+      unnnicFormElement,
     },
     setup() {
       return { args };
@@ -33,11 +35,63 @@ export default {
       },
     },
     template: `
-      <div><pre>v-model: {{ value }}</pre><unnnic-input v-model="value" @icon-right-click="click" v-bind="args" /></div>
+      <unnnic-form-element label="Label" message="Helper text">
+        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
+      </unnnic-form-element>
     `,
   }),
 };
 
+const TemplateError = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicFormElement,
+    unnnicInput,
+  },
+
+  setup() {
+    return { args };
+  },
+
+  data() {
+    return {
+      value: '',
+    };
+  },
+
+  template: `
+    <unnnic-form-element label="Label" error="Error text">
+      <unnnic-input v-model="value" v-bind="args"/>
+    </unnnic-form-element>
+  `,
+});
+
+const TemplateDisabled = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicFormElement,
+    unnnicInput,
+  },
+
+  setup() {
+    return { args };
+  },
+
+  data() {
+    return {
+      value: '',
+    };
+  },
+
+  template: `
+    <unnnic-form-element label="Label" message="Helper text" disabled>
+      <unnnic-input v-model="value" v-bind="args"/>
+    </unnnic-form-element>
+  `,
+});
+
 export const Normal = {
   args: {
     type: 'normal',
@@ -45,18 +99,38 @@ export const Normal = {
   },
 };
 
-export const Error = {
+export const NormalSm = {
   args: {
-    type: 'error',
+    size: 'sm',
+    type: 'normal',
     placeholder: 'Placeholder',
   },
 };
 
-export const Disabled = {
-  args: {
-    disabled: true,
-    placeholder: 'Placeholder',
-  },
+export const Error = TemplateError.bind({});
+Error.args = {
+  type: 'error',
+  placeholder: 'Placeholder',
+};
+
+export const ErrorSm = TemplateError.bind({});
+ErrorSm.args = {
+  size: 'sm',
+  type: 'error',
+  placeholder: 'Placeholder',
+};
+
+export const Disabled = TemplateDisabled.bind({});
+Disabled.args = {
+  disabled: true,
+  placeholder: 'Placeholder',
+};
+
+export const DisabledSm = TemplateDisabled.bind({});
+DisabledSm.args = {
+  size: 'sm',
+  disabled: true,
+  placeholder: 'Placeholder',
 };
 
 export const Password = {

package/src/stories/SelectSmart.mdx

@@ -43,23 +43,21 @@ The other one required property is `options`, which requires an array of objects
 <Source
   language='json'
   dark
-  code={`
-    [
-      {
-        "value": "",
-        "label": "Select some option"  <---- Since the value of this object is empty, this will be the placeholder
-      },
-      {
-        "value": "1",
-        "label": "Option 1",
-      },
-      {
-        "value": "2",
-        "label": "Option 2",
-        "description": "This is the first option"
-      },
-    ]
-  `}
+  code={`[
+  {
+    "value": "",
+    "label": "Select some option"  <---- Since the value of this object is empty, this will be the placeholder
+  },
+  {
+    "value": "1",
+    "label": "Option 1",
+  },
+  {
+    "value": "2",
+    "label": "Option 2",
+    "description": "This is the first option"
+  },
+]`}
 />
 
 > The options will be presented in alphabetical order, following the value of each `label`, 

package/src/stories/SelectSmart.stories.js

@@ -1,3 +1,4 @@
+import unnnicFormElement from '../components/FormElement/FormElement.vue';
 import unnnicSelectSmart from '../components/SelectSmart/SelectSmart.vue';
 
 export default {
@@ -6,6 +7,7 @@ export default {
   argTypes: {},
   render: (args) => ({
     components: {
+      unnnicFormElement,
       unnnicSelectSmart,
     },
     setup() {
@@ -17,11 +19,61 @@ export default {
       };
     },
     template: `
-      <unnnicSelectSmart v-bind="args" v-model="exampleValue"/>
+      <unnnicFormElement label="Label" message="Helper text">
+        <unnnicSelectSmart v-bind="args" v-model="exampleValue"/>
+      </unnnicFormElement>
     `,
   }),
 };
 
+const TemplateError = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicFormElement,
+    unnnicSelectSmart,
+  },
+
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      exampleValue: [],
+    };
+  },
+
+  template: `
+    <unnnicFormElement label="Label" error="Error text">
+      <unnnicSelectSmart v-bind="args" v-model="exampleValue"/>
+    </unnnicFormElement>
+  `,
+});
+
+const TemplateDisabled = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicFormElement,
+    unnnicSelectSmart,
+  },
+
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      exampleValue: [],
+    };
+  },
+
+  template: `
+    <unnnicFormElement label="Label" message="Helper text" disabled>
+      <unnnicSelectSmart v-bind="args" v-model="exampleValue"/>
+    </unnnicFormElement>
+  `,
+});
+
 export const Default = {
   args: {
     options: [
@@ -62,11 +114,25 @@ export const OrderedByIndex = {
   },
 };
 
-export const Disabled = {
-  args: {
-    options: [{ value: '', label: 'Select some option' }],
-    disabled: true,
-  },
+export const Error = TemplateError.bind({});
+Error.args = {
+  type: 'error',
+  options: [
+    { value: '', label: 'Select some option' },
+    { value: '5', label: 'Option 5' },
+    { value: '3', label: 'Option 3' },
+    { value: '1', label: 'Option 1' },
+    { value: '4', label: 'Option 4' },
+    { value: '2', label: 'Option 2' },
+    { value: '6', label: 'Option 6' },
+    { value: '7', label: 'Option 7' },
+  ],
+};
+
+export const Disabled = TemplateDisabled.bind({});
+Disabled.args = {
+  options: [{ value: '', label: 'Select some option' }],
+  disabled: true,
 };
 
 export const WithDescriptions = {