@weni/unnnic-system 3.12.3-alpha.4 → 3.12.3

package/src/components/Disclaimer/Disclaimer.vue

@@ -1,165 +1,71 @@
 <template>
-  <section
-    :class="['unnnic-disclaimer', `unnnic-disclaimer--${type}`]"
-    data-testid="disclaimer"
-  >
+  <section class="unnnic-disclaimer">
     <UnnnicIcon
       class="unnnic-disclaimer__icon"
-      size="ant"
-      :icon="variant.icon"
-      :scheme="variant.scheme"
+      size="avatar-nano"
+      :icon="icon"
+      :scheme="iconColor"
       data-testid="disclaimer-icon"
     />
-
-    <section class="unnnic-disclaimer__content">
-      <p
-        v-if="title"
-        class="unnnic-disclaimer__title"
-        data-testid="disclaimer-title"
-      >
-        {{ title }}
-      </p>
-      <p
-        v-if="description"
-        class="unnnic-disclaimer__description"
-        data-testid="disclaimer-description"
-      >
-        {{ description }}
-      </p>
-    </section>
+    <p
+      class="unnnic-disclaimer__text"
+      data-testid="disclaimer-text"
+      v-html="text"
+    />
   </section>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-
+import icons from '../../utils/iconList';
+import colors from '../../utils/colorsList';
 import UnnnicIcon from '../Icon.vue';
-import type { SchemeColor } from '@/types/scheme-colors';
-import type { DisclaimerType, DisclaimerProps } from './types';
+import type { DisclaimerProps } from './types';
 
 defineOptions({
   name: 'UnnnicDisclaimer',
 });
 
+export type { DisclaimerProps };
+
 const props = withDefaults(defineProps<DisclaimerProps>(), {
-  title: 'Disclaimer',
-  description: 'The quick brown fox jumps over the lazy dog',
-  type: 'informational',
-  icon: undefined,
-  iconColor: undefined,
+  icon: 'alert-circle-1-1',
+  iconColor: 'neutral-darkest',
 });
 
-// This is a temporary solution to ensure backwards compatibility with the older version of the component.
-// TODO: It should be removed once the older version is discontinued.
-const variantCompatibleWithOlderVersion = computed((): DisclaimerType => {
-  if (props.icon) {
-    if (props.icon.includes('alert-circle')) return 'attention';
-    if (props.icon === 'info') return 'informational';
-    if (props.icon === 'error') return 'error';
-    return 'neutral';
-  }
+const validateIcon = (value: string): boolean => {
+  return icons.includes(value);
+};
 
-  if (props.iconColor) {
-    if (props.iconColor.includes('yellow')) return 'attention';
-    if (props.iconColor.includes('red')) return 'error';
-    return 'neutral';
-  }
-
-  return props.type;
-});
+const validateIconColor = (value: string): boolean => {
+  return colors.includes(value);
+};
 
-const variant = computed(() => {
-  const variants: Record<
-    DisclaimerType,
-    { icon: string; scheme: SchemeColor }
-  > = {
-    informational: {
-      icon: 'info',
-      scheme: 'blue-500',
-    },
-    success: {
-      icon: 'check_circle',
-      scheme: 'green-500',
-    },
-    attention: {
-      icon: 'error',
-      scheme: 'yellow-500',
-    },
-    error: {
-      icon: 'cancel',
-      scheme: 'red-500',
-    },
-    neutral: {
-      icon: 'info',
-      scheme: 'gray-400',
-    },
-  };
+if (!validateIcon(props.icon as string)) {
+  console.warn(`Invalid icon prop: ${props.icon}`);
+}
 
-  return variants[variantCompatibleWithOlderVersion.value || props.type];
-});
+if (!validateIconColor(props.iconColor as string)) {
+  console.warn(`Invalid iconColor prop: ${props.iconColor}`);
+}
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
-
 .unnnic-disclaimer {
-  $border-width: 1px;
-
-  display: flex;
-  gap: $unnnic-space-2;
-
-  width: 100%;
-  min-height: 53px;
-  padding: calc($unnnic-space-4 - $border-width) $unnnic-space-4;
-  box-sizing: border-box;
-
-  border: $border-width solid $unnnic-color-border-base;
-  border-radius: $unnnic-radius-2;
-
-  background-color: $unnnic-color-bg-soft;
-
-  color: $unnnic-color-fg-emphasized;
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: $unnnic-space-1;
-  }
-
-  &__title {
-    margin: 0;
-    font: $unnnic-font-action;
-  }
-
-  &__description {
+  display: inline-flex;
+  align-items: center;
+  gap: $unnnic-spacing-xs;
+  padding: $unnnic-spacing-sm;
+  border-radius: $unnnic-border-radius-sm;
+  border: 1px solid $unnnic-color-neutral-soft;
+  background: $unnnic-color-background-lightest;
+  .unnnic-disclaimer__text {
     margin: 0;
-    font: $unnnic-font-caption-2;
-  }
-
-  &--informational {
-    background-color: $unnnic-color-bg-info;
-    border-color: $unnnic-color-border-info;
-  }
-
-  &--success {
-    background-color: $unnnic-color-bg-success;
-    border-color: $unnnic-color-border-success;
-  }
-
-  &--attention {
-    background-color: $unnnic-color-bg-warning;
-    border-color: $unnnic-color-border-warning;
-  }
-
-  &--error {
-    background-color: $unnnic-color-bg-critical;
-    border-color: $unnnic-color-border-critical;
-  }
-
-  &--neutral {
-    background-color: $unnnic-color-bg-soft;
-    border-color: $unnnic-color-border-base;
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-line-height-large * 1.375;
+    font-weight: $unnnic-font-weight-regular;
+    color: $unnnic-color-neutral-dark;
   }
 }
 </style>

