@weni/unnnic-system 1.16.37-develop.0 → 1.16.39-develop.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "1.16.37-develop.0",
+  "version": "1.16.39-develop.0",
   "main": "./dist/unnnic.common.js",
   "files": [
     "dist/*",
@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "lodash": "^4.17.21",
     "mime-types": "^2.1.35",
     "moment": "^2.29.1",
     "v-click-outside": "^3.1.2",
@@ -39,6 +40,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
+    "@babel/eslint-parser": "^7.22.11",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-controls": "^6.5.16",
     "@storybook/addon-docs": "^6.5.16",
@@ -50,7 +52,6 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-airbnb": "^5.0.2",
     "@vue/test-utils": "^1.0.3",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "copy-webpack-plugin": "^6.2.1",
     "eslint": "^6.7.2",

package/src/components/Alert/Alert.vue

@@ -29,7 +29,11 @@
     />
   </div>
 
-  <component v-else :is="'version' + version.replace(/\./g, 'dot')" v-bind="$props"></component>
+  <component
+    v-else :is="'version' + version.replace(/\./g, 'dot')"
+    v-bind="{ ...$props }"
+    @close="$emit('close')"
+  ></component>
 </template>
 
 <script>
@@ -75,6 +79,18 @@ export default {
       type: String,
       default: 'top-right',
     },
+    linkHref: {
+      type: String,
+    },
+    linkTarget: {
+      type: String,
+    },
+    linkText: {
+      type: String,
+    },
+    type: {
+      type: String,
+    },
   },
 };
 </script>

package/src/components/Alert/Version1dot1.vue

@@ -1,47 +1,41 @@
 <template>
-  <div :class="['alert', `alert-position--${position}`]">
-    <unnnic-icon-svg
-      :icon="icon"
-      :scheme="scheme"
-      size="sm"
-    />
-
-    <div class="alert__content">
-      <div class="alert__title">
-        {{ title.toUpperCase() }}
-      </div>
+  <div ref="alertContainer" class="alert-container">
+    <div :class="['alert', {
+      'alert--scheme-aux-green': scheme === 'feedback-green' || type === 'success',
+      'alert--scheme-aux-red': scheme === 'feedback-red' || type === 'error',
+    }]">
+      <div ref="progress" class="alert__progress"></div>
+
       <div v-show="text" class="alert__text">
         {{ text }}
       </div>
-    </div>
 
