@weni/unnnic-system 3.9.1 → 3.9.3-alpha.0

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/dist/components/Tag/BrandTag.vue.d.ts

@@ -1,51 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    clickable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {
-    closeClicked(): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    clickable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    text: string;
-    clickable: boolean;
-    disabled: boolean;
-}, {}, {
-    UnnnicIcon: import('vue').DefineComponent<import('../Icon.vue').IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        click: (event: Event) => any;
-        mousedown: (event: Event) => any;
-        mouseup: (event: Event) => any;
-    }, string, import('vue').PublicProps, Readonly<import('../Icon.vue').IconProps> & Readonly<{
-        onClick?: ((event: Event) => any) | undefined;
-        onMousedown?: ((event: Event) => any) | undefined;
-        onMouseup?: ((event: Event) => any) | undefined;
-    }>, {
-        filled: boolean;
-        icon: string | null;
-        clickable: boolean;
-        size: import('../Icon.vue').IconSize;
-        scheme: import('../Icon.vue').SchemeColor;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
-//# sourceMappingURL=BrandTag.vue.d.ts.map

package/dist/components/Tag/BrandTag.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BrandTag.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/BrandTag.vue"],"names":[],"mappings":"AAiBA;"}

package/dist/components/Tag/IndicatorTag.vue.d.ts

@@ -1,151 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    tooltipText: {
-        type: StringConstructor;
-        default: null;
-    };
-    count: {
-        type: NumberConstructor;
-        default: number;
-    };
-    clickable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    hasBackButton: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    enableTooltip: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    tooltipText: {
-        type: StringConstructor;
-        default: null;
-    };
-    count: {
-        type: NumberConstructor;
-        default: number;
-    };
-    clickable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    hasBackButton: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    enableTooltip: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    text: string;
-    clickable: boolean;
-    tooltipText: string;
-    count: number;
-    hasBackButton: boolean;
-    enableTooltip: boolean;
-}, {}, {
-    UnnnicIcon: import('vue').DefineComponent<import('../Icon.vue').IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        click: (event: Event) => any;
-        mousedown: (event: Event) => any;
-        mouseup: (event: Event) => any;
-    }, string, import('vue').PublicProps, Readonly<import('../Icon.vue').IconProps> & Readonly<{
-        onClick?: ((event: Event) => any) | undefined;
-        onMousedown?: ((event: Event) => any) | undefined;
-        onMouseup?: ((event: Event) => any) | undefined;
-    }>, {
-        filled: boolean;
-        icon: string | null;
-        clickable: boolean;
-        size: import('../Icon.vue').IconSize;
-        scheme: import('../Icon.vue').SchemeColor;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-    ToolTip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        text: {
-            type: StringConstructor;
-            default: string;
-        };
-        enabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        forceOpen: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        side: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        maxWidth: {
-            type: StringConstructor;
-            default: string;
-        };
-        shortcutText: {
-            type: StringConstructor;
-            default: null;
-        };
-        enableHtml: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>, {}, {
-        topPos: null;
-        leftPos: null;
-    }, {}, {
-        handleResize(): void;
-        getRightPost(element: any): void;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        text: {
-            type: StringConstructor;
-            default: string;
-        };
-        enabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        forceOpen: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        side: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        maxWidth: {
-            type: StringConstructor;
-            default: string;
-        };
-        shortcutText: {
-            type: StringConstructor;
-            default: null;
-        };
-        enableHtml: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, {
-        text: string;
-        forceOpen: boolean;
-        enabled: boolean;
-        side: string;
-        maxWidth: string;
-        shortcutText: string;
-        enableHtml: boolean;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
-//# sourceMappingURL=IndicatorTag.vue.d.ts.map

package/dist/components/Tag/IndicatorTag.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IndicatorTag.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/IndicatorTag.vue"],"names":[],"mappings":"AAsBA;"}

package/dist/components/Tag/TagNext.vue.d.ts

@@ -1,24 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    scheme: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    scheme: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    text: string;
-    scheme: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
-//# sourceMappingURL=TagNext.vue.d.ts.map

package/dist/components/Tag/TagNext.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TagNext.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/TagNext.vue"],"names":[],"mappings":"AAOA;"}

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>