@weni/unnnic-system 3.2.2 → 3.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "type": "commonjs",
   "files": [
     "dist",

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/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;
+}

package/src/components/Icon/types.ts

@@ -0,0 +1,114 @@
+export type SchemeColor = 
+  | 'background-solo'
+  | 'background-sky'
+  | 'background-grass'
+  | 'background-carpet'
+  | 'background-snow'
+  | 'background-lightest'
+  | 'background-white'
+  | 'neutral-black'
+  | 'neutral-darkest'
+  | 'neutral-dark'
+  | 'neutral-cloudy'
+  | 'neutral-cleanest'
+  | 'neutral-clean'
+  | 'neutral-soft'
+  | 'neutral-lightest'
+  | 'neutral-light'
+  | 'neutral-white'
+  | 'neutral-snow'
+  | 'feedback-red'
+  | 'feedback-green'
+  | 'feedback-yellow'
+  | 'feedback-blue'
+  | 'feedback-grey'
+  | 'aux-blue'
+  | 'aux-purple'
+  | 'aux-orange'
+  | 'aux-lemon'
+  | 'aux-pink'
+  | 'aux-baby-blue'
+  | 'aux-baby-yellow'
+  | 'aux-baby-red'
+  | 'aux-baby-green'
+  | 'aux-baby-pink'
+  | 'aux-green-100'
+  | 'aux-green-300'
+  | 'aux-green-500'
+  | 'aux-green-700'
+  | 'aux-green-900'
+  | 'aux-blue-100'
+  | 'aux-blue-300'
+  | 'aux-blue-500'
+  | 'aux-blue-700'
+  | 'aux-blue-900'
+  | 'aux-purple-100'
+  | 'aux-purple-300'
+  | 'aux-purple-500'
+  | 'aux-purple-700'
+  | 'aux-purple-900'
+  | 'aux-red-100'
+  | 'aux-red-300'
+  | 'aux-red-500'
+  | 'aux-red-700'
+  | 'aux-red-900'
+  | 'aux-orange-100'
+  | 'aux-orange-300'
+  | 'aux-orange-500'
+  | 'aux-orange-700'
+  | 'aux-orange-900'
+  | 'aux-yellow-100'
+  | 'aux-yellow-300'
+  | 'aux-yellow-500'
+  | 'aux-yellow-700'
+  | 'aux-yellow-900'
+  | 'floweditor-blue'
+  | 'floweditor-purple'
+  | 'floweditor-wine'
+  | 'floweditor-orange'
+  | 'floweditor-pink'
+  | 'floweditor-turquoise'
+  | 'floweditor-green'
+  | 'weni-50'
+  | 'weni-100'
+  | 'weni-200'
+  | 'weni-300'
+  | 'weni-400'
+  | 'weni-500'
+  | 'weni-600'
+  | 'weni-700'
+  | 'weni-800'
+  | 'weni-900'
+  | 'weni-950'
+  | 'brand-weni'
+  | 'brand-weni-dark'
+  | 'brand-weni-soft'
+  | 'brand-sec-dark'
+  | 'brand-sec-soft'
+  | 'brand-sec';
+
+export type IconSize = 
+  | 'nano'
+  | 'xs'
+  | 'sm'
+  | 'ant'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | 'avatar-lg'
+  | 'avatar-md'
+  | 'avatar-sm'
+  | 'avatar-xs'
+  | 'avatar-nano';
+
+export type LineHeight = 'sm' | 'md' | 'lg';
+
+export interface IconProps {
+  filled?: boolean;
+  next?: boolean;
+  icon?: string | null;
+  clickable?: boolean;
+  size?: IconSize;
+  lineHeight?: LineHeight | null;
+  scheme?: SchemeColor;
+}