@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/ChatsHeader/ChatsHeader.vue

@@ -0,0 +1,320 @@
+<template>
+  <div
+    class="unnnic-chats-header__container"
+    :class="[size]"
+  >
+    <header
+      class="unnnic-chats-header"
+      :class="{ contact: !!avatarName }"
+    >
+      <div
+        class="unnnic-chats-header__topbar"
+        v-if="!avatarName"
+      >
+        <UnnnicBreadcrumb
+          :crumbs="crumbs"
+          @crumbClick="(crumb) => $emit('crumbClick', crumb)"
+        />
+        <UnnnicButton
+          v-if="close"
+          @click="close"
+          type="tertiary"
+          iconCenter="close-1"
+          size="small"
+        />
+      </div>
+      <main class="unnnic-chats-header__main">
+        <UnnnicButton
+          v-if="back"
+          class="unnnic-chats-header__main__back"
+          type="tertiary"
+          size="small"
+          iconCenter="keyboard-arrow-left-1"
+          @click="back"
+        />
+        <section class="unnnic-chats-header__infos">
+          <UnnnicChatsUserAvatar
+            v-if="avatarName"
+            :clickable="!!avatarClick"
+            :username="avatarName"
+            @click="avatarClick ? avatarClick() : () => {}"
+          />
+          <div
+            v-else
+            :class="{ clickable: !!avatarClick }"
+            @click="avatarClick ? avatarClick() : () => {}"
+          >
+            <UnnnicAvatarIcon
+              :scheme="sectionIconScheme"
+              class="unnnic-chats-header__avatar-icon"
+              size="sm"
+              :icon="avatarIcon"
+            />
+          </div>
+
+          <hgroup class="unnnic-chats-header__infos__title">
+            <h1
+              :class="{ clickable: !!titleClick }"
+              @click="titleClick ? titleClick() : () => {}"
+            >
+              {{ title }}
+            </h1>
+            <h2 v-if="subtitle">
+              {{ subtitle }}
+            </h2>
+          </hgroup>
+        </section>
+        <div class="unnnic-chats-header__slot">
+          <slot />
+        </div>
+      </main>
+      <UnnnicButton
+        v-if="close"
+        class="unnnic-chats-header__close--sm"
+        @click="close"
+        type="tertiary"
+        iconCenter="close-1"
+        size="small"
+      />
+    </header>
+  </div>
+</template>
+<script>
+import UnnnicI18n from '../../mixins/i18n';
+
+import UnnnicButton from '../Button/Button.vue';
+import UnnnicAvatarIcon from '../AvatarIcon/AvatarIcon.vue';
+import UnnnicChatsUserAvatar from '../ChatsUserAvatar/ChatsUserAvatar.vue';
+import UnnnicBreadcrumb from '../Breadcrumb/Breadcrumb.vue';
+
+export default {
+  name: 'UnnnicChatsHeader',
+
+  mixins: [UnnnicI18n],
+
+  components: {
+    UnnnicButton,
+    UnnnicAvatarIcon,
+    UnnnicChatsUserAvatar,
+    UnnnicBreadcrumb,
+  },
+
+  props: {
+    title: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    sectionIconScheme: {
+      type: String,
+      default: 'aux-purple',
+    },
+    avatarIcon: {
+      type: String,
+      default: '',
+    },
+    avatarName: {
+      type: String,
+      default: '',
+    },
+    back: {
+      type: Function,
+      required: false,
+    },
+    close: {
+      type: Function,
+      required: false,
+    },
+    avatarClick: {
+      type: Function,
+      required: false,
+    },
+    titleClick: {
+      type: Function,
+      required: false,
+    },
+    crumbs: {
+      type: Array,
+      default: () => [],
+    },
+    size: {
+      type: String,
+      default: 'auto',
+      validator(size) {
+        return ['auto', 'small', 'large'].includes(size);
+      },
+    },
+  },
+};
+</script>
+<style lang="scss">
+@import '../../assets/scss/unnnic.scss';
+.unnnic-chats-header {
+  padding: $unnnic-spacing-sm;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  box-shadow:
+    inset 0 -1px 0 $unnnic-color-neutral-light,
+    $unnnic-shadow-level-far;
+  background-color: $unnnic-color-background-white;
+
+  font-family: $unnnic-font-family-secondary;
+
+  &__topbar {
+    display: none;
+  }
+
+  &__close--sm {
+    display: initial;
+  }
+
+  &__slot {
+    display: none;
+  }
+
+  &.contact {
+    gap: $unnnic-spacing-nano;
+  }
+
+  &__main {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr auto;
+    gap: $unnnic-spacing-nano;
+
+    &__back {
+      cursor: pointer;
+    }
+  }
+
+  &__infos {
+    display: flex;
+    gap: $unnnic-spacing-ant;
+
+    color: $unnnic-color-neutral-dark;
+
+    user-select: none;
+
+    * {
+      margin: 0;
+    }
+
+    .unnnic-avatar-icon {
+      height: fit-content;
+    }
+
+    &__title {
+      display: grid;
+      align-items: center;
+
+      h1,
+      h2 {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      h1 {
+        font-size: $unnnic-font-size-body-lg;
+        line-height: $unnnic-font-size-body-lg + $unnnic-line-height-medium;
+        font-weight: $unnnic-font-weight-bold;
+      }
+
+      h2 {
+        font-size: $unnnic-font-size-body-gt;
+        line-height: $unnnic-font-size-body-lg;
+        font-weight: $unnnic-font-weight-regular;
+      }
+    }
+  }
+
+  .clickable {
+    cursor: pointer;
+  }
+}
+
+.unnnic-chats-header__container {
+  @mixin header-large-styles {
+    .unnnic-chats-header {
+      &:not(.contact) {
+        padding: $unnnic-spacing-md;
+
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: $unnnic-spacing-md;
+
+        box-shadow: none;
+        box-shadow: inset 0 -1px 0 $unnnic-color-neutral-soft;
+
+        .unnnic-chats-header__infos__title {
+          h1 {
+            font-size: $unnnic-font-size-title-md;
+            line-height: $unnnic-font-size-body-lg + $unnnic-line-height-medium;
+            font-weight: $unnnic-font-weight-regular;
+          }
+
+          h2 {
+            font-size: $unnnic-font-size-body-gt;
+            line-height: $unnnic-font-size-body-lg + $unnnic-line-height-small;
+          }
+        }
+
+        .unnnic-chats-header__avatar-icon .unnnic-icon {
+          width: $unnnic-icon-size-lg;
+          height: $unnnic-icon-size-lg;
+        }
+
+        .unnnic-chats-header__slot {
+          display: initial;
+        }
+      }
+
+      &__close--sm {
+        display: none;
+      }
+
+      &.contact {
+        box-shadow: $unnnic-shadow-level-far;
+
+        .unnnic-chats-header__close--sm {
+          display: initial;
+        }
+      }
+
+      &__main__back {
+        display: none;
+      }
+
+      &__topbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .unnnic-breadcrumb__container__link {
+          font-size: $unnnic-font-size-body-gt;
+        }
+      }
+    }
+  }
+
+  &.large {
+    @include header-large-styles;
+  }
+
+  &.auto {
+    container-type: inline-size;
+
+    @container (min-width: 600px) {
+      @include header-large-styles;
+    }
+  }
+}
+</style>