package/src/components/Disclaimer/DisclaimerV2.vue

@@ -0,0 +1,171 @@
+<template>
+  <section
+    class="unnnic-disclaimerv2"
+    :class="[
+      `type-${type}`,
+      { 'unnnic-disclaimerv2-align-center': alignCenter },
+    ]"
+    data-testid="disclaimerv2"
+  >
+    <section class="unnnic-disclaimerv2__icon-container">
+      <UnnnicIcon
+        class="unnnic-disclaimerv2__icon"
+        size="sm"
+        :icon="variant.icon"
+        :scheme="variant.scheme"
+        data-testid="disclaimerv2-icon"
+      />
+    </section>
+
+    <section class="unnnic-disclaimerv2__content">
+      <p
+        v-if="title"
+        class="unnnic-disclaimerv2__title"
+        data-testid="disclaimerv2-title"
+      >
+        {{ title }}
+      </p>
+      <p
+        v-if="description"
+        class="unnnic-disclaimerv2__description"
+        data-testid="disclaimerv2-description"
+      >
+        {{ description }}
+      </p>
+    </section>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import UnnnicIcon from '../Icon.vue';
+import type { SchemeColor } from '@/types/scheme-colors';
+import type { DisclaimerTypeV2, DisclaimerV2Props } from './types-v2';
+
+defineOptions({
+  name: 'UnnnicDisclaimerV2',
+});
+
+const props = withDefaults(defineProps<DisclaimerV2Props>(), {
+  title: 'Disclaimer',
+  description: 'The quick brown fox jumps over the lazy dog',
+  type: 'informational',
+});
+
+const hasTitle = computed(() => Boolean(props.title));
+const hasDescription = computed(() => Boolean(props.description));
+const alignCenter = computed(() =>
+  Boolean(!hasTitle.value && hasDescription.value),
+);
+
+const variant = computed(() => {
+  const variants: Record<
+    DisclaimerTypeV2,
+    { icon: string; scheme: SchemeColor }
+  > = {
+    informational: {
+      icon: 'information-circle-4',
+      scheme: 'blue-500',
+    },
+    success: {
+      icon: 'check-circle-1-1',
+      scheme: 'green-500',
+    },
+    attention: {
+      icon: 'alert-circle-1-1',
+      scheme: 'yellow-500',
+    },
+    error: {
+      icon: 'alert-circle-1',
+      scheme: 'red-500',
+    },
+    neutral: {
+      icon: 'information-circle-4',
+      scheme: 'gray-400',
+    },
+  };
+
+  return variants[props.type];
+});
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-disclaimerv2 {
+  display: flex;
+  gap: $unnnic-space-2;
+
+  &-align-center {
+    align-items: center;
+  }
+
+  width: 100%;
+  padding: $unnnic-space-4;
+  box-sizing: border-box;
+
+  border: 1px solid $unnnic-color-border-base;
+  border-radius: $unnnic-radius-2;
+
+  background-color: $unnnic-color-bg-soft;
+
+  color: $unnnic-color-fg-emphasized;
+
+  &__icon-container {
+    display: flex;
+    padding: 3px $unnnic-space-05;
+    justify-content: center;
+    align-items: flex-start;
+    flex-shrink: 0;
+    align-self: stretch;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-space-1;
+  }
+
+  &__title {
+    margin: 0;
+    font: $unnnic-font-action;
+    color: $unnnic-color-fg-emphasized;
+  }
+
+  &__description {
+    margin: 0;
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-emphasized;
+  }
+
+  &.type-informational {
+    background-color: $unnnic-color-bg-info;
+    border-color: $unnnic-color-border-info;
+  }
+
+  &.type-success {
+    background-color: $unnnic-color-bg-success;
+    border-color: $unnnic-color-border-success;
+  }
+
+  &.type-attention {
+    background-color: $unnnic-color-bg-warning;
+    border-color: $unnnic-color-border-warning;
+  }
+
+  &.type-error {
+    background-color: $unnnic-color-bg-critical;
+    border-color: $unnnic-color-border-critical;
+  }
+
+  &.type-neutral {
+    background-color: $unnnic-color-bg-soft;
+    border-color: $unnnic-color-border-base;
+  }
+}
+</style>

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

