@weni/unnnic-system 3.2.1 → 3.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.1",
+  "version": "3.2.3",
   "type": "commonjs",
   "files": [
     "dist",
@@ -100,4 +100,4 @@
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^3.0.5"
   }
-}
+}

package/src/components/Button/Button.vue

@@ -30,7 +30,7 @@
       :size="iconSize"
       :filled="iconsFilled"
       :class="{ 'unnnic-button__icon-left': hasText }"
-      :style="{ visibility: loading ? 'hidden' : null }"
+      :style="{ visibility: loading ? 'hidden' : 'visible' }"
       :next="next"
       data-testid="icon-left"
     />
@@ -39,7 +39,7 @@
       v-if="iconCenter"
       :icon="iconCenter"
       :scheme="iconScheme"
-      :style="{ visibility: loading ? 'hidden' : null }"
+      :style="{ visibility: loading ? 'hidden' : 'visible' }"
       :size="iconSize"
       :filled="iconsFilled"
       :next="next"
@@ -49,7 +49,7 @@
     <span
       v-if="!float"
       class="unnnic-button__label"
-      :style="{ visibility: loading ? 'hidden' : null }"
+      :style="{ visibility: loading ? 'hidden' : 'visible' }"
       data-testid="button-label"
     >
       <slot /> {{ text }}
@@ -62,145 +62,116 @@
       :size="iconSize"
       :filled="iconsFilled"
       :class="{ 'unnnic-button__icon-right': hasText }"
-      :style="{ visibility: loading ? 'hidden' : null }"
+      :style="{ visibility: loading ? 'hidden' : 'visible' }"
       :next="next"
       data-testid="icon-right"
     />
   </button>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, watch, useSlots } from 'vue';
 import UnnnicIcon from '../Icon.vue';
+import type { ButtonProps, ButtonSize, ButtonType } from './types';
+import type { SchemeColor } from '../Icon/types';
 
-export default {
+defineOptions({
   name: 'UnnnicButton',
-  components: {
-    UnnnicIcon,
-  },
-  props: {
-    size: {
-      type: String,
-      default: 'large',
-    },
-    text: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: 'primary',
-    },
-    float: {
-      type: Boolean,
-      default: false,
-    },
-    iconLeft: {
-      type: String,
-      default: '',
-    },
-    iconRight: {
-      type: String,
-      default: '',
-    },
-    iconCenter: {
-      type: String,
-      default: '',
-    },
-    iconsFilled: {
-      type: Boolean,
-      default: false,
-    },
-    next: {
-      type: Boolean,
-      default: false,
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    buttonDisabled() {
-      return this.disabled || this.loading;
-    },
-
-    iconSize() {
-      if (this.size === 'small') return 'sm';
-      return 'md';
-    },
-    hasText() {
-      if (this.$slots.default) return true;
-      return this.text && this.text.length > 0;
-    },
-    iconScheme() {
-      if (this.buttonDisabled) {
-        return 'neutral-clean';
-      }
+});
+
+export type { ButtonProps, ButtonSize, ButtonType };
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  size: 'large',
+  text: '',
+  type: 'primary',
+  float: false,
+  iconLeft: '',
+  iconRight: '',
+  iconCenter: '',
+  iconsFilled: false,
+  next: false,
+  disabled: false,
+  loading: false,
+});
+
+const slots = useSlots();
+
+const buttonDisabled = computed(() => {
+  return props.disabled || props.loading;
+});
+
+const iconSize = computed(() => {
+  if (props.size === 'small') return 'sm';
+  return 'md';
+});
+
+const hasText = computed(() => {
+  if (slots.default) return true;
+  return props.text && props.text.length > 0;
+});
+
+const iconScheme = computed((): SchemeColor => {
+  if (buttonDisabled.value) {
+    return 'neutral-clean';
+  }
 
-      const typeToSchemeMap = {
-        primary: 'neutral-white',
-        secondary: 'neutral-dark',
-        tertiary: 'neutral-dark',
-        warning: 'neutral-white',
-        attention: 'neutral-white',
-      };
-
-      return typeToSchemeMap[this.type] || '';
-    },
-
-    isSizePropValid() {
-      return (
-        this.size === 'large' ||
-        (!this.float && this.size === 'small') ||
-        (this.float && this.size === 'extra-large')
-      );
-    },
-    isTypePropValid() {
-      const validTypes = [
-        'primary',
-        'secondary',
-        'tertiary',
-        'alternative',
-        'warning',
-        'attention',
-      ];
-      return validTypes.includes(this.type);
-    },
-  },
-  watch: {
-    $props: {
-      deep: true,
-      immediate: true,
-      handler() {
-        this.validateProps();
-      },
-    },
-  },
-  methods: {
-    validateProps() {
-      if (!this.isSizePropValid || !this.isTypePropValid) {
-        let errorMessage = 'TypeError:';
+  const typeToSchemeMap: Record<ButtonType, SchemeColor> = {
+    primary: 'neutral-white',
+    secondary: 'neutral-dark',
+    tertiary: 'neutral-dark',
+    alternative: 'neutral-white',
+    warning: 'neutral-white',
+    attention: 'neutral-white',
+  };
+
+  return typeToSchemeMap[props.type] || 'neutral-white';
+});
+
+const isSizePropValid = computed(() => {
+  return (
+    props.size === 'large' ||
+    (!props.float && props.size === 'small') ||
+    (props.float && props.size === 'extra-large')
+  );
+});
+
+const isTypePropValid = computed(() => {
+  const validTypes: ButtonType[] = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'alternative',
+    'warning',
+    'attention',
+  ];
+  return validTypes.includes(props.type);
+});
+
+const validateProps = () => {
+  if (!isSizePropValid.value || !isTypePropValid.value) {
+    let errorMessage = 'TypeError:';
+
+    if (!isSizePropValid.value) {
+      errorMessage += ' Invalid size prop.';
+      errorMessage += ` Please provide 'large', 'small' (only if float prop is false), or 'extra-large' (only if float prop is true).`;
+    }
 
-        if (!this.isSizePropValid) {
-          errorMessage += ' Invalid size prop.';
-          errorMessage += ` Please provide 'large', 'small' (only if float prop is false), or 'extra-large' (only if float prop is true).`;
-        }
+    if (!isTypePropValid.value) {
+      errorMessage += ' Invalid type prop.';
+    }
 
-        if (!this.isTypePropValid) {
-          errorMessage += ' Invalid type prop.';
-        }
+    throw new Error(errorMessage);
+  }
+};
 
-        throw new Error(errorMessage);
-      }
-    },
+watch(
+  () => props,
+  () => {
+    validateProps();
   },
-};
+  { deep: true, immediate: true }
+);
 </script>
 
 <style lang="scss" scoped>

