@weni/unnnic-system 2.0.0 → 2.0.2

package/src/components/Dropdown/LanguageSelect.vue

@@ -1,8 +1,18 @@
 <template>
-  <div v-if="contracted" class="unnnic-language-select contracted" v-click-outside="onClickOutside">
-    <div :class="['container contracted', { open }]" @click="onClickTrigger">
+  <div
+    v-if="contracted"
+    class="unnnic-language-select contracted"
+    v-on-click-outside="onClickOutside"
+  >
+    <div
+      :class="['container contracted', { open }]"
+      @click="onClickTrigger"
+    >
       <div class="option">
-        <unnnic-flag size="sm" :code="val" />
+        <UnnnicFlag
+          size="sm"
+          :code="val"
+        />
       </div>
 
       <div
@@ -11,17 +21,28 @@
         class="option"
         @click="val = language.id"
       >
-        <unnnic-flag size="sm" :code="language.id" />
+        <UnnnicFlag
+          size="sm"
+          :code="language.id"
+        />
       </div>
     </div>
   </div>
 
-  <div v-else class="unnnic-language-select normal" v-click-outside="onClickOutside">
-    <div :class="['container normal', { open }]" @click="onClickTrigger">
+  <div
+    v-else
+    class="unnnic-language-select normal"
+    v-on-click-outside="onClickOutside"
+  >
+    <div
+      :class="['container normal', { open }]"
+      @click="onClickTrigger"
+    >
       <div
         :style="{
           position: 'absolute',
-          [position === 'bottom' ? 'top' : 'bottom']: -0.125 * unnnicFontSize + 'px',
+          [position === 'bottom' ? 'top' : 'bottom']:
+            -0.125 * unnnicFontSize + 'px',
           width: '100%',
           padding: 0.0625 * unnnicFontSize + 'px',
           left: -0.0625 * unnnicFontSize + 'px',
@@ -30,11 +51,14 @@
       >
         <template v-if="position === 'bottom'">
           <div class="option">
-            <unnnic-flag size="sm" :code="val" />
+            <UnnnicFlag
+              size="sm"
+              :code="val"
+            />
 
             <div class="label">{{ languages[val] }}</div>
 
-            <unnnic-icon
+            <UnnnicIcon
               size="xs"
               :icon="dropdownIcon"
               scheme="neutral-clean"
@@ -50,7 +74,10 @@
           :key="language.id"
           @click="val = language.id"
         >
-          <unnnic-flag size="sm" :code="language.id" />
+          <UnnnicFlag
+            size="sm"
+            :code="language.id"
+          />
 
           <div class="label">{{ languages[language.id] }}</div>
         </div>
@@ -59,11 +86,14 @@
           <div class="divider"></div>
 
           <div class="option">
-            <unnnic-flag size="sm" :code="val" />
+            <UnnnicFlag
+              size="sm"
+              :code="val"
+            />
 
             <div class="label">{{ languages[val] }}</div>
 
-            <unnnic-icon
+            <UnnnicIcon
               size="xs"
               :icon="dropdownIcon"
               scheme="neutral-clean"
@@ -75,7 +105,7 @@
   </div>
 </template>
 <script>
-import vClickOutside from 'v-click-outside';
+import { vOnClickOutside } from '@vueuse/components';
 import unnnicFlag from '../Flag.vue';
 import UnnnicIcon from '../Icon.vue';
 import { unnnicFontSize } from '../config';
