@weni/unnnic-system 1.16.40 → 1.16.41-develop.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "1.16.40",
+  "version": "1.16.41-develop.0",
   "main": "./dist/unnnic.common.js",
   "files": [
     "dist/*",

package/src/components/ButtonClose/ButtonClose.vue

@@ -0,0 +1,44 @@
+<template>
+  <div @click="close" @keypress.enter="close" class="unnnic-button-close">
+    <unnnic-icon icon="close-1" :size="size" />
+  </div>
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  name: 'ButtonClose',
+
+  components: {
+    UnnnicIcon,
+  },
+
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      validator(value) {
+        return [
+          'nano', 'xs', 'sm', 'ant', 'md', 'lg', 'xl',
+          'avatar-lg', 'avatar-md', 'avatar-sm', 'avatar-xs', 'avatar-nano',
+        ].indexOf(value) !== -1;
+      },
+    },
+    close: {
+      type: Function,
+      default: () => {},
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "../../assets/scss/unnnic.scss";
+
+.unnnic-button-close {
+  display: inline-block;
+
+  cursor: pointer;
+}
+</style>

package/src/components/ChatsDashboardTagLive/ChatsDashboardTagLive.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="unnnic-chats-dashboard-tag-live">
+    <unnnic-icon
+      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>

package/src/components/ChatsHeader/ChatsHeader.vue

@@ -0,0 +1,225 @@
+<template>
+  <header class="unnnic-chats-header" :class="{ large: size === 'large' && !avatarName }">
+    <div class="unnnic-chats-header__topbar" v-if="size === 'large' && !avatarName">
+      <unnnic-breadcrumb :crumbs="crumbs" />
+      <unnnic-button-close @close="close" size="ant" />
+    </div>
+    <main class="unnnic-chats-header__main">
+      <div v-if="back && size === 'small'" @click="back" @keypress.esc="back">
+        <unnnic-icon
+          class="unnnic-chats-header__main__back"
+          icon="keyboard-arrow-left-1"
+          size="md"
+        />
+      </div>
+      <section class="unnnic-chats-header__infos">
+        <unnnic-chats-user-avatar v-if="avatarName" :username="avatarName" />
+        <unnnic-avatar-icon
+          v-else
+          scheme="aux-purple"
+          :icon="avatarIcon"
+          :size="size === 'small' ? 'sm' : 'lg'"
+        />
+
+        <hgroup class="unnnic-chats-header__infos__title" :class="{ contact: !!avatarName }">
+          <h1>
+            {{ title }}
+          </h1>
+          <h2 v-if="subtitle">
+            {{ subtitle }}
+          </h2>
+        </hgroup>
+      </section>
+      <slot v-if="size === 'large'"/>
+    </main>
+    <unnnic-button-close v-if="avatarName || size === 'small'" @close="close" size="sm" />
+  </header>
+</template>
+<script>
+import UnnnicI18n from '../../mixins/i18n';
+
+import UnnnicButtonClose from '../ButtonClose/ButtonClose.vue';
+import UnnnicAvatarIcon from '../AvatarIcon/AvatarIcon.vue';
+import UnnnicChatsUserAvatar from '../ChatsUserAvatar/ChatsUserAvatar.vue';
+import UnnnicBreadcrumb from '../Breadcrumb/Breadcrumb.vue';
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  name: 'UnnnicChatsHeader',
+
+  mixins: [UnnnicI18n],
+
+  components: {
+    UnnnicButtonClose,
+    UnnnicAvatarIcon,
+    UnnnicChatsUserAvatar,
+    UnnnicBreadcrumb,
+    UnnnicIcon,
+  },
+
+  props: {
+    title: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    avatarIcon: {
+      type: String,
+      default: '',
+    },
+    avatarName: {
+      type: String,
+      default: '',
+    },
+    back: {
+      type: Function,
+      default: null,
+    },
+    close: {
+      type: Function,
+      default: () => {},
+    },
+    crumbs: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data: () => ({
+    size: 'small',
+  }),
+
+  beforeMount() {
+    this.updateSize();
+    window.addEventListener('resize', this.updateSize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.updateSize);
+  },
+
+  methods: {
+    updateSize() {
+      const PHONE_SIZE = 600;
+      if (window.innerWidth < PHONE_SIZE) {
+        this.size = 'small';
+      } else {
+        this.size = 'large';
+      }
+    },
+  },
+
+  watch: {
+    size(newSize) {
+      this.$emit('resize', newSize);
+    },
+  },
+};
+</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: $unnnic-shadow-level-far;
+  background-color: $unnnic-color-background-white;
+
+  font-family: $unnnic-font-family-secondary;
+
+  &.large {
+    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;
+      }
+    }
+  }
+
+  &__topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__main {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr auto;
+    gap: $unnnic-spacing-xs;
+
+    &__back {
+      margin-right: $unnnic-spacing-md;
+
+      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;
+
+      &.contact h1 {
+        font-weight: $unnnic-font-weight-regular;
+      }
+
+      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-md;
+        line-height: $unnnic-font-size-body-lg;
+        font-weight: $unnnic-font-weight-regular;
+      }
+    }
+  }
+}
+</style>

