@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/AudioRecorder/AudioRecorder.vue

@@ -1,22 +1,39 @@
 <template>
-  <section v-if="value || isRecording || src" class="unnnic-audio-recorder">
-    <unnnic-tool-tip v-if="isRecording || canDiscard" enabled text="Descartar" side="top">
-      <span @click="discard" @keypress.enter="discard" class="delete-button unnnic--clickable">
-        <unnnic-icon icon="delete-1-1" scheme="feedback-red" />
+  <section
+    v-if="value || isRecording || src"
+    class="unnnic-audio-recorder"
+  >
+    <UnnnicToolTip
+      v-if="isRecording || canDiscard"
+      enabled
+      text="Descartar"
+      side="top"
+    >
+      <span
+        @click="discard"
+        @keypress.enter="discard"
+        class="delete-button unnnic--clickable"
+      >
+        <UnnnicIcon
+          icon="delete-1-1"
+          scheme="feedback-red"
+        />
       </span>
-    </unnnic-tool-tip>
-    <audio-handler
+    </UnnnicToolTip>
+    <AudioHandler
       v-if="isRecording"
-      :is-recording="isRecording"
+      :isRecording="isRecording"
       :time="numberToTimeString(duration)"
       @save="save"
     />
-    <audio-player
+    <AudioPlayer
       v-else
-      :time="numberToTimeString(isIdle ? duration : currentTime)"
-      :progress-bar-percentual-value="playedPercentual"
-      :is-playing="isPlaying"
+      :time="numberToTimeString(isIdle || isRecorded ? duration : currentTime)"
+      :reqStatus="reqStatus"
+      :progressBarPercentualValue="playedPercentual"
+      :isPlaying="isPlaying"
       :bars="playbackAudioBars ? bars : null"
+      @failed-click="$emit('failed-click')"
       @pause="pause"
       @play="play"
       @progress-bar-update="progressBarUpdate"
@@ -78,6 +95,14 @@ export default {
       default: true,
     },
 
