@weni/unnnic-system 3.8.0 → 3.8.2-alpha.0

package/src/components/Tab/Tab.vue

@@ -9,6 +9,7 @@
           class="tab-head"
           :class="{
             'tab-head--active': localValue === tab,
+            'tab-head--disabled': disabledTabs?.includes(tab),
           }"
           @click="change(tab)"
         >
@@ -20,10 +21,9 @@
             side="bottom"
           >
             <UnnnicIcon
-              icon="info"
+              icon="help"
               :size="size === 'sm' ? 'xs' : 'sm'"
-              filled
-              scheme="neutral-cleanest"
+              scheme="fg-base"
             />
           </UnnnicToolTip>
         </li>
@@ -65,6 +65,13 @@ export default {
     tabs: {
       type: Array,
       default: null,
+      validator: (tabs) => {
+        return tabs.every((tab) => typeof tab === 'string') && tabs.length <= 5;
+      },
+    },
+    disabledTabs: {
+      type: Array,
+      default: null,
     },
   },
   emits: ['change'],
@@ -105,6 +112,10 @@ export default {
       return '';
     },
     change(value) {
+      if (this.disabledTabs?.includes(value)) {
+        return;
+      }
+
       this.localValue = value;
       this.$emit('change', this.localValue);
     },
@@ -119,18 +130,15 @@ export default {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  color: $unnnic-color-neutral-cloudy;
-  font-family: $unnnic-font-family-secondary;
-  font-weight: $unnnic-font-weight-bold;
-  font-size: $unnnic-font-size-body-lg;
-  line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
-  margin-bottom: $unnnic-inset-sm;
-  border-bottom: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+  color: $unnnic-color-fg-base;
+  font: $unnnic-font-action;
+  margin-bottom: $unnnic-space-4;
+  border-bottom: $unnnic-border-width-thinner solid $unnnic-color-border-base;
 }
 
 .tab-content {
   display: flex;
-  gap: $unnnic-spacing-sm;
+  gap: $unnnic-space-6;
 
   margin: 0;
   padding: 0;
@@ -139,27 +147,24 @@ export default {
 
 .tab-head {
   display: flex;
-  gap: $unnnic-spacing-xs;
+  gap: $unnnic-space-2;
   align-items: center;
 
   cursor: pointer;
-  margin: $unnnic-spacing-xs $unnnic-spacing-sm;
+  padding: $unnnic-space-2 $unnnic-space-4;
 
   .unnnic-tooltip {
     display: flex;
   }
 
   &:hover {
-    color: $unnnic-color-neutral-black;
+    color: $unnnic-color-fg-emphasized;
   }
 }
 
 .tab-head--active {
-  font-family: $unnnic-font-family-secondary;
-  font-weight: $unnnic-font-weight-bold;
-  color: $unnnic-color-neutral-black;
-  font-size: $unnnic-font-size-body-lg;
-  line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
+  color: $unnnic-color-fg-emphasized;
+  font: $unnnic-font-action;
   transition: 0.4s;
 
   position: relative;
@@ -168,14 +173,23 @@ export default {
     content: '';
 
     position: absolute;
-    bottom: -$unnnic-spacing-xs;
-    left: -$unnnic-spacing-sm;
+    bottom: 0;
+    left: 0;
 
     display: block;
 
-    width: calc(100% + (#{$unnnic-spacing-sm} * 2));
+    width: 100%;
 
-    border-bottom: $unnnic-border-width-thin solid $unnnic-color-weni-600;
+    border-bottom: $unnnic-border-width-thin solid $unnnic-color-border-active;
+  }
+}
+
+.tab-head--disabled {
+  color: $unnnic-color-fg-muted;
+  cursor: default;
+
+  &:hover {
+    color: $unnnic-color-fg-muted;
   }
 }
 

package/src/components/Tab/__test__/__snapshots__/Tab.spec.js.snap

@@ -4,7 +4,7 @@ exports[`Tab.vue > matches the snapshot 1`] = `
 "<div data-v-b4e39fac="" class="tab size-md">
   <header data-v-b4e39fac="" class="tab-header">
     <ul data-v-b4e39fac="" class="tab-content">
-      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-bf0cf546="" data-v-b4e39fac="" class="unnnic-tooltip"><span data-v-26446d8e="" data-v-b4e39fac="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-cleanest unnnic-icon-size--sm unnnic-icon__size--sm material-symbols-rounded--filled" data-testid="material-icon" translate="no">info</span><span data-v-bf0cf546="" class="unnnic-tooltip-label unnnic-tooltip-label-bottom" data-testid="tooltip-label" style="left: 0px; top: 8px;">Tooltip text <br data-v-bf0cf546=""><!--v-if--></span></div>
+      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-bf0cf546="" data-v-b4e39fac="" class="unnnic-tooltip"><span data-v-26446d8e="" data-v-b4e39fac="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="material-icon" translate="no">help</span><span data-v-bf0cf546="" class="unnnic-tooltip-label unnnic-tooltip-label-bottom" data-testid="tooltip-label" style="left: 0px; top: 8px;">Tooltip text <br data-v-bf0cf546=""><!--v-if--></span></div>
       </li>
       <li data-v-b4e39fac="" class="tab-head tab-head--active">tab2
         <!--v-if-->

package/src/components/TableNext/__test__/__snapshots__/TableNext.spec.js.snap

@@ -42,7 +42,7 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
     <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 1 of 1</p>
     <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
       </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
         <!--v-if-->
@@ -51,7 +51,7 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
         <!--v-if-->
       </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
       </button></div>
   </section>

package/src/components/TableNext/__test__/__snapshots__/TablePagination.spec.js.snap

@@ -5,7 +5,7 @@ exports[`TablePagination.vue > matches the snapshot 1`] = `
   <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 10 of 100</p>
   <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
       <!--v-if-->
@@ -34,7 +34,7 @@ exports[`TablePagination.vue > matches the snapshot 1`] = `
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
     </button></div>
 </section>"

package/src/components/TextArea/TextArea.vue

@@ -4,7 +4,7 @@
     :size="size"
     :disabled="disabled"
     :message="message"
-    :error="errors.join(', ') || type === 'error'"
+    :error="computedError"
   >
     <textarea
       ref="textarea"
@@ -18,13 +18,14 @@
       :disabled="disabled"
       :value="modelValue"
       @input="$emit('update:modelValue', fullySanitize($event.target.value))"
-    ></textarea>
+    />
 
     <template
       v-if="maxLength"
       #rightMessage
-      >{{ modelValue.length }}/{{ maxLength }}</template
     >
+      {{ modelValue.length }}/{{ maxLength }}
+    </template>
   </UnnnicFormElement>
 </template>
 
@@ -43,6 +44,14 @@ export default {
       default: 'md',
     },
 
+    resize: {
+      type: String,
+      default: 'vertical',
+      validator(value) {
+        return ['none', 'vertical'].indexOf(value) !== -1;
+      },
+    },
+
     label: {
       type: String,
     },
@@ -83,6 +92,16 @@ export default {
   },
   emits: ['update:modelValue'],
 
+  computed: {
+    computedError() {
+      if (Array.isArray(this.errors)) {
+        return this.errors.join(', ') || this.type === 'error';
+      }
+
+      return this.errors || this.type === 'error';
+    },
+  },
+
   methods: {
     fullySanitize,
     focus() {
@@ -96,31 +115,35 @@ export default {
 @use '@/assets/scss/unnnic' as *;
 @use '@/components/Input/Input' as *;
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 .unnnic-text-area {
   &__textarea {
     @include input-base;
 
     display: block;
     width: 100%;
-    resize: vertical;
-    box-sizing: border-box;
+
+    resize: v-bind(resize);
 
     scrollbar-width: thin;
 
+    padding: $unnnic-space-3 $unnnic-space-4;
+
     &--size-md {
       @include input-md-font;
 
-      min-height: 6.25 * $unnnic-font-size;
-      padding: ($unnnic-spacing-ant - $unnnic-border-width-thinner)
-        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
+      min-height: 90px;
     }
 
     &--size-sm {
       @include input-sm-font;
 
-      min-height: 5 * $unnnic-font-size;
-      padding: ($unnnic-spacing-xs)
-        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
+      min-height: $unnnic-space-20;
     }
 
     &.unnnic-text-area__textarea--type-error {

package/src/components/TextArea/__test__/__snapshots__/TextArea.spec.js.snap

@@ -2,8 +2,16 @@
 
 exports[`TextArea.vue > matches the snapshot 1`] = `
 "<section data-v-9f8d6c86="" data-v-735b3c51="" class="unnnic-form-element">
-  <p data-v-9f8d6c86="" class="unnnic-form-element__label">Description</p><textarea data-v-735b3c51="" class="unnnic-text-area__textarea unnnic-text-area__textarea--size-md unnnic-text-area__textarea--type-normal" placeholder="Enter text" maxlength="200" value=""></textarea>
-  <!--v-if-->
-  <p data-v-9f8d6c86="" class="unnnic-form-element__message"> <span data-v-9f8d6c86="" class="unnnic-form-element__right-message">0/200</span></p>
+  <section data-v-7f222291="" data-v-9f8d6c86="" class="unnnic-label unnnic-form-element__label">
+    <p data-v-7f222291="" class="unnnic-label__label">Description</p>
+    <!--v-if-->
+  </section><textarea data-v-735b3c51="" class="unnnic-text-area__textarea unnnic-text-area__textarea--size-md unnnic-text-area__textarea--type-normal" placeholder="Enter text" maxlength="200" value=""></textarea>
+  <section data-v-9f8d6c86="" class="unnnic-form-element__hints-container">
+    <section data-v-9f8d6c86="" class="unnnic-form-element__message-container">
+      <!--v-if-->
+      <!--v-if-->
+    </section>
+    <p data-v-9f8d6c86="">0/200</p>
+  </section>
 </section>"
 `;

package/src/components/Toast/Toast.vue

@@ -0,0 +1,246 @@
+<template>
+  <Transition
+    name="toast-slide"
+    appear
+    data-testid="toast-transition"
+    @after-leave="$emit('destroy')"
+  >
+    <aside
+      v-if="isVisible"
+      :class="['unnnic-toast', `unnnic-toast--${type}`]"
+      :role="type === 'error' ? 'alert' : 'status'"
+      :aria-live="type === 'error' ? 'assertive' : 'polite'"
+      data-testid="toast"
+    >
+      <section
+        class="unnnic-toast__content"
+        data-testid="toast-content"
+      >
+        <header
+          class="unnnic-toast__header"
+          data-testid="toast-header"
+        >
+          <UnnnicIcon
+            :icon="typeConfig.icon"
+            :scheme="typeConfig.scheme"
+            size="ant"
+            data-testid="toast-type-icon"
+          />
+
+          <h3
+            class="unnnic-toast__title"
+            data-testid="toast-title"
+          >
+            {{ title }}
+          </h3>
+
+          <UnnnicIcon
+            icon="close"
+            scheme="neutral-dark"
+            size="ant"
+            clickable
+            class="unnnic-toast__close"
+            data-testid="toast-close-icon"
+            @click="handleClose"
+            @keydown.enter="handleClose"
+          />
+        </header>
+
+        <p
+          v-if="description"
+          data-testid="toast-text"
+          class="unnnic-toast__text"
+        >
+          {{ description }}
+        </p>
+      </section>
+
+      <UnnnicButton
+        v-if="button"
+        type="tertiary"
+        :text="button.text"
+        class="unnnic-toast__action-button"
+        data-testid="toast-action-button"
+        @click="handleAction"
+        @keydown.enter="handleAction"
+        @keydown.space.prevent="handleAction"
+      />
+    </aside>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+import UnnnicIcon from '@/components/Icon.vue';
+import UnnnicButton from '@/components/Button/Button.vue';
+
+import type { ToastProps, ToastEmits } from './types';
+import type { SchemeColor } from '@/types/scheme-colors';
+
+defineOptions({
+  name: 'UnnnicToast',
+});
+
+const props = withDefaults(defineProps<ToastProps>(), {
+  title: '',
+  description: '',
+  button: undefined,
+  timeout: 5000,
+  type: 'informational',
+});
+
+const emit = defineEmits<ToastEmits>();
+
+const isVisible = ref(false);
+let timeoutId: number | null = null;
+
+const typeConfig = computed(() => {
+  const configMap = {
+    informational: { icon: 'info', scheme: 'blue-500' },
+    attention: { icon: 'error', scheme: 'yellow-500' },
+    success: { icon: 'check_circle', scheme: 'green-500' },
+    error: { icon: 'cancel', scheme: 'red-500' },
+  };
+
+  return configMap[props.type || 'informational'] as {
+    icon: string;
+    scheme: SchemeColor;
+  };
+});
+
+const handleClose = () => {
+  isVisible.value = false;
+  emit('close');
+};
+
+const handleAction = () => {
+  if (props.button?.action) {
+    props.button.action();
+  }
+};
+
+const startTimeout = () => {
+  if (props.timeout > 0) {
+    timeoutId = window.setTimeout(() => {
+      handleClose();
+    }, props.timeout);
+  }
+};
+
+const clearTimeout = () => {
+  if (timeoutId) {
+    window.clearTimeout(timeoutId);
+    timeoutId = null;
+  }
+};
+
+onMounted(() => {
+  isVisible.value = true;
+  startTimeout();
+});
+
+onUnmounted(() => {
+  clearTimeout();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-toast {
+  position: fixed;
+  bottom: $unnnic-space-4;
+  right: $unnnic-space-4;
+  z-index: 9999;
+
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  gap: $unnnic-space-2;
+
+  min-width: 250px;
+  max-width: 450px;
+  padding: $unnnic-space-4;
+
+  border-radius: $unnnic-radius-2;
+  box-shadow: $unnnic-shadow-2;
+  border: 1px solid $unnnic-color-border-base;
+
+  &--informational {
+    border-color: $unnnic-color-border-info;
+    background-color: $unnnic-color-bg-info;
+  }
+
+  &--attention {
+    border-color: $unnnic-color-border-warning;
+    background-color: $unnnic-color-bg-warning;
+  }
+
+  &--success {
+    border-color: $unnnic-color-border-success;
+    background-color: $unnnic-color-bg-success;
+  }
+
+  &--error {
+    border-color: $unnnic-color-border-critical;
+    background-color: $unnnic-color-bg-critical;
+  }
+
+  &__content,
+  &__header {
+    width: 100%;
+
+    display: flex;
+    gap: $unnnic-space-2;
+  }
+
+  &__content {
+    flex-direction: column;
+    gap: $unnnic-space-2;
+  }
+
+  &__header {
+    align-items: center;
+  }
+
+  &__title {
+    flex: 1;
+
+    margin: 0;
+
+    font: $unnnic-font-action;
+    color: $unnnic-color-fg-emphasized;
+  }
+
+  &__text {
+    margin: 0;
+    margin-left: $unnnic-space-7;
+
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-emphasized;
+  }
+}
+
+// Animations
+.toast-slide-enter-active,
+.toast-slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.toast-slide-enter-from {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.toast-slide-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.toast-slide-enter-to,
+.toast-slide-leave-from {
+  transform: translateY(0);
+  opacity: 1;
+}
+</style>

package/src/components/Toast/ToastManager.ts

@@ -0,0 +1,110 @@
+import { createApp } from 'vue';
+import Toast from './Toast.vue';
+import type {
+  ToastProps,
+  ToastInstance,
+  ToastOptions,
+  ToastCall,
+} from './types';
+
+class ToastManager implements ToastManager {
+  private toasts: Map<string, ToastInstance> = new Map();
+  private container: HTMLElement | null = null;
+  private nextId = 0;
+
+  private createContainer(): HTMLElement {
+    if (this.container) {
+      return this.container;
+    }
+
+    this.container = document.createElement('div');
+    this.container.setAttribute('unnnic-toast-container', 'true');
+
+    document.body.appendChild(this.container);
+    return this.container;
+  }
+
+  private generateId(): string {
+    return `toast-${++this.nextId}`;
+  }
+
+  show(props: ToastProps): ToastInstance {
+    const id = this.generateId();
+    const container = this.createContainer();
+
+    const toastWrapper = document.createElement('div');
+
+    // Create promise that resolves when toast is destroyed
+    let resolvePromise: () => void;
+    const promise = new Promise<void>((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    const app = createApp(Toast, {
+      ...props,
+      onClose: () => {
+        this.close(id);
+      },
+      onDestroy: () => {
+        app.unmount();
+        toastWrapper.remove();
+        resolvePromise(); // Resolve the promise when toast is destroyed
+      },
+    });
+
+    app.mount(toastWrapper);
+    container.appendChild(toastWrapper);
+
+    const toastInstance: ToastInstance = {
+      id,
+      props,
+      close: () => this.close(id),
+      promise,
+    };
+
+    this.toasts.set(id, toastInstance);
+    return toastInstance;
+  }
+
+  close(id: string): void {
+    const toast = this.toasts.get(id);
+    if (toast) {
+      this.toasts.delete(id);
+    }
+  }
+}
+
+const toastManager = new ToastManager();
+
+export const toast: ToastCall = {
+  info: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'informational',
+    }).promise,
+  success: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'success',
+    }).promise,
+  attention: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'attention',
+    }).promise,
+  error: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'error',
+    }).promise,
+};
+
+export default toastManager;