@weni/unnnic-system 3.12.3-alpha.1 → 3.12.3-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.12.3-alpha.1",
+  "version": "3.12.3-alpha.3",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/Disclaimer/Disclaimer.vue

@@ -1,71 +1,165 @@
 <template>
-  <section class="unnnic-disclaimer">
+  <section
+    :class="['unnnic-disclaimer', `unnnic-disclaimer--${type}`]"
+    data-testid="disclaimer"
+  >
     <UnnnicIcon
       class="unnnic-disclaimer__icon"
-      size="avatar-nano"
-      :icon="icon"
-      :scheme="iconColor"
+      size="ant"
+      :icon="variant.icon"
+      :scheme="variant.scheme"
       data-testid="disclaimer-icon"
     />
-    <p
-      class="unnnic-disclaimer__text"
-      data-testid="disclaimer-text"
-      v-html="text"
-    />
+
+    <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>
   </section>
 </template>
 
 <script setup lang="ts">
-import icons from '../../utils/iconList';
-import colors from '../../utils/colorsList';
+import { computed } from 'vue';
+
 import UnnnicIcon from '../Icon.vue';
-import type { DisclaimerProps } from './types';
+import type { SchemeColor } from '@/types/scheme-colors';
+import type { DisclaimerType, DisclaimerProps } from './types';
 
 defineOptions({
   name: 'UnnnicDisclaimer',
 });
 
-export type { DisclaimerProps };
-
 const props = withDefaults(defineProps<DisclaimerProps>(), {
-  icon: 'alert-circle-1-1',
-  iconColor: 'neutral-darkest',
+  title: 'Disclaimer',
+  description: 'The quick brown fox jumps over the lazy dog',
+  type: 'informational',
+  icon: undefined,
+  iconColor: undefined,
 });
 
-const validateIcon = (value: string): boolean => {
-  return icons.includes(value);
-};
+// 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 validateIconColor = (value: string): boolean => {
-  return colors.includes(value);
-};
+  if (props.iconColor) {
+    if (props.iconColor.includes('yellow')) return 'attention';
+    if (props.iconColor.includes('red')) return 'error';
+    return 'neutral';
+  }
 
-if (!validateIcon(props.icon as string)) {
-  console.warn(`Invalid icon prop: ${props.icon}`);
-}
+  return props.type;
+});
 
-if (!validateIconColor(props.iconColor as string)) {
-  console.warn(`Invalid iconColor prop: ${props.iconColor}`);
-}
+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',
+    },
+  };
+
+  return variants[variantCompatibleWithOlderVersion.value || props.type];
+});
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 @use '@/assets/scss/unnnic' as *;
+
 .unnnic-disclaimer {
-  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 {
+  $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 {
     margin: 0;
-    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;
+    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;
   }
 }
 </style>

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

@@ -1,72 +1,97 @@
 import { mount } from '@vue/test-utils';
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect } from 'vitest';
 
 import Disclaimer from '../Disclaimer.vue';
 import Icon from '../../Icon.vue';
 
