@weni/unnnic-system 3.2.9-alpha.7 → 3.2.9

package/dist/utils/call.d.ts

@@ -3,10 +3,9 @@ declare namespace _default {
     export { callModal };
 }
 export default _default;
-export function callAlert({ props, containerRef, seconds }: {
+export function callAlert({ props, containerRef }: {
     props: any;
     containerRef: any;
-    seconds: any;
 }): void;
 export function callModal({ props }: {
     props: any;

package/dist/utils/call.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"call.d.ts","sourceRoot":"","sources":["../../src/utils/call.js"],"names":[],"mappings":";;;;;AAOA;;;;SAiDC;AAED;;SAeC"}
+{"version":3,"file":"call.d.ts","sourceRoot":"","sources":["../../src/utils/call.js"],"names":[],"mappings":";;;;;AAOA;;;SAqBC;AAED;;SAeC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.9-alpha.7",
-  "type": "module",
+  "version": "3.2.9",
+  "type": "commonjs",
   "files": [
     "dist",
     "src",
@@ -84,7 +84,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@weni/eslint-config": "^2.0.0",
-    "eslint": "^9.33.0",
+    "eslint": "^9.37.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "10.4.0",
     "jsdom": "^24.1.1",

package/src/assets/scss/scheme-colors.scss

@@ -4,136 +4,6 @@
 // Global scheme colors mapping for all components
 
 $unnnic-scheme-colors:
-  'white' $unnnic-color-white,
-
-  'black' $unnnic-color-black,
-
-  'gray-50' $unnnic-color-gray-50,
-  'gray-100' $unnnic-color-gray-100,
-  'gray-200' $unnnic-color-gray-200,
-  'gray-300' $unnnic-color-gray-300,
-  'gray-400' $unnnic-color-gray-400,
-  'gray-500' $unnnic-color-gray-500,
-  'gray-600' $unnnic-color-gray-600,
-  'gray-700' $unnnic-color-gray-700,
-  'gray-800' $unnnic-color-gray-800,
-  'gray-900' $unnnic-color-gray-900,
-  'gray-950' $unnnic-color-gray-950,
-
-  'teal-50' $unnnic-color-teal-50,
-  'teal-100' $unnnic-color-teal-100,
-  'teal-200' $unnnic-color-teal-200,
-  'teal-300' $unnnic-color-teal-300,
-  'teal-400' $unnnic-color-teal-400,
-  'teal-500' $unnnic-color-teal-500,
-  'teal-600' $unnnic-color-teal-600,
-  'teal-700' $unnnic-color-teal-700,
-  'teal-800' $unnnic-color-teal-800,
-  'teal-900' $unnnic-color-teal-900,
-  'teal-950' $unnnic-color-teal-950,
-
-  'green-50' $unnnic-color-green-50,
-  'green-100' $unnnic-color-green-100,
-  'green-200' $unnnic-color-green-200,
-  'green-300' $unnnic-color-green-300,
-  'green-400' $unnnic-color-green-400,
-  'green-500' $unnnic-color-green-500,
-  'green-600' $unnnic-color-green-600,
-  'green-700' $unnnic-color-green-700,
-  'green-800' $unnnic-color-green-800,
-  'green-900' $unnnic-color-green-900,
-  'green-950' $unnnic-color-green-950,
-
-  'blue-50' $unnnic-color-blue-50,
-  'blue-100' $unnnic-color-blue-100,
-  'blue-200' $unnnic-color-blue-200,
-  'blue-300' $unnnic-color-blue-300,
-  'blue-400' $unnnic-color-blue-400,
-  'blue-500' $unnnic-color-blue-500,
-  'blue-600' $unnnic-color-blue-600,
-  'blue-700' $unnnic-color-blue-700,
-  'blue-800' $unnnic-color-blue-800,
-  'blue-900' $unnnic-color-blue-900,
-  'blue-950' $unnnic-color-blue-950,
-
-  'purple-50' $unnnic-color-purple-50,
-  'purple-100' $unnnic-color-purple-100,
-  'purple-200' $unnnic-color-purple-200,
-  'purple-300' $unnnic-color-purple-300,
-  'purple-400' $unnnic-color-purple-400,
-  'purple-500' $unnnic-color-purple-500,
-  'purple-600' $unnnic-color-purple-600,
-  'purple-700' $unnnic-color-purple-700,
-  'purple-800' $unnnic-color-purple-800,
-  'purple-900' $unnnic-color-purple-900,
-  'purple-950' $unnnic-color-purple-950,
-
-  'red-50' $unnnic-color-red-50,
-  'red-100' $unnnic-color-red-100,
-  'red-200' $unnnic-color-red-200,
-  'red-300' $unnnic-color-red-300,
-  'red-400' $unnnic-color-red-400,
-  'red-500' $unnnic-color-red-500,
-  'red-600' $unnnic-color-red-600,
-  'red-700' $unnnic-color-red-700,
-  'red-800' $unnnic-color-red-800,
-  'red-900' $unnnic-color-red-900,
-  'red-950' $unnnic-color-red-950,
-
-  'orange-50' $unnnic-color-orange-50,
-  'orange-100' $unnnic-color-orange-100,
-  'orange-200' $unnnic-color-orange-200,
-  'orange-300' $unnnic-color-orange-300,
-  'orange-400' $unnnic-color-orange-400,
-  'orange-500' $unnnic-color-orange-500,
-  'orange-600' $unnnic-color-orange-600,
-  'orange-700' $unnnic-color-orange-700,
-  'orange-800' $unnnic-color-orange-800,
-  'orange-900' $unnnic-color-orange-900,
-  'orange-950' $unnnic-color-orange-950,
-
-  'yellow-50' $unnnic-color-yellow-50,
-  'yellow-100' $unnnic-color-yellow-100,
-  'yellow-200' $unnnic-color-yellow-200,
-  'yellow-300' $unnnic-color-yellow-300,
-  'yellow-400' $unnnic-color-yellow-400,
-  'yellow-500' $unnnic-color-yellow-500,
-  'yellow-600' $unnnic-color-yellow-600,
-  'yellow-700' $unnnic-color-yellow-700,
-  'yellow-800' $unnnic-color-yellow-800,
-  'yellow-900' $unnnic-color-yellow-900,
-  'yellow-950' $unnnic-color-yellow-950,
-
-  'bg-base' $unnnic-color-bg-base,
-  'bg-soft' $unnnic-color-bg-soft,
-  'bg-muted' $unnnic-color-bg-muted,
-  'bg-active' $unnnic-color-bg-active,
-  'bg-info' $unnnic-color-bg-info,
-  'bg-success' $unnnic-color-bg-success,
-  'bg-warning' $unnnic-color-bg-warning,
-  'bg-critical' $unnnic-color-bg-critical,
-
-  'fg-base' $unnnic-color-fg-base,
-  'fg-muted' $unnnic-color-fg-muted,
-  'fg-emphasized' $unnnic-color-fg-emphasized,
-  'fg-inverted' $unnnic-color-fg-inverted,
-  'fg-active' $unnnic-color-fg-active,
-  'fg-info' $unnnic-color-fg-info,
-  'fg-success' $unnnic-color-fg-success,
-  'fg-warning' $unnnic-color-fg-warning,
-  'fg-critical' $unnnic-color-fg-critical,
-
-  'border-base' $unnnic-color-border-base,
-  'border-soft' $unnnic-color-border-soft,
-  'border-muted' $unnnic-color-border-muted,
-  'border-emphasized' $unnnic-color-border-emphasized,
-  'border-active' $unnnic-color-border-active,
-  'border-info' $unnnic-color-border-info,
-  'border-success' $unnnic-color-border-success,
-  'border-warning' $unnnic-color-border-warning,
-  'border-critical' $unnnic-color-border-critical,
-
-  // Deprecated
   'background-solo' $unnnic-color-teal-50,
   'background-sky' $unnnic-color-gray-50,
   'background-grass' $unnnic-color-green-50,
@@ -227,7 +97,10 @@ $unnnic-scheme-colors:
   'brand-sec-dark' $unnnic-color-blue-800,
   'brand-sec-soft' $unnnic-color-blue-100,
   'brand-sec' $unnnic-color-blue-600,
-
+  
+  'bg-base' $unnnic-color-bg-base,
+  'bg-soft' $unnnic-color-bg-soft,
+  
   'teal-50' $unnnic-color-teal-50,
   'teal-100' $unnnic-color-teal-100,
   'teal-200' $unnnic-color-teal-200,

package/src/assets/tokens/colors.json

@@ -300,10 +300,10 @@
         "value": "{color.teal.600}"
       },
       "info": {
-        "value": "{color.blue.50}"
+        "value": "{color.blue.100}"
       },
       "success": {
-        "value": "{color.green.50}"
+        "value": "{color.green.100}"
       },
       "warning": {
         "value": "{color.yellow.50}"

package/src/components/Alert/Alert.vue

@@ -1,25 +1,55 @@
 <template>
-  <Version1dot1
-    v-if="version === '1.1'"
-    v-bind="{ ...$props }"
-  />
+  <div
+    v-if="version === '1.0'"
+    :class="['unnnic-alert', `unnnic-alert-position--${position}`]"
+  >
+    <UnnnicIcon
+      :icon="icon"
+      :scheme="scheme"
+      size="sm"
+      data-test="unnnic-icon"
+    />
+    <div class="unnnic-alert__content">
+      <div class="unnnic-alert__title">
+        {{ title.toUpperCase() }}
+      </div>
+      <div class="unnnic-alert__text">
+        {{ text }}
+      </div>
+    </div>
+    <div
+      v-if="closeText"
+      class="unnnic-alert__close-text unnnic--clickable"
+      @click="onClose()"
+    >
+      {{ closeText.toUpperCase() }}
+    </div>
+    <UnnnicIcon
+      v-else
+      clickable
+      icon="close-1"
+      scheme="brand-sec"
+      size="xs"
+      data-test="unnnic-icon-close"
+      @click="onClose"
+    />
+  </div>
 
-  <UnnnicToast
+  <component
+    :is="'version' + version.replace(/\./g, 'dot')"
     v-else
-    :title="text || ''"
-    :type="toastType"
-    @close="() => onClose()"
-  />
+    v-bind="{ ...$props }"
+  ></component>
 </template>
 
-<script lang="ts">
+<script>
+import UnnnicIcon from '../Icon.vue';
 import Version1dot1 from './Version1dot1.vue';
-import UnnnicToast from '../Toast/Toast.vue';
 
 export default {
   name: 'UnnnicAlert',
   components: {
-    UnnnicToast,
+    UnnnicIcon,
     Version1dot1,
   },
   props: {
@@ -27,6 +57,11 @@ export default {
       type: String,
       default: '1.1',
     },
+
+    title: {
+      type: String,
+      default: null,
+    },
     text: {
       type: String,
       default: null,
@@ -35,28 +70,102 @@ export default {
       type: String,
       default: null,
     },
+    icon: {
+      type: String,
+      default: null,
+    },
     onClose: {
       type: Function,
       default: () => {},
     },
-    type: {
+    closeText: {
       type: String,
       default: '',
     },
-  },
-  computed: {
-    toastType() {
-      if (this.scheme === 'feedback-green' || this.type === 'success') {
-        return 'success';
-      }
-      if (this.scheme === 'feedback-red' || this.type === 'error') {
-        return 'error';
-      }
-      if (this.type === 'attention') {
-        return 'attention';
-      }
-      return 'informational';
+    position: {
+      type: String,
+      default: 'top-right',
+    },
+    linkHref: {
+      type: String,
+      default: '',
+    },
+    linkTarget: {
+      type: String,
+      default: '',
+    },
+    linkText: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: '',
     },
   },
 };
 </script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-alert {
+  position: fixed;
+  padding: $unnnic-inset-xs;
+  min-width: 12.5 * $unnnic-font-size;
+
+  display: inline-flex;
+  align-items: center;
+
+  font-family: $unnnic-font-family-secondary;
+  border-radius: $unnnic-border-radius-sm;
+
+  background-color: $unnnic-color-background-snow;
+  box-shadow: $unnnic-shadow-level-near;
+
+  z-index: 9999;
+
+  &-position {
+    &--top-right {
+      top: 1 * $unnnic-font-size;
+      right: 1 * $unnnic-font-size;
+    }
+    &--top-left {
+      top: 1 * $unnnic-font-size;
+      left: 1 * $unnnic-font-size;
+    }
+    &--bottom-right {
+      bottom: 1 * $unnnic-font-size;
+      right: 1 * $unnnic-font-size;
+    }
+    &--bottom-left {
+      bottom: 1 * $unnnic-font-size;
+      left: 1 * $unnnic-font-size;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    margin: 0 $unnnic-inline-xs;
+  }
+
+  &__title {
+    font-size: $unnnic-font-size-body-sm;
+    font-weight: $unnnic-font-weight-bold;
+    color: $unnnic-color-neutral-darkest;
+  }
+
+  &__text {
+    font-size: $unnnic-font-size-body-md;
+    font-weight: $unnnic-font-weight-regular;
+    color: $unnnic-color-neutral-dark;
+  }
+
+  &__close {
+    &-text {
+      color: $unnnic-color-brand-sec;
+      font-size: $unnnic-font-size-body-md;
+    }
+  }
+}
+</style>

package/src/components/Alert/AlertBanner.vue

@@ -0,0 +1,182 @@
+<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

@@ -0,0 +1,49 @@
+<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/Version1dot1.vue

@@ -27,6 +27,15 @@
         {{ text }}
       </div>
 
+      <a
+        v-if="linkHref"
+        class="alert__link"
+        :href="linkHref"
+        :target="linkTarget"
+      >
+        {{ linkText }}
+      </a>
+
       <div
         class="alert__close"
         @click="emitClose"
@@ -49,6 +58,10 @@ export default {
     UnnnicIcon,
   },
   props: {
+    version: {
+      type: String,
+      default: '1.0',
+    },
     text: {
       type: String,
       default: null,
@@ -61,6 +74,18 @@ export default {
       type: Function,
       default: () => {},
     },
+    linkHref: {
+      type: String,
+      default: '',
+    },
+    linkTarget: {
+      type: String,
+      default: '_blank',
+    },
+    linkText: {
+      type: String,
+      default: 'Learn more',
+    },
     type: {
       type: String,
       default: 'default',
@@ -182,6 +207,7 @@ export default {
     padding: $unnnic-spacing-xs $unnnic-spacing-sm;
   }
 
+  &__link,
   &__close {
     border-left: $unnnic-border-width-thinner solid $unnnic-color-neutral-cloudy;
 
@@ -190,6 +216,14 @@ export default {
     }
   }
 
+  &__link {
+    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
+    text-decoration: none;
+    color: inherit;
+    display: block;
+    font-weight: $unnnic-font-weight-bold;
+  }
+
   &__close {
     padding: $unnnic-spacing-xs $unnnic-spacing-sm;
     cursor: pointer;
@@ -203,6 +237,7 @@ export default {
       background-color: $unnnic-color-aux-green-700;
     }
 
+    .alert__link,
     .alert__close {
       border-left: $unnnic-border-width-thinner solid
         $unnnic-color-aux-green-300;
@@ -220,6 +255,7 @@ export default {
       background-color: $unnnic-color-aux-red-700;
     }
 
+    .alert__link,
     .alert__close {
       border-left: $unnnic-border-width-thinner solid $unnnic-color-aux-red-300;