@weni/unnnic-system 3.10.0 → 3.11.0

package/src/components/Toast/Toast.vue

@@ -0,0 +1,246 @@
+<template>
+  <Transition
+    name="toast-slide"
+    appear
+    data-testid="toast-transition"
+    @after-leave="$emit('destroy')"
+  >
+    <aside
+      v-if="isVisible"
+      :class="['unnnic-toast', `unnnic-toast--${type}`]"
+      :role="type === 'error' ? 'alert' : 'status'"
+      :aria-live="type === 'error' ? 'assertive' : 'polite'"
+      data-testid="toast"
+    >
+      <section
+        class="unnnic-toast__content"
+        data-testid="toast-content"
+      >
+        <header
+          class="unnnic-toast__header"
+          data-testid="toast-header"
+        >
+          <UnnnicIcon
+            :icon="typeConfig.icon"
+            :scheme="typeConfig.scheme"
+            size="ant"
+            data-testid="toast-type-icon"
+          />
+
+          <h3
+            class="unnnic-toast__title"
+            data-testid="toast-title"
+          >
+            {{ title }}
+          </h3>
+
+          <UnnnicIcon
+            icon="close"
+            scheme="neutral-dark"
+            size="ant"
+            clickable
+            class="unnnic-toast__close"
+            data-testid="toast-close-icon"
+            @click="handleClose"
+            @keydown.enter="handleClose"
+          />
+        </header>
+
+        <p
+          v-if="description"
+          data-testid="toast-text"
+          class="unnnic-toast__text"
+        >
+          {{ description }}
+        </p>
+      </section>
+
+      <UnnnicButton
+        v-if="button"
+        type="tertiary"
+        :text="button.text"
+        class="unnnic-toast__action-button"
+        data-testid="toast-action-button"
+        @click="handleAction"
+        @keydown.enter="handleAction"
+        @keydown.space.prevent="handleAction"
+      />
+    </aside>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+import UnnnicIcon from '@/components/Icon.vue';
+import UnnnicButton from '@/components/Button/Button.vue';
+
+import type { ToastProps, ToastEmits } from './types';
+import type { SchemeColor } from '@/types/scheme-colors';
+
+defineOptions({
+  name: 'UnnnicToast',
+});
+
+const props = withDefaults(defineProps<ToastProps>(), {
+  title: '',
+  description: '',
+  button: undefined,
+  timeout: 5000,
+  type: 'informational',
+});
+
+const emit = defineEmits<ToastEmits>();
+
+const isVisible = ref(false);
+let timeoutId: number | null = null;
+
+const typeConfig = computed(() => {
+  const configMap = {
+    informational: { icon: 'info', scheme: 'blue-500' },
+    attention: { icon: 'error', scheme: 'yellow-500' },
+    success: { icon: 'check_circle', scheme: 'green-500' },
+    error: { icon: 'cancel', scheme: 'red-500' },
+  };
+
+  return configMap[props.type || 'informational'] as {
+    icon: string;
+    scheme: SchemeColor;
+  };
+});
+
+const handleClose = () => {
+  isVisible.value = false;
+  emit('close');
+};
+
+const handleAction = () => {
+  if (props.button?.action) {
+    props.button.action();
+  }
+};
+
+const startTimeout = () => {
+  if (props.timeout > 0) {
+    timeoutId = window.setTimeout(() => {
+      handleClose();
+    }, props.timeout);
+  }
+};
+
+const stopTimeout = () => {
+  if (timeoutId) {
+    window.clearTimeout(timeoutId);
+    timeoutId = null;
+  }
+};
+
+onMounted(() => {
+  isVisible.value = true;
+  startTimeout();
+});
+
+onUnmounted(() => {
+  stopTimeout();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-toast {
+  position: fixed;
+  bottom: $unnnic-space-4;
+  right: $unnnic-space-4;
+  z-index: 9999;
+
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  gap: $unnnic-space-2;
+
+  min-width: 250px;
+  max-width: 450px;
+  padding: $unnnic-space-4;
+
+  border-radius: $unnnic-radius-2;
+  box-shadow: $unnnic-shadow-2;
+  border: 1px solid $unnnic-color-border-base;
+
+  &--informational {
+    border-color: $unnnic-color-border-info;
+    background-color: $unnnic-color-bg-info;
+  }
+
+  &--attention {
+    border-color: $unnnic-color-border-warning;
+    background-color: $unnnic-color-bg-warning;
+  }
+
+  &--success {
+    border-color: $unnnic-color-border-success;
+    background-color: $unnnic-color-bg-success;
+  }
+
+  &--error {
+    border-color: $unnnic-color-border-critical;
+    background-color: $unnnic-color-bg-critical;
+  }
+
+  &__content,
+  &__header {
+    width: 100%;
+
+    display: flex;
+  }
+
+  &__content {
+    flex-direction: column;
+    gap: $unnnic-space-1;
+  }
+
+  &__header {
+    align-items: center;
+    gap: $unnnic-space-2;
+  }
+
+  &__title {
+    flex: 1;
+
+    margin: 0;
+
+    font: $unnnic-font-action;
+    color: $unnnic-color-fg-emphasized;
+  }
+
+  &__text {
+    margin: 0;
+    margin-left: $unnnic-space-7;
+
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-emphasized;
+  }
+}
+
+// Animations
+.toast-slide-enter-active,
+.toast-slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.toast-slide-enter-from {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.toast-slide-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.toast-slide-enter-to,
+.toast-slide-leave-from {
+  transform: translateY(0);
+  opacity: 1;
+}
+</style>

package/src/components/Toast/ToastManager.ts

@@ -0,0 +1,110 @@
+import { createApp } from 'vue';
+import Toast from './Toast.vue';
+import type {
+  ToastProps,
+  ToastInstance,
+  ToastOptions,
+  ToastCall,
+} from './types';
+
+class ToastManager implements ToastManager {
+  private toasts: Map<string, ToastInstance> = new Map();
+  private container: HTMLElement | null = null;
+  private nextId = 0;
+
+  private createContainer(): HTMLElement {
+    if (this.container) {
+      return this.container;
+    }
+
+    this.container = document.createElement('div');
+    this.container.setAttribute('unnnic-toast-container', 'true');
+
+    document.body.appendChild(this.container);
+    return this.container;
+  }
+
+  private generateId(): string {
+    return `toast-${++this.nextId}`;
+  }
+
+  show(props: ToastProps): ToastInstance {
+    const id = this.generateId();
+    const container = this.createContainer();
+
+    const toastWrapper = document.createElement('div');
+
+    // Create promise that resolves when toast is destroyed
+    let resolvePromise: () => void;
+    const promise = new Promise<void>((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    const app = createApp(Toast, {
+      ...props,
+      onClose: () => {
+        this.close(id);
+      },
+      onDestroy: () => {
+        app.unmount();
+        toastWrapper.remove();
+        resolvePromise(); // Resolve the promise when toast is destroyed
+      },
+    });
+
+    app.mount(toastWrapper);
+    container.appendChild(toastWrapper);
+
+    const toastInstance: ToastInstance = {
+      id,
+      props,
+      close: () => this.close(id),
+      promise,
+    };
+
+    this.toasts.set(id, toastInstance);
+    return toastInstance;
+  }
+
+  close(id: string): void {
+    const toast = this.toasts.get(id);
+    if (toast) {
+      this.toasts.delete(id);
+    }
+  }
+}
+
+const toastManager = new ToastManager();
+
+export const toast: ToastCall = {
+  info: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'informational',
+    }).promise,
+  success: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'success',
+    }).promise,
+  attention: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'attention',
+    }).promise,
+  error: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'error',
+    }).promise,
+};
+
+export default toastManager;

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

