@weni/unnnic-system 3.4.0 → 3.4.1-alpha.1

package/src/stories/Toast.stories.js

@@ -0,0 +1,126 @@
+import Toast from '../components/Toast/Toast.vue';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Feedback/Toast',
+  component: Toast,
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    type: {
+      control: 'select',
+      options: ['informational', 'attention', 'success', 'error'],
+    },
+    timeout: {
+      control: 'number',
+    },
+    button: {
+      control: 'object',
+    },
+  },
+  render: (args) => ({
+    components: { Toast },
+    setup() {
+      return { args };
+    },
+    methods: {
+      onClose() {
+        action('@close')('');
+      },
+      onDestroy() {
+        action('@destroy')('');
+      },
+    },
+    template: `
+      <div style="position: relative; height: 50px;">
+        <Toast
+          v-bind="args"
+          @close="onClose"
+          @destroy="onDestroy"
+        />
+      </div>
+    `,
+  }),
+};
+
+export const Informational = {
+  args: {
+    title: 'Information',
+    description: 'This is an informative message for the user.',
+    type: 'informational',
+    timeout: 5000,
+  },
+};
+
+export const Attention = {
+  args: {
+    title: 'Attention',
+    description: 'Please verify the data before continuing.',
+    type: 'attention',
+    timeout: 5000,
+  },
+};
+
+export const Success = {
+  args: {
+    title: 'Success!',
+    description: 'Your action was completed successfully.',
+    type: 'success',
+    timeout: 5000,
+  },
+};
+
+export const Error = {
+  args: {
+    title: 'Error',
+    description: 'An error occurred while processing your request.',
+    type: 'error',
+    timeout: 5000,
+  },
+};
+
+export const WithActionButton = {
+  args: {
+    title: 'New version available',
+    description: 'A new version of the system is available for download.',
+    type: 'informational',
+    timeout: 0,
+    button: {
+      text: 'Update',
+      action: () => {
+        alert('Updating...');
+      },
+    },
+  },
+};
+
+export const Persistent = {
+  args: {
+    title: 'Important message',
+    description: 'This message will remain visible until manually closed.',
+    type: 'attention',
+    timeout: 0,
+  },
+};
+
+export const TitleOnly = {
+  args: {
+    title: 'Simple message',
+    type: 'success',
+    timeout: 5000,
+  },
+};
+
+export const LongText = {
+  args: {
+    title: 'Document processed',
+    description:
+      'The document "Annual_Report_2024_Final_Definitive_Complete_Version.pdf" was processed successfully and is available for download in your workspace.',
+    type: 'success',
+    timeout: 8000,
+  },
+};

package/src/types/scheme-colors.d.ts

@@ -140,6 +140,7 @@ export type SchemeColor =
   | 'feedback-yellow'
   | 'feedback-blue'
   | 'feedback-grey'
+  | 'fg-base'
   | 'aux-blue'
   | 'aux-purple'
   | 'aux-orange'

package/src/utils/call.js

@@ -1,30 +1,58 @@
 import { createApp } from 'vue';
 import Alert from '../components/Alert/Alert.vue';
 import Modal from '../components/Modal/Modal.vue';
+import ToastInstance from '../components/Toast/ToastManager';
 import mitt from 'mitt';
 
 const emitter = mitt();
