@weni/unnnic-system 2.0.0 → 2.0.2

package/src/components/ChartRainbow/ChartRainbow.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="unnnic-chart-rainbow">
-    <svg width="332" height="166" class="semicircle">
+    <svg
+      width="332"
+      height="166"
+      class="semicircle"
+    >
       <defs xmlns="http://www.w3.org/2000/svg">
         <linearGradient
           id="paint0_linear_10224_36584"
@@ -10,8 +14,12 @@
           y2="198"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#00DED2"/>
-          <stop offset="1" stop-color="#00DED2" stop-opacity="0"/>
+          <stop stop-color="#00DED2" />
+          <stop
+            offset="1"
+            stop-color="#00DED2"
+            stop-opacity="0"
+          />
         </linearGradient>
       </defs>
 
@@ -22,8 +30,7 @@
         ref="background"
         class="background"
         stroke-width="26.56px"
-      >
-      </path>
+      ></path>
 
       <path
         id="path"
@@ -32,16 +39,21 @@
         ref="front"
         class="front"
         stroke-width="26.56px"
-      >
-      </path>
+      ></path>
     </svg>
 
     <div class="content">
       <div class="percentage">
-        <span class="number">{{ value }}</span><span class="symbol">%</span>
+        <span class="number">{{ value }} </span>
+        <span class="symbol">%</span>
       </div>
 
-      <div v-if="description" class="description">{{ description }}</div>
+      <div
+        v-if="description"
+        class="description"
+      >
+        {{ description }}
+      </div>
     </div>
   </div>
 </template>
@@ -61,52 +73,81 @@ export default {
     },
   },
 
-  mounted() {
-    function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
-      const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+  watch: {
+    value() {
+      this.updateChartSvg();
+    },
+  },
 
-      return {
-        x: centerX + radius * Math.cos(angleInRadians),
-        y: centerY + radius * Math.sin(angleInRadians),
-      };
-    }
+  mounted() {
+    this.updateChartSvg();
+  },
 