+const mountComponent = (props = {}) =>
+  mount(Disclaimer, {
+    props,
+    global: {
+      components: { UnnnicIcon: Icon },
+    },
+  });
+
 describe('Disclaimer', () => {
-  let wrapper;
+  it('renders default title and description', () => {
+    const wrapper = mountComponent();
 
-  beforeEach(() => {
-    wrapper = mount(Disclaimer, {
-      props: { text: 'Test Disclaimer Text' },
-      global: { components: { UnnnicIcon: Icon } },
-    });
+    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',
+    );
   });
 
-  it('renders the text prop correctly', () => {
-    expect(wrapper.find('[data-testid="disclaimer-text"]').text()).toBe(
-      'Test Disclaimer Text',
+  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 UnnnicIcon component with correct icon and color', async () => {
-    const icon = 'alert-circle-1-1';
-    const iconColor = 'neutral-darkest';
+  it('hides description when no description is provided', () => {
+    const wrapper = mountComponent({ description: '' });
+
+    expect(
+      wrapper.find('[data-testid="disclaimer-description"]').exists(),
+    ).toBe(false);
+  });
 
-    await wrapper.setProps({ icon, iconColor });
+  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}`);
 
     const iconComponent = wrapper.findComponent(
       '[data-testid="disclaimer-icon"]',
     );
-    expect(iconComponent.exists()).toBe(true);
+
     expect(iconComponent.props('icon')).toBe(icon);
-    expect(iconComponent.props('scheme')).toBe(iconColor);
+    expect(iconComponent.props('scheme')).toBe(scheme);
   });
 
-  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');
-  });
+  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 });
 
-  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);
+      const iconComponent = wrapper.findComponent(
+        '[data-testid="disclaimer-icon"]',
+      );
 
-    const wrapperInvalid = mount(Disclaimer, {
-      props: { text: 'Test', icon: 'invalid-icon' },
-      global: { components: { UnnnicIcon: Icon } },
+      expect(iconComponent.props('icon')).toBe(expectedIcon);
+      expect(iconComponent.props('scheme')).toBe(scheme);
     });
-    expect(wrapperInvalid.exists()).toBe(true);
-  });
 
-  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);
+    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', iconColor: 'invalid-color' },
-      global: { components: { UnnnicIcon: Icon } },
-    });
-    expect(wrapperInvalid.exists()).toBe(true);
+        const iconComponent = wrapper.findComponent(
+          '[data-testid="disclaimer-icon"]',
+        );
+
+        expect(iconComponent.props('icon')).toBe(expectedIcon);
+        expect(iconComponent.props('scheme')).toBe(scheme);
+      },
+    );
   });
 });

package/src/components/Disclaimer/types.ts

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

package/src/components/ui/dialog/DialogClose.vue

@@ -6,7 +6,9 @@ defineOptions({
   name: 'UnnnicDialogClose',
 });
 
-const props = defineProps<DialogCloseProps>();
+const props = withDefaults(defineProps<DialogCloseProps>(), {
+  asChild: true,
+});
 </script>
 
 <template>
@@ -19,8 +21,6 @@ const props = defineProps<DialogCloseProps>();
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
 .unnnic-dialog-close {
   > * {
     width: 100%;

package/src/components/ui/drawer/DrawerClose.vue

@@ -6,7 +6,9 @@ defineOptions({
   name: 'UnnnicDrawerClose',
 });
 
-const props = defineProps<DrawerCloseProps>();
+const props = withDefaults(defineProps<DrawerCloseProps>(), {
+  asChild: true,
+});
 </script>
 
 <template>
@@ -22,14 +24,6 @@ const props = defineProps<DrawerCloseProps>();
 @use '@/assets/scss/unnnic' as *;
 
 .unnnic-drawer__close {
-  display: flex;
-
-  border: none;
-  background: none;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-
   > * {
     width: 100%;
   }

package/src/lib/layer-manager.ts

@@ -14,14 +14,14 @@ export type LayerToken = keyof typeof layerScale;
 
 const DEFAULT_STEP = 5;
 
-const counters: Record<LayerToken, number> = {
-  hide: 0,
-  base: 0,
-  drawer: 0,
-  modal: 0,
-  popover: 0,
-  tooltip: 0,
-  toast: 0,
+const activeValues: Record<LayerToken, number[]> = {
+  hide: [],
+  base: [],
+  drawer: [],
+  modal: [],
+  popover: [],
+  tooltip: [],
+  toast: [],
 };
 
 interface Allocation {
@@ -34,10 +34,14 @@ const allocations = new Map<symbol, Allocation>();
 
 function acquire(type: LayerToken): Allocation {
   const id = Symbol('layer');
-  counters[type] = (counters[type] ?? 0) + 1;
-  const value = layerScale[type] + counters[type] * DEFAULT_STEP;
+  const list = activeValues[type];
+  const lastValue = list.length ? list[list.length - 1] : layerScale[type];
+  const value = lastValue + DEFAULT_STEP;
   const allocation: Allocation = { id, type, value };
+
+  list.push(value);
   allocations.set(id, allocation);
+
   return allocation;
 }
 
@@ -48,8 +52,12 @@ function release(id: symbol) {
   }
 
   allocations.delete(id);
-  const current = Math.max((counters[allocation.type] ?? 1) - 1, 0);
-  counters[allocation.type] = current;
+  const list = activeValues[allocation.type];
+  const index = list.indexOf(allocation.value);
+
+  if (index !== -1) {
+    list.splice(index, 1);
+  }
 }
 
 export interface LayerZIndexOptions {

package/src/stories/Disclaimer.stories.js

@@ -1,22 +1,63 @@
 import UnnnicDisclaimer from '../components/Disclaimer/Disclaimer.vue';
-import icons from '../utils/iconList';
-import colors from '../utils/colorsList';
 
 export default {
-  title: 'Example/Disclaimer',
+  title: 'Feedback/Disclaimer',
   component: UnnnicDisclaimer,
-  args: {},
   argTypes: {
-    text: { control: { type: 'text' } },
-    icon: { options: icons, control: { type: 'select' } },
-    iconColor: { options: colors, control: { type: 'select' } },
+    type: {
+      control: { type: 'select' },
+      options: ['informational', 'success', 'attention', 'error', 'neutral'],
+    },
   },
 };
 
-export const Default = {
-  args: {
-    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    icon: 'alert-circle-1-1',
-    iconColor: 'feedback-yellow',
+const Template = (args) => ({
+  components: { UnnnicDisclaimer },
+  setup() {
+    return { args };
   },
+  template: '<UnnnicDisclaimer v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Disclaimer',
+  description: 'The quick brown fox jumps over the lazy dog',
+  type: 'informational',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  ...Default.args,
+  type: 'success',
+};
+
+export const Attention = Template.bind({});
+Attention.args = {
+  ...Default.args,
+  type: 'attention',
+};
+
+export const ErrorState = Template.bind({});
+ErrorState.args = {
+  ...Default.args,
+  type: 'error',
+};
+
+export const Neutral = Template.bind({});
+Neutral.args = {
+  ...Default.args,
+  type: 'neutral',
+};
+
+export const OnlyTitle = Template.bind({});
+OnlyTitle.args = {
+  ...Default.args,
+  description: '',
+};
+
+export const OnlyDescription = Template.bind({});
+OnlyDescription.args = {
+  ...Default.args,
+  title: '',
 };