@weni/unnnic-system 3.2.5-alpha.1 → 3.2.6

package/package.json

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

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

@@ -0,0 +1,132 @@
+@use './colors' as *;
+@use './deprecated/colors' as *;
+
+// 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;
+
+@mixin generate-scheme-classes($component-name, $property: 'background-color') {
+  @each $name, $color in $unnnic-scheme-colors {
+    .#{$component-name}--#{$name} {
+      #{$property}: $color;
+    }
+  }
+}
+
+@function get-scheme-color($name) {
+  @each $scheme-name, $color in $unnnic-scheme-colors {
+    @if $scheme-name == $name {
+      @return $color;
+    }
+  }
+  @warn "Scheme color '#{$name}' not found in $unnnic-scheme-colors";
+  @return null;
+}

package/src/assets/scss/unnnic.scss

@@ -8,6 +8,7 @@
 @forward './spaces';
 @forward './icon-sizes';
 @forward './colors';
+@forward './scheme-colors';
 
 @use './deprecated/colors' as *;
 @use './deprecated/fonts' as *;
@@ -19,6 +20,7 @@
 @use './spaces' as *;
 @use './icon-sizes' as *;
 @use './colors' as *;
+@use './scheme-colors' as *;
 
 .unnnic {
     &--clickable {

package/src/components/Button/Button.vue

@@ -6,16 +6,20 @@
     :class="[
       'unnnic-button',
       `unnnic-button--size-${size}`,
-      `unnnic-button--${buttonType}`,
+      `unnnic-button--${type}`,
       iconCenter ? `unnnic-button--icon-on-center` : null,
       float ? `unnnic-button--float` : null,
     ]"
   >
-    <UnnnicIconLoading
+    <UnnnicIcon
       v-if="loading"
+      icon="loading-circle-1"
       :scheme="iconScheme"
       :size="iconSize"
+      :filled="iconsFilled"
       :style="{ position: 'absolute' }"
+      class="rotation"
+      :next="next"
       data-testid="icon-loading"
     />
 
@@ -68,9 +72,8 @@
 <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 '../Icon/types';
+import type { SchemeColor } from '@/types/scheme-colors';
 
 defineOptions({
   name: 'UnnnicButton',
@@ -99,8 +102,8 @@ const buttonDisabled = computed(() => {
 });
 
 const iconSize = computed(() => {
-  if (props.size === 'extra-large') return 'lg';
-  return 'ant';
+  if (props.size === 'small') return 'sm';
+  return 'md';
 });
 
 const hasText = computed(() => {
@@ -117,11 +120,12 @@ const iconScheme = computed((): SchemeColor => {
     primary: 'neutral-white',
     secondary: 'neutral-dark',
     tertiary: 'neutral-dark',
+    alternative: 'neutral-white',
     warning: 'neutral-white',
     attention: 'neutral-white',
   };
 
-  return typeToSchemeMap[buttonType.value] || 'neutral-white';
+  return typeToSchemeMap[props.type] || 'neutral-white';
 });
 
 const isSizePropValid = computed(() => {
@@ -132,21 +136,16 @@ 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(buttonType.value);
+  return validTypes.includes(props.type);
 });
 
 const validateProps = () => {
@@ -160,7 +159,6 @@ 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);
@@ -198,12 +196,13 @@ watch(
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: $unnnic-radius-2;
+  border-radius: $unnnic-border-radius-sm;
   border: 0;
   outline: none;
   overflow: hidden;
   white-space: nowrap;
-  font: $unnnic-font-action;
+  font-weight: $unnnic-font-weight-regular;
+  font-family: $unnnic-font-family-secondary;
   cursor: pointer;
   position: relative;
 
@@ -217,91 +216,129 @@ watch(
     }
   }
 
-  &--primary,
-  &--warning,
-  &--attention {
-    color: $unnnic-color-fg-inverted;
-  }
-
-  &--secondary,
-  &--tertiary {
-    color: $unnnic-color-fg-emphasized;
-  }
-
   &--primary {
-    background-color: $unnnic-color-bg-active;
+    background-color: $unnnic-color-weni-600;
+    color: $unnnic-color-neutral-white;
 
     &:hover:enabled {
-      background-color: $unnnic-color-teal-700;
+      background-color: $unnnic-color-weni-700;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-teal-800;
+      background-color: $unnnic-color-weni-800;
     }
   }
 
   &--secondary {
-    background-color: $unnnic-color-bg-base;
+    background-color: $unnnic-color-neutral-white;
+    color: $unnnic-color-neutral-dark;
     box-shadow: inset 0 0 0 $unnnic-border-width-thinner
-      $unnnic-color-border-base;
+      $unnnic-color-neutral-cleanest;
 
     &:hover:enabled {
-      background-color: $unnnic-color-gray-50;
-    }
-
-    &:active:enabled {
-      background-color: $unnnic-color-gray-100;
+      background-color: $unnnic-color-neutral-light;
     }
 
     &:disabled {
       box-shadow: none;
     }
+
+    &:active:enabled {
+      background-color: $unnnic-color-neutral-soft;
+    }
   }
 
   &--tertiary {
     background-color: transparent;
+    color: $unnnic-color-neutral-dark;
 
     &:hover:enabled {
-      background-color: rgba($unnnic-color-gray-400, 0.1);
+      background-color: $unnnic-color-neutral-light;
+    }
+
+    &:disabled {
+      color: $unnnic-color-neutral-clean;
+      cursor: not-allowed;
     }
 
     &:active:enabled {
-      background-color: rgba($unnnic-color-gray-400, 0.2);
+      background-color: $unnnic-color-neutral-soft;
+    }
+  }
+
+  &--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;
+    }
+
+    &: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;
+      }
+    }
+
+    &: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;
+      }
     }
   }
 
   &--warning {
-    background-color: $unnnic-color-red-500;
+    background-color: $unnnic-color-aux-red-500;
     color: $unnnic-color-neutral-white;
 
     &:hover:enabled {
-      background-color: $unnnic-color-red-600;
+      background-color: $unnnic-color-aux-red-700;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-red-700;
+      background-color: $unnnic-color-aux-red-900;
     }
   }
 
   &--attention {
-    background-color: $unnnic-color-yellow-500;
+    background-color: $unnnic-color-aux-yellow-500;
+    color: $unnnic-color-neutral-white;
 
     &:hover:enabled {
-      background-color: $unnnic-color-yellow-600;
+      background-color: $unnnic-color-aux-yellow-700;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-yellow-700;
+      background-color: $unnnic-color-aux-yellow-900;
     }
   }
 
   &--primary:disabled,
   &--secondary:disabled,
