@weni/unnnic-system 3.5.0 → 3.5.1-alpha.1

package/src/components/ChartFunnel/SvgFunnel/ChartFunnelTwoRows.vue

@@ -1,64 +1,65 @@
 <template>
-  <ChartFunnelBaseRow
-    class="unnnic-chart-funnel-two-rows"
-    :rows="rows"
-    viewBox="0 0 250 148"
-  />
-</template>
-
-<script>
-import ChartFunnelBaseRow from './ChartFunnelBaseRow.vue';
-export default {
-  name: 'UnnnicChartFunnelTwoRows',
-
-  components: {
-    ChartFunnelBaseRow,
-  },
-
-  props: {
-    data: {
-      type: Array,
-      required: true,
+    <ChartFunnelBaseRow
+      class="unnnic-chart-funnel-two-rows"
+      :rows="rows"
+      viewBox="0 0 250 148"
+    />
+  </template>
+  
+  <script>
+  import ChartFunnelBaseRow from './ChartFunnelBaseRow.vue';
+  export default {
+    name: 'UnnnicChartFunnelTwoRows',
+  
+    components: {
+      ChartFunnelBaseRow,
     },
-  },
-
-  computed: {
-    rows() {
-      const { data } = this;
-      return [
-        {
-          pathD:
-            'M362.938 0H12.025C6.30976 0 2.43799 5.81972 4.64626 11.0911L31 74H343.75L370.307 11.1122C372.535 5.83818 368.663 0 362.938 0Z',
-          titleX: '50%',
-          titleY: '32',
-          descriptionX: '50%',
-          descriptionY: '52',
-          title: data[0].title,
-          description: data[0].description,
-        },
-        {
-          pathD: 'M344 74H31L63.4654 148H311.535L344 74Z',
-          titleX: '50%',
-          titleY: '106',
-          descriptionX: '50%',
-          descriptionY: '126',
-          title: data[1].title,
-          description: data[1].description,
-        },
-      ];
+  
+    props: {
+      data: {
+        type: Array,
+        required: true,
+      },
     },
-  },
-};
-</script>
-
-<style lang="scss">
-@use '@/assets/scss/unnnic' as *;
-.unnnic-chart-funnel-two-rows {
-  [class$='row']:nth-child(1) {
-    fill: $unnnic-color-weni-950;
-  }
-  [class$='row']:nth-child(2) {
-    fill: $unnnic-color-weni-800;
+  
+    computed: {
+      rows() {
+        const { data } = this;
+        return [
+          {
+            pathD:
+              'M362.938 0H12.025C6.30976 0 2.43799 5.81972 4.64626 11.0911L31 74H343.75L370.307 11.1122C372.535 5.83818 368.663 0 362.938 0Z',
+            titleX: '50%',
+            titleY: '32',
+            descriptionX: '50%',
+            descriptionY: '52',
+            title: data[0].title,
+            description: data[0].description,
+          },
+          {
+            pathD: 'M344 74H31L63.4654 148H311.535L344 74Z',
+            titleX: '50%',
+            titleY: '106',
+            descriptionX: '50%',
+            descriptionY: '126',
+            title: data[1].title,
+            description: data[1].description,
+          }
+        ];
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  @use '@/assets/scss/unnnic' as *;
+  .unnnic-chart-funnel-two-rows {
+    [class$='row']:nth-child(1) {
+      fill: $unnnic-color-weni-950;
+    }
+    [class$='row']:nth-child(2) {
+      fill: $unnnic-color-weni-800;
+    }
   }
-}
-</style>
+  </style>
+  

package/src/components/Chip/Chip.vue

@@ -80,7 +80,7 @@ const chipClass = computed(() => {
   border-radius: 600px;
   background-color: $unnnic-color-bg-base;
   border: 1px solid transparent;
-
+  
   &:hover {
     background-color: $unnnic-color-bg-soft;
   }

package/src/components/Icon/OldIconsMap.json

@@ -1,5 +1,6 @@
 {
   "lock-2-1": "lock",
+  "lock-2-2": "lock",
   "view-1-1": "visibility",
   "view-off-1": "visibility_off",
   "read-email-at-1": "alternate_email",
@@ -7,7 +8,10 @@
   "loading-circle-1": "progress_activity",
   "close-1": "close",
   "alert-circle-1": "error",
+  "alert-circle-1-1": "error",
   "check-circle-1-1": "check_circle",
+  "check-circle-1-1-1": "check_circle",
+  "check-2": "check",
   "search-1": "search",
   "house-1-1": "some",
   "gauge-dashboard-2": "speed",
@@ -27,6 +31,8 @@
   "graph-stats-descend-2": "trending_down",
   "messages-bubble-1": "chat_bubble",
   "chat-translate-1": "translate",
+  "translate-1": "translate",
+  "translate-2": "translate",
   "arrow-button-up-1": "expand_less",
   "delete-1": "error",
   "button-refresh-arrow-1": "refresh",
@@ -34,9 +40,11 @@
   "synchronize-arrow-clock-4": "update",
   "flash-1-3": "bolt",
   "phone-3": "call",
+  "phone-4": "call",
   "layout-dashboard-1": "dashboard",
   "check-square-1": "task_alt",
   "cog-1": "settings",
+  "cog-2": "settings",
   "download-bottom-1": "download",
   "charger-1": "cloud",
   "upload-bottom-1": "upload",
@@ -47,22 +55,26 @@
   "button-refresh-arrows-1": "refresh",
   "keyboard-return-1": "keyboard_return",
   "delete-1-1": "dangerous",
+  "delete-2-1": "dangerous",
   "keyboard-arrow-left-1": "keyboard_backspace",
   "graph-stats-circle-1": "vital_signs",
   "graph-stats-1": "vital_signs",
   "paginate-filter-text-1": "article",
   "keyboard-arrow-down-1": "south",
+  "keyboard-arrow-right-1": "arrow_right_alt",
   "study-light-idea-1": "lightbulb",
   "folder-1": "folder",
   "export-1": "open_in_new",
   "add-circle-1": "add_circle",
   "subtract-circle-1": "do_not_disturb_on",
+  "subtract-1": "remove",
   "button-play-1": "play_circle",
   "lock-unlock-1-1": "lock_open_right",
   "video-file-mp4-1": "video_file",
   "office-file-pdf-1-1": "picture_as_pdf",
   "send-email-3-1": "send",
   "rating-star-1": "star",
+  "rating-star-1-1": "star",
   "floppy-disk-1": "save",
   "common-file-empty-1": "check_box_outline_blank",
   "currency-dollar-circle-1": "paid",
@@ -93,5 +105,7 @@
   "bookmark-tag-1": "sell",
   "move-expand-vertical-1": "unfold_more",
   "text-underline": "format_underlined",
-  "unordered-list": "list"
+  "unordered-list": "list",
+  "filter": "filter_alt",
+  "typing-1": "text_select_start"
 }

package/src/components/Icon/types.ts

@@ -17,14 +17,10 @@ export type IconSize =
   | 'avatar-xs'
   | 'avatar-nano';
 
-export type LineHeight = 'sm' | 'md' | 'lg';
-
 export interface IconProps {
   filled?: boolean;
-  next?: boolean;
   icon?: string | null;
   clickable?: boolean;
   size?: IconSize;
-  lineHeight?: LineHeight | null;
   scheme?: SchemeColor;
 }

package/src/components/Icon.vue

@@ -1,32 +1,28 @@
 <template>
-  <span
-    v-if="materialSymbolsName"
+  <Icon
+    v-if="isIconify"
+    :icon="props.icon as string"
     :class="[
-      'material-symbols-rounded',
+      'unnnic-icon',
       `unnnic-icon-scheme--${scheme}`,
       `unnnic-icon-size--${size}`,
       {
         'unnnic--clickable': clickable,
-        'material-symbols-rounded--filled': filled,
       },
     ]"
-    data-testid="material-icon"
-    translate="no"
+    data-testid="iconify-icon"
     @click="onClick"
     @mousedown="(event) => $emit('mousedown', event)"
     @mouseup="(event) => $emit('mouseup', event)"
-  >
-    {{ materialSymbolsName }}
-  </span>
+  />
 
   <component
-    :is="svg"
-    v-else
+    :is="customSvgIcon"
+    v-else-if="customSvgIcon"
     :class="[
       'unnnic-icon',
-      `unnnic-icon__size--${size}`,
+      `unnnic-icon--size-svg-${size}`,
       clickable ? 'unnnic--clickable' : '',
-      lineHeight ? `unnnic-icon__line-height--${lineHeight}` : '',
       scheme ? `unnnic-icon-scheme--${scheme}` : '',
     ]"
     data-testid="old-map-icons"
@@ -34,28 +30,50 @@
     @mousedown="(event) => $emit('mousedown', event)"
     @mouseup="(event) => $emit('mouseup', event)"
   />
+
+  <span
+    v-else-if="materialSymbolsName"
+    :class="[
+      'unnnic-icon',
+      'material-symbols-rounded',
+      `unnnic-icon-scheme--${scheme}`,
+      `unnnic-icon-size--${size}`,
+      {
+        'unnnic--clickable': clickable,
+        'material-symbols-rounded--filled': filled,
+      },
+    ]"
+    data-testid="material-icon"
+    translate="no"
+    @click="onClick"
+    @mousedown="(event) => $emit('mousedown', event)"
+    @mouseup="(event) => $emit('mouseup', event)"
+  >
+    {{ materialSymbolsName }}
+  </span>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { Icon } from '@iconify/vue';
+
 import icons from '../utils/icons';
 import OldIconsMap from './Icon/OldIconsMap.json';
-import type { IconProps, IconSize, LineHeight } from './Icon/types';
+
+import type { IconProps, IconSize } from './Icon/types';
 import type { SchemeColor } from '@/types/scheme-colors';
 
 defineOptions({
   name: 'UnnnicIcon',
 });
 
-export type { IconProps, IconSize, LineHeight, SchemeColor };
+export type { IconProps, IconSize, SchemeColor };
 
 const props = withDefaults(defineProps<IconProps>(), {
   filled: false,
-  next: false,
   icon: null,
   clickable: false,
   size: 'md',
-  lineHeight: null,
   scheme: 'neutral-darkest',
 });
 
@@ -65,19 +83,16 @@ const emit = defineEmits<{
   mouseup: [event: Event];
 }>();
 
-const svg = computed(() => {
-  return icons[props.icon as string];
-});
+const isIconify = computed(
+  () => (props.icon as string)?.includes(':') ?? false,
+);
 
-const materialSymbolsName = computed(() => {
-  if (Object.keys(icons).includes(props.icon as string) && !props.next) {
-    return null;
-  }
+const customSvgIcon = computed(() => icons[props.icon as string] ?? null);
 
-  return (
-    (OldIconsMap as Record<string, string>)[props.icon as string] || props.icon
-  );
-});
+const materialSymbolsName = computed(
+  () =>
+    (OldIconsMap as Record<string, string>)[props.icon as string] || props.icon,
+);
 
 const onClick = (event: Event) => {
   if (!props.clickable) return;
@@ -88,28 +103,34 @@ const onClick = (event: Event) => {
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 
-.unnnic-icon :deep(svg) {
-  position: absolute;
-  top: 0;
-  left: 0;
+.unnnic-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  :deep(svg) {
+    width: 1em;
+    height: 1em;
+  }
 }
 </style>
 
 <style lang="scss">
 @use '@/assets/scss/unnnic' as *;
+@use '@/assets/scss/icon-sizes' as *;
 
 $icon-sizes:
-  'xl' $unnnic-icon-size-xl,
-  'lg' $unnnic-icon-size-lg,
-  'md' $unnnic-icon-size-md,
-  'ant' $unnnic-icon-size-ant,
-  'sm' $unnnic-icon-size-sm,
-  'xs' $unnnic-icon-size-xs,
-  'avatar-lg' $unnnic-avatar-size-lg,
-  'avatar-md' $unnnic-avatar-size-md,
-  'avatar-sm' $unnnic-avatar-size-sm,
-  'avatar-xs' $unnnic-avatar-size-xs,
-  'avatar-nano' $unnnic-avatar-size-nano;
+  'xs' $unnnic-icon-size-3,
+  'sm' $unnnic-icon-size-4,
+  'ant' $unnnic-icon-size-5,
+  'md' $unnnic-icon-size-6,
+  'lg' $unnnic-icon-size-7,
+  'xl' $unnnic-icon-size-10,
+  'avatar-nano' $unnnic-icon-size-5,
+  'avatar-xs' $unnnic-icon-size-7,
+  'avatar-sm' $unnnic-icon-size-10,
+  'avatar-md' '72px',
+  'avatar-lg' '104px';
 
 @font-face {
   font-family: 'Material Symbols Rounded';
@@ -126,6 +147,25 @@ $icon-sizes:
     format('woff2');
 }
 
+.unnnic-icon {
+  @each $name, $color in $unnnic-scheme-colors {
+    &.unnnic-icon-scheme--#{$name} {
+      color: $color;
+    }
+  }
+
+  @each $name, $size in $icon-sizes {
+    &.unnnic-icon-size--#{$name} {
+      font-size: $size;
+    }
+
+    &--size-svg-#{$name} {
+      width: $size;
+      height: $size;
+    }
+  }
+}
+
 .material-symbols-rounded {
   font-family: 'Material Symbols Rounded';
   font-weight: normal;
@@ -146,63 +186,5 @@ $icon-sizes:
   &--filled {
     font-family: 'Material Symbols Rounded Filled';
   }
-
-  @each $name, $color in $unnnic-scheme-colors {
-    &.unnnic-icon-scheme--#{$name} {
-      color: $color;
-    }
-  }
-
-  @each $name, $size in $icon-sizes {
-    &.unnnic-icon-size--#{$name} {
-      font-size: $size;
-    }
-  }
-}
-
-@each $name, $color in $scheme-colors {
-  .unnnic-icon-scheme {
-    &--#{$name} {
-      & .primary {
-        fill: $color;
-      }
-
-      & .primary-stroke {
-        stroke: $color;
-      }
-    }
-  }
-}
-
-$line-heights:
-  'sm' $unnnic-line-height-small,
-  'md' $unnnic-line-height-medium,
-  'lg' $unnnic-line-height-large;
-
-.unnnic-icon {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-
-  @each $name, $size in $icon-sizes {
-    &__size--#{$name} {
-      width: $size;
-      height: $size;
-      min-width: $size;
-      min-height: $size;
-
-      @each $line-name, $line-size in $line-heights {
-        &.unnnic-icon__line-height--#{$line-name} svg {
-          position: relative;
-          top: calc(($size + $line-size) - ($size * 1.2)) / 1.2;
-        }
-      }
-    }
-  }
-
-  svg {
-    width: 100%;
-    height: 100%;
-  }
 }
 </style>

