@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/Alert/Alert.vue

@@ -1,6 +1,9 @@
 <template>
-  <div v-if="version === '1.0'" :class="['unnnic-alert', `unnnic-alert-position--${position}`]">
-    <unnnic-icon-svg
+  <div
+    v-if="version === '1.0'"
+    :class="['unnnic-alert', `unnnic-alert-position--${position}`]"
+  >
+    <UnnnicIconSvg
       :icon="icon"
       :scheme="scheme"
       size="sm"
@@ -16,10 +19,11 @@
     <div
       v-if="closeText"
       class="unnnic-alert__close-text unnnic--clickable"
-      @click="onClose()">
+      @click="onClose()"
+    >
       {{ closeText.toUpperCase() }}
     </div>
-    <unnnic-icon-svg
+    <UnnnicIconSvg
       v-else
       clickable
       icon="close-1"
@@ -29,7 +33,11 @@
     />
   </div>
 
-  <component v-else :is="'version' + version.replace(/\./g, 'dot')" v-bind="$props"></component>
+  <component
+    v-else
+    :is="'version' + version.replace(/\./g, 'dot')"
+    v-bind="{ ...$props }"
+  ></component>
 </template>
 
 <script>
@@ -75,6 +83,18 @@ export default {
       type: String,
       default: 'top-right',
     },
+    linkHref: {
+      type: String,
+    },
+    linkTarget: {
+      type: String,
+    },
+    linkText: {
+      type: String,
+    },
+    type: {
+      type: String,
+    },
   },
 };
 </script>