-
-const callAlert = ({ props, containerRef }) => {
-  const AlertComponent = createApp(Alert, {
-    ...props,
-    onClose: () => {
-      instance.$el.remove();
-    },
-    created() {
-      emitter.on(['close'], () => {
+const callAlert = ({ props, containerRef, seconds }) => {
+  if (props.version === '1.1' || containerRef) {
+    const AlertComponent = createApp(Alert, {
+      ...props,
+      seconds,
+      version: '1.1',
+      onClose: () => {
         instance.$el.remove();
-      });
-    },
-  });
-  const element = document.createElement('div');
-  const instance = AlertComponent.mount(element);
+      },
+      created() {
+        emitter.on(['close'], () => {
+          instance.$el.remove();
+        });
+      },
+    });
+    const element = document.createElement('div');
+    const instance = AlertComponent.mount(element);
 
-  if (containerRef) {
-    instance.$el.style.position = 'absolute';
-    containerRef.appendChild(instance.$el);
+    if (containerRef) {
+      instance.$el.style.position = 'absolute';
+      containerRef.appendChild(instance.$el);
+    } else {
+      document.body.appendChild(instance.$el);
+    }
   } else {
-    document.body.appendChild(instance.$el);
+    const typeMap = {
+      success: 'success',
+      error: 'error',
+      attention: 'attention',
+      default: 'informational',
+      'feedback-green': 'success',
+      'feedback-red': 'error',
+    };
+
+    const toastProps = {
+      timeout: seconds ? seconds * 1000 : 5000,
+      type: typeMap[props.scheme || props.type] || typeMap.default,
+
+      onClose: () => {
+        emitter.emit(['close']);
+      },
+    };
+
+    ToastInstance.show({
+      title: props.text,
+      description: '',
+      ...toastProps,
+    });
   }
 };
 

package/src/components/Alert/AlertBanner.vue

@@ -1,182 +0,0 @@
-<template>
-  <section
-    :class="[
-      'banner-alert',
-      {
-        'banner-alert--banner-danger': type === 'danger',
-        'banner-alert--banner-warning': type === 'warning',
-      },
-    ]"
-  >
-    <header
-      v-show="text"
-      class="banner-alert__container-text"
-    >
-      <UnnnicIcon
-        v-show="isShowTextIcon(type)"
-        class="banner-alert__textIcon"
-        :icon="getIconType(type)"
-        size="sm"
-        scheme="neutral-white"
-        data-test="unnnic-icon"
-      />
-      <p class="text">{{ text }}</p>
-      <a
-        v-if="linkHref"
-        class="banner-alert__link"
-        :href="linkHref"
-        :target="linkTarget"
-      >
-        {{ linkText }}
-      </a>
-    </header>
-
-    <div
-      v-show="showCloseButton"
-      class="banner-alert__close"
-      @click="emitClose"
-    >
-      <UnnnicIcon
-        icon="close"
-        size="sm"
-        scheme="neutral-white"
-        data-test="unnnic-close-icon"
-      />
-    </div>
-  </section>
-</template>
-
-<script>
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  components: {
-    UnnnicIcon,
-  },
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    showCloseButton: {
-      type: Boolean,
-      default: false,
-    },
-    linkHref: {
-      type: String,
-      default: '',
-    },
-    linkTarget: {
-      type: String,
-      default: '_blank',
-    },
-    linkText: {
-      type: String,
-      default: 'Learn more',
-    },
-    type: {
-      type: String,
-      default: 'info',
-    },
-  },
-  methods: {
-    getIconType(type) {
-      if (type === 'danger') return 'block';
-      if (!type.trim()) return 'info'; // check if type is empty or whitespace
-      return type;
-    },
-    isShowTextIcon(type) {
-      return ['danger', 'warning', 'info', ''].includes(type);
-    },
-    emitClose() {
-      this.onClose();
-
-      this.$emit('close');
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.banner-alert {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  text-align: center;
-  margin-bottom: $unnnic-spacing-sm;
-
-  color: $unnnic-color-neutral-white;
-  font-family: $unnnic-font-family-secondary;
-  font-size: $unnnic-font-size-body-gt;
-  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-  font-weight: $unnnic-font-weight-regular;
-  background-color: $unnnic-color-aux-blue-500;
-
-  &__container-text {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
-    flex-grow: 1;
-
-    .text {
-      margin: 0 $unnnic-spacing-nano 0 0;
-    }
-  }
-
-  &__textIcon {
-    margin-right: $unnnic-spacing-xs;
-  }
-
-  &__link {
-    color: inherit;
-    display: block;
-    font-weight: $unnnic-font-weight-bold;
-    text-decoration: underline;
-    text-underline-position: under;
-  }
-
-  &__close {
-    display: flex;
-    align-items: center;
-    max-height: 38px;
-    padding: 0 $unnnic-spacing-sm;
-    cursor: pointer;
-    user-select: none;
-    border-left: $unnnic-border-width-thinner solid $unnnic-color-aux-blue-300;
-    &:hover {
-      background-color: $unnnic-color-aux-blue-300;
-    }
-  }
-
-  &--banner-warning {
-    background-color: $unnnic-color-aux-orange-500;
-
-    .banner-alert__close {
-      border-left: $unnnic-border-width-thinner solid
-        $unnnic-color-aux-orange-300;
-
-      &:hover {
-        background-color: $unnnic-color-aux-orange-300;
-      }
-    }
-  }
-
-  &--banner-danger {
-    background-color: $unnnic-color-aux-red-500;
-
-    .banner-alert__close {
-      border-left: $unnnic-border-width-thinner solid $unnnic-color-aux-red-300;
-
-      &:hover {
-        background-color: $unnnic-color-aux-red-300;
-      }
-    }
-  }
-}
-</style>

package/src/components/Alert/AlertCaller.vue

@@ -1,49 +0,0 @@
-<template>
-  <button @click="callAlert">Launch alert</button>
-</template>
-
-<script>
-import alert from '../../utils/call';
-
-export default {
-  props: {
-    title: {
-      type: String,
-      default: null,
-    },
-    text: {
-      type: String,
-      default: null,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-    enabled: {
-      type: Boolean,
-      default: true,
-    },
-    scheme: {
-      type: String,
-      default: null,
-    },
-    seconds: {
-      type: Number,
-      default: 3,
-    },
-    closeText: {
-      type: String,
-      default: null,
-    },
-    position: {
-      type: String,
-      default: 'top-right',
-    },
-  },
-  methods: {
-    callAlert() {
-      alert.callAlert({ props: this.$props, seconds: this.seconds });
-    },
-  },
-};
-</script>

package/src/components/Alert/__tests__/AlertBanner.spec.js

@@ -1,89 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
-import AlertBanner from '@/components/Alert/AlertBanner.vue';
-
-describe('AlertBanner.vue', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = mount(AlertBanner, {
-      props: {
-        text: 'This is a banner alert',
-        type: 'danger',
-        showCloseButton: true,
-        linkHref: 'https://example.com',
-        linkText: 'Learn more',
-        linkTarget: '_self',
-        onClose: vi.fn(),
-      },
-    });
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  test('renders correctly', () => {
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  test('renders the correct text and link', () => {
-    const textElement = wrapper.find('.text');
-    const linkElement = wrapper.find('.banner-alert__link');
-
-    expect(textElement.text()).toBe('This is a banner alert');
-    expect(linkElement.text()).toBe('Learn more');
-    expect(linkElement.attributes('href')).toBe('https://example.com');
-    expect(linkElement.attributes('target')).toBe('_self');
-  });
-
-  test('applies the correct class based on the type', () => {
-    expect(wrapper.classes()).toContain('banner-alert--banner-danger');
-  });
-
-  test('renders the correct icon based on the type', () => {
-    const icon = wrapper.findComponent('[data-test="unnnic-icon"]');
-    expect(icon.exists()).toBe(true);
-    expect(icon.props('icon')).toBe('block');
-    expect(icon.props('size')).toBe('sm');
-    expect(icon.props('scheme')).toBe('neutral-white');
-  });
-
-  test('does not render the icon when type is not danger, warning, or info', async () => {
-    await wrapper.setProps({ type: 'success' });
-    const icon = wrapper.findComponent('[data-test="unnnic-icon"]');
-    expect(icon.element.style.display).toBe('none');
-  });
-
-  test('calls emitClose and emits close event when close button is clicked', async () => {
-    const closeButton = wrapper.find('.banner-alert__close');
-    await closeButton.trigger('click');
-
-    expect(wrapper.emitted()).toHaveProperty('close');
-    expect(wrapper.props().onClose).toHaveBeenCalled();
-  });
-
-  test('does not render close button if showCloseButton is false', async () => {
-    await wrapper.setProps({ showCloseButton: false });
-    const closeButton = wrapper.find('.banner-alert__close');
-    expect(closeButton.element.style.display).toBe('none');
-  });
-
-  test('matches the snapshot', () => {
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  test('getIconType function returns the correct icon based on type', () => {
-    expect(wrapper.vm.getIconType('danger')).toBe('block');
-    expect(wrapper.vm.getIconType('info')).toBe('info');
-    expect(wrapper.vm.getIconType('')).toBe('info');
-  });
-
-  test('isShowTextIcon function returns true for danger, warning, and info types', () => {
-    expect(wrapper.vm.isShowTextIcon('danger')).toBe(true);
-    expect(wrapper.vm.isShowTextIcon('warning')).toBe(true);
-    expect(wrapper.vm.isShowTextIcon('info')).toBe(true);
-    expect(wrapper.vm.isShowTextIcon('')).toBe(true);
-    expect(wrapper.vm.isShowTextIcon('success')).toBe(false);
-  });
-});

package/src/components/Alert/__tests__/AlertCaller.spec.js

@@ -1,98 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test, vi, beforeEach, afterEach } from 'vitest';
-import AlertCaller from '@/components/Alert/AlertCaller.vue';
-import alert from '@/utils/call';
-
-vi.mock('@/utils/call', () => ({
-  default: {
-    callAlert: vi.fn(),
-  },
-}));
-
-describe('AlertCaller.vue', () => {
-  let wrapper;
-
-  const defaultProps = {
-    title: 'Test Title',
-    text: 'Test Text',
-    icon: 'test-icon',
-    enabled: true,
-    scheme: 'primary',
-    seconds: 5,
-    closeText: 'Close',
-    position: 'top-right',
-  };
-
-  beforeEach(() => {
-    wrapper = mount(AlertCaller, {
-      props: defaultProps,
-    });
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-    vi.clearAllMocks();
-  });
-
-  test('renders correctly', () => {
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('button').text()).toBe('Launch alert');
-  });
-
-  test('calls callAlert method when button is clicked', async () => {
-    const callAlertSpy = vi.spyOn(wrapper.vm, 'callAlert');
-    await wrapper.find('button').trigger('click');
-    expect(callAlertSpy).toHaveBeenCalledTimes(1);
-  });
-
-  test('callAlert method invokes alert.callAlert with correct props', async () => {
-    await wrapper.find('button').trigger('click');
-    expect(alert.callAlert).toHaveBeenCalledWith({
-      props: defaultProps,
-      seconds: defaultProps.seconds,
-    });
-  });
-
-  test.each([
-    ['title', 'New Title'],
-    ['text', 'New Text'],
-    ['icon', 'new-icon'],
-    ['enabled', false],
-    ['scheme', 'secondary'],
-    ['seconds', 10],
-    ['closeText', 'Dismiss'],
-    ['position', 'bottom-left'],
-  ])('updates %s prop correctly', async (propName, newValue) => {
-    await wrapper.setProps({ [propName]: newValue });
-    await wrapper.find('button').trigger('click');
-    const expectedProps = { ...defaultProps, [propName]: newValue };
-    expect(alert.callAlert).toHaveBeenCalledWith({
-      props: expectedProps,
-      seconds: expectedProps.seconds,
-    });
-  });
-
-  test('passes default values when props are not provided', async () => {
-    wrapper = mount(AlertCaller, {
-      props: {},
-    });
-    await wrapper.find('button').trigger('click');
-    expect(alert.callAlert).toHaveBeenCalledWith({
-      props: {
-        title: null,
-        text: null,
-        icon: null,
-        enabled: true,
-        scheme: null,
-        seconds: 3,
-        closeText: null,
-        position: 'top-right',
-      },
-      seconds: 3,
-    });
-  });
-
-  test('matches snapshot', () => {
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-});