@weni/unnnic-system 3.3.0 → 3.3.1-alpha.3

package/dist/utils/call.d.ts

@@ -3,9 +3,10 @@ declare namespace _default {
     export { callModal };
 }
 export default _default;
-export function callAlert({ props, containerRef }: {
+export function callAlert({ props, containerRef, seconds }: {
     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;;;SAqBC;AAED;;SAeC"}
+{"version":3,"file":"call.d.ts","sourceRoot":"","sources":["../../src/utils/call.js"],"names":[],"mappings":";;;;;AAOA;;;;SAiDC;AAED;;SAeC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.3.0",
+  "version": "3.3.1-alpha.3",
   "type": "commonjs",
   "files": [
     "dist",
@@ -101,4 +101,4 @@
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^3.0.5"
   }
-}
+}

package/src/assets/icons/radio-checked.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="4.5" cy="4.5" r="4" fill="white"/>
+</svg>

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

@@ -3,115 +3,118 @@
 
 // Global scheme colors mapping for all components
 
-$unnnic-scheme-colors:
-  'background-solo' $unnnic-color-teal-50,
-  'background-sky' $unnnic-color-gray-50,
-  'background-grass' $unnnic-color-green-50,
-  'background-carpet' $unnnic-color-gray-50,
-  'background-snow' $unnnic-color-white,
-  'background-lightest' $unnnic-color-gray-50,
-  'background-white' $unnnic-color-white,
-  
-  'neutral-black' $unnnic-color-gray-900,
-  'neutral-darkest' $unnnic-color-gray-800,
-  'neutral-dark' $unnnic-color-gray-700,
-  'neutral-cloudy' $unnnic-color-gray-500,
-  'neutral-cleanest' $unnnic-color-gray-200,
-  'neutral-clean' $unnnic-color-gray-300,
-  'neutral-soft' $unnnic-color-gray-100,
-  'neutral-lightest' $unnnic-color-gray-50,
-  'neutral-light' $unnnic-color-gray-50,
-  'neutral-white' $unnnic-color-white,
-  'neutral-snow' $unnnic-color-white,
-  
-  'feedback-red' $unnnic-color-red-500,
-  'feedback-green' $unnnic-color-green-500,
-  'feedback-yellow' $unnnic-color-yellow-500,
-  'feedback-blue' $unnnic-color-blue-500,
-  'feedback-grey' $unnnic-color-gray-500,
-  
-  'aux-blue' $unnnic-color-blue-500,
-  'aux-purple' $unnnic-color-purple-500,
-  'aux-orange' $unnnic-color-orange-500,
-  'aux-lemon' $unnnic-color-yellow-400,
-  'aux-pink' $unnnic-color-red-300,
-  'aux-baby-blue' $unnnic-color-blue-200,
-  'aux-baby-yellow' $unnnic-color-yellow-200,
-  'aux-baby-red' $unnnic-color-red-200,
-  'aux-baby-green' $unnnic-color-green-200,
-  'aux-baby-pink' $unnnic-color-red-100,
-  
-  'aux-green-100' $unnnic-color-green-100,
-  'aux-green-300' $unnnic-color-green-300,
-  'aux-green-500' $unnnic-color-green-500,
-  'aux-green-700' $unnnic-color-green-700,
-  'aux-green-900' $unnnic-color-green-900,
-  'aux-blue-100' $unnnic-color-blue-100,
-  'aux-blue-300' $unnnic-color-blue-300,
-  'aux-blue-500' $unnnic-color-blue-500,
-  'aux-blue-700' $unnnic-color-blue-700,
-  'aux-blue-900' $unnnic-color-blue-900,
-  'aux-purple-100' $unnnic-color-purple-100,
-  'aux-purple-300' $unnnic-color-purple-300,
-  'aux-purple-500' $unnnic-color-purple-500,
-  'aux-purple-700' $unnnic-color-purple-700,
-  'aux-purple-900' $unnnic-color-purple-900,
-  'aux-red-100' $unnnic-color-red-100,
-  'aux-red-300' $unnnic-color-red-300,
-  'aux-red-500' $unnnic-color-red-500,
-  'aux-red-700' $unnnic-color-red-700,
-  'aux-red-900' $unnnic-color-red-900,
-  'aux-orange-100' $unnnic-color-orange-100,
-  'aux-orange-300' $unnnic-color-orange-300,
-  'aux-orange-500' $unnnic-color-orange-500,
-  'aux-orange-700' $unnnic-color-orange-700,
-  'aux-orange-900' $unnnic-color-orange-900,
-  'aux-yellow-100' $unnnic-color-yellow-100,
-  'aux-yellow-300' $unnnic-color-yellow-300,
-  'aux-yellow-500' $unnnic-color-yellow-500,
-  'aux-yellow-700' $unnnic-color-yellow-700,
-  'aux-yellow-900' $unnnic-color-yellow-900,
-  
-  'floweditor-blue' $unnnic-color-blue-600,
-  'floweditor-purple' $unnnic-color-purple-600,
-  'floweditor-wine' $unnnic-color-red-800,
-  'floweditor-orange' $unnnic-color-orange-600,
-  'floweditor-pink' $unnnic-color-red-400,
-  'floweditor-turquoise' $unnnic-color-teal-500,
-  'floweditor-green' $unnnic-color-green-600,
-  
-  'weni-50' $unnnic-color-teal-50,
-  'weni-100' $unnnic-color-teal-100,
-  'weni-200' $unnnic-color-teal-200,
-  'weni-300' $unnnic-color-teal-300,
-  'weni-400' $unnnic-color-teal-400,
-  'weni-500' $unnnic-color-teal-500,
-  'weni-600' $unnnic-color-teal-600,
-  'weni-700' $unnnic-color-teal-700,
-  'weni-800' $unnnic-color-teal-800,
-  'weni-900' $unnnic-color-teal-900,
-  'weni-950' $unnnic-color-teal-950,
-  'brand-weni' $unnnic-color-teal-600,
-  'brand-weni-dark' $unnnic-color-teal-800,
-  'brand-weni-soft' $unnnic-color-teal-100,
-  '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,
-  '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;
+$unnnic-scheme-colors: 'background-solo'$unnnic-color-teal-50,
+  'background-sky'$unnnic-color-gray-50,
+  'background-grass'$unnnic-color-green-50,
+  'background-carpet'$unnnic-color-gray-50,
+  'background-snow'$unnnic-color-white,
+  'background-lightest'$unnnic-color-gray-50,
+  'background-white'$unnnic-color-white,
+
+  'neutral-black'$unnnic-color-gray-900,
+  'neutral-darkest'$unnnic-color-gray-800,
+  'neutral-dark'$unnnic-color-gray-700,
+  'neutral-cloudy'$unnnic-color-gray-500,
+  'neutral-cleanest'$unnnic-color-gray-200,
+  'neutral-clean'$unnnic-color-gray-300,
+  'neutral-soft'$unnnic-color-gray-100,
+  'neutral-lightest'$unnnic-color-gray-50,
+  'neutral-light'$unnnic-color-gray-50,
+  'neutral-white'$unnnic-color-white,
+  'neutral-snow'$unnnic-color-white,
+
+  'feedback-red'$unnnic-color-red-500,
+  'feedback-green'$unnnic-color-green-500,
+  'feedback-yellow'$unnnic-color-yellow-500,
+  'feedback-blue'$unnnic-color-blue-500,
+  'feedback-grey'$unnnic-color-gray-500,
+
+  'aux-blue'$unnnic-color-blue-500,
+  'aux-purple'$unnnic-color-purple-500,
+  'aux-orange'$unnnic-color-orange-500,
+  'aux-lemon'$unnnic-color-yellow-400,
+  'aux-pink'$unnnic-color-red-300,
+  'aux-baby-blue'$unnnic-color-blue-200,
+  'aux-baby-yellow'$unnnic-color-yellow-200,
+  'aux-baby-red'$unnnic-color-red-200,
+  'aux-baby-green'$unnnic-color-green-200,
+  'aux-baby-pink'$unnnic-color-red-100,
+
+  'aux-green-100'$unnnic-color-green-100,
+  'aux-green-300'$unnnic-color-green-300,
+  'aux-green-500'$unnnic-color-green-500,
+  'aux-green-700'$unnnic-color-green-700,
+  'aux-green-900'$unnnic-color-green-900,
+  'aux-blue-100'$unnnic-color-blue-100,
+  'aux-blue-300'$unnnic-color-blue-300,
+  'aux-blue-500'$unnnic-color-blue-500,
+  'aux-blue-700'$unnnic-color-blue-700,
+  'aux-blue-900'$unnnic-color-blue-900,
+  'aux-purple-100'$unnnic-color-purple-100,
+  'aux-purple-300'$unnnic-color-purple-300,
+  'aux-purple-500'$unnnic-color-purple-500,
+  'aux-purple-700'$unnnic-color-purple-700,
+  'aux-purple-900'$unnnic-color-purple-900,
+  'aux-red-100'$unnnic-color-red-100,
+  'aux-red-300'$unnnic-color-red-300,
+  'aux-red-500'$unnnic-color-red-500,
+  'aux-red-700'$unnnic-color-red-700,
+  'aux-red-900'$unnnic-color-red-900,
+  'aux-orange-100'$unnnic-color-orange-100,
+  'aux-orange-300'$unnnic-color-orange-300,
+  'aux-orange-500'$unnnic-color-orange-500,
+  'aux-orange-700'$unnnic-color-orange-700,
+  'aux-orange-900'$unnnic-color-orange-900,
+  'aux-yellow-100'$unnnic-color-yellow-100,
+  'aux-yellow-300'$unnnic-color-yellow-300,
+  'aux-yellow-500'$unnnic-color-yellow-500,
+  'aux-yellow-700'$unnnic-color-yellow-700,
+  'aux-yellow-900'$unnnic-color-yellow-900,
+
+  "fg-critical"$unnnic-color-fg-critical,
+  "fg-muted"$unnnic-color-fg-muted,
+  "fg-base"$unnnic-color-fg-base,
+
+  'floweditor-blue'$unnnic-color-blue-600,
+  'floweditor-purple'$unnnic-color-purple-600,
+  'floweditor-wine'$unnnic-color-red-800,
+  'floweditor-orange'$unnnic-color-orange-600,
+  'floweditor-pink'$unnnic-color-red-400,
+  'floweditor-turquoise'$unnnic-color-teal-500,
+  'floweditor-green'$unnnic-color-green-600,
+
+  'weni-50'$unnnic-color-teal-50,
+  'weni-100'$unnnic-color-teal-100,
+  'weni-200'$unnnic-color-teal-200,
+  'weni-300'$unnnic-color-teal-300,
+  'weni-400'$unnnic-color-teal-400,
+  'weni-500'$unnnic-color-teal-500,
+  'weni-600'$unnnic-color-teal-600,
+  'weni-700'$unnnic-color-teal-700,
+  'weni-800'$unnnic-color-teal-800,
+  'weni-900'$unnnic-color-teal-900,
+  'weni-950'$unnnic-color-teal-950,
+  'brand-weni'$unnnic-color-teal-600,
+  'brand-weni-dark'$unnnic-color-teal-800,
+  'brand-weni-soft'$unnnic-color-teal-100,
+  '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,
+  '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;
 
 @mixin generate-scheme-classes($component-name, $property: 'background-color') {
   @each $name, $color in $unnnic-scheme-colors {
@@ -123,10 +126,11 @@ $unnnic-scheme-colors:
 
 @function get-scheme-color($name) {
   @each $scheme-name, $color in $unnnic-scheme-colors {
-    @if $scheme-name == $name {
+    @if $scheme-name ==$name {
       @return $color;
     }
   }
+
   @warn "Scheme color '#{$name}' not found in $unnnic-scheme-colors";
   @return null;
-}
+}

package/src/assets/tokens/colors.json

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

package/src/components/Alert/Alert.vue

@@ -1,55 +1,25 @@
 <template>
-  <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>
+  <Version1dot1
+    v-if="version === '1.1'"
+    v-bind="{ ...$props }"
+  />
 
-  <component
-    :is="'version' + version.replace(/\./g, 'dot')"
+  <UnnnicToast
     v-else
-    v-bind="{ ...$props }"
-  ></component>
+    :title="text || ''"
+    :type="toastType"
+    @close="() => onClose()"
+  />
 </template>
 
-<script>
-import UnnnicIcon from '../Icon.vue';
+<script lang="ts">
 import Version1dot1 from './Version1dot1.vue';
+import UnnnicToast from '../Toast/Toast.vue';
 
 export default {
   name: 'UnnnicAlert',
   components: {
-    UnnnicIcon,
+    UnnnicToast,
     Version1dot1,
   },
   props: {
@@ -57,11 +27,6 @@ export default {
       type: String,
       default: '1.1',
     },
-
-    title: {
-      type: String,
-      default: null,
-    },
     text: {
       type: String,
       default: null,
@@ -70,102 +35,28 @@ export default {
       type: String,
       default: null,
     },
-    icon: {
-      type: String,
-      default: null,
-    },
     onClose: {
       type: Function,
       default: () => {},
     },
-    closeText: {
-      type: String,
-      default: '',
-    },
-    position: {
-      type: String,
-      default: 'top-right',
-    },
-    linkHref: {
-      type: String,
-      default: '',
-    },
-    linkTarget: {
-      type: String,
-      default: '',
-    },
-    linkText: {
-      type: String,
-      default: '',
-    },
     type: {
       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';
+    },
+  },
 };
 </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/Version1dot1.vue

@@ -27,15 +27,6 @@
         {{ text }}
       </div>
 
-      <a
-        v-if="linkHref"
-        class="alert__link"
-        :href="linkHref"
-        :target="linkTarget"
-      >
-        {{ linkText }}
-      </a>
-
       <div
         class="alert__close"
         @click="emitClose"
@@ -58,10 +49,6 @@ export default {
     UnnnicIcon,
   },
   props: {
-    version: {
-      type: String,
-      default: '1.0',
-    },
     text: {
       type: String,
       default: null,
@@ -74,18 +61,6 @@ 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',
@@ -207,7 +182,6 @@ export default {
     padding: $unnnic-spacing-xs $unnnic-spacing-sm;
   }
 
-  &__link,
   &__close {
     border-left: $unnnic-border-width-thinner solid $unnnic-color-neutral-cloudy;
 
@@ -216,14 +190,6 @@ 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;
@@ -237,7 +203,6 @@ 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;
@@ -255,7 +220,6 @@ 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;
 

package/src/components/Alert/__tests__/__snapshots__/Alert.spec.js.snap

@@ -1,11 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UnnnicAlert.vue > matches the snapshot 1`] = `
-"<div data-v-284427ba="" class="unnnic-alert unnnic-alert-position--top-right"><span data-v-26446d8e="" data-v-284427ba="" class="material-symbols-rounded unnnic-icon-scheme--primary unnnic-icon-size--sm" data-testid="material-icon" translate="no" data-test="unnnic-icon">alert-icon</span>
-  <div data-v-284427ba="" class="unnnic-alert__content">
-    <div data-v-284427ba="" class="unnnic-alert__title">TEST ALERT</div>
-    <div data-v-284427ba="" class="unnnic-alert__text">This is an alert message</div>
-  </div>
-  <div data-v-284427ba="" class="unnnic-alert__close-text unnnic--clickable">CLOSE</div>
-</div>"
+"<transition-stub data-v-c3231c18="" name="toast-slide" appear="true" persisted="false" css="true" icon="alert-icon" position="top-right" closetext="Close">
+  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--informational" role="status" aria-live="polite" data-testid="unnnic-toast">
+    <section data-v-c3231c18="" class="unnnic-toast__content">
+      <header data-v-c3231c18="" class="unnnic-toast__header"><span data-v-26446d8e="" data-v-c3231c18="" class="material-symbols-rounded unnnic-icon-scheme--blue-500 unnnic-icon-size--ant" data-testid="toast-type-icon" translate="no">info</span>
+        <h3 data-v-c3231c18="" class="unnnic-toast__title">Test Alert</h3><span data-v-26446d8e="" data-v-c3231c18="" class="material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic--clickable unnnic-toast__close" data-testid="toast-close-button" translate="no">close</span>
+      </header>
+      <!--v-if-->
+    </section>
+    <!--v-if-->
+  </aside>
+</transition-stub>"
 `;

package/src/components/Alert/__tests__/__snapshots__/Version1dot1.spec.js.snap

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Alert.vue > matches snapshot 1`] = `
-"<div data-v-fb94f284="" class="alert-container">
+"<div data-v-fb94f284="" class="alert-container" version="1.0" linkhref="https://example.com" linktarget="_blank" linktext="Learn more">
   <div data-v-fb94f284="" class="alert alert--scheme-aux-green">
     <div data-v-fb94f284="" class="alert__progress"></div>
-    <div data-v-fb94f284="" class="alert__text">Test Alert</div><a data-v-fb94f284="" class="alert__link" href="https://example.com" target="_blank">Learn more</a>
+    <div data-v-fb94f284="" class="alert__text">Test Alert</div>
     <div data-v-fb94f284="" class="alert__close">
       <unnnic-icon-stub data-v-fb94f284="" filled="false" next="false" icon="close-1" clickable="false" size="sm" scheme="neutral-white"></unnnic-icon-stub>
     </div>