@weni/unnnic-system 3.5.1-alpha.2 → 3.5.1

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"
@@ -96,12 +99,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 +121,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 +166,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 +196,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 +313,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/TemplatePreview/TemplatePreview.vue

@@ -75,7 +75,10 @@
         {{ template?.footer }}
       </footer>
     </section>
-    <footer v-if="hasButtons" class="unnnic-template-preview__buttons">
+    <footer
+      v-if="hasButtons"
+      class="unnnic-template-preview__buttons"
+    >
       <section
         v-for="(button, index) in template?.buttons"
         :key="`button-${index}`"
@@ -96,15 +99,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed } from 'vue';
 
-import type { Template } from "./types";
+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 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";
+import UnnnicIcon from '../Icon.vue';
 
 interface Props {
   template?: Template | null;
@@ -115,30 +118,30 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const hasHeader = computed(
-  () => props.template?.header && props.template.header.type
+  () => props.template?.header && props.template.header.type,
 );
 const hasHeaderMedia = computed(
-  () => !!props.template?.header && props.template.header.type === "MEDIA"
+  () => !!props.template?.header && props.template.header.type === 'MEDIA',
 );
 const hasBody = computed(
-  () => !!props.template?.body && props.template.body.length > 0
+  () => !!props.template?.body && props.template.body.length > 0,
 );
 const hasFooter = computed(
-  () => !!props.template?.footer && props.template.footer.length > 0
+  () => !!props.template?.footer && props.template.footer.length > 0,
 );
 const hasButtons = computed(
-  () => !!props.template?.buttons && props.template.buttons.length > 0
+  () => !!props.template?.buttons && props.template.buttons.length > 0,
 );
 const parsedBody = computed(() => {
-  if (!hasBody.value) return "";
+  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>")
+    .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;
@@ -146,19 +149,19 @@ const parsedBody = computed(() => {
 
 const getButtonIcon = (buttonType) => {
   const buttonMapper = {
-    PHONE_NUMBER: "phone",
-    URL: "open_in_new",
-    COPY_CODE: "content_copy",
-    FLOW: "",
-    QUICK_REPLY: "reply",
+    PHONE_NUMBER: 'phone',
+    URL: 'open_in_new',
+    COPY_CODE: 'content_copy',
+    FLOW: '',
+    QUICK_REPLY: 'reply',
   };
 
-  return buttonMapper[buttonType] || "";
+  return buttonMapper[buttonType] || '';
 };
 </script>
 
 <style lang="scss" scoped>
-@use "@/assets/scss/unnnic" as *;
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-template-preview {
   display: flex;

package/src/components/TemplatePreview/TemplatePreviewModal.vue

@@ -1,9 +1,9 @@
 <template>
   <UnnnicModalDialog
-    :model-value="modelValue"
+    :modelValue="modelValue"
     @update:modelValue="$event === false && $emit('close')"
     :title="defaultTranslations.title[props.locale]"
-    :show-close-icon="true"
+    :showCloseIcon="true"
     class="unnnic-template-preview-modal"
   >
     <UnnnicTemplatePreview :template="template" />
@@ -11,16 +11,16 @@
 </template>
 
 <script lang="ts" setup>
-import UnnnicTemplatePreview from "./TemplatePreview.vue";
-import UnnnicModalDialog from "../ModalDialog/ModalDialog.vue";
+import UnnnicTemplatePreview from './TemplatePreview.vue';
+import UnnnicModalDialog from '../ModalDialog/ModalDialog.vue';
 
-import type { Template } from "./types";
+import type { Template } from './types';
 
 const defaultTranslations = {
   title: {
-    "pt-br": "Visualizar modelo",
-    en: "Template preview",
-    es: "Vista previa de plantilla",
+    'pt-br': 'Visualizar modelo',
+    en: 'Template preview',
+    es: 'Vista previa de plantilla',
   },
 };
 
@@ -31,7 +31,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  locale: "en",
+  locale: 'en',
 });
 
 defineEmits<{
@@ -40,7 +40,7 @@ defineEmits<{
 </script>
 
 <style lang="scss" scoped>
-@use "@/assets/scss/unnnic" as *;
+@use '@/assets/scss/unnnic' as *;
 
 :deep(.unnnic-modal-dialog__container__content) {
   display: flex;

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

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

package/src/components/index.ts

@@ -92,9 +92,6 @@ import DataTable from './DataTable/index.vue';
 import Chip from './Chip/Chip.vue';
 import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
 import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
-import Popover from './ui/popover/Popover.vue';
-import PopoverContent from './ui/popover/PopoverContent.vue';
-import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
 
 type VueComponent = Component;
 
@@ -197,9 +194,6 @@ export const components: ComponentsMap = {
   unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
   unnnicChip: Chip,
-  unnnicPopover: Popover,
-  unnnicPopoverContent: PopoverContent,
-  unnnicPopoverTrigger: PopoverTrigger,
 };
 
 export const unnnicFontSize = fontSize;
@@ -297,9 +291,6 @@ export const unnnicSelectTime = SelectTime as VueComponent;
 export const unnnicChip = Chip;
 export const unnnicTemplatePreview = TemplatePreview as VueComponent;
 export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
-export const unnnicPopover = Popover;
-export const unnnicPopoverContent = PopoverContent;
-export const unnnicPopoverTrigger = PopoverTrigger;
 
 export const UnnnicFontSize = fontSize;
 export const UnnnicFormElement = formElement;
@@ -396,6 +387,3 @@ export const UnnnicSelectTime = SelectTime as VueComponent;
 export const UnnnicChip = Chip;
 export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
 export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
-export const UnnnicPopover = Popover;
-export const UnnnicPopoverContent = PopoverContent;
-export const UnnnicPopoverTrigger = PopoverTrigger;

package/src/stories/AvatarIcon.stories.js

@@ -1,6 +1,7 @@
 import AvatarIcon from '../components/AvatarIcon/AvatarIcon.vue';
+import icons from '../utils/icons';
 
-const iconsOptions = [];
+const iconsOptions = Object.keys(icons);
 
 const schemes = [
   'feedback-red',

package/src/stories/ButtonIcon.stories.js

@@ -1,6 +1,7 @@
 import UnnnicButtonIcon from '../components/Button/ButtonIcon.vue';
+import icons from '../utils/icons';
 
-const iconsOptions = ['add'];
+const iconsOptions = Object.keys(icons);
 
 export default {
   title: 'Form/ButtonIcon',

package/src/stories/Icon.stories.js

@@ -1,15 +1,7 @@
 import UnnnicIcon from '../components/Icon.vue';
+import icons from '../utils/icons';
 
-const iconsOptions = [
-  'add',
-  'add-1',
-  'warning',
-  'bi:stars',
-  'indicator',
-  'fitness-biceps-1',
-  'close-1',
-  'check-2',
-];
+const iconsOptions = Object.keys(icons);
 
 const schemes = [
   'background-solo',
@@ -102,27 +94,27 @@ const schemes = [
 ];
 
 export default {
-  title: 'Misc/Icon',
+  title: 'example/Icon',
   component: UnnnicIcon,
   argTypes: {
-    scheme: { control: { type: 'select' }, options: schemes },
+    scheme: { control: { type: 'select', options: schemes } },
     size: {
       control: {
         type: 'select',
+        options: [
+          'nano',
+          'xs',
+          'sm',
+          'md',
+          'lg',
+          'avatar-lg',
+          'avatar-md',
+          'avatar-sm',
+          'avatar-xs',
+          'avatar-nano',
+        ],
       },
-      options: [
-        'xs',
-        'sm',
-        'md',
-        'lg',
-        'avatar-lg',
-        'avatar-md',
-        'avatar-sm',
-        'avatar-xs',
-        'avatar-nano',
-      ],
     },
-    icon: { control: { type: 'select' }, options: iconsOptions },
   },
 };
 

package/src/stories/InputNext.stories.js

@@ -1,7 +1,8 @@
 import { action } from '@storybook/addon-actions';
 import UnnnicInputNext from '../components/InputNext/InputNext.vue';
+import icons from '../utils/icons';
 
-const iconsOptions = [];
+const iconsOptions = Object.keys(icons);
 
 export default {
   title: 'Form/InputNext',

package/src/stories/ModalNext.stories.js

@@ -1,8 +1,9 @@
 import unnnicModalNext from '../components/ModalNext/ModalNext.vue';
+import icons from '../utils/icons';
 
 import { action } from '@storybook/addon-actions';
 
-const iconsOptions = [];
+const iconsOptions = Object.keys(icons);
 
 const schemesOptions = [
   'feedback-red',

package/src/stories/TemplatePreview.stories.js

@@ -1,8 +1,8 @@
-import UnnnicTemplatePreview from "../components/TemplatePreview/TemplatePreview.vue";
+import UnnnicTemplatePreview from '../components/TemplatePreview/TemplatePreview.vue';
 
 export default {
-  title: "example/TemplatePreview",
-  tags: ["autodocs"],
+  title: 'example/TemplatePreview',
+  tags: ['autodocs'],
   component: UnnnicTemplatePreview,
 };
 
@@ -17,28 +17,28 @@ const Template = (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.";
+  '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!",
+      type: 'TEXT',
+      text: 'Hello, world!',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
     body: bodyText,
@@ -49,10 +49,10 @@ export const Image = Template.bind({});
 Image.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "IMAGE",
+      type: 'MEDIA',
+      mediaType: 'IMAGE',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };
@@ -61,21 +61,21 @@ export const Video = Template.bind({});
 Video.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "VIDEO",
+      type: 'MEDIA',
+      mediaType: 'VIDEO',
     },
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
   },
@@ -85,10 +85,10 @@ export const Document = Template.bind({});
 Document.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "DOCUMENT",
+      type: 'MEDIA',
+      mediaType: 'DOCUMENT',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };