@weni/unnnic-system 3.9.2 → 3.9.3-alpha.0

package/src/stories/Button.stories.js

@@ -8,7 +8,7 @@ export default {
       description: {
         component: `Allows users to perform an action or navigate to another page. 
           It has styles for various needs and are ideal for directing the user's attention. 
-          It is divided into 6 types: Primary, Secondary, Tertiary, Alternative, Warning, Attention.
+          It is divided into 5 types: Primary, Secondary, Tertiary, Warning, Attention.
           Each of these types has its states.
           <br/>
           <br/>
@@ -36,14 +36,7 @@ export default {
   argTypes: {
     type: {
       control: { type: 'select' },
-      options: [
-        'primary',
-        'secondary',
-        'tertiary',
-        'alternative',
-        'warning',
-        'attention',
-      ],
+      options: ['primary', 'secondary', 'tertiary', 'warning', 'attention'],
     },
     size: {
       control: { type: 'select' },
@@ -75,74 +68,71 @@ export default {
 
 export const Primary = {
   args: {
-    text: 'Button Text',
+    text: 'Text',
   },
 };
 
 export const Secondary = {
   args: {
     type: 'secondary',
-    text: 'Button Text',
+    text: 'Text',
   },
 };
 
 export const Tertiary = {
   args: {
     type: 'tertiary',
-    text: 'Button Text',
+    text: 'Text',
   },
 };
 
-export const WithIcon = {
+export const Warning = {
+  parameters: {
+    docs: {
+      description: {
+        story: `This variation aims to highlight actions that could be destructive or have negative consequences if taken. 
+        For example: Deleting an element.`,
+      },
+    },
+  },
   args: {
-    text: 'Button Text',
-    iconLeft: 'add',
+    type: 'warning',
+    text: 'Text',
   },
 };
 
-export const FilledIcon = {
+export const Attention = {
   args: {
-    text: 'Button Text',
-    iconLeft: 'play_arrow',
-    iconsFilled: true,
+    type: 'attention',
+    text: 'Text',
   },
 };
 
-export const OnlyIcon = {
+export const Loading = {
   args: {
-    iconCenter: 'add',
+    loading: true,
+    text: 'Text',
   },
 };
 
-export const Alternative = {
+export const WithIcon = {
   args: {
-    type: 'alternative',
-    iconLeft: 'add',
     text: 'Text',
+    iconLeft: 'add',
   },
 };
 
-export const Warning = {
-  parameters: {
-    docs: {
-      description: {
-        story: `This variation aims to highlight actions that could be destructive or have negative consequences if taken. 
-        For example: Deleting an element.`,
-      },
-    },
-  },
+export const FilledIcon = {
   args: {
-    type: 'warning',
-    iconLeft: 'add',
     text: 'Text',
+    iconLeft: 'play_arrow',
+    iconsFilled: true,
   },
 };
 
-export const Attention = {
+export const OnlyIcon = {
   args: {
-    type: 'attention',
-    iconLeft: 'add',
-    text: 'Text',
+    iconCenter: 'add',
   },
 };
 

package/src/stories/ChatsContact.stories.js

@@ -82,6 +82,15 @@ export const Default = {
   },
 };
 
+export const WithLastInteractionTimePrefix = {
+  args: {
+    ...defaultArgs,
+    unreadMessages,
+    lastInteractionTime: new Date().toISOString(),
+    lastInteractionTimePrefix: 'Since',
+  },
+};
+
 export const Selected = {
   args: {
     ...defaultArgs,

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'] },
     disabled: { control: 'boolean' },
-    size: { control: 'select', options: ['md', 'sm'] },
-    textRight: { control: 'text' },
+    label: { control: 'text' },
+    helper: { control: 'text' },
   },
   render: (args) => ({
     components: {
@@ -34,6 +34,7 @@ export default {
       return { args, updateModelValue };
     },
     template: `
+      <pre>v-model: {{ args.modelValue }}</pre>
       <UnnnicCheckbox v-bind="args" @update:modelValue="updateModelValue"/>
     `,
   }),
@@ -42,18 +43,22 @@ export default {
 export const Default = {
   args: {
     modelValue: false,
+    label: 'Label',
+    helper: 'Helper',
   },
 };
 
 export const Selected = {
   args: {
     modelValue: true,
+    label: 'Label',
   },
 };
 
-export const LessSelected = {
+export const Less = {
   args: {
     modelValue: 'less',
+    label: 'Label',
   },
 };
 
@@ -61,6 +66,7 @@ export const Disabled = {
   args: {
     modelValue: false,
     disabled: true,
+    label: 'Label',
   },
 };
 
@@ -68,5 +74,6 @@ export const DisabledSelected = {
   args: {
     modelValue: true,
     disabled: true,
+    label: 'Label',
   },
 };

package/src/stories/CheckboxGroup.stories.js

@@ -0,0 +1,105 @@
+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',
+    labelTooltip: 'Tooltip 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>
+    `,
+  }),
+};