+    reqStatus: {
+      type: String,
+      default: 'default',
+      validate(status) {
+        return ['default', 'sending', 'failed'].includes(status);
+      },
+    },
+
     playbackAudioBars: {
       type: Boolean,
       default: false,
@@ -141,8 +166,6 @@ export default {
         this.audio.setAttribute('src', this.src);
 
         this.addAudioEventListeners();
-
-        this.bars = await this.srcToBars(this.src);
       },
     },
     status(newValue) {
@@ -277,7 +300,6 @@ export default {
       this.$emit('input', this.audio);
 
       this.stopMockMilliseconds();
-      this.bars = await this.srcToBars(this.audio.src);
     },
 
     play() {
@@ -313,35 +335,29 @@ export default {
       const seconds = formatNumber(Math.round(time % 60));
       const millisecondsFormatted = formatNumber(this.mockMilliseconds);
 
-      return `${minutes}:${seconds}${isRecording ? `:${millisecondsFormatted}` : ''}`;
+      return `${minutes}:${seconds}${
+        isRecording ? `:${millisecondsFormatted}` : ''
+      }`;
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-audio-recorder {
-  display: inline-flex;
-  align-items: center;
-  border-radius: $unnnic-border-radius-sm;
   position: relative;
 
-  &__progress-bar {
-    width: 11.5 * $unnnic-font-size;
-    height: 2px;
-    border-radius: $unnnic-border-radius-sm;
-    background: $unnnic-color-neutral-cleanest;
+  border-radius: $unnnic-border-radius-sm;
 
-    &__bar {
-      background: $unnnic-color-neutral-darkest;
-      height: 100%;
-      width: 0%; // updated programmatically
-    }
-  }
+  display: inline-flex;
+  align-items: center;
+
+  width: 100%;
 
-  ::v-deep .audio-player__time, ::v-deep .audio-handler__time {
+  ::v-deep .audio-player__time,
+  ::v-deep .audio-handler__time {
     font-family: $unnnic-font-family-secondary;
     font-weight: $unnnic-font-weight-regular;
     font-size: $unnnic-font-size-body-md;

package/src/components/AvatarIcon/AvatarIcon.vue

@@ -1,6 +1,20 @@
 <template>
-  <div :class="['unnnic-avatar-icon', scheme, size, { disabled: !enabled }]">
-    <unnnic-icon :icon="icon" :scheme="enabled ? scheme : 'neutral-cloudy'" :size="iconSize" />
+  <div
+    :class="[
+      'unnnic-avatar-icon',
+      scheme,
+      size,
+      { disabled: !enabled },
+      filled,
+      { opacity: !opacity },
+    ]"
+  >
+    <UnnnicIcon
+      :icon="icon"
+      :scheme="enabled ? scheme : 'neutral-cloudy'"
+      :size="iconSize"
+      :filled="filled"
+    />
   </div>
 </template>
 
@@ -35,6 +49,14 @@ export default {
       type: String,
       default: 'aux-blue',
     },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+    opacity: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   computed: {
@@ -52,19 +74,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
-
-$scheme-colors:
-  'feedback-red' $unnnic-color-feedback-red,
-  'feedback-green' $unnnic-color-feedback-green,
-  'feedback-yellow' $unnnic-color-feedback-yellow,
-  'feedback-blue' $unnnic-color-feedback-blue,
-  'feedback-grey' $unnnic-color-feedback-grey,
-   'aux-blue' $unnnic-color-aux-blue,
-   'aux-purple' $unnnic-color-aux-purple,
-   'aux-orange' $unnnic-color-aux-orange,
-   'aux-lemon' $unnnic-color-aux-lemon,
-   'aux-pink' $unnnic-color-aux-pink;
+@import '../../assets/scss/unnnic';
 
 @each $name, $color in $scheme-colors {
   .unnnic-avatar-icon {
@@ -72,6 +82,12 @@ $scheme-colors:
       background-color: rgba($color, $unnnic-opacity-level-extra-light);
     }
   }
+
+  .unnnic-avatar-icon.opacity {
+    &.#{$name} {
+      background-color: rgba($color, $unnnic-opacity-level-light);
+    }
+  }
 }
 
 .unnnic-avatar-icon.disabled {
@@ -83,7 +99,8 @@ $scheme-colors:
   padding: $unnnic-spacing-inset-nano;
   display: inline-flex;
 
-  &.nano, &.xs {
+  &.nano,
+  &.xs {
     padding: $unnnic-spacing-stack-nano $unnnic-spacing-inline-nano;
   }
 }

package/src/components/Banner/Banner.vue

@@ -2,7 +2,7 @@
   <component
     class="unnnic-banner-component"
     :is="currentComponent"
-    :v-bind="$attrs"
+    v-bind="$attrs"
     :firstTitle="firstTitle"
     :secondTitle="secondTitle"
     :thirdTitle="thirdTitle"
@@ -11,7 +11,6 @@
     :thirdDescription="thirdDescription"
     :subtitle="subtitle"
     :rating="rating"
-    @ratingAction="emitRatingAction"
   />
 </template>
 

package/src/components/Banner/InfoBanner.vue

@@ -15,12 +15,12 @@
       <div class="unnnic-banner-info__title">{{ thirdTitle }}</div>
       <div class="unnnic-banner-info__description">{{ thirdDescription }}</div>
       <div class="unnnic-banner-info__rating">
-        <unnnic-icon-svg
+        <UnnnicIconSvg
           :key="index"
           v-for="index in 5"
-          @click.native="emitRatingAction(index)"
-          @mouseover.native="starOver(index)"
-          @mouseout.native="starOut"
+          @click="emitRatingAction(index)"
+          @mouseover="starOver(index)"
+          @mouseout="starOut"
           :class="{
             'unnnic-banner-info__rating__star': true,
             'unnnic-banner-info__rating__star__active': index <= baseRating,
@@ -144,7 +144,7 @@ export default {
   &__divider {
     align-self: center;
 
-    border-left: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
+    border-left: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
     height: 36px;
     margin: 0 $unnnic-inline-md;
   }

package/src/components/Breadcrumb/Breadcrumb.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="unnnic-breadcrumb">
-    <div v-for="(crumb, index) in crumbs" :key="crumb.name" class="unnnic-breadcrumb__container">
+    <template
+      v-for="(crumb, index) in crumbs"
+      :key="crumb.name"
+    >
       <div
-        @click="$emit('crumbClick', crumb)"
+        @click="$emit('crumb-click', crumb)"
         :class="{
           'unnnic-breadcrumb__container__link': true,
-          'unnnic-breadcrumb__container__link__active': index === crumbs.length - 1,
+          'unnnic-breadcrumb__container__link__active':
+            index === crumbs.length - 1,
         }"
       >
         {{ crumb.name }}
       </div>
-      <unnnic-icon-svg
+
+      <UnnnicIcon
         v-if="index !== crumbs.length - 1"
         icon="arrow-right-1-1"
         size="xs"
@@ -18,16 +23,16 @@
         class="unnnic-breadcrumb__container__divider"
         scheme="neutral-cloudy"
       />
-    </div>
+    </template>
   </div>
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'unnnic-breadcrumb',
-  components: { UnnnicIconSvg },
+  components: { UnnnicIcon },
   props: {
     crumbs: {
       type: Array,
@@ -35,11 +40,6 @@ export default {
       validator: (crumb) => crumb.every((c) => c.name !== null),
     },
   },
-  methods: {
-    emitAction(crumb) {
-      this.$root.$emit('crumbClick', crumb);
-    },
-  },
 };
 </script>
 
@@ -48,11 +48,9 @@ export default {
 .unnnic-breadcrumb {
   display: flex;
   flex-direction: row;
+  align-items: center;
 
   &__container {
-    display: flex;
-    flex-direction: row;
-
     &__divider {
       margin: 0 $unnnic-inline-xs;
     }