@@ -82,64 +102,64 @@ export default {
 <style lang="scss" scoped>
 @import '../../assets/scss/unnnic.scss';
 
-  .unnnic-alert {
-    position: fixed;
-    padding: $unnnic-inset-xs;
-    min-width: 12.5 * $unnnic-font-size;
+.unnnic-alert {
+  position: fixed;
+  padding: $unnnic-inset-xs;
+  min-width: 12.5 * $unnnic-font-size;
 
-    display: inline-flex;
-    align-items: center;
+  display: inline-flex;
+  align-items: center;
 
-    font-family: $unnnic-font-family-secondary;
-    border-radius: $unnnic-border-radius-sm;
+  font-family: $unnnic-font-family-secondary;
+  border-radius: $unnnic-border-radius-sm;
 
-    background-color: $unnnic-color-background-snow;
-    box-shadow: $unnnic-shadow-level-near;
-    position: fixed;
+  background-color: $unnnic-color-background-snow;
+  box-shadow: $unnnic-shadow-level-near;
+  position: fixed;
 
-    z-index: 9999;
+  z-index: 9999;
 
-    &-position {
-      &--top-right {
-        top: 1 * $unnnic-font-size;
-        right: 1 * $unnnic-font-size;
-      }
-      &--top-left {
-        top: 1 * $unnnic-font-size;
-        left: 1 * $unnnic-font-size;
-      }
-      &--bottom-right {
-        bottom: 1 * $unnnic-font-size;
-        right: 1 * $unnnic-font-size;
-      }
-      &--bottom-left {
-        bottom: 1 * $unnnic-font-size;
-        left: 1 * $unnnic-font-size;
-      }
+  &-position {
+    &--top-right {
+      top: 1 * $unnnic-font-size;
+      right: 1 * $unnnic-font-size;
     }
-
-    &__content {
-      flex: 1;
-      margin: 0 $unnnic-inline-xs;
+    &--top-left {
+      top: 1 * $unnnic-font-size;
+      left: 1 * $unnnic-font-size;
     }
-
-    &__title {
-      font-size: $unnnic-font-size-body-sm ;
-      font-weight: $unnnic-font-weight-bold;
-      color: $unnnic-color-neutral-darkest;
+    &--bottom-right {
+      bottom: 1 * $unnnic-font-size;
+      right: 1 * $unnnic-font-size;
     }
-
-    &__text {
-      font-size: $unnnic-font-size-body-md;
-      font-weight: $unnnic-font-weight-regular;
-      color: $unnnic-color-neutral-dark;
+    &--bottom-left {
+      bottom: 1 * $unnnic-font-size;
+      left: 1 * $unnnic-font-size;
     }
+  }
+
+  &__content {
+    flex: 1;
+    margin: 0 $unnnic-inline-xs;
+  }
 
-    &__close {
-      &-text {
-        color: $unnnic-color-brand-sec;
-        font-size: $unnnic-font-size-body-md;
-      }
+  &__title {
+    font-size: $unnnic-font-size-body-sm;
+    font-weight: $unnnic-font-weight-bold;
+    color: $unnnic-color-neutral-darkest;
+  }
+
+  &__text {
+    font-size: $unnnic-font-size-body-md;
+    font-weight: $unnnic-font-weight-regular;
+    color: $unnnic-color-neutral-dark;
+  }
+
+  &__close {
+    &-text {
+      color: $unnnic-color-brand-sec;
+      font-size: $unnnic-font-size-body-md;
     }
   }
+}
 </style>

package/src/components/Alert/AlertCaller.vue

@@ -1,5 +1,5 @@
 <template>
-    <button @click="callAlert"> Launch alert </button>
+  <button @click="callAlert">Launch alert</button>
 </template>
 
 <script>

package/src/components/Alert/Version1dot1.vue

@@ -1,47 +1,67 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div :class="['alert', `alert-position--${position}`]">
-    <unnnic-icon-svg
-      :icon="icon"
-      :scheme="scheme"
-      size="sm"
-    />
-
-    <div class="alert__content">
-      <div class="alert__title">
-        {{ title.toUpperCase() }}
-      </div>
-      <div v-show="text" class="alert__text">
+  <div
+    ref="alertContainer"
+    class="alert-container"
+  >
+    <div
+      :class="[
+        'alert',
+        {
+          'alert--scheme-aux-green':
+            scheme === 'feedback-green' || type === 'success',
+          'alert--scheme-aux-red':
+            scheme === 'feedback-red' || type === 'error',
+        },
+      ]"
+    >
+      <div
+        ref="progress"
+        class="alert__progress"
+      ></div>
+
+      <div
+        v-show="text"
+        class="alert__text"
+      >
         {{ text }}
       </div>
-    </div>
 
-    <div
-      v-if="hideCloseText"
-      class="alert__close-text unnnic--clickable"
-      @click="onClose"
-    >
-      {{ closeText.toUpperCase() }}
+      <a
+        v-if="linkHref"
+        class="alert__link"
+        :href="linkHref"
+        :target="linkTarget"
+      >
+        {{ linkText }}
+      </a>
+
+      <div
+        class="alert__close"
+        @click="emitClose"
+      >
+        <UnnnicIcon
+          icon="close-1"
+          size="sm"
+          scheme="neutral-white"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   components: {
-    UnnnicIconSvg,
+    UnnnicIcon,
   },
   props: {
     version: {
       type: String,
       default: '1.0',
     },
-
-    title: {
-      type: String,
-      default: null,
-    },
     text: {
       type: String,
       default: null,
@@ -50,25 +70,45 @@ export default {
       type: String,
       default: null,
     },
-    icon: {
-      type: String,
-      default: null,
-    },
     onClose: {
       type: Function,
       default: () => {},
     },
-    hideCloseText: {
-      type: Boolean,
-      default: true,
+    linkHref: {
+      type: String,
+      default: '',
+    },
+    linkTarget: {
+      type: String,
+      default: '_blank',
     },
-    closeText: {
+    linkText: {
       type: String,
-      default: 'CLOSE',
+      default: 'Learn more',
     },
-    position: {
+    type: {
       type: String,
-      default: 'top-right',
+      default: 'default',
+    },
+  },
+
+  mounted() {
+    this.$refs.progress.addEventListener('animationend', () => {
+      this.$refs.alertContainer.classList.add('slide-down');
+    });
+
+    this.$refs.alertContainer.addEventListener('animationend', (event) => {
+      if (event.animationName.startsWith('slideDown')) {
+        this.emitClose();
+      }
+    });
+  },
+
+  methods: {
+    emitClose() {
+      this.onClose();
+
+      this.$emit('close');
     },
   },
 };
@@ -77,69 +117,148 @@ export default {
 <style lang="scss" scoped>
 @import '../../assets/scss/unnnic.scss';
 
-.alert {
+.alert-container {
   position: fixed;
-  padding: $unnnic-inset-xs;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  animation: slideUp 200ms ease;
+
+  @keyframes slideUp {
+    from {
+      bottom: -3.375 * $unnnic-font-size;
+    }
+
+    to {
+      bottom: 0;
+    }
+  }
+
+  &.slide-down {
+    animation-name: slideDown;
+  }
+
+  @keyframes slideDown {
+    from {
+      bottom: 0;
+    }
+
+    to {
+      bottom: -3.375 * $unnnic-font-size;
+    }
+  }
+}
+
+.alert {
+  position: relative;
+  border-radius: $unnnic-border-radius-sm;
 
   display: inline-flex;
   align-items: center;
+  margin-bottom: $unnnic-spacing-sm;
 
+  color: $unnnic-color-neutral-white;
   font-family: $unnnic-font-family-secondary;
-  border-radius: $unnnic-border-radius-sm;
+  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-background-snow;
-  box-shadow: $unnnic-shadow-level-near;
-  position: fixed;
+  background-color: $unnnic-color-neutral-dark;
 
   z-index: 9999;
 
-  &-position {
-    &--top-right {
-      top: 1 * $unnnic-font-size;
-      right: 1 * $unnnic-font-size;
-    }
-    &--top-left {
-      top: 1 * $unnnic-font-size;
-      left: 1 * $unnnic-font-size;
-    }
-    &--bottom-right {
-      bottom: 1 * $unnnic-font-size;
-      right: 1 * $unnnic-font-size;
+  overflow: hidden;
+
+  @keyframes progress {
+    from {
+      width: 0;
     }
-    &--bottom-left {
-      bottom: 1 * $unnnic-font-size;
-      left: 1 * $unnnic-font-size;
+
+    to {
+      width: 100%;
     }
   }
 
-  &__content {
-    flex: 1;
-    margin:0 $unnnic-inline-xs;
+  &__progress {
+    position: absolute;
+    height: 100%;
+    background-color: $unnnic-color-neutral-darkest;
+    border-radius: $unnnic-border-radius-sm;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    z-index: -1;
+    animation-name: progress;
+    animation-duration: 5000ms;
+    animation-timing-function: linear;
   }
 
-  &__title {
-    color: $unnnic-color-neutral-darkest;
-    font-size: $unnnic-font-size-body-md;
-    font-family: $unnnic-font-family-secondary;
-    line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-    font-weight: $unnnic-font-weight-bold;
+  &:hover {
+    .alert__progress {
+      animation-play-state: paused;
+    }
   }
 
   &__text {
-    color: $unnnic-color-neutral-dark;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-    font-weight: $unnnic-font-weight-regular;
+    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
   }
 
+  &__link,
   &__close {
-    &-text {
-      color: $unnnic-color-brand-sec;
-      font-size: $unnnic-font-size-body-md;
-      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-      font-weight: $unnnic-font-weight-regular;
+    border-left: $unnnic-border-width-thinner solid $unnnic-color-neutral-cloudy;
+
+    &:hover {
+      background-color: $unnnic-color-neutral-cloudy;
+    }
+  }
+
+  &__link {
+    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
+    text-decoration: none;
+    color: inherit;
+    display: block;
+    font-weight: $unnnic-font-weight-bold;
+  }
+
+  &__close {
+    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  &--scheme-aux-green {
+    background-color: $unnnic-color-aux-green-500;
+
+    .alert__progress {
+      background-color: $unnnic-color-aux-green-700;
+    }
+
+    .alert__link,
+    .alert__close {
+      border-left: $unnnic-border-width-thinner solid
+        $unnnic-color-aux-green-300;
+
+      &:hover {
+        background-color: $unnnic-color-aux-green-300;
+      }
+    }
+  }
+
+  &--scheme-aux-red {
+    background-color: $unnnic-color-aux-red-500;
+
+    .alert__progress {
+      background-color: $unnnic-color-aux-red-700;
+    }
+
+    .alert__link,
+    .alert__close {
+      border-left: $unnnic-border-width-thinner solid $unnnic-color-aux-red-300;
 
-      margin-left: $unnnic-inline-xs;
+      &:hover {
+        background-color: $unnnic-color-aux-red-300;
+      }
     }
   }
 }

package/src/components/AudioRecorder/AudioHandler.vue

@@ -5,7 +5,7 @@
         {{ time }}
       </span>
 
-      <unnnic-icon
+      <UnnnicIcon
         icon="indicator"
         size="sm"
         :class="[{ 'is-recording': isRecording }]"
@@ -13,11 +13,22 @@
       />
     </div>
 
-    <unnnic-tool-tip enabled text="Salvar" side="top">
-      <span @click="save" @keypress.enter="save" class="unnnic--clickable">
-        <unnnic-icon icon="check-circle-1-1" scheme="feedback-green" />
+    <UnnnicToolTip
+      enabled
+      text="Salvar"
+      side="top"
+    >
+      <span
+        @click="save"
+        @keypress.enter="save"
+        class="unnnic--clickable"
+      >
+        <UnnnicIcon
+          icon="check-circle-1-1"
+          scheme="feedback-green"
+        />
       </span>
-    </unnnic-tool-tip>
+    </UnnnicToolTip>
   </div>
 </template>
 
@@ -58,19 +69,6 @@ export default {
   align-items: center;
   gap: $unnnic-spacing-stack-xs;
 
-  &__progress-bar {
-    width: 11.5 * $unnnic-font-size;
-    height: 2px;
-    border-radius: $unnnic-border-radius-sm;
-    background: $unnnic-color-neutral-cleanest;
-
-    &__bar {
-      background: $unnnic-color-neutral-darkest;
-      height: 100%;
-      width: 0%; // updated programmatically
-    }
-  }
-
   .unnnic-icon.is-recording ::v-deep {
     margin-left: $unnnic-spacing-inline-nano;
 

package/src/components/AudioRecorder/AudioPlayer.vue

@@ -1,12 +1,21 @@
 <template>
   <div class="audio-player">
-    <span @click="togglePlayback" @keypress.enter="togglePlayback" class="unnnic--clickable">
-      <unnnic-icon :icon="playbackIcon" scheme="neutral-darkest" />
+    <span
+      @click="click"
+      @keypress.enter="click"
+      class="unnnic--clickable"
+      :class="{ inactive: reqStatus === 'sending' }"
+    >
+      <UnnnicIcon
+        :icon="playbackIcon"
+        scheme="neutral-darkest"
+      />
     </span>
 
     <input
       v-if="showProgressBar"
       class="audio-player__progress-bar unnnic--clickable"
+      :class="{ inactive: reqStatus !== 'default' }"
       type="range"
       min="0"
       :max="duration"
@@ -16,14 +25,16 @@
       :style="progressBarStyle"
     />
 
-    <div v-else class="audio-player__progress-bar-bars">
+    <div
+      v-else
+      class="audio-player__progress-bar-bars"
+    >
       <div
         v-for="(bar, index) in bars"
         :key="index"
         :style="{ height: `${bar * 100}%` }"
         :class="['bar', { active: isBarActive(index) }]"
-      >
-      </div>
+      ></div>
     </div>
 
     <span class="audio-player__time">
@@ -49,6 +60,13 @@ export default {
       type: String,
       default: '',
     },
+    reqStatus: {
+      type: String,
+      default: 'default',
+      validate(status) {
+        return ['default', 'sending', 'failed'].includes(status);
+      },
+    },
     isPlaying: {
       type: Boolean,
       default: false,
@@ -69,6 +87,14 @@ export default {
   },
 
   methods: {
+    click() {
+      if (this.reqStatus === 'failed') {
+        this.$emit('failed-click');
+      } else if (this.reqStatus !== 'sending') {
+        this.togglePlayback();
+      }
+    },
+
     togglePlayback() {
       this[this.isPlaying ? 'pause' : 'play']();
     },
@@ -95,6 +121,15 @@ export default {
       return !this.bars || this.bars.length === 0;
     },
     playbackIcon() {
+      const statusMapping = {
+        sending: 'loading-circle-1',
+        failed: 'upload-bottom-1',
+      };
+
+      if (this.reqStatus in statusMapping) {
+        return statusMapping[this.reqStatus];
+      }
+
       return this.isPlaying ? 'controls-pause-1' : 'controls-play-1';
     },
     progressBarStyle() {
@@ -113,17 +148,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .audio-player {
   display: inline-flex;
   align-items: center;
   gap: $unnnic-spacing-stack-xs;
 
+  width: 100%;
+
   &__progress-bar {
     position: relative;
 
-    width: 11.5 * $unnnic-font-size;
+    width: clamp(85px, 100%, 185px);
     height: 2px;
 
     outline: none;
@@ -193,5 +230,8 @@ export default {
     margin-left: $unnnic-spacing-stack-xs;
   }
 
+  .inactive {
+    pointer-events: none;
+  }
 }
 </style>