package/src/components/ChatsUserAvatar/ChatsUserAvatar.vue

@@ -104,6 +104,8 @@ $avatar-sizes: '2xl' 3rem, 'xl' $unnnic-icon-size-xl, 'lg' $unnnic-icon-size-lg,
 
   @each $name, $size in $avatar-sizes {
     &--#{$name} {
+      min-width: $size;
+      max-height: $size;
       width: $size;
       height: $size;
 

package/src/stories/ButtonClose.stories.js

@@ -0,0 +1,34 @@
+import UnnnicButtonClose from '../components/ButtonClose/ButtonClose.vue';
+
+export default {
+  title: 'Form/ButtonClose',
+  component: UnnnicButtonClose,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: [
+          'nano',
+          'xs',
+          'sm',
+          'md',
+          'lg',
+          'avatar-lg',
+          'avatar-md',
+          'avatar-sm',
+          'avatar-xs',
+          'avatar-nano',
+        ],
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { UnnnicButtonClose },
+  template: '<unnnic-button-close v-bind="$props"/>',
+});
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/stories/ChatsDashboardTagLive.stories.js

@@ -0,0 +1,25 @@
+/* eslint-disable no-alert */
+import unnnicChatsDashboardTagLive from '../components/ChatsDashboardTagLive/ChatsDashboardTagLive.vue';
+
+export default {
+  title: 'Chats/DashboardTagLive',
+  component: unnnicChatsDashboardTagLive,
+  argTypes: {
+    locale: {
+      control: {
+        type: 'select',
+        options: ['pt-br', 'en', 'es'],
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicChatsDashboardTagLive },
+  template: '<unnnic-chats-dashboard-tag-live v-bind="$props"/>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+};

package/src/stories/ChatsHeader.stories.js

@@ -0,0 +1,84 @@
+/* eslint-disable no-alert */
+import unnnicChatsHeader from '../components/ChatsHeader/ChatsHeader.vue';
+import unnnicChatsDashboardTagLive from '../components/ChatsDashboardTagLive/ChatsDashboardTagLive.vue';
+
+export default {
+  title: 'Chats/Header',
+  component: unnnicChatsHeader,
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicChatsHeader },
+  template: '<unnnic-chats-header v-bind="$props"/>',
+});
+
+const DashboardTemplate = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicChatsHeader, unnnicChatsDashboardTagLive },
+  template:
+    `<unnnic-chats-header v-bind="$props">
+      <unnnic-chats-dashboard-tag-live />
+    </unnnic-chats-header>`,
+});
+
+const back = () => alert('back');
+const close = () => alert('close');
+
+const size = window.innerWidth < 600 ? 'small' : 'large';
+
+const defaultArgs = {
+  back,
+  close,
+};
+
+export const Contact = Template.bind({});
+Contact.args = {
+  ...defaultArgs,
+  title: 'John Doe',
+  avatarName: 'John Doe',
+};
+
+export const ContactInfos = Template.bind({});
+ContactInfos.args = {
+  ...defaultArgs,
+  title: 'Contact information',
+  subtitle: 'John Doe',
+  avatarName: 'John Doe',
+};
+
+export const Dashboard = DashboardTemplate.bind({});
+Dashboard.args = {
+  ...defaultArgs,
+  title: size === 'large' ? 'Lorem Ipsum Inc.' : 'Dashboard',
+  subtitle: size === 'large' ? 'Dashboard of project' : 'Lorem Ipsum Inc.',
+  avatarIcon: 'graph-stats-1',
+  crumbs: [
+    {
+      name: 'Chats',
+      path: 'chats',
+    },
+    {
+      name: 'Dashboard',
+      path: 'dashboard',
+    },
+  ],
+};
+
+export const History = Template.bind({});
+History.args = {
+  ...defaultArgs,
+  title: size === 'large' ? 'Lorem Ipsum Inc.' : 'History',
+  subtitle: size === 'large' ? 'History of project' : 'Lorem Ipsum Inc.',
+  avatarIcon: 'task-list-clock-1',
+  crumbs: [
+    {
+      name: 'Chats',
+      path: 'chats',
+    },
+    {
+      name: 'History',
+      path: 'history',
+    },
+  ],
+};