@weni/unnnic-system 2.0.8 → 2.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "type": "commonjs",
   "files": [
     "dist",

package/src/assets/scss/colors.scss

@@ -99,12 +99,12 @@ $unnnic-color-aux-baby-green: #B2FCA6;
 $unnnic-color-aux-baby-pink: #FFCBF6;
 
 /* Brand */
-$unnnic-color-brand-weni: $unnnic-color-weni-500;
-$unnnic-color-brand-weni-dark: #005E5A;
-$unnnic-color-brand-weni-soft: #009E96;
-$unnnic-color-brand-sec-dark: #262626;
-$unnnic-color-brand-sec-soft: #808080;
-$unnnic-color-brand-sec: #CCCCCC;
+$unnnic-color-brand-weni: $unnnic-color-weni-600;
+$unnnic-color-brand-weni-dark: $unnnic-color-weni-800;
+$unnnic-color-brand-weni-soft: $unnnic-color-weni-600; 
+$unnnic-color-brand-sec-dark: $unnnic-color-neutral-black;
+$unnnic-color-brand-sec-soft: $unnnic-color-neutral-dark;
+$unnnic-color-brand-sec: $unnnic-color-neutral-cleanest;
 
 :export{
     unnnicColorBackgroundSolo: $unnnic-color-background-solo;

package/src/components/Alert/AlertBanner.vue

@@ -0,0 +1,180 @@
+<template>
+  <section
+    :class="[
+      'banner-alert',
+      {
+        'banner-alert--banner-danger': type === 'danger',
+        'banner-alert--banner-warning': type === 'warning',
+      },
+    ]"
+  >
+    <header
+      v-show="text"
+      class="banner-alert__container-text"
+    >
+      <UnnnicIcon
+        class="banner-alert__textIcon"
+        v-show="isShowTextIcon(type)"
+        :icon="getIconType(type)"
+        size="sm"
+        scheme="neutral-white"
+      />
+      <p class="text">{{ text }}</p>
+      <a
+        v-if="linkHref"
+        class="banner-alert__link"
+        :href="linkHref"
+        :target="linkTarget"
+      >
+        {{ linkText }}
+      </a>
+    </header>
+
+    <div
+      v-show="showCloseButton"
+      class="banner-alert__close"
+      @click="emitClose"
+    >
+      <UnnnicIcon
+        icon="close"
+        size="sm"
+        scheme="neutral-white"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  components: {
+    UnnnicIcon,
+  },
+  methods: {
+    getIconType(type) {
+      if (type === 'danger') return 'block';
+      if (!type.trim()) return 'info'; // check if type is empty or whitespace
+      return type;
+    },
+    isShowTextIcon(type) {
+      return ['danger', 'warning', 'info', ''].includes(type);
+    },
+    emitClose() {
+      this.onClose();
+
+      this.$emit('close');
+    },
+  },
+  props: {
+    text: {
+      type: String,
+      default: null,
+    },
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: false,
+    },
+    linkHref: {
+      type: String,
+      default: '',
+    },
+    linkTarget: {
+      type: String,
+      default: '_blank',
+    },
+    linkText: {
+      type: String,
+      default: 'Learn more',
+    },
+    type: {
+      type: String,
+      default: 'info',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+.banner-alert {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  text-align: center;
+  margin-bottom: $unnnic-spacing-sm;
+
+  color: $unnnic-color-neutral-white;
+  font-family: $unnnic-font-family-secondary;
+  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-aux-blue-500;
+
+  &__container-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
+    flex-grow: 1;
+
+    .text {
+      margin: 0 $unnnic-spacing-nano 0 0;
+    }
+  }
+
+  &__textIcon {
+    margin-right: $unnnic-spacing-xs;
+  }
+
+  &__link {
+    color: inherit;
+    display: block;
+    font-weight: $unnnic-font-weight-bold;
+    text-decoration: underline;
+    text-underline-position: under;
+  }
+
+  &__close {
+    display: flex;
+    align-items: center;
+    max-height: 38px;
+    padding: 0 $unnnic-spacing-sm;
+    cursor: pointer;
+    user-select: none;
+    border-left: $unnnic-border-width-thinner solid $unnnic-color-aux-blue-300;
+    &:hover {
+      background-color: $unnnic-color-aux-blue-300;
+    }
+  }
+
+  &--banner-warning {
+    background-color: $unnnic-color-aux-orange-500;
+
+    .banner-alert__close {
+      border-left: $unnnic-border-width-thinner solid
+        $unnnic-color-aux-orange-300;
+
+      &:hover {
+        background-color: $unnnic-color-aux-orange-300;
+      }
+    }
+  }
+
+  &--banner-danger {
+    background-color: $unnnic-color-aux-red-500;
+
+    .banner-alert__close {
+      border-left: $unnnic-border-width-thinner solid $unnnic-color-aux-red-300;
+
+      &:hover {
+        background-color: $unnnic-color-aux-red-300;
+      }
+    }
+  }
+}
+</style>

package/src/components/AudioRecorder/AudioRecorder.vue

@@ -6,7 +6,7 @@
     <UnnnicToolTip
       v-if="isRecording || canDiscard"
       enabled
-      text="Descartar"
+      :text="$t('audio_recorder.discard_button')"
       side="top"
     >
       <span
@@ -236,7 +236,7 @@ export default {
       });
 
       this.audio.addEventListener('pause', () => {
-        this.status = 'paused';
+        if (this.audio) this.status = 'paused';
       });
 
       this.audio.addEventListener('timeupdate', () => {
@@ -276,6 +276,8 @@ export default {
         this.stop();
       }
 
+      this.audio = null;
+
       this.$emit('input', null);
 
       this.status = 'idle';
@@ -289,7 +291,7 @@ export default {
     pause() {
       this.audio.pause();
     },
-    async stop() {
+    stop() {
       this.status = 'recorded';
       this.pause();
 

package/src/components/Card/CardCompany.vue

@@ -1,176 +1,79 @@
 <template>
-  <div class="unnnic-card-company">
-    <div class="content">
-      <div class="header">
-        <div
-          class="title"
-          :title="title"
-        >
-          {{ cutLength(title, 20) }}
-        </div>
-
-        <div
-          v-if="tag"
-          class="tag"
-        >
-          {{ tag }}
-        </div>
-      </div>
+  <div
+    :class="[
+      'unnnic-connect-card-company',
+      { 'unnnic-connect-card-company--old-version': oldVersion },
+    ]"
+    @click="$emit('enter')"
+  >
+    <div>
+      <h2 class="name">{{ name }}</h2>
+
+      <p class="description">
+        {{ description }}
+      </p>
 
       <div
-        class="description"
-        :title="description"
+        v-if="plan"
+        :class="['tag', plan]"
       >
-        {{ cutLength(description, 36) }}
-      </div>
-
-      <div class="members">
-        <div class="avatars">
-          <ToolTip
-            v-for="(member, index) in membersLimited"
-            :key="index"
-            class="avatar-container"
-            side="top"
-            :text="member.name"
-            enabled
-          >
-            <div class="avatar__background">
-              <div
-                class="avatar"
-                :style="{ backgroundImage: `url(${member.photo})` }"
-              />
-            </div>
-          </ToolTip>
-        </div>
-
-        <div class="members-description">{{ membersDescription }}</div>
+        {{ i18n(`plans.${plan}`) }}
       </div>
     </div>
-    <div class="join-button">
-      <UnnnicTag
-        @click="join"
-        :text="joinLabel"
-        scheme="aux-blue"
-        clickable
-      ></UnnnicTag>
-    </div>
-    <div
-      class="more-button"
-      v-if="options.length"
-    >
-      <UnnnicDropdown>
+
+    <UnnnicTag
+      v-if="actionText"
+      class="action"
+      @click="$emit('action')"
+      clickable
+      :text="actionText"
+      scheme="aux-blue"
+    />
+
+    <div v-if="$slots.options">
+      <UnnnicDropdown
+        @click.prevent
+        v-model:open="isOptionsOpen"
+        class="unnnic-dropdown"
+      >
         <template v-slot:trigger>
           <UnnnicIcon
+            class="menu-icon"
             icon="navigation-menu-vertical-1"
-            scheme="neutral-cleanest"
             size="sm"
-            clickable
-          />
+            :scheme="isOptionsOpen ? 'neutral-cloudy' : 'neutral-clean'"
+          ></UnnnicIcon>
         </template>
 
-        <UnnnicDropdownItem
-          v-for="(option, index) in options"
-          :key="index"
-          @click="
-            () => {
-              if (option.click) {
-                option.click();
-              }
-            }
-          "
-        >
-          <div :class="['menu-item', { [option.scheme]: option.scheme }]">
-            <UnnnicIcon
-              class="icon"
-              size="sm"
-              :icon="option.icon"
-              :scheme="option.scheme ? option.scheme : 'neutral-dark'"
-            />
-
-            {{ option.title }}
-          </div>
-        </UnnnicDropdownItem>
+        <slot name="options"></slot>
       </UnnnicDropdown>
     </div>
   </div>
 </template>
 
 <script>
+import UnnnicI18n from '../../mixins/i18n';
 import UnnnicTag from '../Tag/Tag.vue';
-import UnnnicIcon from '../Icon.vue';
-import UnnnicDropdown from '../Dropdown/Dropdown.vue';
-import UnnnicDropdownItem from '../Dropdown/DropdownItem.vue';
-import ToolTip from '../ToolTip/ToolTip.vue';
 
 export default {
   components: {
     UnnnicTag,
-    UnnnicIcon,
-    UnnnicDropdown,
-    UnnnicDropdownItem,
-    ToolTip,
   },
 
+  mixins: [UnnnicI18n],
+
   props: {
-    title: {
-      type: String,
-    },
-
-    tag: {
-      type: String,
-    },
-
-    description: {
-      type: String,
-    },
-
-    joinLabel: {
-      type: String,
-    },
-
-    options: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-
-    members: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-
-    membersDescription: {
-      type: String,
-    },
+    oldVersion: Boolean,
+    name: String,
+    description: String,
+    plan: String,
+    actionText: String,
   },
 
   data() {
-    return {};
-  },
-
-  methods: {
-    join() {
-      this.$emit('join');
-    },
-
-    cutLength(text, length) {
-      const posText = text.trim();
-
-      if (posText.length > length) {
-        return `${posText.slice(0, length).trim()}...`;
-      }
-
-      return posText;
-    },
-  },
-
-  computed: {
-    membersLimited() {
-      return this.members.slice(0, 3);
-    },
+    return {
+      isOptionsOpen: false,
+    };
   },
 };
 </script>
@@ -178,135 +81,109 @@ export default {
 <style lang="scss" scoped>
 @import '../../assets/scss/unnnic.scss';
 
-.unnnic-card-company {
-  background-color: $unnnic-color-background-sky;
-  border-radius: $unnnic-border-radius-md;
-  padding: $unnnic-spacing-inset-md;
-  min-width: 18.5 * $unnnic-font-size;
-  border: $unnnic-border-width-thin solid transparent;
+.unnnic-connect-card-company {
+  cursor: pointer;
   display: flex;
-  align-items: center;
+  column-gap: $unnnic-spacing-sm;
+  justify-content: space-between;
+
+  outline-style: solid;
+  outline-color: $unnnic-color-neutral-cleanest;
+  outline-width: $unnnic-border-width-thinner;
+  outline-offset: -$unnnic-border-width-thinner;
+
+  background-color: $unnnic-color-background-white;
+  padding: $unnnic-spacing-md;
+  border-radius: $unnnic-border-radius-md;
 
   &:hover {
-    border: $unnnic-border-width-thin solid $unnnic-color-neutral-soft;
+    box-shadow: $unnnic-shadow-level-near;
   }
 
-  .content {
-    flex: 1;
-
-    .header {
-      display: flex;
-      align-items: center;
-      margin-bottom: $unnnic-spacing-stack-nano;
-
-      .title {
-        font-family: $unnnic-font-family-secondary;
-        font-size: $unnnic-font-size-title-md;
-        font-weight: $unnnic-font-weight-bold;
-        line-height: $unnnic-font-size-title-md + $unnnic-line-height-md;
-        color: $unnnic-color-neutral-black;
-
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
+  .name {
+    color: $unnnic-color-neutral-black;
 
-      .tag {
-        margin-left: $unnnic-spacing-inline-ant;
-        padding: $unnnic-spacing-stack-nano $unnnic-spacing-inline-ant;
-        outline-style: solid;
-        outline-color: $unnnic-color-neutral-dark;
-        outline-width: $unnnic-border-width-thinner;
-        outline-offset: -$unnnic-border-width-thinner;
-        border-radius: $unnnic-border-radius-sm;
-        user-select: none;
-
-        font-family: $unnnic-font-family-secondary;
-        font-size: $unnnic-font-size-body-md;
-        line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-        font-weight: $unnnic-font-weight-regular;
-        color: $unnnic-color-neutral-dark;
-      }
-    }
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-bold;
+    font-size: $unnnic-font-size-title-md;
+    line-height: $unnnic-font-size-title-md + $unnnic-line-height-md;
 
-    .description {
-      font-family: $unnnic-font-family-secondary;
-      font-size: $unnnic-font-size-body-lg;
-      font-weight: $unnnic-font-weight-regular;
-      line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-      color: $unnnic-color-neutral-dark;
-      margin-bottom: $unnnic-spacing-stack-md;
-
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+    margin: 0;
+    margin-bottom: $unnnic-spacing-ant;
+  }
 
-    .members {
-      display: flex;
-      align-items: center;
-
-      .avatars {
-        .avatar-container {
-          border-radius: 50%;
-
-          &:not(:first-child) {
-            margin-left: -0.875 * $unnnic-font-size;
-          }
-        }
-
-        .avatar__background {
-          border-radius: 50%;
-          background: $unnnic-color-neutral-cleanest;
-        }
-
-        .avatar {
-          width: $unnnic-avatar-size-sm;
-          height: $unnnic-avatar-size-sm;
-          border-radius: 50%;
-          border: $unnnic-border-width-thin solid $unnnic-color-neutral-black;
-          background-size: cover;
-          background-position: center center;
-        }
-      }
+  .description {
+    color: $unnnic-color-neutral-dark;
 
-      .members-description {
-        font-family: $unnnic-font-family-secondary;
-        font-size: $unnnic-font-size-body-gt;
-        font-weight: $unnnic-font-weight-regular;
-        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-        color: $unnnic-color-neutral-darkest;
-        margin-left: $unnnic-spacing-inline-nano;
-      }
-    }
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    font-size: $unnnic-font-size-body-lg;
+    line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+
+    margin: 0;
   }
 
-  .join-button {
-    margin-left: $unnnic-spacing-inline-xs;
-    padding: $unnnic-spacing-inset-nano;
+  .action {
+    align-self: center;
   }
 
-  .more-button {
-    margin-left: $unnnic-spacing-inline-nano;
+  &--old-version {
+    outline: none;
+    background-color: $unnnic-color-background-sky;
+    column-gap: $unnnic-spacing-xs;
 
-    .menu-item {
-      display: flex;
-      align-items: center;
-      overflow: hidden;
-      white-space: nowrap;
+    &:hover {
+      box-shadow: none;
 
-      .icon {
-        margin-right: $unnnic-inline-xs;
-      }
+      outline-style: solid;
+      outline-color: $unnnic-color-neutral-soft;
+      outline-width: $unnnic-border-width-thin;
+      outline-offset: -$unnnic-border-width-thin;
+    }
 
-      &.feedback-red {
-        color: $unnnic-color-feedback-red;
+    .name {
+      margin-bottom: $unnnic-spacing-nano;
+    }
+  }
+
+  .tag {
+    display: inline-block;
+    user-select: none;
+
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    font-size: $unnnic-font-size-body-md;
+    line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+
+    margin-top: $unnnic-spacing-sm;
+    padding: $unnnic-spacing-nano $unnnic-spacing-ant;
+    border-radius: $unnnic-border-radius-pill;
+
+    $plan-colors:
+      'trial' $unnnic-color-aux-blue-500,
+      'scale' $unnnic-color-aux-orange-500,
+      'advanced' $unnnic-color-aux-purple-500,
+      'enterprise' $unnnic-color-aux-green-500;
+
+    @each $name, $color in $plan-colors {
+      &.#{$name} {
+        color: $color;
+        background-color: rgba($color, $unnnic-opacity-level-extra-light);
       }
     }
   }
+
+  .menu-icon {
+    display: block;
+    margin-block: $unnnic-spacing-xs;
+    user-select: none;
+  }
+
+  .unnnic-dropdown {
+    :deep(.unnnic-dropdown__trigger .unnnic-dropdown__content) {
+      margin-top: 0;
+      padding: 0;
+    }
+  }
 }
 </style>