@@ -0,0 +1,291 @@
+import { shallowMount } from '@vue/test-utils';
+import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
+import Toast from '../Toast.vue';
+
+describe('UnnnicToast', () => {
+  let wrapper;
+  let mockAction;
+
+  beforeEach(() => {
+    mockAction = vi.fn();
+    vi.useFakeTimers();
+
+    wrapper = shallowMount(Toast, {
+      props: {
+        title: 'Test Toast',
+      },
+      global: {
+        stubs: {
+          Transition: {
+            template: '<div data-testid="toast-transition"><slot /></div>',
+          },
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+    }
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  const transition = () =>
+    wrapper.findComponent('[data-testid="toast-transition"]');
+  const toast = () => wrapper.find('[data-testid="toast"]');
+  const content = () => wrapper.find('[data-testid="toast-content"]');
+  const header = () => wrapper.find('[data-testid="toast-header"]');
+  const title = () => wrapper.find('[data-testid="toast-title"]');
+  const text = () => wrapper.find('[data-testid="toast-text"]');
+  const actionButton = () =>
+    wrapper.findComponent('[data-testid="toast-action-button"]');
+  const closeIcon = () =>
+    wrapper.findComponent('[data-testid="toast-close-icon"]');
+  const typeIcon = () =>
+    wrapper.findComponent('[data-testid="toast-type-icon"]');
+
+  describe('Rendering', () => {
+    test('renders correctly with required props', () => {
+      expect(transition().exists()).toBe(true);
+      expect(header().exists()).toBe(true);
+
+      expect(typeIcon().exists()).toBe(true);
+      expect(typeIcon().props('icon')).toBe('info');
+      expect(typeIcon().props('scheme')).toBe('blue-500');
+      expect(typeIcon().props('size')).toBe('ant');
+
+      expect(title().exists()).toBe(true);
+      expect(title().text()).toBe('Test Toast');
+
+      expect(text().exists()).toBe(false);
+
+      expect(toast().exists()).toBe(true);
+      expect(content().exists()).toBe(true);
+      expect(actionButton().exists()).toBe(false);
+
+      expect(closeIcon().exists()).toBe(true);
+      expect(closeIcon().props('icon')).toBe('close');
+      expect(closeIcon().props('scheme')).toBe('neutral-dark');
+      expect(closeIcon().props('size')).toBe('ant');
+      expect(closeIcon().props('clickable')).toBe(true);
+    });
+
+    test('renders description when provided', async () => {
+      await wrapper.setProps({ description: 'Test description' });
+
+      expect(text().exists()).toBe(true);
+      expect(text().text()).toBe('Test description');
+    });
+
+    test('applies correct CSS class based on type', async () => {
+      const types = ['informational', 'attention', 'success', 'error'];
+
+      for (const type of types) {
+        await wrapper.setProps({ type });
+
+        expect(toast().classes()).toContain(`unnnic-toast--${type}`);
+      }
+    });
+
+    test('sets correct ARIA attributes for different types', async () => {
+      // Error type
+      await wrapper.setProps({ type: 'error' });
+      expect(toast().attributes('role')).toBe('alert');
+      expect(toast().attributes('aria-live')).toBe('assertive');
+
+      // Other types
+      await wrapper.setProps({ type: 'informational' });
+      expect(toast().attributes('role')).toBe('status');
+      expect(toast().attributes('aria-live')).toBe('polite');
+    });
+  });
+
+  describe('Icon Configuration', () => {
+    test('displays correct icon for each type', async () => {
+      const typeConfigs = [
+        { type: 'informational', expectedIcon: 'info' },
+        { type: 'attention', expectedIcon: 'error' },
+        { type: 'success', expectedIcon: 'check_circle' },
+        { type: 'error', expectedIcon: 'cancel' },
+      ];
+
+      for (const { type, expectedIcon } of typeConfigs) {
+        await wrapper.setProps({ type });
+        const icon = typeIcon();
+        expect(icon.props('icon')).toBe(expectedIcon);
+      }
+    });
+
+    test('displays correct scheme color for each type', async () => {
+      const typeConfigs = [
+        { type: 'informational', expectedScheme: 'blue-500' },
+        { type: 'attention', expectedScheme: 'yellow-500' },
+        { type: 'success', expectedScheme: 'green-500' },
+        { type: 'error', expectedScheme: 'red-500' },
+      ];
+
+      for (const { type, expectedScheme } of typeConfigs) {
+        await wrapper.setProps({ type });
+        const icon = typeIcon();
+        expect(icon.props('scheme')).toBe(expectedScheme);
+      }
+    });
+  });
+
+  describe('Close Functionality', () => {
+    test('emits close event when close button is clicked', async () => {
+      const closeButton = closeIcon();
+      await closeButton.trigger('click');
+
+      expect(wrapper.emitted('close')).toBeTruthy();
+      expect(wrapper.emitted('close')).toHaveLength(1);
+
+      expect(wrapper.vm.isVisible).toBe(false);
+    });
+
+    test('emits close event when close button is activated with Enter key', async () => {
+      const closeButton = closeIcon();
+      await closeButton.trigger('keydown.enter');
+
+      expect(wrapper.emitted('close')).toBeTruthy();
+      expect(wrapper.emitted('close')).toHaveLength(1);
+
+      expect(wrapper.vm.isVisible).toBe(false);
+    });
+
+    test('hides toast when close is triggered', async () => {
+      expect(toast().exists()).toBe(true);
+
+      await wrapper.vm.handleClose();
+      await wrapper.vm.$nextTick();
+
+      expect(toast().exists()).toBe(false);
+    });
+  });
+
+  describe('Action Button', () => {
+    test('renders action button when provided', async () => {
+      await wrapper.setProps({
+        button: {
+          text: 'Action',
+          action: mockAction,
+        },
+      });
+
+      expect(actionButton().exists()).toBe(true);
+      expect(actionButton().props('text')).toBe('Action');
+    });
+
+    test('does not render action button when not provided', async () => {
+      expect(actionButton().exists()).toBe(false);
+    });
+
+    test('calls action function when action button is clicked', async () => {
+      await wrapper.setProps({
+        button: {
+          text: 'Action',
+          action: mockAction,
+        },
+      });
+
+      await actionButton().trigger('click');
+
+      expect(mockAction).toHaveBeenCalledTimes(1);
+    });
+
+    test('calls action function when action button is activated with Enter key', async () => {
+      await wrapper.setProps({
+        button: {
+          text: 'Action',
+          action: mockAction,
+        },
+      });
+
+      await actionButton().trigger('keydown.enter');
+
+      expect(mockAction).toHaveBeenCalledTimes(1);
+    });
+
+    test('does not throw error when action button has no action function', async () => {
+      await wrapper.setProps({
+        button: {
+          text: 'Action',
+          action: undefined,
+        },
+      });
+
+      expect(async () => {
+        await actionButton().trigger('click');
+      }).not.toThrow();
+    });
+  });
+
+  describe('Timeout Functionality', () => {
+    const createTimeoutWrapper = (timeout = 1000) => {
+      return shallowMount(Toast, {
+        props: { title: 'Test Toast', timeout },
+      });
+    };
+
+    test('auto-closes after timeout period', async () => {
+      wrapper = createTimeoutWrapper();
+      vi.advanceTimersByTime(1000);
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted('close')).toBeTruthy();
+    });
+
+    test('does not auto-close when timeout is 0', async () => {
+      wrapper = createTimeoutWrapper(0);
+      vi.advanceTimersByTime(5000);
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted('close')).toBeFalsy();
+    });
+
+    test('does not auto-close when timeout is negative', async () => {
+      wrapper = createTimeoutWrapper(-1);
+      vi.advanceTimersByTime(5000);
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted('close')).toBeFalsy();
+    });
+
+    test('clears timeout when component is unmounted', () => {
+      vi.useRealTimers();
+      const clearTimeoutSpy = vi.spyOn(window, 'clearTimeout');
+
+      const localWrapper = shallowMount(Toast, {
+        props: { title: 'Test Toast', timeout: 1000 },
+      });
+
+      localWrapper.unmount();
+      expect(clearTimeoutSpy).toHaveBeenCalled();
+
+      clearTimeoutSpy.mockRestore();
+      vi.useFakeTimers();
+    });
+  });
+
+  describe('Transitions', () => {
+    test('emits destroy event after leave transition', async () => {
+      await wrapper.vm.handleClose();
+      await wrapper.vm.$nextTick();
+
+      await transition().vm.$emit('after-leave');
+
+      expect(wrapper.emitted('destroy')).toBeTruthy();
+    });
+  });
+
+  describe('Default Props', () => {
+    test('uses correct default values', () => {
+      expect(wrapper.props('description')).toBe('');
+      expect(wrapper.props('button')).toBeUndefined();
+      expect(wrapper.props('timeout')).toBe(5000);
+      expect(wrapper.props('type')).toBe('informational');
+    });
+  });
+});