@@ -1,97 +1,72 @@
 import { mount } from '@vue/test-utils';
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, beforeEach } from 'vitest';
 
 import Disclaimer from '../Disclaimer.vue';
 import Icon from '../../Icon.vue';
 
-const mountComponent = (props = {}) =>
-  mount(Disclaimer, {
-    props,
-    global: {
-      components: { UnnnicIcon: Icon },
-    },
-  });
-
 describe('Disclaimer', () => {
-  it('renders default title and description', () => {
-    const wrapper = mountComponent();
+  let wrapper;
 
-    expect(wrapper.find('[data-testid="disclaimer-title"]').text()).toBe(
-      'Disclaimer',
-    );
-    expect(wrapper.find('[data-testid="disclaimer-description"]').text()).toBe(
-      'The quick brown fox jumps over the lazy dog',
-    );
+  beforeEach(() => {
+    wrapper = mount(Disclaimer, {
+      props: { text: 'Test Disclaimer Text' },
+      global: { components: { UnnnicIcon: Icon } },
+    });
   });
 
-  it('hides title when no title is provided', () => {
-    const wrapper = mountComponent({ title: '' });
-
-    expect(wrapper.find('[data-testid="disclaimer-title"]').exists()).toBe(
-      false,
+  it('renders the text prop correctly', () => {
+    expect(wrapper.find('[data-testid="disclaimer-text"]').text()).toBe(
+      'Test Disclaimer Text',
     );
   });
 
-  it('hides description when no description is provided', () => {
-    const wrapper = mountComponent({ description: '' });
-
-    expect(
-      wrapper.find('[data-testid="disclaimer-description"]').exists(),
-    ).toBe(false);
-  });
+  it('renders the UnnnicIcon component with correct icon and color', async () => {
+    const icon = 'alert-circle-1-1';
+    const iconColor = 'neutral-darkest';
 
-  it.each([
-    ['informational', 'info', 'blue-500'],
-    ['success', 'check_circle', 'green-500'],
-    ['attention', 'error', 'yellow-500'],
-    ['error', 'cancel', 'red-500'],
-    ['neutral', 'info', 'gray-400'],
-  ])('applies variant %s styles', (type, icon, scheme) => {
-    const wrapper = mountComponent({ type });
-
-    expect(wrapper.classes()).toContain(`unnnic-disclaimer--${type}`);
+    await wrapper.setProps({ icon, iconColor });
 
     const iconComponent = wrapper.findComponent(
       '[data-testid="disclaimer-icon"]',
     );
-
+    expect(iconComponent.exists()).toBe(true);
     expect(iconComponent.props('icon')).toBe(icon);
-    expect(iconComponent.props('scheme')).toBe(scheme);
+    expect(iconComponent.props('scheme')).toBe(iconColor);
   });
 
-  describe('legacy compatibility', () => {
-    it.each([
-      ['alert-circle-1-1', 'error', 'yellow-500'],
-      ['info', 'info', 'blue-500'],
-      ['error', 'cancel', 'red-500'],
-      ['custom-icon', 'info', 'gray-400'],
-    ])('maps icon prop "%s" to variant', (icon, expectedIcon, scheme) => {
-      const wrapper = mountComponent({ icon });
-
-      const iconComponent = wrapper.findComponent(
-        '[data-testid="disclaimer-icon"]',
-      );
+  it('renders with default icon and color if not provided', () => {
+    const iconComponent = wrapper.findComponent(
+      '[data-testid="disclaimer-icon"]',
+    );
+    expect(iconComponent.props('icon')).toBe('alert-circle-1-1');
+    expect(iconComponent.props('scheme')).toBe('neutral-darkest');
+  });
 
-      expect(iconComponent.props('icon')).toBe(expectedIcon);
-      expect(iconComponent.props('scheme')).toBe(scheme);
+  it('validates the icon prop correctly', () => {
+    const wrapperValid = mount(Disclaimer, {
+      props: { text: 'Test', icon: 'alert-circle-1-1' },
+      global: { components: { UnnnicIcon: Icon } },
     });
+    expect(wrapperValid.exists()).toBe(true);
 
-    it.each([
-      ['feedback-yellow', 'error', 'yellow-500'],
-      ['feedback-red', 'cancel', 'red-500'],
-      ['feedback-blue', 'info', 'gray-400'],
-    ])(
-      'maps iconColor prop "%s" to variant',
-      (iconColor, expectedIcon, scheme) => {
-        const wrapper = mountComponent({ iconColor });
+    const wrapperInvalid = mount(Disclaimer, {
+      props: { text: 'Test', icon: 'invalid-icon' },
+      global: { components: { UnnnicIcon: Icon } },
+    });
+    expect(wrapperInvalid.exists()).toBe(true);
+  });
 
-        const iconComponent = wrapper.findComponent(
-          '[data-testid="disclaimer-icon"]',
-        );
+  it('validates the iconColor prop correctly', () => {
+    const wrapperValid = mount(Disclaimer, {
+      props: { text: 'Test', iconColor: 'neutral-darkest' },
+      global: { components: { UnnnicIcon: Icon } },
+    });
+    expect(wrapperValid.exists()).toBe(true);
 
-        expect(iconComponent.props('icon')).toBe(expectedIcon);
-        expect(iconComponent.props('scheme')).toBe(scheme);
-      },
-    );
+    const wrapperInvalid = mount(Disclaimer, {
+      props: { text: 'Test', iconColor: 'invalid-color' },
+      global: { components: { UnnnicIcon: Icon } },
+    });
+    expect(wrapperInvalid.exists()).toBe(true);
   });
 });

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

@@ -0,0 +1,68 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+
+import DisclaimerV2 from '../DisclaimerV2.vue';
+import Icon from '../../Icon.vue';
+
+const mountComponent = (props = {}) =>
+  mount(DisclaimerV2, {
+    props,
+    global: {
+      components: { UnnnicIcon: Icon },
+    },
+  });
+
+describe('DisclaimerV2', () => {
+  it('renders default title and description', () => {
+    const wrapper = mountComponent();
+
+    expect(wrapper.find('[data-testid="disclaimerv2-title"]').text()).toBe(
+      'Disclaimer',
+    );
+    expect(
+      wrapper.find('[data-testid="disclaimerv2-description"]').text(),
+    ).toBe('The quick brown fox jumps over the lazy dog');
+  });
+
+  it('hides title when no title is provided', () => {
+    const wrapper = mountComponent({ title: '' });
+
+    expect(wrapper.find('[data-testid="disclaimerv2-title"]').exists()).toBe(
+      false,
+    );
+  });
+
+  it('hides description when no description is provided', () => {
+    const wrapper = mountComponent({ description: '' });
+
+    expect(
+      wrapper.find('[data-testid="disclaimerv2-description"]').exists(),
+    ).toBe(false);
+  });
+
+  it('aligns center when only one description text line is present', () => {
+    const onlyDescription = mountComponent({ title: '' });
+    expect(onlyDescription.classes()).toContain(
+      'unnnic-disclaimerv2-align-center',
+    );
+  });
+
+  it.each([
+    ['informational', 'information-circle-4', 'blue-500'],
+    ['success', 'check-circle-1-1', 'green-500'],
+    ['attention', 'alert-circle-1-1', 'yellow-500'],
+    ['error', 'alert-circle-1', 'red-500'],
+    ['neutral', 'information-circle-4', 'gray-400'],
+  ])('applies variant %s styles', (type, icon, scheme) => {
+    const wrapper = mountComponent({ type });
+
+    expect(wrapper.classes()).toContain(`type-${type}`);
+
+    const iconComponent = wrapper.findComponent(
+      '[data-testid="disclaimerv2-icon"]',
+    );
+
+    expect(iconComponent.props('icon')).toBe(icon);
+    expect(iconComponent.props('scheme')).toBe(scheme);
+  });
+});

package/src/components/Disclaimer/types-v2.ts

@@ -0,0 +1,12 @@
+export type DisclaimerTypeV2 =
+  | 'informational'
+  | 'success'
+  | 'attention'
+  | 'error'
+  | 'neutral';
+
+export interface DisclaimerV2Props {
+  title?: string;
+  description?: string;
+  type?: DisclaimerTypeV2;
+}

package/src/components/Disclaimer/types.ts

@@ -1,16 +1,7 @@
 import type { SchemeColor } from '@/types/scheme-colors';
 
-export type DisclaimerType =
-  | 'informational'
-  | 'success'
-  | 'attention'
-  | 'error'
-  | 'neutral';
-
 export interface DisclaimerProps {
-  title?: string;
-  description?: string;
-  type?: DisclaimerType;
-  icon?: string | undefined;
-  iconColor?: SchemeColor | undefined;
+  text: string;
+  icon?: string;
+  iconColor?: SchemeColor;
 }