-    function describeArc(x, y, innerRadius, outerRadius, startAngle, endAngle) {
-      const radius = innerRadius;
-      const spread = outerRadius - innerRadius;
-      const outerStart = polarToCartesian(x, y, radius + spread, endAngle);
-      const outerEnd = polarToCartesian(x, y, radius + spread, startAngle);
-
-      const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-
-      const d = [
-        'M',
-        outerStart.x,
-        outerStart.y,
-        'A',
-        radius + spread,
-        radius + spread,
-        0,
-        largeArcFlag,
-        0,
-        outerEnd.x,
-        outerEnd.y,
-      ].join(' ');
-
-      return d;
-    }
+  methods: {
+    updateChartSvg() {
+      function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+        const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
 
-    const path = describeArc(166, 166, 139.44, 152.72, -85, 85);
+        return {
+          x: centerX + radius * Math.cos(angleInRadians),
+          y: centerY + radius * Math.sin(angleInRadians),
+        };
+      }
 
-    this.$refs.background.setAttribute('d', path);
+      function describeArc(
+        x,
+        y,
+        innerRadius,
+        outerRadius,
+        startAngle,
+        endAngle,
+      ) {
+        const radius = innerRadius;
+        const spread = outerRadius - innerRadius;
+        const outerStart = polarToCartesian(x, y, radius + spread, endAngle);
+        const outerEnd = polarToCartesian(x, y, radius + spread, startAngle);
+
+        const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+
+        const d = [
+          'M',
+          outerStart.x,
+          outerStart.y,
+          'A',
+          radius + spread,
+          radius + spread,
+          0,
+          largeArcFlag,
+          0,
+          outerEnd.x,
+          outerEnd.y,
+        ].join(' ');
+
+        return d;
+      }
 
-    this.$refs.front.setAttribute('d', describeArc(166, 166, 139.44, 152.72, -85, -85 + ((this.value / 100) * 170)));
+      const path = describeArc(166, 166, 139.44, 152.72, -85, 85);
+
+      this.$refs.background.setAttribute('d', path);
+
+      this.$refs.front.setAttribute(
+        'd',
+        describeArc(
+          166,
+          166,
+          139.44,
+          152.72,
+          -85,
+          -85 + (this.value / 100) * 170,
+        ),
+      );
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-chart-rainbow {
   position: relative;
@@ -148,7 +189,7 @@ export default {
     }
 
     .description {
-      color: $unnnic-color-neutral-clean;
+      color: $unnnic-color-neutral-cleanest;
       font-family: $unnnic-font-family-secondary;
       font-size: $unnnic-font-size-body-lg;
       line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;

package/src/components/ChatText/ChatText.vue

@@ -4,23 +4,35 @@
       <div :class="['title', titleColor]">
         {{ title }}
 
-        <unnnic-tool-tip v-if="info" side="top" :text="info" enabled>
-          <unnnic-icon
-            class="info"
-            icon="information-circle-4"
+        <UnnnicToolTip
+          v-if="info"
+          side="top"
+          class="info"
+          :text="info"
+          enabled
+        >
+          <UnnnicIcon
+            class="info__icon"
+            icon="info"
             size="sm"
             scheme="neutral-clean"
-          ></unnnic-icon>
-        </unnnic-tool-tip>
+          ></UnnnicIcon>
+        </UnnnicToolTip>
       </div>
 
       <slot name="actions" />
     </div>
 
-    <div class="description" ref="description">
+    <div
+      class="description"
+      ref="description"
+    >
       <slot name="description" />
 
-      <div v-if="isScrollable" class="scrollable-gradient"></div>
+      <div
+        v-if="isScrollable"
+        class="scrollable-gradient"
+      ></div>
     </div>
   </div>
 </template>
@@ -62,8 +74,8 @@ export default {
   },
 
   mounted() {
-    const
-      areaScrollable = this.$refs.description.scrollHeight - this.$refs.description.offsetHeight;
+    const areaScrollable =
+      this.$refs.description.scrollHeight - this.$refs.description.offsetHeight;
 
     this.isScrollable = areaScrollable;
   },
@@ -71,7 +83,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-chat-text {
   border-radius: $unnnic-border-radius-lg;
@@ -91,6 +103,8 @@ export default {
     justify-content: space-between;
 
     .title {
+      display: flex;
+
       font-family: $unnnic-font-family-secondary;
       font-weight: $unnnic-font-weight-black;
       font-size: $unnnic-font-size-body-gt;
@@ -98,7 +112,13 @@ export default {
       flex: 1;
 
       .info {
-        margin-left: $unnnic-spacing-inline-nano;
+        display: flex;
+        align-items: center;
+
+        &__icon {
+          margin-left: $unnnic-spacing-inline-nano;
+          cursor: default;
+        }
       }
 
       @each $name, $color in $scheme-colors {
@@ -119,13 +139,19 @@ export default {
     position: relative;
 
     .intent {
-      background-color: rgba($unnnic-color-aux-purple, $unnnic-opacity-level-light);
-      padding: $unnnic-line-height-md / 2 0;
+      background-color: rgba(
+        $unnnic-color-aux-purple,
+        $unnnic-opacity-level-light
+      );
+      padding: calc($unnnic-line-height-md / 2) 0;
     }
 
     .scrollable-gradient {
       position: absolute;
-      background-image: linear-gradient(transparent, $unnnic-color-background-snow);
+      background-image: linear-gradient(
+        transparent,
+        $unnnic-color-background-snow
+      );
       width: 100%;
       height: 5 * $unnnic-font-size;
       bottom: 0;

package/src/components/ChatsContact/ChatsContact.vue

@@ -0,0 +1,332 @@
+<template>
+  <div
+    class="chats-contact"
+    ref="transitionContainer"
+    :class="{
+      selected,
+      disabled,
+      'unread-messages': unreadMessages,
+      waiting: waitingTime && !discussionGoal,
+    }"
+    @click="$emit('click')"
+    @keypress.enter="$emit('click')"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+    @mousedown="
+      (event) => {
+        this.$refs.transitionRipple.addRipple(event);
+      }
+    "
+    :tabindex="0"
+  >
+    <div
+      v-if="discussionGoal"
+      class="chats-contact__discussion-icon"
+    >
+      <UnnnicIcon
+        icon="forum"
+        scheme="weni-50"
+      />
+    </div>
+    <UserAvatar
+      v-else
+      :username="title"
+      :photoUrl="userPhoto"
+      :active="isHovered || selected"
+    />
+
+    <div class="chats-contact__infos">
+      <h1
+        class="chats-contact__infos__title ellipsis"
+        :title="title"
+        :class="{ bold: unreadMessages }"
+      >
+        {{ title }}
+      </h1>
+      <div
+        class="chats-contact__infos__additional-information"
+        :class="{ bold: unreadMessages || (checkboxWhenSelect && selected) }"
+      >
+        <p
+          v-if="waitingTime !== 0 && !discussionGoal"
+          class="ellipsis"
+        >
+          {{ i18n('waiting_for', waitingTime, { waitingTime }) }}
+        </p>
+        <p
+          v-else-if="subtitle"
+          class="ellipsis"
+          :title="subtitle"
+        >
+          {{ subtitle }}
+        </p>
+      </div>
+    </div>
+
+    <span
+      v-if="!selected && unreadMessages"
+      class="chats-contact__infos__unread-messages"
+      :title="i18n('unread_messages', unreadMessages, { unreadMessages })"
+    >
+      {{ unreadMessages }}
+    </span>
+    <Checkbox
+      v-else-if="selected && checkboxWhenSelect"
+      class="chats-contact__infos__checkbox"
+      :modelValue="true"
+    />
+    <TransitionRipple
+      ref="transitionRipple"
+      color="weni-500"
+    />
+  </div>
+</template>
+
+<script>
+import UserAvatar from '../ChatsUserAvatar/ChatsUserAvatar.vue';
+import UnnnicIcon from '../Icon.vue';
+import TransitionRipple from '../TransitionRipple/TransitionRipple.vue';
+import UnnnicI18n from '../../mixins/i18n';
+import Checkbox from '../Checkbox/Checkbox.vue';
+
+export default {
+  name: 'ChatsContact',
+
+  mixins: [UnnnicI18n],
+
+  components: {
+    UserAvatar,
+    UnnnicIcon,
+    TransitionRipple,
+    Checkbox,
+  },
+
+  props: {
+    title: {
+      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,
+    },
+    checkboxWhenSelect: {
+      type: Boolean,
+      default: false,
+    },
+    discussionGoal: {
+      type: String,
+      default: '',
+    },
+  },
+
+  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',
+        },
+        discussion_about: {
+          'pt-br': 'Discussão sobre {discussionGoal}',
+          en: 'Discussion about {discussionGoal}',
+          es: 'Discusión sobre {discussionGoal}',
+        },
+      },
+    };
+  },
+
+  computed: {
+    subtitle() {
+      const { discussionGoal, lastMessage } = this;
+      return discussionGoal
+        ? this.i18n('discussion_about', discussionGoal, { discussionGoal })
+        : lastMessage;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+.chats-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;
+    }
+
+    .chats-contact__infos__unread-messages {
+      background: $unnnic-color-background-white;
+    }
+  }
+
+  &.unread-messages {
+    .title {
+      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 {
+      .title {
+        color: $unnnic-color-neutral-cleanest;
+        font-weight: $unnnic-font-weight-bold;
+      }
+
+      .additional-information {
+        color: $unnnic-color-neutral-lightest;
+      }
+    }
+
+    .unread-messages {
+      color: $unnnic-color-neutral-cleanest;
+    }
+  }
+
+  &:hover,
+  &.selected:hover {
+    background-color: $unnnic-color-neutral-lightest;
+
+    .chats-contact__infos {
+      &__unread-messages {
+        background: $unnnic-color-background-white;
+      }
+    }
+  }
+
+  &__discussion-icon {
+    width: $unnnic-icon-size-xl;
+    height: $unnnic-icon-size-xl;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $unnnic-border-radius-sm;
+
+    background-color: $unnnic-color-aux-purple-500;
+  }
+
+  &__infos {
+    margin-right: auto;
+
+    display: flex;
+    flex-flow: column wrap;
+
+    width: 100%;
+    overflow: hidden;
+
+    &__title,
+    &__additional-information {
+      font-size: $unnnic-font-size-body-gt;
+      line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
+    }
+
+    &__title {
+      font-weight: $unnnic-font-weight-bold;
+      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/ChatsDashboardTagLive/ChatsDashboardTagLive.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="unnnic-chats-dashboard-tag-live">
+    <UnnnicIcon
+      class="unnnic-chats-dashboard-tag-live__indicator"
+      icon="indicator"
+      scheme="aux-green-300"
+    />
+    <p class="unnnic-chats-dashboard-tag-live__text">{{ i18n('live') }}</p>
+  </div>
+</template>
+
+<script>
+import UnnnicI18n from '../../mixins/i18n';
+
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  name: 'UnnnicChatsDashboardTagLive',
+
+  mixins: [UnnnicI18n],
+
+  components: {
+    UnnnicIcon,
+  },
+
+  data() {
+    return {
+      defaultTranslations: {
+        live: {
+          'pt-br': 'Ao vivo',
+          en: 'Live',
+          es: 'En vivo',
+        },
+      },
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/unnnic.scss';
+
+.unnnic-chats-dashboard-tag-live {
+  padding: $unnnic-spacing-ant;
+
+  display: inline-flex;
+  align-items: center;
+  gap: $unnnic-spacing-ant;
+
+  border-radius: $unnnic-border-radius-sm;
+  background-color: $unnnic-color-neutral-lightest;
+
+  color: $unnnic-color-neutral-dark;
+  font-family: $unnnic-font-family-secondary;
+
+  &__indicator {
+    .primary {
+      animation: ease-in-out pulse 2s infinite;
+    }
+
+    @keyframes pulse {
+      0% {
+        fill: $unnnic-color-neutral-soft;
+      }
+
+      50% {
+        fill: $unnnic-color-aux-green-300;
+      }
+
+      100% {
+        fill: $unnnic-color-neutral-soft;
+      }
+    }
+  }
+
+  &__text {
+    margin: 0;
+
+    font-size: $unnnic-font-size-body-gt;
+  }
+}
+</style>