package/src/stories/Input.stories.js

@@ -7,14 +7,25 @@ export default {
   component: unnnicInput,
   argTypes: {
     label: { control: { type: 'text' } },
-    size: { control: { type: 'select' }, options: ['md', 'sm'] },
-    type: { control: { type: 'select' }, options: ['normal', 'error'] },
+    size: {
+      control: { type: 'select' },
+      options: ['md', 'sm'],
+      defaultValue: {
+        summary: 'md',
+      },
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['normal', 'error'],
+      defaultValue: {
+        summary: 'normal',
+      },
+    },
     nativeType: { control: { type: 'select' }, options: ['text', 'password'] },
     placeholder: { control: { type: 'text' } },
     iconLeft: { control: { type: 'select' }, options: iconList },
     iconRight: { control: { type: 'select' }, options: iconList },
     allowTogglePassword: { control: { type: 'boolean' } },
-    hasCloudyColor: { control: { type: 'select' }, options: [true, false] },
   },
   render: (args) => ({
     components: {
@@ -35,106 +46,72 @@ export default {
       },
     },
     template: `
-      <unnnic-form-element label="Label" message="Helper text">
-        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
-      </unnnic-form-element>
+      <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
     `,
   }),
 };
 
-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',
+    label: 'Label',
     placeholder: 'Placeholder',
   },
 };
 
 export const NormalSm = {
   args: {
+    label: 'Label',
     size: 'sm',
-    type: 'normal',
     placeholder: 'Placeholder',
   },
 };
 
-export const Error = TemplateError.bind({});
-Error.args = {
-  type: 'error',
-  placeholder: 'Placeholder',
+export const Error = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    errors: 'Error text',
+  },
 };
 
