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

package/src/components/TableNext/__test__/__snapshots__/TableNext.spec.js.snap

@@ -42,7 +42,7 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
     <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 1 of 1</p>
     <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
+        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--ant unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
           <path d="M26.8368 35.0005C26.5868 35.0005 26.3506 34.903 26.1743 34.7255L12.7743 21.3255C12.4206 20.9717 12.2256 20.5017 12.2256 20.0017C12.2256 19.5017 12.4193 19.0305 12.7731 18.6767L26.1743 5.27549C26.3506 5.09799 26.5868 5.00049 26.8368 5.00049C27.0868 5.00049 27.3231 5.09799 27.4993 5.27549C27.6768 5.45174 27.7743 5.68799 27.7743 5.93799C27.7743 6.18799 27.6768 6.42424 27.4993 6.60049L14.0993 20.0005L27.4993 33.4005C27.6768 33.578 27.7743 33.813 27.7743 34.063C27.7743 34.313 27.6768 34.5492 27.4993 34.7255C27.3218 34.9017 27.0868 35.0005 26.8368 35.0005Z" fill="#3B414D" class="primary"></path>
         </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
@@ -53,7 +53,7 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
         <!--v-if-->
       </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
+        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--ant unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
           <path d="M13.1635 35.0005C12.9135 35.0005 12.6772 34.903 12.501 34.7255C12.136 34.3605 12.136 33.7655 12.501 33.3992L25.901 20.0005L12.501 6.60049C12.3235 6.42424 12.226 6.18799 12.226 5.93799C12.226 5.68799 12.3235 5.45174 12.501 5.27549C12.6772 5.09799 12.9135 5.00049 13.1635 5.00049C13.4135 5.00049 13.6497 5.09799 13.826 5.27549L27.226 18.6755C27.956 19.4055 27.9572 20.5942 27.2272 21.3242L13.826 34.7255C13.6497 34.903 13.4135 35.0005 13.1635 35.0005Z" fill="#3B414D" class="primary"></path>
         </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->

package/src/components/TableNext/__test__/__snapshots__/TablePagination.spec.js.snap

@@ -5,7 +5,7 @@ exports[`TablePagination.vue > matches the snapshot 1`] = `
   <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 10 of 100</p>
   <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
+      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--ant unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
         <path d="M26.8368 35.0005C26.5868 35.0005 26.3506 34.903 26.1743 34.7255L12.7743 21.3255C12.4206 20.9717 12.2256 20.5017 12.2256 20.0017C12.2256 19.5017 12.4193 19.0305 12.7731 18.6767L26.1743 5.27549C26.3506 5.09799 26.5868 5.00049 26.8368 5.00049C27.0868 5.00049 27.3231 5.09799 27.4993 5.27549C27.6768 5.45174 27.7743 5.68799 27.7743 5.93799C27.7743 6.18799 27.6768 6.42424 27.4993 6.60049L14.0993 20.0005L27.4993 33.4005C27.6768 33.578 27.7743 33.813 27.7743 34.063C27.7743 34.313 27.6768 34.5492 27.4993 34.7255C27.3218 34.9017 27.0868 35.0005 26.8368 35.0005Z" fill="#3B414D" class="primary"></path>
       </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
@@ -36,7 +36,7 @@ exports[`TablePagination.vue > matches the snapshot 1`] = `
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-dark" data-testid="icon-center" style="visibility: visible;">
+      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--ant unnnic-icon-scheme--neutral-dark" data-testid="icon-center" style="visibility: visible;">
         <path d="M13.1635 35.0005C12.9135 35.0005 12.6772 34.903 12.501 34.7255C12.136 34.3605 12.136 33.7655 12.501 33.3992L25.901 20.0005L12.501 6.60049C12.3235 6.42424 12.226 6.18799 12.226 5.93799C12.226 5.68799 12.3235 5.45174 12.501 5.27549C12.6772 5.09799 12.9135 5.00049 13.1635 5.00049C13.4135 5.00049 13.6497 5.09799 13.826 5.27549L27.226 18.6755C27.956 19.4055 27.9572 20.5942 27.2272 21.3242L13.826 34.7255C13.6497 34.903 13.4135 35.0005 13.1635 35.0005Z" fill="#3B414D" class="primary"></path>
       </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -0,0 +1,249 @@
+<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
+    :model-value="modelValue"
+    @update:modelValue="$event === false && $emit('close')"
+    :title="defaultTranslations.title[props.locale]"
+    :show-close-icon="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,22 @@ 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/index.ts