-    <div
-      v-if="hideCloseText"
-      class="alert__close-text unnnic--clickable"
-      @click="onClose"
-    >
-      {{ closeText.toUpperCase() }}
+      <a v-if="linkHref" class="alert__link" :href="linkHref" :target="linkTarget">
+        {{ linkText }}
+      </a>
+
+      <div
+        class="alert__close"
+        @click="emitClose"
+      >
+        <unnnic-icon icon="close-1" size="sm" scheme="neutral-white" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   components: {
-    UnnnicIconSvg,
+    UnnnicIcon,
   },
   props: {
     version: {
       type: String,
       default: '1.0',
     },
-
-    title: {
-      type: String,
-      default: null,
-    },
     text: {
       type: String,
       default: null,
@@ -50,25 +44,45 @@ export default {
       type: String,
       default: null,
     },
-    icon: {
-      type: String,
-      default: null,
-    },
     onClose: {
       type: Function,
       default: () => {},
     },
-    hideCloseText: {
-      type: Boolean,
-      default: true,
+    linkHref: {
+      type: String,
+      default: '',
+    },
+    linkTarget: {
+      type: String,
+      default: '_blank',
     },
-    closeText: {
+    linkText: {
       type: String,
-      default: 'CLOSE',
+      default: 'Learn more',
     },
-    position: {
+    type: {
       type: String,
-      default: 'top-right',
+      default: 'default',
+    },
+  },
+
+  mounted() {
+    this.$refs.progress.addEventListener('animationend', () => {
+      this.$refs.alertContainer.classList.add('slide-down');
+    });
+
+    this.$refs.alertContainer.addEventListener('animationend', (event) => {
+      if (event.animationName.startsWith('slideDown')) {
+        this.emitClose();
+      }
+    });
+  },
+
+  methods: {
+    emitClose() {
+      this.onClose();
+
+      this.$emit('close');
     },
   },
 };
@@ -77,69 +91,144 @@ export default {
 <style lang="scss" scoped>
 @import '../../assets/scss/unnnic.scss';
 
-.alert {
+.alert-container {
   position: fixed;
-  padding: $unnnic-inset-xs;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  animation: slideUp 200ms ease;
+
+  @keyframes slideUp {
+    from {
+      bottom: -3.375 * $unnnic-font-size;
+    }
+
+    to {
+      bottom: 0;
+    }
+  }
+
+  &.slide-down {
+    animation-name: slideDown;
+  }
+
+  @keyframes slideDown {
+    from {
+      bottom: 0;
+    }
+
+    to {
+      bottom: -3.375 * $unnnic-font-size;
+    }
+  }
+}
+
+.alert {
+  position: relative;
+  border-radius: $unnnic-border-radius-sm;
 
   display: inline-flex;
   align-items: center;
+  margin-bottom: $unnnic-spacing-sm;
 
+  color: $unnnic-color-neutral-white;
   font-family: $unnnic-font-family-secondary;
-  border-radius: $unnnic-border-radius-sm;
+  font-size: $unnnic-font-size-body-gt;
+  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+  font-weight: $unnnic-font-weight-regular;
 
-  background-color: $unnnic-color-background-snow;
-  box-shadow: $unnnic-shadow-level-near;
-  position: fixed;
+  background-color: $unnnic-color-neutral-dark;
 
   z-index: 9999;
 
-  &-position {
-    &--top-right {
-      top: 1 * $unnnic-font-size;
-      right: 1 * $unnnic-font-size;
-    }
-    &--top-left {
-      top: 1 * $unnnic-font-size;
-      left: 1 * $unnnic-font-size;
-    }
-    &--bottom-right {
-      bottom: 1 * $unnnic-font-size;
-      right: 1 * $unnnic-font-size;
+  overflow: hidden;
+
+  @keyframes progress {
+    from {
+      width: 0;
     }
-    &--bottom-left {
-      bottom: 1 * $unnnic-font-size;
-      left: 1 * $unnnic-font-size;
+
+    to {
+      width: 100%;
     }
   }
 
-  &__content {
-    flex: 1;
-    margin:0 $unnnic-inline-xs;
+  &__progress {
+    position: absolute;
+    height: 100%;
+    background-color: $unnnic-color-neutral-darkest;
+    border-radius: $unnnic-border-radius-sm;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    z-index: -1;
+    animation-name: progress;
+    animation-duration: 5000ms;
+    animation-timing-function: linear;
   }
 
-  &__title {
-    color: $unnnic-color-neutral-darkest;
-    font-size: $unnnic-font-size-body-md;
-    font-family: $unnnic-font-family-secondary;
-    line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-    font-weight: $unnnic-font-weight-bold;
+  &:hover {
+    .alert__progress {
+      animation-play-state: paused;
+    }
   }
 
   &__text {
-    color: $unnnic-color-neutral-dark;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-    font-weight: $unnnic-font-weight-regular;
+    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
+  }
+
+  &__link, &__close {
+    border-left: $unnnic-border-width-thinner solid $unnnic-color-neutral-cloudy;
+
+    &:hover {
+      background-color: $unnnic-color-neutral-cloudy;
+    }
+  }
+
+  &__link {
+    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
+    text-decoration: none;
+    color: inherit;
+    display: block;
+    font-weight: $unnnic-font-weight-bold;
   }
 
   &__close {
-    &-text {
-      color: $unnnic-color-brand-sec;
-      font-size: $unnnic-font-size-body-md;
-      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-      font-weight: $unnnic-font-weight-regular;
+    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  &--scheme-aux-green {
+    background-color: $unnnic-color-aux-green-500;
+
+    .alert__progress {
+      background-color: $unnnic-color-aux-green-700;
+    }
+
+    .alert__link, .alert__close {
+      border-left: $unnnic-border-width-thinner solid $unnnic-color-aux-green-300;
+
+      &:hover {
+        background-color: $unnnic-color-aux-green-300;
+      }
+    }
+  }
+
+  &--scheme-aux-red {
+    background-color: $unnnic-color-aux-red-500;
+
+    .alert__progress {
+      background-color: $unnnic-color-aux-red-700;
+    }
+
+    .alert__link, .alert__close {
+      border-left: $unnnic-border-width-thinner solid $unnnic-color-aux-red-300;
 
-      margin-left: $unnnic-inline-xs;
+      &:hover {
+        background-color: $unnnic-color-aux-red-300;
+      }
     }
   }
 }

package/src/components/ChatsContact/ChatsContact.vue

@@ -0,0 +1,263 @@
+<template>
+  <div
+    class="contact"
+    ref="transitionContainer"
+    :class="{
+      selected,
+      disabled,
+      'unread-messages': unreadMessages,
+      waiting: waitingTime,
+    }"
+    @click="$emit('click')"
+    @keypress.enter="$emit('click')"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+    @mousedown="
+      (event) => {
+        this.$refs.transitionRipple.addRipple(event);
+      }
+    "
+    :tabindex="0"
+  >
+    <user-avatar
+      :username="username"
+      :photo-url="userPhoto"
+      :active="isHovered || selected"
+    />
+
+    <div class="contact__infos">
+      <h1
+        class="contact__infos__username ellipsis"
+        :title="username"
+        :class="{ bold: unreadMessages }"
+      >
+        {{ username }}
+      </h1>
+      <div class="contact__infos__additional-information" :class="{ bold: unreadMessages }">
+        <p v-if="waitingTime !== 0" class="ellipsis">
+          {{ i18n('waiting_for', waitingTime, { waitingTime }) }}
+        </p>
+        <p v-else-if="lastMessage" class="ellipsis" :title="lastMessage">
+          {{ lastMessage }}
+        </p>
+      </div>
+    </div>
+
+    <span
+      v-if="!selected && unreadMessages"
+      class="contact__infos__unread-messages"
+      :title="i18n('unread_messages', unreadMessages, { unreadMessages })"
+    >
+      {{ unreadMessages }}
+    </span>
+    <transition-ripple ref="transitionRipple" color="weni-500" />
+  </div>
+</template>
+
+<script>
+import UserAvatar from '../ChatsUserAvatar/ChatsUserAvatar.vue';
+import TransitionRipple from '../TransitionRipple/TransitionRipple.vue';
+import UnnnicI18n from '../../mixins/i18n';
+
+export default {
+  name: 'ChatsContact',
+
+  mixins: [UnnnicI18n],
+
+  components: {
+    UserAvatar,
+    TransitionRipple,
+  },
+
+  props: {
+    username: {
+      type: String,
+      default: '',
+      required: true,
+    },
+    lastMessage: {
+      type: String,
+      default: '',
+    },
+    userPhoto: {
+      type: String,
+      default: '',
+    },
+    waitingTime: {
+      type: Number,
+      default: 0,
+    },
+    unreadMessages: {
+      type: Number,
+      default: 0,
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      isHovered: false,
+
+      defaultTranslations: {
+        waiting_for: {
+          'pt-br': 'Aguardando há 1 minuto | Aguardando há {waitingTime} minutos',
+          en: '1 minute waiting | {waitingTime} minutes waiting',
+          es: 'Esperando por un minuto | Esperando por {waitingTime} minutos',
+        },
+        unread_messages: {
+          'pt-br': '{unreadMessages} mensagens não lidas',
+          en: '{unreadMessages} unread messages',
+          es: '{unreadMessages} mensajes no leídos',
+        },
+      },
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+.contact {
+  display: grid;
+  grid-template-columns: max-content 1fr min-content;
+  align-items: center;
+  gap: $unnnic-spacing-xs;
+
+  background-color: $unnnic-color-background-white;
+  border-radius: $unnnic-border-radius-sm;
+  font-family: $unnnic-font-family-secondary;
+
+  padding: $unnnic-spacing-xs;
+
+  cursor: pointer;
+
+  &:focus-visible {
+    outline-color: $unnnic-color-weni-600;
+    outline-style: solid;
+    outline-width: 1px;
+  }
+
+  * {
+    margin: 0;
+  }
+
+  &.selected {
+    background-color: $unnnic-color-weni-50;
+  }
+
+  &.waiting {
+    background-color: $unnnic-color-neutral-lightest;
+
+    &:hover {
+      background-color: $unnnic-color-neutral-light;
+    }
+
+    .contact__infos__unread-messages {
+      background: $unnnic-color-background-white;
+    }
+  }
+
+  &.unread-messages {
+    .username {
+      color: $unnnic-color-neutral-darkest;
+      font-weight: $unnnic-font-weight-bold;
+    }
+
+    .additional-information {
+      color: $unnnic-color-neutral-cloudy;
+      font-weight: $unnnic-font-weight-bold;
+    }
+  }
+
+  &.disabled {
+    .content {
+      .username {
+        color: $unnnic-color-neutral-cleanest;
+      }
+
+      .additional-information {
+        color: $unnnic-color-neutral-lightest;
+      }
+    }
+
+    .unread-messages {
+      color: $unnnic-color-neutral-cleanest;
+    }
+  }
+
+  &:hover,
+  &.selected:hover {
+    background-color: $unnnic-color-neutral-lightest;
+
+    .contact__infos {
+      &__unread-messages {
+        background: $unnnic-color-background-white;
+      }
+    }
+  }
+
+  &__infos {
+    margin-right: auto;
+
+    display: flex;
+    flex-flow: column wrap;
+
+    width: 100%;
+    overflow: hidden;
+
+    &__username,
+    &__additional-information {
+      font-size: $unnnic-font-size-body-gt;
+      line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
+    }
+
+    &__username {
+      color: $unnnic-color-neutral-darkest;
+    }
+
+    &__additional-information {
+      width: 100%; // important to ellipsis work
+
+      color: $unnnic-color-neutral-cloudy;
+    }
+
+    &__unread-messages {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      border-radius: 50%;
+      background: $unnnic-color-background-grass;
+
+      width: 1.25rem;
+      min-width: 1.25rem;
+      height: 1.25rem;
+
+      font-size: $unnnic-font-size-body-md;
+      font-weight: $unnnic-font-weight-bold;
+      line-height: $unnnic-line-height-small;
+      color: $unnnic-color-weni-800;
+    }
+
+    .ellipsis {
+      width: 100%;
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .bold {
+      font-weight: $unnnic-font-weight-bold;
+    }
+  }
+}
+</style>

package/src/components/{NavbarChats/NavbarChats.vue → ChatsNavbar/ChatsNavbar.vue}

@@ -1,10 +1,10 @@
 <template>
-  <nav class="unnnic-navbar-chats">
-    <ol class="unnnic-navbar-chats__list">
+  <nav class="unnnic-chats-navbar">
+    <ol class="unnnic-chats-navbar__list">
       <li v-for="(link, index) in links" :key="link.icon + index">
         <a
           :class="[
-            'unnnic-navbar-chats__link',
+            'unnnic-chats-navbar__link',
             'unnnic--clickable',
             { selected: isSelected(link) },
           ]"
@@ -30,7 +30,7 @@
 import UnnnicIcon from '../Icon.vue';
 
 export default {
-  name: 'unnnic-navbar-chats',
+  name: 'unnnic-chats-navbar',
 
   components: {
     UnnnicIcon,
@@ -102,7 +102,7 @@ export default {
 <style lang="scss">
 @import '../../assets/scss/unnnic.scss';
 
-.unnnic-navbar-chats {
+.unnnic-chats-navbar {
   width: 100vw;
   max-width: 100%;