@weni/unnnic-system 3.1.2-alpha.1 → 3.1.2

package/package.json

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

package/src/assets/scss/colors.scss

@@ -169,6 +169,38 @@ $unnnic-color-brand-sec-dark: $unnnic-color-neutral-black;
 $unnnic-color-brand-sec-soft: $unnnic-color-neutral-dark;
 $unnnic-color-brand-sec: $unnnic-color-neutral-cleanest;
 
+/* Semantic Background Colors */
+$unnnic-color-bg-base: $unnnic-color-white;
+$unnnic-color-bg-soft: $unnnic-color-gray-50;
+$unnnic-color-bg-muted: $unnnic-color-gray-100;
+$unnnic-color-bg-active: $unnnic-color-teal-600;
+$unnnic-color-bg-info: $unnnic-color-aux-blue-100;
+$unnnic-color-bg-success: $unnnic-color-aux-green-100;
+$unnnic-color-bg-warning: $unnnic-color-aux-yellow-50;
+$unnnic-color-bg-critical: $unnnic-color-aux-red-50;
+
+/* Semantic Text Colors */
+$unnnic-color-fg-base: $unnnic-color-gray-500;
+$unnnic-color-fg-muted: $unnnic-color-gray-300;
+$unnnic-color-fg-emphasized: $unnnic-color-gray-900;
+$unnnic-color-fg-inverted: $unnnic-color-white;
+$unnnic-color-fg-active: $unnnic-color-teal-600;
+$unnnic-color-fg-info: $unnnic-color-aux-blue-500;
+$unnnic-color-fg-success: $unnnic-color-aux-green-500;
+$unnnic-color-fg-warning: $unnnic-color-aux-yellow-500;
+$unnnic-color-fg-critical: $unnnic-color-aux-red-500;
+
+/* Semantic Border Colors */
+$unnnic-color-border-base: $unnnic-color-gray-200;
+$unnnic-color-border-soft: $unnnic-color-gray-100;
+$unnnic-color-border-muted: $unnnic-color-gray-200;
+$unnnic-color-border-emphasized: $unnnic-color-gray-400;
+$unnnic-color-border-active: $unnnic-color-teal-600;
+$unnnic-color-border-info: $unnnic-color-aux-blue-300;
+$unnnic-color-border-success: $unnnic-color-aux-green-300;
+$unnnic-color-border-warning: $unnnic-color-aux-yellow-300;
+$unnnic-color-border-critical: $unnnic-color-aux-red-300;
+
 :export{
     unnnicColorBackgroundSolo: $unnnic-color-background-solo;
 }
@@ -340,36 +372,36 @@ $scheme-colors:
   "brand-sec" $unnnic-color-brand-sec,
   
   // Background semantic colors
-  "bg-base" $unnnic-color-white,
-  "bg-soft" $unnnic-color-gray-50,
-  "bg-muted" $unnnic-color-gray-100,
-  "bg-active" $unnnic-color-teal-600,
-  "bg-info" $unnnic-color-aux-blue-100,
-  "bg-success" $unnnic-color-aux-green-100,
-  "bg-warning" $unnnic-color-aux-yellow-50,
-  "bg-critical" $unnnic-color-aux-red-50,
+  "bg-base" $unnnic-color-bg-base,
+  "bg-soft" $unnnic-color-bg-soft,
+  "bg-muted" $unnnic-color-bg-muted,
+  "bg-active" $unnnic-color-bg-active,
+  "bg-info" $unnnic-color-bg-info,
+  "bg-success" $unnnic-color-bg-success,
+  "bg-warning" $unnnic-color-bg-warning,
+  "bg-critical" $unnnic-color-bg-critical,
   
   // Text semantic colors
-  "fg-base" $unnnic-color-gray-500,
-  "fg-muted" $unnnic-color-gray-300,
-  "fg-emphasized" $unnnic-color-gray-900,
-  "fg-inverted" $unnnic-color-white,
-  "fg-active" $unnnic-color-teal-600,
-  "fg-info" $unnnic-color-aux-blue-500,
-  "fg-success" $unnnic-color-aux-green-500,
-  "fg-warning" $unnnic-color-aux-yellow-500,
-  "fg-critical" $unnnic-color-aux-red-500,
+  "fg-base" $unnnic-color-fg-base,
+  "fg-muted" $unnnic-color-fg-muted,
+  "fg-emphasized" $unnnic-color-fg-emphasized,
+  "fg-inverted" $unnnic-color-fg-inverted,
+  "fg-active" $unnnic-color-fg-active,
+  "fg-info" $unnnic-color-fg-info,
+  "fg-success" $unnnic-color-fg-success,
+  "fg-warning" $unnnic-color-fg-warning,
+  "fg-critical" $unnnic-color-fg-critical,
   
   // Border semantic colors