package/src/components/ModalDialog/ModalDialog.vue

@@ -24,10 +24,7 @@
       </section>
 
       <section class="unnnic-modal-dialog__container__body">
-        <header
-          v-if="title"
-          class="unnnic-modal-dialog__container__header"
-        >
+        <header v-if="title" class="unnnic-modal-dialog__container__header">
           <section class="unnnic-modal-dialog__container__title-container">
             <UnnnicIcon
               v-if="icon || type"
@@ -99,12 +96,12 @@
 </template>
 
 <script>
-import UnnnicIcon from '../Icon.vue';
-import UnnnicButton from '../Button/Button.vue';
-import UnnnicI18n from '../../mixins/i18n';
+import UnnnicIcon from "../Icon.vue";
+import UnnnicButton from "../Button/Button.vue";
+import UnnnicI18n from "../../mixins/i18n";
 
 export default {
-  name: 'UnnnicModalDialog',
+  name: "UnnnicModalDialog",
   components: {
     UnnnicIcon,
     UnnnicButton,
@@ -121,29 +118,29 @@ export default {
     },
     type: {
       type: String,
-      default: '',
+      default: "",
       validate(type) {
-        return ['success', 'warning', 'attention'].includes(type);
+        return ["success", "warning", "attention"].includes(type);
       },
     },
     size: {
       type: String,
-      default: 'md',
+      default: "md",
       validate(size) {
-        return ['sm', 'md', 'lg'].includes(size);
+        return ["sm", "md", "lg"].includes(size);
       },
     },
     title: {
       type: String,
-      default: '',
+      default: "",
     },
     icon: {
       type: String,
-      default: '',
+      default: "",
     },
     iconScheme: {
       type: String,
-      default: '',
+      default: "",
     },
     showCloseIcon: {
       type: Boolean,
@@ -166,26 +163,26 @@ export default {
       default: () => ({}),
     },
   },
-  emits: ['primaryButtonClick', 'secondaryButtonClick', 'update:modelValue'],
+  emits: ["primaryButtonClick", "secondaryButtonClick", "update:modelValue"],
 
   data() {
     return {
       defaultTranslations: {
         cancel: {
-          'pt-br': 'Cancelar',
-          en: 'Cancel',
-          es: 'Cancelar',
+          "pt-br": "Cancelar",
+          en: "Cancel",
+          es: "Cancelar",
         },
       },
       iconsMapper: {
-        success: { icon: 'check_circle', scheme: 'aux-green-500' },
-        warning: { icon: 'warning', scheme: 'aux-red-500' },
-        attention: { icon: 'error', scheme: 'aux-yellow-500' },
+        success: { icon: "check_circle", scheme: "aux-green-500" },
+        warning: { icon: "warning", scheme: "aux-red-500" },
+        attention: { icon: "error", scheme: "aux-yellow-500" },
       },
       primaryButtonTypeMapper: {
-        success: 'primary',
-        warning: 'warning',
-        attention: 'attention',
+        success: "primary",
+        warning: "warning",
+        attention: "attention",
       },
     };
   },
@@ -196,17 +193,17 @@ export default {
   },
   methods: {
     close() {
-      this.$emit('update:modelValue', false);
+      this.$emit("update:modelValue", false);
     },
     updateBodyOverflow(isHidden) {
-      document.body.style.overflow = isHidden ? 'hidden' : '';
+      document.body.style.overflow = isHidden ? "hidden" : "";
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
+@use "@/assets/scss/unnnic" as *;
 * {
   margin: 0;
   padding: 0;
@@ -313,7 +310,7 @@ export default {
   &__actions {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-areas: 'secondary-button primary-button';
+    grid-template-areas: "secondary-button primary-button";
     gap: $unnnic-spacing-sm;
     padding: $unnnic-spacing-md;
     flex-shrink: 0;