@weni/unnnic-system 2.0.9 → 2.0.11

package/src/components/Tab/Tab.vue

@@ -13,6 +13,19 @@
           @click="change(tab)"
         >
           <slot :name="tabHeadSlotName(tab)">{{ tab }} </slot>
+          <UnnnicToolTip
+            v-if="getHeadTooltip(tab)"
+            enabled
+            :text="getHeadTooltip(tab)"
+            side="bottom"
+          >
+            <UnnnicIcon
+              icon="info"
+              :size="size === 'sm' ? 'xs' : 'sm'"
+              filled
+              scheme="neutral-cleanest"
+            />
+          </UnnnicToolTip>
         </li>
       </ul>
     </header>
@@ -23,11 +36,18 @@
 </template>
 
 <script>
+import UnnnicIcon from '../Icon.vue';
+import UnnnicToolTip from '../ToolTip/ToolTip.vue';
+
 export default {
   model: {
     prop: 'activeTab',
     event: 'change',
   },
+  components: {
+    UnnnicIcon,
+    UnnnicToolTip,
+  },
   props: {
     size: {
       type: String,
@@ -71,6 +91,17 @@ export default {
     tabHeadSlotName(tabName) {
       return `tab-head-${tabName}`;
     },
+    tabHeadTooltipSlotName(tabName) {
+      return tabName ? `tab-head-${tabName}-tooltip` : '';
+    },
+    getHeadTooltip(tabName) {
+      const tooltipSlot = this.$slots[this.tabHeadTooltipSlotName(tabName)];
+
+      if (tooltipSlot) {
+        return tooltipSlot()?.[0]?.children;
+      }
+      return '';
+    },
     change(value) {
       this.localValue = value;
       this.$emit('change', this.localValue);
@@ -86,40 +117,68 @@ export default {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  color: $unnnic-color-neutral-cleanest;
+  color: $unnnic-color-neutral-cloudy;
   font-family: $unnnic-font-family-secondary;
   font-weight: $unnnic-font-weight-bold;
   font-size: $unnnic-font-size-body-lg;
   line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
-  padding-bottom: $unnnic-inset-sm;
   margin-bottom: $unnnic-inset-sm;
   border-bottom: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
 }
 
 .tab-content {
   display: flex;
+  gap: $unnnic-spacing-sm;
+
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
 .tab-head {
+  display: flex;
+  gap: $unnnic-spacing-xs;
+  align-items: center;
+
   cursor: pointer;
-  margin-right: $unnnic-inset-md;
+  margin: $unnnic-spacing-xs $unnnic-spacing-sm;
+
+  .unnnic-tooltip {
+    display: flex;
+  }
+
+  &:hover {
+    color: $unnnic-color-neutral-black;
+  }
 }
 
 .tab-head--active {
   font-family: $unnnic-font-family-secondary;
   font-weight: $unnnic-font-weight-bold;
-  color: $unnnic-color-neutral-darkest;
+  color: $unnnic-color-neutral-black;
   font-size: $unnnic-font-size-body-lg;
   line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
   transition: 0.4s;
+
+  position: relative;
+
+  &::after {
+    content: '';
+
+    position: absolute;
+    bottom: -$unnnic-spacing-xs;
+    left: -$unnnic-spacing-sm;
+
+    display: block;
+
+    width: calc(100% + (#{$unnnic-spacing-sm} * 2));
+
+    border-bottom: $unnnic-border-width-thin solid $unnnic-color-weni-600;
+  }
 }
 
 .tab.size-sm {
   .tab-header {
-    padding-bottom: $unnnic-spacing-stack-xs;
     margin-bottom: $unnnic-spacing-stack-xs;
 
     .tab-head,

package/src/components/TextArea/TextArea.vue

@@ -147,7 +147,7 @@ export default {
     font-weight: $unnnic-font-weight-regular;
 
     &::placeholder {
-      color: $unnnic-color-neutral-cloudy;
+      color: $unnnic-color-neutral-cleanest;
       font-family: $unnnic-font-family-secondary;
       font-size: $unnnic-font-size-body-gt;
       line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
@@ -156,9 +156,6 @@ export default {
 
     &:focus {
       border-color: $unnnic-color-neutral-clean;
-      &::placeholder {
-        color: $unnnic-color-neutral-cleanest;
-      }
     }
   }
 

package/src/components/ToolTip/ToolTip.vue

@@ -21,6 +21,12 @@
         {{ line }}
         <br />
       </template>
+
+      <template v-if="shortcutText">
+        <span class="unnnic-tooltip-label-shortcut">
+          {{ shortcutText }}
+        </span>
+      </template>
     </span>
   </div>
 </template>
@@ -72,6 +78,10 @@ export default {
     maxWidth: {
       type: String,
     },
+    shortcutText: {
+      type: String,
+      default: null,
+    },
   },
   methods: {
     handleResize() {
@@ -83,31 +93,15 @@ export default {
       if (element && this.$refs.label) {
         if (this.side === 'right') {
           this.leftPos = `${elementPos.x + elementPos.width + 8}px`;
-          this.topPos = `${
-            elementPos.y +
-            elementPos.height / 2 -
-            this.$refs.label.offsetHeight / 2
-          }px`;
+          this.topPos = `${elementPos.y + elementPos.height / 2 - this.$refs.label.offsetHeight / 2}px`;
         } else if (this.side === 'left') {
           this.leftPos = `${elementPos.x - this.$refs.label.offsetWidth - 8}px`;
-          this.topPos = `${
-            elementPos.y +
-            elementPos.height / 2 -
-            this.$refs.label.offsetHeight / 2
-          }px`;
+          this.topPos = `${elementPos.y + elementPos.height / 2 - this.$refs.label.offsetHeight / 2}px`;
         } else if (this.side === 'top') {
-          this.leftPos = `${
-            elementPos.x +
-            elementPos.width / 2 -
-            this.$refs.label.clientWidth / 2
-          }px`;
+          this.leftPos = `${elementPos.x + elementPos.width / 2 - this.$refs.label.clientWidth / 2}px`;
           this.topPos = `${elementPos.y - this.$refs.label.offsetHeight - 8}px`;
         } else if (this.side === 'bottom') {
-          this.leftPos = `${
-            elementPos.x +
-            elementPos.width / 2 -
-            this.$refs.label.clientWidth / 2
-          }px`;
+          this.leftPos = `${elementPos.x + elementPos.width / 2 - this.$refs.label.clientWidth / 2}px`;
           this.topPos = `${elementPos.y + elementPos.height + 8}px`;
         }
       }
@@ -134,6 +128,10 @@ export default {
   min-width: 2 * $unnnic-font-size;
   box-sizing: border-box;
   width: auto;
+  display: flex;
+  justify-content: center;
+  gap: $unnnic-spacing-xs;
+  align-items: center;
 
   background-color: $unnnic-color-neutral-black;
   color: $unnnic-color-neutral-snow;
@@ -193,6 +191,12 @@ export default {
         $unnnic-color-neutral-black;
     }
   }
+
+  &-shortcut {
+    background-color: $unnnic-color-neutral-darkest;
+    border-radius: $unnnic-border-radius-sm;
+    padding: calc($unnnic-inset-nano / 2) $unnnic-inset-nano;
+  }
 }
 
 .unnnic-tooltip.force-open {

package/src/components/index.js

@@ -77,6 +77,8 @@ import ChatsUserAvatar from './ChatsUserAvatar/ChatsUserAvatar.vue';
 import ChartMultiLine from './ChartMultiLine/ChartMultiLine.vue';
 import EmojiPicker from './EmojiPicker/EmojiPicker.vue';
 import ChartFunnel from './ChartFunnel/ChartFunnel.vue';
+import Disclaimer from './Disclaimer/Disclaimer.vue';
+import Drawer from './Drawer/Drawer.vue';
 
 export const components = {
   unnnicFormElement: formElement,
@@ -159,6 +161,8 @@ export const components = {
   unnnicChartMultiLine: ChartMultiLine,
   unnnicEmojiPicker: EmojiPicker,
   unnnicChartFunnel: ChartFunnel,
+  unnnicDisclaimer: Disclaimer,
+  unnnicDrawer: Drawer,
 };
 
 export const unnnicFontSize = fontSize;
@@ -242,3 +246,5 @@ export const unnnicChatsUserAvatar = ChatsUserAvatar;
 export const unnnicChartMultiLine = ChartMultiLine;
 export const unnnicEmojiPicker = EmojiPicker;
 export const unnnicChartFunnel = ChartFunnel;
+export const unnnicDisclaimer = Disclaimer;
+export const unnnicDrawer = Drawer;

package/src/locales/en.json

@@ -11,5 +11,8 @@
   },
   "import_card": {
     "importing": "Importing"
+  },
+  "audio_recorder": {
+    "discard_button" : "Discard"
   }
 }

package/src/locales/es.json

@@ -11,5 +11,8 @@
   },
   "import_card": {
     "importing": "Importando"
+  },
+  "audio_recorder": {
+    "discard_button" : "Descartar"
   }
 }

package/src/locales/pt_br.json

@@ -11,5 +11,8 @@
   },
   "import_card": {
     "importing": "Importando"
+  },
+  "audio_recorder": {
+    "discard_button" : "Descartar"
   }
 }

package/src/mixins/i18n.js

@@ -14,7 +14,20 @@ export default {
     i18n(...args) {
       const [key, defaults] = args;
 
-      const locale = (this.locale || get(this, '$i18n.locale'))?.toLowerCase();
+      const validLocaleValues = Object.keys(this.$i18n.messages);
+
+      let { locale } = this;
+
+      const treatedSelectedLocale =
+        get(this, '$i18n.locale') === 'en-us'
+          ? 'en'
+          : get(this, '$i18n.locale');
+
+      locale = validLocaleValues.includes(locale)
+        ? locale
+        : treatedSelectedLocale;
+
+      locale = locale.toLowerCase();
 
       let text = get(
         this.translations,

package/src/stories/Alert.stories.js

@@ -1,12 +1,15 @@
+import alertCaller from '../components/Alert/AlertCaller.vue';
+import alert from '../utils/call';
 import unnnicAlert from '../components/Alert/Alert.vue';
-import { unnnicCallAlert } from '../components';
+import alertBanner from '../components/Alert/AlertBanner.vue';
 
 export default {
   title: 'example/Alert',
   component: unnnicAlert,
   argTypes: {
-    type: { control: { type: 'text' } },
     text: { control: { type: 'text' } },
+    showCloseButton: { control: { type: 'boolean' } },
+    title: { control: { type: 'text' } },
     closeText: { control: { type: 'text' } },
     scheme: {
       control: {
@@ -55,7 +58,7 @@ export default {
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { unnnicCallAlert },
+  components: { alertCaller, unnnicAlert },
   template: `
 <div>
   <button @click="unnnicCallAlert">Click for alert</button>
@@ -84,21 +87,14 @@ Recommended use:
 </div>`,
   methods: {
     unnnicCallAlert() {
-      unnnicCallAlert({
-        props: {
-          type: 'success',
-          text: 'Alert'
-        },
-        containerRef: this.$refs.divContainer,
-      })
+      alert.callAlert({ props: this.$props, seconds: this.$props.seconds });
     },
-
   },
 });
 
 const TemplateWithContainerRef = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { unnnicCallAlert },
+  components: { alertCaller, unnnicAlert },
   template: `
     <div ref="divContainer" style="height: 200px; position: relative; border: 1px solid black">
       <button @click="unnnicCallAlert">Click for alert</button>
@@ -114,25 +110,55 @@ const TemplateWithContainerRef = (args, { argTypes }) => ({
     </div>`,
   methods: {
     unnnicCallAlert() {
-      unnnicCallAlert({
-        props: {
-          type: 'success',
-          text: 'Alert'
-        },
+      alert.callAlert({
+        props: this.$props,
         containerRef: this.$refs.divContainer,
-      })
+      });
     },
   },
 });
 
+const TemplateBanner = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { alertBanner },
+  template: `
+    <div>
+      <alert-banner v-bind="$props" />
+
+    <pre>
+    Recommended use:
+
+    &lt;unnnic-alert-banner
+      type            String default 'info' ('info', 'warning', 'danger')
+      text            String required
+      showCloseButton Boolean default false
+      @close          Event
+      link-href       String
+      ┠ link-text    String default 'Learn more'
+      ┖ link-target  String default '_blank'
+    /&gt;
+    </pre>
+    </div>`,
+});
+
 export const Normal = Template.bind({});
 Normal.args = {
-  type: 'success',
+  title: 'Title',
   text: 'Text',
+  icon: 'check-circle-1-1',
+  scheme: 'feedback-green',
 };
 
 export const WithContainerRef = TemplateWithContainerRef.bind({});
 WithContainerRef.args = {
-  type: 'error',
+  title: 'Title',
+  text: 'Text',
+  icon: 'check-circle-1-1',
+  scheme: 'feedback-green',
+};
+
+export const Banner = TemplateBanner.bind({});
+Banner.args = {
   text: 'Text',
+  showCloseButton: false,
 };

package/src/stories/AudioRecorder.stories.js

@@ -5,44 +5,40 @@ export default {
   title: 'Form/AudioRecorder',
   component: unnnicAudioRecorder,
   argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicAudioRecorder,
-  },
-
-  data() {
-    return {
-      audio: null,
-      status: '',
-    };
-  },
-
-  template: `
+  render: (args) => ({
+    components: {
+      unnnicAudioRecorder,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        audio: null,
+        status: '',
+      };
+    },
+    template: `
     <div>
       <button @click="$refs['audio-recorder'].record()">Gravar</button>
 
       <pre>v-model: {{ audio }}</pre>
       <pre>status: {{ status }}</pre>
 
-      <unnnic-audio-recorder v-bind="$props" ref="audio-recorder" v-model="audio" @status="(value) => this.status = value" />
+      <unnnic-audio-recorder v-bind="args" ref="audio-recorder" v-model="audio" @status="(value) => this.status = value" />
     </div>
   `,
-
-  methods: {},
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  canDiscard: true,
+  }),
 };
 
-export const Player = Template.bind({});
+export const Default = {
+  args: {
+    canDiscard: true,
+  },
+};
 
-Player.args = {
-  src: AudioSample,
+export const Player = {
+  args: {
+    src: AudioSample,
+  },
 };

package/src/stories/Disclaimer.stories.js

@@ -0,0 +1,37 @@
+import unnnicDisclaimer from '../components/Disclaimer/Disclaimer.vue';
+import icons from '../utils/iconList';
+import colors from '../utils/colorsList';
+
+export default {
+    title: 'Example/Disclaimer',
+    component: unnnicDisclaimer,
+    args: {},
+    argTypes: {
+        text: { control: { type: 'text' } },
+        icon: { options: icons, control: { type: 'select', } },
+        iconColor: { options: colors, control: { type: 'select', } },
+    },
+};
+
+const Template = (args) => ({
+    components: {
+        unnnicDisclaimer,
+    },
+    setup() {
+        return { args };
+    },
+    props: Object.keys(args),
+    template: `
+     <div>
+       <unnnic-disclaimer v-bind="args" />
+     </div>
+    `,
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    icon: 'alert-circle-1-1',
+    iconColor: 'feedback-yellow',
+};

package/src/stories/Drawer.stories.js

@@ -0,0 +1,136 @@
+import unnnicDrawer from '../components/Drawer/Drawer.vue';
+import unnnicButton from '../components/Button/Button.vue';
+
+const primaryButtonTypeOptions = ['primary', 'secondary', 'tertiary', 'alternative', 'warning', 'attention']
+
+export default {
+  title: 'Example/Drawer',
+  component: unnnicDrawer,
+  argTypes: {
+    title: { control: { type: 'text' } },
+    description: { control: { type: 'text' } },
+    primaryButtonType: { options: primaryButtonTypeOptions, control: { type: 'select' } },
+    primaryButtonText: { control: { type: 'text' } },
+    secondaryButtonText: { control: { type: 'text' } },
+    modelValue: { control: { type: 'boolean' } },
+    wide: { control: { type: 'boolean' } },
+  },
+};
+
+const Template = (args) => ({
+  props: Object.keys(args),
+  setup() {
+    return { args }
+  },
+  components: { unnnicDrawer, unnnicButton },
+  data() {
+    return {
+      opened: false,
+    };
+  },
+  methods: {
+    primaryClick() {
+      console.log('primaryClick')
+    },
+    secondaryClick() {
+      console.log('secondaryClick')
+    }
+  },
+  template: `
+  <div>
+    <pre>v-model: {{ opened }}</pre>
+    <button @click="opened = !opened">Change</button>
+    <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false" @primaryButtonClick="primaryClick" @secondaryButtonClick="secondaryClick">
+      <template #content>
+        <p>Conteúdo</p>
+      </template>
+    </unnnic-drawer>
+  </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Title',
+  description: 'Description',
+  primaryButtonText: 'Confirmar',
+  secondaryButtonText: 'Cancelar',
+};
+
+export const Wide = Template.bind({});
+Wide.args = {
+  title: 'Title',
+  description: 'Description',
+  primaryButtonText: 'Confirmar',
+  secondaryButtonText: 'Cancelar',
+  wide: true,
+};
+
+const TemplateOveflowed = (args) => ({
+  props: Object.keys(args),
+  components: { unnnicDrawer, unnnicButton },
+  setup() {
+    return { args }
+  },
+  data() {
+    return {
+      opened: false,
+    };
+  },
+  template: `
+  <div>
+    <pre>v-model: {{ opened }}</pre>
+    <button @click="opened = !opened">Change</button>
+    <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false">
+      <template #content>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+      </template>
+    </unnnic-drawer>
+  </div>
+  `,
+});
+
+export const ContentOverflowed = TemplateOveflowed.bind({});
+ContentOverflowed.args = {
+  title: 'Title',
+  description: 'Description',
+  primaryButtonText: 'Confirmar',
+  secondaryButtonText: 'Cancelar',
+  wide: true,
+};
+
+const TemplateVideo = (args) => ({
+  props: Object.keys(args),
+  components: { unnnicDrawer, unnnicButton },
+  setup() {
+    return { args }
+  },
+  data() {
+    return {
+      opened: false,
+    };
+  },
+  template: `
+  <div>
+    <pre>v-model: {{ opened }}</pre>
+    <button @click="opened = !opened">Change</button>
+    <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false">
+      <template #content>
+        <iframe width="100%" height="315" src="https://www.youtube.com/embed/dD8ENnN-2CI?si=68dJEsG5FdiNaYvY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+      </template>
+    </unnnic-drawer>
+  </div>
+  `,
+});
+
+export const ContentVideo = TemplateVideo.bind({});
+ContentVideo.args = {
+  title: 'Title',
+  description: 'Description',
+  wide: true,
+};