@weni/unnnic-system 3.2.8 → 3.2.9-alpha.1

package/src/stories/Toast.mdx

@@ -0,0 +1,123 @@
+import { Meta, Source, Story } from '@storybook/blocks';
+
+import * as ToastStories from './Toast.stories';
+
+<Meta of={ToastStories} />
+
+# Toast
+
+The Toast component is used to display temporary notifications in the user interface. It appears in the bottom right corner of the screen with smooth animation and can be closed automatically or manually.
+
+<Source
+  language="html"
+  dark
+  code={`
+<UnnnicToast
+  title="Success!"
+  description="Your action was completed successfully."
+  type="success"
+  :timeout="5000"
+  @close="onClose"
+  @destroy="onDestroy"
+/>
+  `}
+/>
+
+---
+
+#### **Props Options:**
+
+| Key         | Description                              | Values                                                      | Default         |
+|-------------|------------------------------------------|-------------------------------------------------------------|-----------------|
+| title       | **Required.** Toast title                | `string`                                                    | -               |
+| description | Toast descriptive text                   | `string`                                                    | `''`            |
+| type        | Visual type of the toast                 | `'informational'` \| `'attention'` \| `'success'` \| `'error'` | `'informational'` |
+| timeout     | Time in ms for auto-dismiss (0 = persistent) | `number`                                                | `5000`          |
+| button      | Optional action button configuration     | `{ text: string; action: () => void }`                     | `undefined`     |
+
+#### **Events:**
+
+| Event   | Description                                    |
+|---------|------------------------------------------------|
+| close   | Emitted when the toast is closed              |
+| destroy | Emitted when the toast is removed from DOM    |
+
+---
+
+## Features
+
+- **Animations**: Smooth entry and exit transitions
+- **Visual types**: Different variations for different types of messages
+- **Action button**: Optional, for quick actions
+- **Auto-dismiss**: Configurable or persistent
+
+## Usage
+
+### As component
+
+<Source
+  language="vue"
+  dark
+  code={`
+<template>
+  <UnnnicToast
+    title="Success!"
+    description="Your action was completed successfully."
+    type="success"
+    :timeout="5000"
+    @close="onToastClose"
+  />
+</template>
+
+<script setup>
+import { UnnnicToast } from '@weni/unnnic-system';
+
+const onToastClose = () => {
+  console.log('Toast closed');
+};
+</script>
+  `}
+/>
+
+### Programmatically
+
+The Toast component can be used programmatically through the `toast` utility, which provides a simple API for creating toasts without needing to manage component state.
+
+<Source
+  language="javascript"
+  dark
+  code={`
+// Basic usage
+import { toast } from '@weni/unnnic-system';
+
+toast.info('Information', 'Here is some useful information');
+  `}
+/>
+
+#### API Reference
+
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| `toast.success(title, description?, options?)` | `title: string`<br/>`description?: string`<br/>`options?: ToastOptions` | Creates a success toast |
+| `toast.error(title, description?, options?)` | `title: string`<br/>`description?: string`<br/>`options?: ToastOptions` | Creates an error toast |
+| `toast.attention(title, description?, options?)` | `title: string`<br/>`description?: string`<br/>`options?: ToastOptions` | Creates an attention/warning toast |
+| `toast.info(title, description?, options?)` | `title: string`<br/>`description?: string`<br/>`options?: ToastOptions` | Creates an informational toast |
+
+#### ToastOptions Interface
+
+```typescript
+interface ToastOptions {
+  timeout?: number;           // Auto-dismiss time in ms (0 = persistent)
+  button?: {                  // Optional action button
+    text: string;
+    action: () => void;
+  };
+  onClose?: () => void;      // Callback when toast is closed
+}
+```
+
+## Animations
+
+- **Entry**: Slide from bottom to top with fade-in
+- **Exit**: Slide from top to bottom with fade-out
+- **Duration**: 300ms with smooth easing

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

@@ -1,4 +1,122 @@
 export type SchemeColor =