package/src/components/ChatsMessage/ChatsMessage.vue

@@ -0,0 +1,318 @@
+<template>
+  <div
+    class="unnnic-chats-message"
+    :class="{
+      sent: type === 'sent',
+      sending: status === 'sending',
+      'is-document': isDocument,
+      'is-media': isMedia,
+      'is-image': isImage,
+      'is-video': isVideo,
+    }"
+  >
+    <p
+      v-if="signature"
+      class="unnnic-chats-message__signature"
+    >
+      {{ signature }}
+    </p>
+    <main
+      class="unnnic-chats-message__main"
+      :class="{
+        'is-document': isDocument,
+        'is-media': isMedia,
+        'is-image': isImage,
+        'is-video': isVideo,
+      }"
+    >
+      <UnnnicChatsMessageText
+        v-if="isText"
+        :text="slotText"
+      />
+      <div
+        v-if="isDocument"
+        class="unnnic-chats-message__document"
+      >
+        <UnnnicIconLoading
+          v-if="status === 'sending'"
+          scheme="neutral-dark"
+          size="lg"
+        />
+        <UnnnicIcon
+          v-else-if="status === 'failed'"
+          icon="upload"
+          scheme="neutral-dark"
+          size="lg"
+        />
+        <UnnnicIcon
+          v-else
+          icon="article"
+          scheme="neutral-dark"
+          size="lg"
+        />
+        <p
+          class="unnnic-chats-message__document__text"
+          @click="$emit('click')"
+        >
+          {{ documentName }}
+        </p>
+      </div>
+      <div
+        v-else-if="isMedia"
+        class="unnnic-chats-message__media__container"
+        :class="{ failed: failedToSendMedia }"
+        @click="$emit('click-image')"
+      >
+        <slot />
+        <UnnnicChatsMessageStatusBackdrop
+          v-if="(sendingMedia || failedToSendMedia) && (isImage || isVideo)"
+          :status="status"
+          @click="status === 'failed' ? $emit('click') : () => {}"
+        />
+      </div>
+      <UnnnicIconLoading
+        v-if="sendingMedia"
+        size="avatar-nano"
+        scheme="neutral-dark"
+      />
+      <p
+        v-else
+        class="unnnic-chats-message__time"
+      >
+        {{ formattedTime }}
+      </p>
+    </main>
+  </div>
+</template>
+
+<script>
+import UnnnicChatsMessageStatusBackdrop from './ChatsMessageStatusBackdrop.vue';
+import UnnnicChatsMessageText from './ChatsMessageText.vue';
+import UnnnicIconLoading from '../IconLoading/IconLoading.vue';
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  name: 'UnnnicChatsMessage',
+  components: {
+    UnnnicChatsMessageText,
+    UnnnicChatsMessageStatusBackdrop,
+    UnnnicIconLoading,
+    UnnnicIcon,
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'received',
+      validate(type) {
+        return ['received', 'sent'].includes(type);
+      },
+    },
+    time: {
+      type: Date,
+      default: null,
+      required: true,
+    },
+    signature: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    documentName: {
+      type: String,
+      default: '',
+    },
+    status: {
+      type: String,
+      default: 'sent',
+      validate(status) {
+        return ['sending', 'sent', 'failed'].includes(status);
+      },
+    },
+    mediaType: {
+      type: String,
+      default: '',
+      validate(status) {
+        return ['audio', 'image', 'video'].includes(status);
+      },
+    },
+  },
+
+  computed: {
+    formattedTime() {
+      const date = new Date(this.time);
+      const hours = date.getHours();
+      let minutes = date.getMinutes();
+
+      if (minutes < 10) {
+        minutes = `0${minutes}`;
+      }
+
+      const formattedTime = `${hours}:${minutes}`;
+      return formattedTime;
+    },
+    isMedia() {
+      return !!this.mediaType;
+    },
+    isDocument() {
+      return !!this.documentName;
+    },
+    isText() {
+      return !this.isMedia && !this.isDocument;
+    },
+    isImage() {
+      return this.isMedia && this.mediaType === 'image';
+    },
+    isVideo() {
+      return this.isMedia && this.mediaType === 'video';
+    },
+    slotText() {
+      return (
+        this.$slots?.default?.()?.[0]?.children ||
+        this.$slots?.text?.()?.[0]?.children ||
+        ''
+      );
+    },
+    sendingMedia() {
+      return this.isMedia && this.status === 'sending';
+    },
+    failedToSendMedia() {
+      return (this.isImage || this.isVideo) && this.status === 'failed';
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/unnnic.scss';
+
+$defaultLineHeight: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+
+.unnnic-chats-message {
+  width: fit-content;
+  min-width: 70px;
+  max-width: 500px;
+
+  display: grid;
+  gap: $unnnic-spacing-nano;
+
+  border-radius: $unnnic-border-radius-md;
+
+  padding: $unnnic-spacing-xs;
+
+  background-color: $unnnic-color-neutral-white;
+
+  font-family: $unnnic-font-family-secondary;
+
+  &.sent {
+    background-color: $unnnic-color-weni-50;
+  }
+
+  &.sending {
+    .unnnic-chats-message__text {
+      color: $unnnic-color-neutral-clean;
+    }
+  }
+
+  &.is-media {
+    padding: $unnnic-spacing-xs;
+  }
+
+  &__main {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: $unnnic-spacing-xs;
+
+    & > * {
+      margin: 0;
+    }
+
+    &.is-media {
+      &.is-image,
+      &.is-video {
+        display: grid;
+        justify-items: end;
+
+        overflow: hidden;
+
+        .media {
+          overflow: hidden;
+
+          border-radius: $unnnic-border-radius-md;
+
+          min-height: 200px;
+          max-height: 300px;
+          height: auto;
+        }
+      }
+
+      &.is-image .media {
+        width: 200px;
+        height: auto;
+        max-width: 200px;
+
+        object-fit: cover;
+      }
+
+      &.is-video .media {
+        width: 300px;
+        max-width: 300px;
+      }
+    }
+
+    &.is-document {
+      min-width: 200px;
+      max-width: 400px;
+    }
+  }
+
+  &__document {
+    display: flex;
+    align-items: center;
+    gap: $unnnic-spacing-xs;
+
+    &__text {
+      &:hover {
+        text-decoration: underline;
+
+        cursor: pointer;
+      }
+    }
+  }
+
+  &__text,
+  &__document__text,
+  &__signature {
+    margin: 0;
+
+    padding: $unnnic-spacing-nano 0;
+
+    font-size: $unnnic-font-size-body-gt;
+    color: $unnnic-color-neutral-dark;
+    line-height: $defaultLineHeight;
+    word-break: break-word;
+  }
+
+  &__signature {
+    padding: 0;
+
+    font-weight: $unnnic-font-weight-bold;
+  }
+
+  &__time {
+    font-size: $unnnic-font-size-body-md;
+    line-height: $defaultLineHeight;
+    color: $unnnic-color-neutral-clean;
+  }
+
+  &__media__container {
+    position: relative;
+
+    display: flex;
+
+    &.failed {
+      cursor: pointer;
+    }
+  }
+}
+</style>

package/src/components/ChatsMessage/ChatsMessageStatusBackdrop.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="unnnic-chats-message-status-backdrop__container"
+    @click="$emit('click')"
+  >
+    <div class="unnnic-chats-message-status-backdrop">
+      <UnnnicIconLoading
+        v-if="status === 'sending'"
+        scheme="neutral-white"
+        size="avatar-sm"
+      />
+      <UnnnicIcon
+        v-else
+        icon="upload"
+        scheme="neutral-white"
+        size="avatar-sm"
+        :class="{ loading: status === 'sending' }"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import UnnnicIconLoading from '../IconLoading/IconLoading.vue';
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  name: 'UnnnicChatsMessageStatusBackdrop',
+
+  components: {
+    UnnnicIconLoading,
+    UnnnicIcon,
+  },
+
+  props: {
+    status: {
+      type: String,
+      required: true,
+      default: 'sending',
+      validate(status) {
+        return ['sending', 'failed'].includes(status);
+      },
+    },
+  },
+};
+</script>
+<style lang="scss">
+@import '../../assets/scss/unnnic.scss';
+
+.unnnic-chats-message-status-backdrop__container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  backdrop-filter: blur(1px);
+}
+.unnnic-chats-message-status-backdrop {
+  border-radius: $unnnic-border-radius-lg;
+
+  padding: $unnnic-spacing-ant;
+
+  box-sizing: content-box;
+  background-color: rgba($unnnic-color-neutral-darkest, 0.3);
+
+  display: flex;
+
+  svg {
+    position: initial;
+  }
+}
+</style>