@@ -88,7 +88,9 @@ 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 DataTable from "./DataTable/index.vue";
+import TemplatePreview from "./TemplatePreview/TemplatePreview.vue";
+import TemplatePreviewModal from "./TemplatePreview/TemplatePreviewModal.vue";
+import DataTable from './DataTable/index.vue';
 
 type VueComponent = Component;
 
@@ -187,6 +189,8 @@ export const components: ComponentsMap = {
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
   unnnicSelectTime: SelectTime,
+  unnnicTemplatePreview: TemplatePreview,
+  unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
 };
 
@@ -280,8 +284,10 @@ 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 as VueComponent;
 
 export const UnnnicFontSize = fontSize;
 export const UnnnicFormElement = formElement;
@@ -373,5 +379,8 @@ 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 as VueComponent;
+

package/src/stories/Button.stories.js

@@ -8,7 +8,7 @@ export default {
       description: {
         component: `Allows users to perform an action or navigate to another page. 
           It has styles for various needs and are ideal for directing the user's attention. 
-          It is divided into 6 types: Primary, Secondary, Tertiary, Alternative, Warning, Attention.
+          It is divided into 5 types: Primary, Secondary, Tertiary, Warning, Attention.
           Each of these types has its states.
           <br/>
           <br/>
@@ -40,7 +40,6 @@ export default {
         'primary',
         'secondary',
         'tertiary',
-        'alternative',
         'warning',
         'attention',
       ],
@@ -114,14 +113,6 @@ export const OnlyIcon = {
   },
 };
 
-export const Alternative = {
-  args: {
-    type: 'alternative',
-    iconLeft: 'add',
-    text: 'Text',
-  },
-};
-
 export const Warning = {
   parameters: {
     docs: {

package/src/stories/Input.stories.js

@@ -35,9 +35,7 @@ export default {
       },
     },
     template: `
-      <unnnic-form-element label="Label" message="Helper text">
-        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
-      </unnnic-form-element>
+        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" label="Label" />
     `,
   }),
 };
@@ -156,4 +154,20 @@ export const Mask = {
     placeholder: 'Text',
     mask: ['###.###.###-##', '##.###.###/####-##'],
   },
+
+};
+
+export const LimitMaxLength = {
+  args: {
+    placeholder: 'Text',
+    maxlength: 10,
+    showMaxlengthCounter: true,
+  },
 };
+
+export const WithTooltip = {
+  args: {
+    placeholder: 'Text',
+    tooltip: 'Tooltip',
+  },
+};

package/src/stories/TemplatePreview.stories.js

@@ -0,0 +1,94 @@
+import UnnnicTemplatePreview from "../components/TemplatePreview/TemplatePreview.vue";
+
+export default {
+  title: "example/TemplatePreview",
+  tags: ["autodocs"],
+  component: UnnnicTemplatePreview,
+};
+
+const Template = (args) => ({
+  components: { UnnnicTemplatePreview },
+  setup() {
+    return { args };
+  },
+  template: `
+      <unnnic-template-preview v-bind="args" />
+    `,
+});
+
+const bodyText =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.";
+
+export const Default = Template.bind({});
+Default.args = {
+  template: {
+    header: {
+      type: "TEXT",
+      text: "Hello, world!",
+    },
+    footer: "Weni by VTEX",
+    buttons: [
+      {
+        text: "Button 1",
+        type: "PHONE_NUMBER",
+      },
+      {
+        text: "Button 2",
+        type: "URL",
+      },
+      {
+        text: "Button 3",
+        type: "QUICK_REPLY",
+      },
+    ],
+    body: bodyText,
+  },
+};
+
+export const Image = Template.bind({});
+Image.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "IMAGE",
+    },
+    footer: "Weni by VTEX",
+    body: bodyText,
+  },
+};
+
+export const Video = Template.bind({});
+Video.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "VIDEO",
+    },
+    buttons: [
+      {
+        text: "Button 1",
+        type: "PHONE_NUMBER",
+      },
+      {
+        text: "Button 2",
+        type: "URL",
+      },
+      {
+        text: "Button 3",
+        type: "QUICK_REPLY",
+      },
+    ],
+  },
+};
+
+export const Document = Template.bind({});
+Document.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "DOCUMENT",
+    },
+    footer: "Weni by VTEX",
+    body: bodyText,
+  },
+};