+  | 'white'
+  | 'black'
+  | 'gray-50'
+  | 'gray-100'
+  | 'gray-200'
+  | 'gray-300'
+  | 'gray-400'
+  | 'gray-500'
+  | 'gray-600'
+  | 'gray-700'
+  | 'gray-800'
+  | 'gray-900'
+  | 'gray-950'
+  | 'teal-50'
+  | 'teal-100'
+  | 'teal-200'
+  | 'teal-300'
+  | 'teal-400'
+  | 'teal-500'
+  | 'teal-600'
+  | 'teal-700'
+  | 'teal-800'
+  | 'teal-900'
+  | 'teal-950'
+  | 'green-50'
+  | 'green-100'
+  | 'green-200'
+  | 'green-300'
+  | 'green-400'
+  | 'green-500'
+  | 'green-600'
+  | 'green-700'
+  | 'green-800'
+  | 'green-900'
+  | 'green-950'
+  | 'blue-50'
+  | 'blue-100'
+  | 'blue-200'
+  | 'blue-300'
+  | 'blue-400'
+  | 'blue-500'
+  | 'blue-600'
+  | 'blue-700'
+  | 'blue-800'
+  | 'blue-900'
+  | 'blue-950'
+  | 'purple-50'
+  | 'purple-100'
+  | 'purple-200'
+  | 'purple-300'
+  | 'purple-400'
+  | 'purple-500'
+  | 'purple-600'
+  | 'purple-700'
+  | 'purple-800'
+  | 'purple-900'
+  | 'purple-950'
+  | 'red-50'
+  | 'red-100'
+  | 'red-200'
+  | 'red-300'
+  | 'red-400'
+  | 'red-500'
+  | 'red-600'
+  | 'red-700'
+  | 'red-800'
+  | 'red-900'
+  | 'red-950'
+  | 'orange-50'
+  | 'orange-100'
+  | 'orange-200'
+  | 'orange-300'
+  | 'orange-400'
+  | 'orange-500'
+  | 'orange-600'
+  | 'orange-700'
+  | 'orange-800'
+  | 'orange-900'
+  | 'orange-950'
+  | 'yellow-50'
+  | 'yellow-100'
+  | 'yellow-200'
+  | 'yellow-300'
+  | 'yellow-400'
+  | 'yellow-500'
+  | 'yellow-600'
+  | 'yellow-700'
+  | 'yellow-800'
+  | 'yellow-900'
+  | 'yellow-950'
+  | 'bg-base'
+  | 'bg-soft'
+  | 'bg-muted'
+  | 'bg-active'
+  | 'bg-info'
+  | 'bg-success'
+  | 'bg-warning'
+  | 'bg-critical'
+  | 'fg-base'
+  | 'fg-muted'
+  | 'fg-emphasized'
+  | 'fg-inverted'
+  | 'fg-active'
+  | 'fg-info'
+  | 'fg-success'
+  | 'fg-warning'
+  | 'fg-critical'
+  | 'border-base'
+  | 'border-soft'
+  | 'border-muted'
+  | 'border-emphasized'
+  | 'border-active'
+  | 'border-info'
+  | 'border-success'
+  | 'border-warning'
+  | 'border-critical'
+
+  // Deprecated
   | 'background-solo'
   | 'background-sky'
   | 'background-grass'
@@ -22,6 +140,7 @@ export type SchemeColor =
   | 'feedback-yellow'
   | 'feedback-blue'
   | 'feedback-grey'
+  | 'fg-base'
   | 'aux-blue'
   | 'aux-purple'
   | 'aux-orange'
@@ -85,17 +204,4 @@ export type SchemeColor =
   | 'brand-weni-soft'
   | 'brand-sec-dark'
   | 'brand-sec-soft'
-  | 'brand-sec'
-  | 'bg-base'
-  | 'bg-soft'
-  | 'teal-50'
-  | 'teal-100'
-  | 'teal-200'
-  | 'teal-300'
-  | 'teal-400'
-  | 'teal-500'
-  | 'teal-600'
-  | 'teal-700'
-  | 'teal-800'
-  | 'teal-900'
-  | 'teal-950';
+  | 'brand-sec';

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>