package/src/components/Button/types.ts

@@ -0,0 +1,23 @@
+export type ButtonSize = 'small' | 'large' | 'extra-large';
+
+export type ButtonType = 
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'alternative'
+  | 'warning'
+  | 'attention';
+
+export interface ButtonProps {
+  size?: ButtonSize;
+  text?: string;
+  type?: ButtonType;
+  float?: boolean;
+  iconLeft?: string;
+  iconRight?: string;
+  iconCenter?: string;
+  iconsFilled?: boolean;
+  next?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+}

package/src/components/ChatsMessage/ChatsMessage.vue

@@ -3,6 +3,7 @@
     class="unnnic-chats-message"
     :class="{
       sent: type === 'sent',
+      automatic: automatic,
       sending: status === 'sending',
       'is-document': isDocument,
       'is-media': isMedia,
@@ -45,7 +46,9 @@
       />
       <UnnnicChatsMessageText
         v-if="isText"
+        :locale="locale"
         :text="slotText"
+        :isAutomatic="automatic"
       />
       <div
         v-if="isDocument"
@@ -156,6 +159,10 @@ export default {
   },
   mixins: [UnnnicI18n],
   props: {
+    locale: {
+      type: String,
+      default: 'en',
+    },
     enableReply: {
       type: Boolean,
       default: false,
@@ -171,6 +178,10 @@ export default {
         return ['received', 'sent'].includes(type);
       },
     },
+    automatic: {
+      type: Boolean,
+      default: false,
+    },
     time: {
       type: Date,
       required: true,
@@ -323,6 +334,10 @@ $defaultLineHeight: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
 
   &.sent {
     background-color: #cff8f4;
+
+    &.automatic {
+      background-color: $unnnic-color-aux-blue-50;
+    }
   }
 
   &.sending {

package/src/components/ChatsMessage/ChatsMessageText.vue

@@ -1,18 +1,45 @@
 <template>
-  <p
-    class="unnnic-chats-message__text"
-    v-html="formattedText"
-  />
+  <section class="unnnic-chats-message__text__container">
+    <p
+      class="unnnic-chats-message__text"
+      v-html="formattedText"
+    />
+    <p v-if="isAutomatic" class="unnnic-chats-message__text--automatic">
+      {{ i18n('automatic_message') }}
+    </p>
+  </section>
 </template>
 
 <script>
+import UnnnicI18n from '../../mixins/i18n';
+
 export default {
   name: 'ChatsMessageText',
+  mixins: [UnnnicI18n],
   props: {
+    locale: {
+      type: String,
+      default: 'en',
+    },
     text: {
       type: String,
       required: true,
     },
+    isAutomatic: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      defaultTranslations: {
+        automatic_message: {
+          'pt-br': 'Mensagem de abertura automática',
+          en: 'Automatic Opening Message',
+          es: 'Mensaje de apertura automático',
+        },
+      },
+    };
   },
   computed: {
     formattedText() {
@@ -78,3 +105,30 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.unnnic-chats-message__text {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-spacing-sm;
+    padding: $unnnic-spacing-nano 0;
+    font-size: $unnnic-font-size-body-gt;
+    color: $unnnic-color-neutral-dark;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+    word-break: break-word;
+  }
+  &--automatic {
+    font-size: $unnnic-font-size-body-md;
+    line-height: $unnnic-line-height-caption-1;
+    color: $unnnic-color-aux-blue-500;
+  }
+}
+</style>

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

@@ -24,7 +24,7 @@ describe('Checkbox', () => {
 
   it('should checkbox emit change events', async () => {
     wrapper = createWrapper();
-    const checkbox = wrapper.findComponent({ name: 'Icon' });
+    const checkbox = wrapper.findComponent({ name: 'UnnnicIcon' });
 
     // click false to true
     await checkbox.trigger('click');
@@ -44,14 +44,14 @@ describe('Checkbox', () => {
 
   it('should checkbox disabled', async () => {
     wrapper = createWrapper({ disabled: true });
-    const checkbox = wrapper.findComponent({ name: 'Icon' });
+    const checkbox = wrapper.findComponent({ name: 'UnnnicIcon' });
     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: 'Icon' });
+    const checkbox = wrapper.findComponent({ name: 'UnnnicIcon' });
     const label = wrapper.find('.unnnic-checkbox__label');
 
     // sm

package/src/components/Disclaimer/Disclaimer.vue

@@ -15,36 +15,38 @@
   </section>
 </template>
 
-<script>
+<script setup lang="ts">
 import icons from '../../utils/iconList';
 import colors from '../../utils/colorsList';
+import UnnnicIcon from '../Icon.vue';
+import type { DisclaimerProps } from './types';
 
-import unnnicIcon from '../Icon.vue';
-
-export default {
+defineOptions({
   name: 'UnnnicDisclaimer',
-  components: { unnnicIcon },
-  props: {
-    text: {
-      type: String,
-      required: true,
-    },
-    icon: {
-      type: String,
-      default: 'alert-circle-1-1',
-      validator(value) {
-        return icons.includes(value);
-      },
-    },
-    iconColor: {
-      type: String,
-      default: 'neutral-darkest',
-      validator(value) {
-        return colors.includes(value);
-      },
-    },
-  },
+});
+
+export type { DisclaimerProps };
+
+const props = withDefaults(defineProps<DisclaimerProps>(), {
+  icon: 'alert-circle-1-1',
+  iconColor: 'neutral-darkest',
+});
+
+const validateIcon = (value: string): boolean => {
+  return icons.includes(value);
+};
+
+const validateIconColor = (value: string): boolean => {
+  return colors.includes(value);
 };
+
+if (!validateIcon(props.icon as string)) {
+  console.warn(`Invalid icon prop: ${props.icon}`);
+}
+
+if (!validateIconColor(props.iconColor as string)) {
+  console.warn(`Invalid iconColor prop: ${props.iconColor}`);
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -38,21 +38,35 @@ describe('Disclaimer', () => {
     const iconComponent = wrapper.findComponent(
       '[data-testid="disclaimer-icon"]',
     );
-    expect(iconComponent.props('icon')).toBe(Disclaimer.props.icon.default);
-    expect(iconComponent.props('scheme')).toBe(
-      Disclaimer.props.iconColor.default,
-    );
+    expect(iconComponent.props('icon')).toBe('alert-circle-1-1');
+    expect(iconComponent.props('scheme')).toBe('neutral-darkest');
   });
 
   it('validates the icon prop correctly', () => {
-    const validator = Disclaimer.props.icon.validator;
-    expect(validator('alert-circle-1-1')).toBe(true);
-    expect(validator('invalid-icon')).toBe(false);
+    const wrapperValid = mount(Disclaimer, {
+      props: { text: 'Test', icon: 'alert-circle-1-1' },
+      global: { components: { UnnnicIcon: Icon } },
+    });
+    expect(wrapperValid.exists()).toBe(true);
+
+    const wrapperInvalid = mount(Disclaimer, {
+      props: { text: 'Test', icon: 'invalid-icon' },
+      global: { components: { UnnnicIcon: Icon } },
+    });
+    expect(wrapperInvalid.exists()).toBe(true);
   });
 
   it('validates the iconColor prop correctly', () => {
-    const validator = Disclaimer.props.iconColor.validator;
-    expect(validator('neutral-darkest')).toBe(true);
-    expect(validator('invalid-color')).toBe(false);
+    const wrapperValid = mount(Disclaimer, {
+      props: { text: 'Test', iconColor: 'neutral-darkest' },
+      global: { components: { UnnnicIcon: Icon } },
+    });
+    expect(wrapperValid.exists()).toBe(true);
+
+    const wrapperInvalid = mount(Disclaimer, {
+      props: { text: 'Test', iconColor: 'invalid-color' },
+      global: { components: { UnnnicIcon: Icon } },
+    });
+    expect(wrapperInvalid.exists()).toBe(true);
   });
 });

package/src/components/Disclaimer/types.ts

@@ -0,0 +1,7 @@
+import type { SchemeColor } from '../Icon/types';
+
+export interface DisclaimerProps {
+  text: string;
+  icon?: string;
+  iconColor?: SchemeColor;
+}