@@ -105,7 +135,7 @@ export default {
     },
   },
   directives: {
-    clickOutside: vClickOutside.directive,
+    onClickOutside: vOnClickOutside,
   },
   methods: {
     onClickTrigger() {
@@ -139,10 +169,13 @@ export default {
         es: 'Español',
       };
 
-      return this.supportedLanguages.reduce((previous, current) => ({
-        ...previous,
-        [current]: languages[current],
-      }), {});
+      return this.supportedLanguages.reduce(
+        (previous, current) => ({
+          ...previous,
+          [current]: languages[current],
+        }),
+        {},
+      );
     },
 
     otherLanguages() {
@@ -168,12 +201,13 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-language-select {
   &.normal {
     width: 100%;
-    height: $unnnic-font-size-body-md + $unnnic-line-height-md + 2 * $unnnic-spacing-stack-xs;
+    height: $unnnic-font-size-body-md + $unnnic-line-height-md + 2 *
+      $unnnic-spacing-stack-xs;
     position: relative;
   }
 
@@ -216,7 +250,8 @@ export default {
     background-color: $unnnic-color-background-snow;
     min-width: 9 * $unnnic-font-size;
     width: 100%;
-    height: $unnnic-font-size-body-md + $unnnic-line-height-md + 2 * $unnnic-spacing-stack-xs;
+    height: $unnnic-font-size-body-md + $unnnic-line-height-md + 2 *
+      $unnnic-spacing-stack-xs;
     box-sizing: border-box;
     overflow: hidden;
     cursor: pointer;

package/src/components/EmojiPicker/EmojiPicker.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    @click.stop="() => {}"
+    @keypress.enter="() => {}"
+    ref="pickerContainer"
+    class="emoji-picker"
+  />
+</template>
+
+<script>
+import i18n from '@emoji-mart/data/i18n/pt.json';
+import data from '@emoji-mart/data/sets/14/apple.json';
+import { Picker } from 'emoji-mart/';
+
+export default {
+  mounted() {
+    this.initPicker();
+  },
+
+  computed: {
+    emojiPickerPreferences() {
+      return {
+        data,
+        set: 'apple',
+        theme: 'light',
+        previewPosition: 'none',
+        searchPosition: 'none',
+        navPosition: 'bottom',
+        noResultsEmoji: 'cry',
+        maxFrequentRows: 3,
+      };
+    },
+  },
+  methods: {
+    initPicker() {
+      // eslint-disable-next-line no-new
+      new Picker({
+        i18n,
+        parent: this.$refs.pickerContainer,
+        onEmojiSelect: this.onEmojiSelect,
+        onClickOutside: () => this.$emit('close'),
+        ...this.emojiPickerPreferences,
+      });
+    },
+    onEmojiSelect(emoji) {
+      this.$emit('emojiSelected', emoji.native);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.emoji-picker {
+  position: absolute;
+  bottom: 100%;
+  z-index: 1;
+
+  animation: slideInUp 0.3s;
+
+  :deep(em-emoji-picker) {
+    // Most variables don't work here
+    --border-radius: 16px;
+    --font-family: Lato, sans-serif; // $unnnic-font-family
+    --rgb-accent: 0, 164, 159; // $unnnic-color-weni-600
+    --rgb-color: 59, 65, 77; // $unnnic-color-neutral-darkest
+    --color-border: rgb(244, 246, 248);
+    --shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+
+    cursor: default;
+  }
+}
+
+@keyframes slideInUp {
+  0% {
+    transform: translateY(5%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+</style>

package/src/components/Flag.vue

@@ -1,5 +1,5 @@
 <template>
-  <unnnic-icon-svg
+  <UnnnicIconSvg
     :icon="name"
     :size="size"
   />
@@ -7,7 +7,7 @@
 
 <script>
 /* eslint-disable global-require */
-/* eslint-disable import/no-dynamic-require */
+/* eslint-disable vue/multi-word-component-names */
 import UnnnicIconSvg from './Icon.vue';
 
 export default {

package/src/components/FormElement/FormElement.vue

@@ -4,7 +4,11 @@
       v-if="label"
       :class="[
         'label unnnic-font secondary color-neutral-cloudy',
-        { 'body-md': size === 'sm', 'body-gt': size == 'md' },
+        {
+          'body-md': size === 'sm',
+          'body-gt': size == 'md',
+          'label--fixed': fixedLabel,
+        },
       ]"
     >
       {{ label }}
@@ -19,7 +23,10 @@
       {{ error }}
     </div>
 
-    <div v-if="message" class="message unnnic-font secondary body-md color-neutral-cloudy">
+    <div
+      v-if="message"
+      class="message unnnic-font secondary body-md color-neutral-cloudy"
+    >
       {{ message }}
     </div>
   </div>
@@ -36,12 +43,16 @@ export default {
 
     label: String,
 
+    fixedLabel: Boolean,
+
     error: [Boolean, String],
 
     message: String,
   },
 
-  data() {},
+  data() {
+    return {};
+  },
 };
 </script>
 
@@ -50,7 +61,36 @@ export default {
 
 .unnnic-form-element {
   .label {
-    margin-bottom: $unnnic-spacing-stack-xs;
+    margin-bottom: $unnnic-spacing-xs;
+
+    $label-bottom-spacing: 3px;
+
+    &--fixed.unnnic-font.body-md {
+      margin-top: -$unnnic-font-size-body-md - $unnnic-line-height-md +
+        $label-bottom-spacing;
+    }
+
+    &--fixed.unnnic-font.body-gt {
+      margin-top: -$unnnic-font-size-body-gt - $unnnic-line-height-md +
+        $label-bottom-spacing;
+    }
+
+    &--fixed {
+      margin-bottom: 0;
+      position: absolute;
+      padding: 0 $unnnic-spacing-nano;
+      margin-left: $unnnic-spacing-xs;
+
+      &:after {
+        content: ' ';
+        position: absolute;
+        left: 0;
+        bottom: $label-bottom-spacing - $unnnic-border-width-thinner;
+        width: 100%;
+        height: $unnnic-border-width-thinner;
+        background-color: $unnnic-color-neutral-white;
+      }
+    }
   }
 
   .message {

package/src/components/Icon/OldIconsMap.json

@@ -0,0 +1,97 @@
+{
+  "lock-2-1": "lock",
+  "view-1-1": "visibility",
+  "view-off-1": "visibility_off",
+  "read-email-at-1": "alternate_email",
+  "email-action-unread-1": "mail",
+  "loading-circle-1": "progress_activity",
+  "close-1": "close",
+  "alert-circle-1": "error",
+  "check-circle-1-1": "check_circle",
+  "search-1": "search",
+  "house-1-1": "some",
+  "gauge-dashboard-2": "speed",
+  "science-fiction-robot-2": "neurology",
+  "hierarchy-3-2": "account_tree",
+  "messaging-we-chat-3": "forum",
+  "question-circle-1": "help",
+  "alarm-bell-3": "notifications",
+  "expand-full-1": "open_in_full",
+  "expand-8-1": "close_fullscreen",
+  "logout-1-1": "logout",
+  "arrow-left-1-1": "chevron_left",
+  "arrow-right-1-1": "chevron_right",
+  "arrow-button-down-1": "expand_more",
+  "task-list-clock-1": "pending_actions",
+  "graph-stats-ascend-2": "trending_up",
+  "graph-stats-descend-2": "trending_down",
+  "messages-bubble-1": "chat_bubble",
+  "chat-translate-1": "translate",
+  "arrow-button-up-1": "expand_less",
+  "delete-1": "error",
+  "button-refresh-arrow-1": "refresh",
+  "book-address-1-2": "contacts",
+  "synchronize-arrow-clock-4": "update",
+  "flash-1-3": "bolt",
+  "phone-3": "call",
+  "layout-dashboard-1": "dashboard",
+  "check-square-1": "task_alt",
+  "cog-1": "settings",
+  "download-bottom-1": "download",
+  "charger-1": "cloud",
+  "upload-bottom-1": "upload",
+  "copy-paste-1": "content_copy",
+  "pencil-write-1": "edit_square",
+  "add-1": "add",
+  "time-clock-circle-1": "schedule",
+  "button-refresh-arrows-1": "refresh",
+  "keyboard-return-1": "keyboard_return",
+  "delete-1-1": "dangerous",
+  "keyboard-arrow-left-1": "keyboard_backspace",
+  "graph-stats-circle-1": "vital_signs",
+  "graph-stats-1": "vital_signs",
+  "paginate-filter-text-1": "article",
+  "keyboard-arrow-down-1": "south",
+  "study-light-idea-1": "lightbulb",
+  "folder-1": "folder",
+  "export-1": "open_in_new",
+  "add-circle-1": "add_circle",
+  "subtract-circle-1": "do_not_disturb_on",
+  "button-play-1": "play_circle",
+  "lock-unlock-1-1": "lock_open_right",
+  "video-file-mp4-1": "video_file",
+  "office-file-pdf-1-1": "picture_as_pdf",
+  "send-email-3-1": "send",
+  "rating-star-1": "star",
+  "floppy-disk-1": "save",
+  "common-file-empty-1": "check_box_outline_blank",
+  "currency-dollar-circle-1": "paid",
+  "app-window-edit-1": "web_asset",
+  "headphones-customer-support-human-1-1": "headset_mic",
+  "bin-1-1": "delete",
+  "book-library-1": "school",
+  "notes-1": "event_note",
+  "arrow-undo": "undo",
+  "arrow-redo": "redo",
+  "emoji": "mood",
+  "text-bold": "format_bold",
+  "text-italic": "format_italic",
+  "text-left": "format_align_left",
+  "text-center": "format_align_center",
+  "text-right": "format_align_right",
+  "text-justified": "format_align_justify",
+  "attachment": "attach_file",
+  "microphone": "mic",
+  "controls-play-1": "play_arrow",
+  "controls-pause-1": "pause",
+  "common-file-horizontal-image-1": "image",
+  "information-circle-4": "info",
+  "task-checklist-1": "content_paste",
+  "preferences": "tune",
+  "check-double": "done",
+  "alarm-bell-ring": "notifications_ative",
+  "bookmark-tag-1": "sell",
+  "move-expand-vertical-1": "unfold_more",
+  "text-underline": "format_underlined",
+  "unordered-list": "list"
+}