@weni/unnnic-system 3.4.0 → 3.4.1-alpha.0

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>

package/src/components/Button/Button.vue

@@ -6,20 +6,16 @@
     :class="[
       'unnnic-button',
       `unnnic-button--size-${size}`,
-      `unnnic-button--${type}`,
+      `unnnic-button--${buttonType}`,
       iconCenter ? `unnnic-button--icon-on-center` : null,
       float ? `unnnic-button--float` : null,
     ]"
   >
-    <UnnnicIcon
+    <UnnnicIconLoading
       v-if="loading"
-      icon="loading-circle-1"
       :scheme="iconScheme"
       :size="iconSize"
-      :filled="iconsFilled"
       :style="{ position: 'absolute' }"
-      class="rotation"
-      :next="next"
       data-testid="icon-loading"
     />
 
@@ -72,6 +68,7 @@
 <script setup lang="ts">
 import { computed, watch, useSlots } from 'vue';
 import UnnnicIcon from '../Icon.vue';
+import UnnnicIconLoading from '../IconLoading/IconLoading.vue';
 import type { ButtonProps, ButtonSize, ButtonType } from './types';
 import type { SchemeColor } from '@/types/scheme-colors';
 
@@ -102,8 +99,8 @@ const buttonDisabled = computed(() => {
 });
 
 const iconSize = computed(() => {
-  if (props.size === 'small') return 'sm';
-  return 'md';
+  if (props.size === 'extra-large') return 'lg';
+  return 'ant';
 });
 
 const hasText = computed(() => {
@@ -120,12 +117,11 @@ const iconScheme = computed((): SchemeColor => {
     primary: 'neutral-white',
     secondary: 'neutral-dark',
     tertiary: 'neutral-dark',
-    alternative: 'neutral-white',
     warning: 'neutral-white',
     attention: 'neutral-white',
   };
 
-  return typeToSchemeMap[props.type] || 'neutral-white';
+  return typeToSchemeMap[buttonType.value] || 'neutral-white';
 });
 
 const isSizePropValid = computed(() => {
@@ -136,16 +132,23 @@ const isSizePropValid = computed(() => {
   );
 });
 
+const buttonType = computed(() => {
+  return (
+    {
+      alternative: 'tertiary',
+    }[props.type] || props.type
+  );
+});
+
 const isTypePropValid = computed(() => {
   const validTypes: ButtonType[] = [
     'primary',
     'secondary',
     'tertiary',
-    'alternative',
     'warning',
     'attention',
   ];
-  return validTypes.includes(props.type);
+  return validTypes.includes(buttonType.value);
 });
 
 const validateProps = () => {
@@ -159,6 +162,8 @@ const validateProps = () => {
 
     if (!isTypePropValid.value) {
       errorMessage += ' Invalid type prop.';
+      errorMessage +=
+        ' Please provide one of the following types: primary, secondary, tertiary, warning, attention. Alternative is discontinued and it was forced renamed to tertiary.';
     }
 
     throw new Error(errorMessage);
@@ -196,13 +201,12 @@ watch(
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: $unnnic-border-radius-sm;
+  border-radius: $unnnic-radius-2;
   border: 0;
   outline: none;
   overflow: hidden;
   white-space: nowrap;
-  font-weight: $unnnic-font-weight-regular;
-  font-family: $unnnic-font-family-secondary;
+  font: $unnnic-font-action;
   cursor: pointer;
   position: relative;
 
@@ -216,129 +220,91 @@ watch(
     }
   }
 
+  &--primary,
+  &--warning,
+  &--attention {
+    color: $unnnic-color-fg-inverted;
+  }
+
+  &--secondary,
+  &--tertiary {
+    color: $unnnic-color-fg-emphasized;
+  }
+
   &--primary {
-    background-color: $unnnic-color-weni-600;
-    color: $unnnic-color-neutral-white;
+    background-color: $unnnic-color-bg-active;
 
     &:hover:enabled {
-      background-color: $unnnic-color-weni-700;
+      background-color: $unnnic-color-teal-700;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-weni-800;
+      background-color: $unnnic-color-teal-800;
     }
   }
 
   &--secondary {
-    background-color: $unnnic-color-neutral-white;
-    color: $unnnic-color-neutral-dark;
+    background-color: $unnnic-color-bg-base;
     box-shadow: inset 0 0 0 $unnnic-border-width-thinner
-      $unnnic-color-neutral-cleanest;
+      $unnnic-color-border-base;
 
     &:hover:enabled {
-      background-color: $unnnic-color-neutral-light;
-    }
-
-    &:disabled {
-      box-shadow: none;
+      background-color: $unnnic-color-gray-50;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-neutral-soft;
-    }
-  }
-
-  &--tertiary {
-    background-color: transparent;
-    color: $unnnic-color-neutral-dark;
-
-    &:hover:enabled {
-      background-color: $unnnic-color-neutral-light;
+      background-color: $unnnic-color-gray-100;
     }
 
     &:disabled {
-      color: $unnnic-color-neutral-clean;
-      cursor: not-allowed;
-    }
-
-    &:active:enabled {
-      background-color: $unnnic-color-neutral-soft;
+      box-shadow: none;
     }
   }
 
-  &--alternative {
-    background-color: $unnnic-color-weni-50;
-    color: $unnnic-color-weni-800;
-
-    :deep(svg .primary) {
-      fill: $unnnic-color-weni-800;
-    }
-
-    :deep(svg .primary-stroke) {
-      stroke: $unnnic-color-weni-800;
-    }
+  &--tertiary {
+    background-color: transparent;
 
     &:hover:enabled {
-      background-color: $unnnic-color-weni-100;
-    }
-
-    &:disabled {
-      :deep(svg .primary) {
-        fill: $unnnic-color-neutral-clean;
-      }
-
-      :deep(svg .primary-stroke) {
-        stroke: $unnnic-color-neutral-clean;
-      }
+      background-color: rgba($unnnic-color-gray-400, 0.1);
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-weni-200;
-      color: $unnnic-color-weni-900;
-
-      :deep(svg .primary) {
-        fill: $unnnic-color-weni-900;
-      }
-
-      :deep(svg .primary-stroke) {
-        stroke: $unnnic-color-weni-900;
-      }
+      background-color: rgba($unnnic-color-gray-400, 0.2);
     }
   }
 
   &--warning {
-    background-color: $unnnic-color-aux-red-500;
+    background-color: $unnnic-color-red-500;
     color: $unnnic-color-neutral-white;
 
     &:hover:enabled {
-      background-color: $unnnic-color-aux-red-700;
+      background-color: $unnnic-color-red-600;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-aux-red-900;
+      background-color: $unnnic-color-red-700;
     }
   }
 
   &--attention {
-    background-color: $unnnic-color-aux-yellow-500;
-    color: $unnnic-color-neutral-white;
+    background-color: $unnnic-color-yellow-500;
 
     &:hover:enabled {
-      background-color: $unnnic-color-aux-yellow-700;
+      background-color: $unnnic-color-yellow-600;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-aux-yellow-900;
+      background-color: $unnnic-color-yellow-700;
     }
   }
 
   &--primary:disabled,
   &--secondary:disabled,
-  &--alternative:disabled,
+  &--tertiary:disabled,
   &--warning:disabled,
   &--attention:disabled {
-    background-color: $unnnic-color-neutral-soft;
-    color: $unnnic-color-neutral-clean;
+    background-color: $unnnic-color-bg-muted;
+    color: $unnnic-color-fg-muted;
     cursor: not-allowed;
   }
 
@@ -351,26 +317,12 @@ watch(
     box-shadow: $unnnic-shadow-level-near;
   }
 
-  &--size {
-    &-extra-large,
-    &-large,
-    &-small {
-      padding: $unnnic-squish-xs;
-      font-size: $unnnic-font-size-body-gt;
-      line-height: ($unnnic-font-size-body-gt + $unnnic-line-height-medium);
-    }
-
-    &-extra-large {
-      height: 58px;
-    }
-
-    &-large {
-      height: 46px;
-    }
+  &--size-large {
+    padding: $unnnic-space-3 $unnnic-space-4;
+  }
 
-    &-small {
-      height: 38px;
-    }
+  &--size-small {
+    padding: $unnnic-space-2 $unnnic-space-4;
   }
 }
 </style>
@@ -388,8 +340,8 @@ watch(
     }
 
     &-large {
-      height: 46px;
-      width: 46px;
+      height: 45px;
+      width: 45px;
     }
 
     &-large,
@@ -404,8 +356,8 @@ watch(
 
     &-small {
       padding: $unnnic-inset-nano;
-      height: 38px;
-      width: 38px;
+      height: 37px;
+      width: 37px;
 
       .unnnic-icon {
         width: $unnnic-icon-size-ant;

package/src/components/Button/types.ts

@@ -4,7 +4,6 @@ export type ButtonType =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'alternative'
   | 'warning'
   | 'attention';