-  "border-base" $unnnic-color-gray-200,
-  "border-soft" $unnnic-color-gray-100,
-  "border-muted" $unnnic-color-gray-200,
-  "border-emphasized" $unnnic-color-gray-400,
-  "border-active" $unnnic-color-teal-600,
-  "border-info" $unnnic-color-aux-blue-300,
-  "border-success" $unnnic-color-aux-green-300,
-  "border-warning" $unnnic-color-aux-yellow-300,
-  "border-critical" $unnnic-color-aux-red-300;
+  "border-base" $unnnic-color-border-base,
+  "border-soft" $unnnic-color-border-soft,
+  "border-muted" $unnnic-color-border-muted,
+  "border-emphasized" $unnnic-color-border-emphasized,
+  "border-active" $unnnic-color-border-active,
+  "border-info" $unnnic-color-border-info,
+  "border-success" $unnnic-color-border-success,
+  "border-warning" $unnnic-color-border-warning,
+  "border-critical" $unnnic-color-border-critical;
 
 
 @each $name, $color in $scheme-colors {

package/src/components/DropArea/DropArea.vue

@@ -111,11 +111,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  }
 });
 
 const emit = defineEmits([
@@ -140,21 +135,15 @@ const formattedSupportedFormats = computed(() => {
 });
 
 function dragenter() {
-  if (props.disabled) return;
-
   dragEnterCounter.value += 1;
   isDragging.value = true;
 }
 
 function dragover() {
-  if (props.disabled) return;
-
   isDragging.value = true;
 }
 
 function dragleave() {
-  if (props.disabled) return;
-
   dragEnterCounter.value -= 1;
   if (dragEnterCounter.value === 0) {
     isDragging.value = false;
@@ -162,14 +151,10 @@ function dragleave() {
 }
 
 function dragend() {
-  if (props.disabled) return;
-
   isDragging.value = false;
 }
 
 function drop(event) {
-  if (props.disabled) return;
-
   isDragging.value = false;
 
   const { files } = event.dataTransfer;
@@ -180,8 +165,6 @@ function drop(event) {
 }
 
 function handleFileChange(event) {
-  if (props.disabled) return;
-
   const { files } = event.target;
 
   if (validateFiles(files)) {

package/src/components/ModalDialog/ModalDialog.vue

@@ -24,7 +24,10 @@
       </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"
@@ -46,7 +49,6 @@
             data-testid="close-icon"
             icon="close"
             clickable
-            scheme="neutral-cloudy"
             @click="close()"
           />
         </header>
@@ -96,12 +98,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,
@@ -118,29 +120,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,
@@ -163,26 +165,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',
       },
     };
   },
@@ -193,17 +195,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;
@@ -310,7 +312,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;

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

@@ -11,7 +11,7 @@ exports[`ModalDialog.vue > Elements rendering > matches the snapshot 1`] = `
           <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="test-icon" clickable="false" size="md" scheme="neutral-darkest" data-testid="title-icon" class="unnnic-modal-dialog__container__title-icon"></unnnic-icon-stub>
           <h1 data-v-68ebadeb="" class="unnnic-modal-dialog__container__title-text" data-testid="title-text">Test Title</h1>
         </section>
-        <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="close" clickable="true" size="md" scheme="neutral-cloudy" data-testid="close-icon"></unnnic-icon-stub>
+        <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="close" clickable="true" size="md" scheme="neutral-darkest" data-testid="close-icon"></unnnic-icon-stub>
       </header>
       <section data-v-68ebadeb="" class="unnnic-modal-dialog__container__content"></section>
       <section data-v-68ebadeb="" data-testid="actions-section" class="unnnic-modal-dialog__container__actions">

package/src/components/index.ts

@@ -88,9 +88,7 @@ import ModalDialog from "./ModalDialog/ModalDialog.vue";
 import Tour from "./Tour/Tour.vue";
 import Navigator from "./Navigator/index.vue";
 import SelectTime from "./SelectTime/index.vue";
-import TemplatePreview from "./TemplatePreview/TemplatePreview.vue";
-import TemplatePreviewModal from "./TemplatePreview/TemplatePreviewModal.vue";
-import DataTable from './DataTable/index.vue';
+import DataTable from "./DataTable/index.vue";
 
 type VueComponent = Component;
 
@@ -189,8 +187,6 @@ export const components: ComponentsMap = {
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
   unnnicSelectTime: SelectTime,
-  unnnicTemplatePreview: TemplatePreview,
-  unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
 };
 
@@ -284,7 +280,5 @@ export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
+export const unnnicDataTable = DataTable as VueComponent;
 export const unnnicSelectTime = SelectTime as VueComponent;
-export const unnnicTemplatePreview = TemplatePreview as VueComponent;
-export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
-export const unnnicDataTable = DataTable;

package/dist/components/TemplatePreview/TemplatePreview.vue.d.ts

@@ -1,9 +0,0 @@
-import { Template } from './types';
-interface Props {
-    template?: Template | null;
-}
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    template: Template | null;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
-export default _default;
-//# sourceMappingURL=TemplatePreview.vue.d.ts.map

package/dist/components/TemplatePreview/TemplatePreview.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TemplatePreview.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TemplatePreview/TemplatePreview.vue"],"names":[],"mappings":"AAgGA;AA6PA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQxC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC5B;;cADY,QAAQ,GAAG,IAAI;;AAkN5B,wBAQG"}

package/dist/components/TemplatePreview/TemplatePreviewModal.vue.d.ts

@@ -1,15 +0,0 @@
-import { Template } from './types';
-interface Props {
-    locale?: string;
-    template: Template;
-    modelValue: boolean;
-}
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    close: () => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    onClose?: (() => any) | undefined;
-}>, {
-    locale: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;
-//# sourceMappingURL=TemplatePreviewModal.vue.d.ts.map

package/dist/components/TemplatePreview/TemplatePreviewModal.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TemplatePreviewModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TemplatePreview/TemplatePreviewModal.vue"],"names":[],"mappings":"AAWA;AAwDA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAUxC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB;;;;;;YAHU,MAAM;;AAgGjB,wBASG"}

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -1,249 +0,0 @@
-<template>
-  <section class="unnnic-template-preview">
-    <section
-      :class="[
-        'unnnic-template-preview__content',
-        { 'unnnic-template-preview__content--has-media': hasHeaderMedia },
-      ]"
-    >
-      <header
-        v-if="hasHeader"
-        :class="`unnnic-template-preview__header__${
-          template?.header.type === 'TEXT' ? 'text' : 'media'
-        }`"
-      >
-        <img
-          class="unnnic-template-preview__header__media__preview"
-          v-if="
-            template?.header.type === 'MEDIA' &&
-            template?.header.mediaType === 'IMAGE'
-          "
-          :src="template.header.src || imagePreview"
-        />
-        <template
-          v-else-if="
-            template?.header.type === 'MEDIA' &&
-            template?.header.mediaType === 'VIDEO'
-          "
-        >
-          <video
-            v-if="template.header.src"
-            class="unnnic-template-preview__header__media__preview"
-            :src="template.header.src"
-            controls
-          />
-          <img
-            v-else
-            class="unnnic-template-preview__header__media__preview"
-            :src="videoPreview"
-          />
-        </template>
-        <template
-          v-else-if="
-            template?.header.type === 'MEDIA' &&
-            template?.header.mediaType === 'DOCUMENT'
-          "
-        >
-          <img
-            class="unnnic-template-preview__header__media__preview"
-            :src="documentPreview"
-          />
-        </template>
-        <h1
-          class="unnnic-template-preview__header__text__preview"
-          v-else-if="template?.header.type === 'TEXT'"
-        >
-          {{ template.header.text }}
-        </h1>
-      </header>
-      <section
-        v-if="hasBody"
-        :class="[
-          'unnnic-template-preview__body',
-          { 'unnnic-template-preview__body--has-media': hasHeaderMedia },
-        ]"
-      >
-        <section v-html="parsedBody"></section>
-      </section>
-      <footer
-        v-if="hasFooter"
-        :class="[
-          'unnnic-template-preview__footer',
-          { 'unnnic-template-preview__footer--has-media': hasHeaderMedia },
-        ]"
-      >
-        {{ template?.footer }}
-      </footer>
-    </section>
-    <footer v-if="hasButtons" class="unnnic-template-preview__buttons">
-      <section
-        v-for="(button, index) in template?.buttons"
-        :key="`button-${index}`"
-        class="unnnic-template-preview__buttons__button"
-      >
-        <UnnnicIcon
-          class="unnnic-template-preview__buttons__button__icon"
-          :icon="getButtonIcon(button.type)"
-          scheme="aux-blue-500"
-          size="ant"
-        />
-        <p class="unnnic-template-preview__buttons__button__text">
-          {{ button.text }}
-        </p>
-      </section>
-    </footer>
-  </section>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-
-import type { Template } from "./types";
-
-import imagePreview from "../../assets/img/previews/image-preview.png";
-import documentPreview from "../../assets/img/previews/doc-preview.png";
-import videoPreview from "../../assets/img/previews/video-preview.png";
-
-import UnnnicIcon from "../Icon.vue";
-
-interface Props {
-  template?: Template | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  template: null,
-});
-
-const hasHeader = computed(
-  () => props.template?.header && props.template.header.type
-);
-const hasHeaderMedia = computed(
-  () => !!props.template?.header && props.template.header.type === "MEDIA"
-);
-const hasBody = computed(
-  () => !!props.template?.body && props.template.body.length > 0
-);
-const hasFooter = computed(
-  () => !!props.template?.footer && props.template.footer.length > 0
-);
-const hasButtons = computed(
-  () => !!props.template?.buttons && props.template.buttons.length > 0
-);
-const parsedBody = computed(() => {
-  if (!hasBody.value) return "";
-
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const result = props
-    .template!.body!.replaceAll("\n", "<br/>")
-    .replaceAll(/(?:\*)([^*<\n]+)(?:\*)/g, "<strong>$1</strong>")
-    .replaceAll(/(?:_)([^_<\n]+)(?:_)/g, "<i>$1</i>")
-    .replaceAll(/(?:~)([^~<\n]+)(?:~)/g, "<s>$1</s>")
-    .replaceAll(/(?:```)([^```<\n]+)(?:```)/g, "<tt>$1</tt>")
-    .replaceAll(/{{.*?}}/g, (match) => `<strong>${match}</strong>`);
-
-  return result;
-});
-
-const getButtonIcon = (buttonType) => {
-  const buttonMapper = {
-    PHONE_NUMBER: "phone",
-    URL: "open_in_new",
-    COPY_CODE: "content_copy",
-    FLOW: "",
-    QUICK_REPLY: "reply",
-  };
-
-  return buttonMapper[buttonType] || "";
-};
-</script>
-
-<style lang="scss" scoped>
-@use "@/assets/scss/unnnic" as *;
-
-.unnnic-template-preview {
-  display: flex;
-  flex-direction: column;
-  box-shadow: $unnnic-shadow-level-near;
-  background-color: $unnnic-color-background-white;
-  width: 368px;
-  border-radius: $unnnic-border-radius-md;
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: $unnnic-space-3;
-    padding: $unnnic-space-4 $unnnic-space-3;
-
-    &--has-media {
-      padding: $unnnic-space-1;
-    }
-  }
-
-  &__header {
-    &__text {
-      &__preview {
-        font-family: $unnnic-font-family-secondary;
-        font-weight: $unnnic-font-weight-bold;
-        font-size: $unnnic-font-size-body-gt;
-        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-        color: $unnnic-color-neutral-dark;
-
-        margin: $unnnic-space-0;
-      }
-    }
-
-    &__media {
-      &__preview {
-        width: 100%;
-        object-fit: cover;
-      }
-    }
-  }
-
-  &__body {
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-regular;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-    color: $unnnic-color-neutral-cloudy;
-
-    &--has-media {
-      padding: $unnnic-space-0 $unnnic-space-2;
-    }
-  }
-
-  &__footer {
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-regular;
-    font-size: $unnnic-font-size-body-md;
-    line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
-    color: $unnnic-color-neutral-clean;
-
-    &--has-media {
-      padding: $unnnic-space-0 $unnnic-space-3 $unnnic-space-2;
-    }
-  }
-
-  &__buttons {
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-bold;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-
-    &__button {
-      margin: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: $unnnic-space-2;
-      padding: $unnnic-space-3;
-      border-top: 1px solid $unnnic-color-neutral-light;
-
-      &__text {
-        color: $unnnic-color-aux-blue-500;
-        margin: $unnnic-space-0;
-      }
-    }
-  }
-}
-</style>