-export const ErrorSm = TemplateError.bind({});
-ErrorSm.args = {
-  size: 'sm',
-  type: 'error',
-  placeholder: 'Placeholder',
+export const ErrorSm = {
+  args: {
+    label: 'Label',
+    size: 'sm',
+    errors: 'Error text',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Label',
+    disabled: true,
+    placeholder: 'Placeholder',
+  },
 };
 
-export const Disabled = TemplateDisabled.bind({});
-Disabled.args = {
-  disabled: true,
-  placeholder: 'Placeholder',
+export const DisabledSm = {
+  args: {
+    label: 'Label',
+    size: 'sm',
+    disabled: true,
+    placeholder: 'Placeholder',
+  },
 };
 
-export const DisabledSm = TemplateDisabled.bind({});
-DisabledSm.args = {
-  size: 'sm',
-  disabled: true,
-  placeholder: 'Placeholder',
+export const DisabledError = {
+  args: {
+    label: 'Label',
+    disabled: true,
+    errors: 'Error text',
+    placeholder: 'Placeholder',
+  },
 };
 
 export const Password = {
   args: {
+    label: 'Label',
     placeholder: 'Password',
     nativeType: 'password',
     allowTogglePassword: true,
@@ -143,6 +120,7 @@ export const Password = {
 
 export const IconLeftAndRight = {
   args: {
+    label: 'Label',
     placeholder: 'Text',
     iconLeft: 'email',
     iconRight: 'search',
@@ -157,3 +135,20 @@ export const Mask = {
     mask: ['###.###.###-##', '##.###.###/####-##'],
   },
 };
+
+export const LimitMaxLength = {
+  args: {
+    label: 'Label',
+    placeholder: 'Text',
+    maxlength: 10,
+    showMaxlengthCounter: true,
+  },
+};
+
+export const WithTooltip = {
+  args: {
+    label: 'Label',
+    placeholder: 'Text',
+    tooltip: 'Tooltip',
+  },
+};

package/src/stories/Label.stories.js

@@ -13,3 +13,10 @@ export const Default = {
     label: 'Label',
   },
 };
+
+export const WithTooltip = {
+  args: {
+    label: 'Label',
+    tooltip: 'Tooltip',
+  },
+};

package/src/stories/MultiSelectV2.stories.js

@@ -0,0 +1,158 @@
+import UnnnicMultiSelect from '../components/MultiSelectV2/index.vue';
+
+const options = [
+  { label: 'Option 1', value: 'option1', altValue: 'alt_value_option1' },
+  { label: 'Option 2', value: 'option2', altValue: 'alt_value_option2' },
+  { label: 'Option 3', value: 'option3', altValue: 'alt_value_option3' },
+  { label: 'Option 4', value: 'option4', altValue: 'alt_value_option4' },
+  { label: 'Option 5', value: 'option5', altValue: 'alt_value_option5' },
+  { label: 'Option 6', value: 'option6', altValue: 'alt_value_option6' },
+  { label: 'Option 7', value: 'option7', altValue: 'alt_value_option7' },
+  { label: 'Option 8', value: 'option8', altValue: 'alt_value_option8' },
+  { label: 'Option 9', value: 'option9', altValue: 'alt_value_option9' },
+  { label: 'Option 10', value: 'option10', disabled: true },
+];
+
+export default {
+  title: 'Form/MultiSelectV2',
+  component: UnnnicMultiSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'MultiSelect is designed to solve common problems related to multiple option selection.',
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      description:
+        'List of items to be displayed in the options. If an item has a `disabled` key set to `true`, that item will be disabled. By default, the component looks for the `label` and `value` keys to display and update the model, but these are not required if you wish to customize them using the `itemLabel` and `itemValue` props, respectively.',
+    },
+    placeholder: {
+      description: 'Text to be displayed in the placeholder.',
+    },
+    label: {
+      description: 'Text to be displayed in the label.',
+    },
+    modelValue: {
+      description:
+        'Model variable. Its type will always match a list of the return type of the key specified by `itemValue`, or the entire options object when the `returnObject` property is set to `true`.',
+    },
+    returnObject: {
+      description:
+        'Prop to indicate that the full option object should be returned in the v-model.',
+    },
+    itemLabel: {
+      description:
+        'Field of the option item that should be used to render the option label.',
+    },
+    itemValue: {
+      description:
+        'Field of the option item that should be used to return value to v-model.',
+    },
+    type: {
+      description: 'Select state type',
+    },
+    errors: {
+      description:
+        "Error message or messages. When it's an array, the messages will be separated by commas.",
+    },
+    message: {
+      description: 'Help or hint message.',
+    },
+    size: {
+      description: 'Select size',
+    },
+    optionsLines: {
+      description:
+        'Number of options to display at most; if exceeded, scrolling will be enabled.',
+    },
+    enableSearch: {
+      description:
+        'If true, enables a search field displayed inside the options popover. The `update:search` event is emitted on each input.',
+    },
+    search: {
+      description: 'Search value.',
+    },
+    locale: {
+      description: 'Locale for i18n translations.',
+    },
+    disabled: {
+      description: 'Disable the select.',
+    },
+  },
+  render: (args) => ({
+    components: { UnnnicMultiSelect },
+    setup() {
+      const handleSearch = (value) => {
+        args.search = value;
+      };
+      return { args, handleSearch };
+    },
+    data() {
+      return {
+        exampleValue: [],
+      };
+    },
+    template: `
+      <p>modelValue: {{ exampleValue }}</p>
+      <unnnic-multi-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
+    `,
+  }),
+};
+
+export const Default = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const ReturnObject = {
+  args: {
+    returnObject: true,
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueKey = {
+  args: {
+    itemValue: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueLabel = {
+  args: {
+    itemLabel: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const Disabled = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    disabled: true,
+  },
+};
+
+export const WithSearch = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    enableSearch: true,
+    search: '',
+  },
+};