@weni/unnnic-system 3.2.8 → 3.2.9-alpha.0

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -0,0 +1,252 @@
+<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>

package/src/components/TemplatePreview/TemplatePreviewModal.vue

@@ -0,0 +1,51 @@
+<template>
+  <UnnnicModalDialog
+    :modelValue="modelValue"
+    @update:modelValue="$event === false && $emit('close')"
+    :title="defaultTranslations.title[props.locale]"
+    :showCloseIcon="true"
+    class="unnnic-template-preview-modal"
+  >
+    <UnnnicTemplatePreview :template="template" />
+  </UnnnicModalDialog>
+</template>
+
+<script lang="ts" setup>
+import UnnnicTemplatePreview from './TemplatePreview.vue';
+import UnnnicModalDialog from '../ModalDialog/ModalDialog.vue';
+
+import type { Template } from './types';
+
+const defaultTranslations = {
+  title: {
+    'pt-br': 'Visualizar modelo',
+    en: 'Template preview',
+    es: 'Vista previa de plantilla',
+  },
+};
+
+interface Props {
+  locale?: string;
+  template: Template;
+  modelValue: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'en',
+});
+
+defineEmits<{
+  close: void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+:deep(.unnnic-modal-dialog__container__content) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $unnnic-color-neutral-lightest;
+}
+</style>

package/src/components/TemplatePreview/types.d.ts

@@ -0,0 +1,16 @@
+export interface Template {
+  header: {
+    type: 'TEXT' | 'MEDIA';
+    mediaType?: 'IMAGE' | 'VIDEO' | 'DOCUMENT';
+    text?: string | null;
+    src?: string | null;
+  };
+  body?: string;
+  footer?: string;
+  buttons?: Array<{
+    type: 'QUICK_REPLY' | 'PHONE_NUMBER';
+    text: string;
+    countryCode?: string;
+    phoneNumber?: string;
+  }>;
+}

package/src/components/TextArea/TextArea.vue

@@ -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>
 
@@ -96,6 +97,12 @@ 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;
@@ -103,24 +110,21 @@ export default {
     display: block;
     width: 100%;
     resize: vertical;
-    box-sizing: border-box;
 
     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: 100px;
     }
 
     &--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

@@ -3,7 +3,12 @@
 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-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,236 @@
+<template>
+  <Transition
+    name="toast-slide"
+    appear
+    @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="unnnic-toast"
+    >
+      <section class="unnnic-toast__content">
+        <header class="unnnic-toast__header">
+          <UnnnicIcon
+            :icon="typeConfig.icon"
+            :scheme="typeConfig.scheme"
+            size="ant"
+            data-testid="toast-type-icon"
+          />
+
+          <h3 class="unnnic-toast__title">
+            {{ title }}
+          </h3>
+
+          <UnnnicIcon
+            icon="close"
+            scheme="neutral-dark"
+            size="ant"
+            clickable
+            class="unnnic-toast__close"
+            data-testid="toast-close-button"
+            @click="handleClose"
+            @keydown.enter="handleClose"
+            @keydown.space.prevent="handleClose"
+          />
+        </header>
+
+        <p
+          v-if="description"
+          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-5;
+
+  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>