-  &--tertiary:disabled,
+  &--alternative:disabled,
   &--warning:disabled,
   &--attention:disabled {
-    background-color: $unnnic-color-bg-muted;
-    color: $unnnic-color-fg-muted;
+    background-color: $unnnic-color-neutral-soft;
+    color: $unnnic-color-neutral-clean;
     cursor: not-allowed;
   }
 
@@ -314,12 +351,26 @@ watch(
     box-shadow: $unnnic-shadow-level-near;
   }
 
-  &--size-large {
-    padding: $unnnic-space-3 $unnnic-space-4;
-  }
+  &--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;
+    }
 
-  &--size-small {
-    padding: $unnnic-space-2 $unnnic-space-4;
+    &-large {
+      height: 46px;
+    }
+
+    &-small {
+      height: 38px;
+    }
   }
 }
 </style>
@@ -337,8 +388,8 @@ watch(
     }
 
     &-large {
-      height: 45px;
-      width: 45px;
+      height: 46px;
+      width: 46px;
     }
 
     &-large,
@@ -353,8 +404,8 @@ watch(
 
     &-small {
       padding: $unnnic-inset-nano;
-      height: 37px;
-      width: 37px;
+      height: 38px;
+      width: 38px;
 
       .unnnic-icon {
         width: $unnnic-icon-size-ant;

package/src/components/Button/types.ts

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

package/src/components/Card/Card.vue

@@ -194,29 +194,20 @@ export default {
 <style lang="scss">
 @use '@/assets/scss/unnnic' as *;
 
-$scheme-colors:
-  'feedback-red' $unnnic-color-feedback-red,
-  'feedback-green' $unnnic-color-feedback-green,
-  'feedback-yellow' $unnnic-color-feedback-yellow,
-  'feedback-blue' $unnnic-color-feedback-blue,
-  'feedback-grey' $unnnic-color-feedback-grey,
-  'aux-blue' $unnnic-color-aux-blue,
-  'aux-purple' $unnnic-color-aux-purple,
-  'aux-orange' $unnnic-color-aux-orange,
-  'aux-lemon' $unnnic-color-aux-lemon,
-  'aux-pink' $unnnic-color-aux-pink,
-  'brand-weni-soft' $unnnic-color-brand-weni-soft;
+$card-needed-colors: 'feedback-red', 'feedback-green', 'feedback-yellow', 'feedback-blue', 'feedback-grey', 'aux-blue', 'aux-purple', 'aux-orange', 'aux-lemon', 'aux-pink', 'brand-weni-soft';
 
-@each $name, $color in $scheme-colors {
-  .unnnic-card-scheme {
-    &--#{$name} {
-      background-color: rgba($color, $unnnic-opacity-level-extra-light);
-      color: $color;
-      &--icon {
+@each $name, $color in $unnnic-scheme-colors {
+  @if index($card-needed-colors, $name) {
+    .unnnic-card-scheme {
+      &--#{$name} {
+        background-color: rgba($color, $unnnic-opacity-level-extra-light);
         color: $color;
-      }
-      &--border {
-        border-left: 0.25 * $unnnic-font-size solid $color;
+        &--icon {
+          color: $color;
+        }
+        &--border {
+          border-left: 0.25 * $unnnic-font-size solid $color;
+        }
       }
     }
   }

package/src/components/Chip/Chip.vue

@@ -0,0 +1,124 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <section 
+    :class="[
+      'chip',
+      chipClass,
+      {
+        'chip--border': shouldShowBorder,
+        'chip--is-clickable': isClickable
+      }
+    ]"
+    @click="onClick"
+  >
+    <p :class="['chip__text', textColorClass]">{{ text }}</p>
+    <p v-if="count" :class="['chip__count', countColorClass]">{{ count }}</p>
+    <UnnnicIcon 
+      v-if="type === 'multiple'" 
+      :icon="isSelected ? 'close' : 'add'" 
+      :scheme="isSelected ? 'teal-600' : 'feedback-grey'" 
+      class="chip__icon" 
+      size="sm" 
+    />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import UnnnicIcon from '../Icon.vue';
+import type { ChipProps } from './types';
+
+const props = defineProps<ChipProps>();
+
+const emit = defineEmits<{
+  click: [event: Event];
+}>();
+
+const onClick = (event: Event) => {
+  emit('click', event);
+};
+
+const shouldShowBorder = computed(() => {
+  return !props.isSelected;
+});
+
+const textColorClass = computed(() => {
+  if (props.isSelected) {
+    return 'chip__text--is-selected';
+  }
+  return '';
+}); 
+
+const countColorClass = computed(() => {
+  if (props.isSelected) {
+    return 'chip__count--is-selected';
+  }
+  return '';
+});
+
+const chipClass = computed(() => {
+  return props.isSelected ? 'chip--is-selected' : '';
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.chip {
+    display: inline-flex;
+    height: 26px;
+    padding: $unnnic-space-1 $unnnic-space-3;
+    justify-content: center;
+    align-items: center;
+    gap: $unnnic-space-2;
+    flex-shrink: 0;
+    border-radius: 600px;
+    background-color: $unnnic-color-bg-base;
+
+    &:hover {
+        background-color: $unnnic-color-bg-soft;
+    }
+
+    &--is-selected {
+        background-color: $unnnic-color-teal-100;
+        &:hover {
+            background-color: $unnnic-color-teal-200;
+        }
+    }
+
+    &--is-clickable {
+        cursor: pointer;
+    }
+    
+    &--border {
+        border: 1px solid $unnnic-color-border-base;
+    }
+
+    &__text {
+        color: $unnnic-color-fg-base;
+        font: $unnnic-font-caption-1;
+
+        &--is-selected {
+            color: $unnnic-color-fg-active;
+        }
+    }
+
+    &__count {
+        display: flex;
+        padding: 0 $unnnic-space-2;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        border-radius: 600px;
+        background: $unnnic-color-bg-soft;
+        color: $unnnic-color-fg-base;
+        font: $unnnic-font-caption-1;
+        font-weight: $unnnic-font-weight-medium;
+
+        &--is-selected {
+            color: $unnnic-color-fg-active;
+            background: $unnnic-color-white;
+        }
+    }
+}
+</style>