@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/Sidebar/Sidebar.vue

@@ -1,17 +1,21 @@
 <template>
-    <div :class="{'unnnic-side-bar': true, 'unnnic-side-bar--contracted': !expanded}">
-        <div class="unnnic-side-bar__header">
-            <slot name="header" />
-        </div>
-        <slot />
-        <div class="unnnic-side-bar__footer">
-            <slot name="footer"/>
-        </div>
+  <div
+    :class="{
+      'unnnic-side-bar': true,
+      'unnnic-side-bar--contracted': !expanded,
+    }"
+  >
+    <div class="unnnic-side-bar__header">
+      <slot name="header" />
     </div>
+    <slot />
+    <div class="unnnic-side-bar__footer">
+      <slot name="footer" />
+    </div>
+  </div>
 </template>
 
 <script>
-
 export default {
   name: 'unnnic-sidebar',
   props: {
@@ -27,65 +31,64 @@ export default {
 @import '../../assets/scss/unnnic.scss';
 
 .unnnic-side-bar {
-    background-color: $unnnic-color-background-sky;
-    padding: $unnnic-inset-sm;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 15.375 * $unnnic-font-size;
-    transition: width .1s;
-    font-family: $unnnic-font-family-secondary;
-    box-sizing: border-box;
+  background-color: $unnnic-color-background-sky;
+  padding: $unnnic-inset-sm;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 15.375 * $unnnic-font-size;
+  transition: width 0.1s;
+  font-family: $unnnic-font-family-secondary;
+  box-sizing: border-box;
 
-    &--contracted {
-        width: 5.625 * $unnnic-font-size;
-        transition: width .1s;
+  &--contracted {
+    width: 5.625 * $unnnic-font-size;
+    transition: width 0.1s;
 
-        .unnnic-side-bar {
-            &-menu {
-                &__title {
-                    display: none;
-                    margin: 0;
-                }
+    .unnnic-side-bar {
+      &-menu {
+        &__title {
+          display: none;
+          margin: 0;
+        }
 
-                + .unnnic-side-bar-menu::before {
-                    width: 100%;
-                    height: 0px;
-                    border: 1px $unnnic-color-neutral-soft solid;
-                    content: '';
-                    display: block;
-                    margin-bottom: $unnnic-spacing-stack-md;
-                }
-            }
+        + .unnnic-side-bar-menu::before {
+          width: 100%;
+          height: 0px;
+          border: 1px $unnnic-color-neutral-soft solid;
+          content: '';
+          display: block;
+          margin-bottom: $unnnic-spacing-stack-md;
+        }
+      }
 
-            &-item {
-                display: flex;
-                justify-content: center;
+      &-item {
+        display: flex;
+        justify-content: center;
 
-                &__icon {
-                    margin: 0;
-                    font-size: $unnnic-icon-size-md !important;
-                    width: $unnnic-icon-size-md !important;
-                    height: $unnnic-icon-size-md !important;
-                }
+        &__icon {
+          margin: 0;
+          font-size: $unnnic-icon-size-md !important;
+          width: $unnnic-icon-size-md !important;
+          height: $unnnic-icon-size-md !important;
+        }
 
-                &__label {
-                    display: none;
-                }
-            }
+        &__label {
+          display: none;
         }
+      }
     }
+  }
 
-    &__header {
-        margin-bottom: $unnnic-spacing-stack-md;
-    }
+  &__header {
+    margin-bottom: $unnnic-spacing-stack-md;
+  }
 
-    &__footer {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-    }
+  &__footer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
 }
-
 </style>

package/src/components/Sidebar/SidebarItem.vue

@@ -1,20 +1,28 @@
 <template>
   <div
-    :class="{ 'unnnic-side-bar-item': true,
-              'unnnic-side-bar-item--active': active,
-              'unnnic--clickable': true,
-            }"
-    @click="onClick">
-    <tool-tip :enabled="enableTooltip" :text="text" side="right">
-    <u-icon
-      class="unnnic-side-bar-item__icon"
-      :scheme="active ? 'brand-weni-soft' : 'neutral-cloudy'"
-      size="sm"
-      :icon="icon"/>
-    <span class="unnnic-side-bar-item__label"> {{ text }}
-      <slot />
+    :class="{
+      'unnnic-side-bar-item': true,
+      'unnnic-side-bar-item--active': active,
+      'unnnic--clickable': true,
+    }"
+    @click="onClick"
+  >
+    <ToolTip
+      :enabled="enableTooltip"
+      :text="text"
+      side="right"
+    >
+      <UIcon
+        class="unnnic-side-bar-item__icon"
+        :scheme="active ? 'brand-weni-soft' : 'neutral-cloudy'"
+        size="sm"
+        :icon="icon"
+      />
+      <span class="unnnic-side-bar-item__label">
+        {{ text }}
+        <slot />
       </span>
-    </tool-tip>
+    </ToolTip>
   </div>
 </template>
 
@@ -59,32 +67,35 @@ export default {
 };
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 @import '../../assets/scss/unnnic.scss';
 
-    .unnnic-side-bar-item {
-        display: flex;
-        align-items: center;
-        color: $unnnic-color-neutral-darkest;
-        margin-bottom: $unnnic-spacing-stack-xs;
-        padding: $unnnic-inset-nano;
-        font-size: $unnnic-font-size-body-gt;
-        font-family: $unnnic-font-family-secondary;
-        border-radius: $unnnic-border-radius-sm;
-        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+.unnnic-side-bar-item {
+  display: flex;
+  align-items: center;
+  color: $unnnic-color-neutral-darkest;
+  margin-bottom: $unnnic-spacing-stack-xs;
+  padding: $unnnic-inset-nano;
+  font-size: $unnnic-font-size-body-gt;
+  font-family: $unnnic-font-family-secondary;
+  border-radius: $unnnic-border-radius-sm;
+  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
 
-        &--active {
-            background-color: rgba($unnnic-color-brand-weni, $unnnic-opacity-level-light);
-            font-weight: $unnnic-font-weight-bold;
-        }
+  &--active {
+    background-color: rgba(
+      $unnnic-color-brand-weni,
+      $unnnic-opacity-level-light
+    );
+    font-weight: $unnnic-font-weight-bold;
+  }
 
-        &__icon {
-           margin-right: $unnnic-inline-xs;
-           color: $unnnic-color-neutral-cloudy;
+  &__icon {
+    margin-right: $unnnic-inline-xs;
+    color: $unnnic-color-neutral-cloudy;
 
-           &--active {
-               color: $unnnic-color-brand-weni;
-           }
-        }
+    &--active {
+      color: $unnnic-color-brand-weni;
     }
+  }
+}
 </style>

package/src/components/Sidebar/SidebarMenu.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="unnnic-side-bar-menu">
-        <p class="unnnic-side-bar-menu__title"> {{ text }} </p>
-        <slot />
-    </div>
+  <div class="unnnic-side-bar-menu">
+    <p class="unnnic-side-bar-menu__title">{{ text }}</p>
+    <slot />
+  </div>
 </template>
 
 <script>
@@ -17,18 +17,18 @@ export default {
 };
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 @import '../../assets/scss/unnnic.scss';
-    .unnnic-side-bar-menu {
-        color: $unnnic-color-neutral-cloudy;
-        font-family: $unnnic-font-family-secondary;
-        font-weight: $unnnic-font-weight-regular;
-        margin-bottom: $unnnic-spacing-stack-md;
+.unnnic-side-bar-menu {
+  color: $unnnic-color-neutral-cloudy;
+  font-family: $unnnic-font-family-secondary;
+  font-weight: $unnnic-font-weight-regular;
+  margin-bottom: $unnnic-spacing-stack-md;
 
-        &__title {
-            margin: 0 0 $unnnic-spacing-stack-xs 0;
-            font-size: $unnnic-font-size-body-md;
-            line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-        }
-    }
+  &__title {
+    margin: 0 0 $unnnic-spacing-stack-xs 0;
+    font-size: $unnnic-font-size-body-md;
+    line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+  }
+}
 </style>

package/src/components/Sidebar/SidebarPrimary.vue

@@ -1,27 +1,46 @@
 <template>
   <div
-    :class="['unnnic-sidebar-primary', { 'unnnic-sidebar-primary-expanded': expanded, }]"
+    :class="[
+      'unnnic-sidebar-primary',
+      { 'unnnic-sidebar-primary-expanded': expanded },
+    ]"
   >
     <div class="header">
       <slot name="header"></slot>
     </div>
 
+    <div>
+      <slot name="search"></slot>
+    </div>
+
     <div class="unnnic-sidebar-primary-content">
-      <div ref="sidebar-modal" class="hover" :style="{ top: `${hoverTop}px` }">
+      <div
+        ref="sidebar-modal"
+        class="hover"
+        :style="{ top: `${hoverTop}px` }"
+      >
         <slot :name="'block-' + blockActiveId"></slot>
       </div>
 
-      <div v-for="(category, index) in items" :key="index" class="category">
+      <div
+        v-for="(category, index) in items"
+        :key="index"
+        class="category"
+      >
         <div class="category-label">{{ category.label }}</div>
 
         <div class="options">
-          <div  v-for="(option, index) in category.items" :key="index" class="option-container">
-            <tool-tip
+          <div
+            v-for="(option, index) in category.items"
+            :key="index"
+            class="option-container"
+          >
+            <ToolTip
               :enabled="!expanded"
               :text="option.label"
               side="right"
-              @mouseenter.native="hover($event, option.id)"
-              @mouseleave.native="mouseout"
+              @mouseenter="hover($event, option.id)"
+              @mouseleave="mouseout"
             >
               <a
                 :href="option.viewUrl"
@@ -29,35 +48,39 @@
                   'option',
                   {
                     selected: option.active,
-                    disabled: $slots[`block-${option.id}`]
-                  }
+                    disabled: $slots[`block-${option.id}`],
+                  },
                 ]"
-                @click.prevent="() => {
-                  if ($slots[`block-${option.id}`]) {
-                    return;
-                  }
+                @click.prevent="
+                  () => {
+                    if ($slots[`block-${option.id}`]) {
+                      return;
+                    }
 
-                  clickOption(option);
-                }"
+                    clickOption(option);
+                  }
+                "
               >
-                <icon-svg
+                <IconSvg
                   :icon="option.icon"
                   :scheme="option.active ? 'brand-weni-soft' : 'neutral-cloudy'"
                   :size="!expanded ? 'md' : 'ant'"
+                  :filled="option.active"
                 />
 
                 <span class="label">{{ option.label }}</span>
-                <span :class="
-                  option.notify && !expanded ? 'notify':''"
-                  v-if="option.notify">
-                  <icon-svg
+                <span
+                  :class="option.notify && !expanded ? 'notify' : ''"
+                  v-if="option.notify"
+                >
+                  <IconSvg
                     icon="indicator"
                     scheme="brand-weni-soft"
                     size="ant"
                   />
                 </span>
               </a>
-            </tool-tip>
+            </ToolTip>
           </div>
         </div>
 
@@ -69,27 +92,37 @@
       <div class="category">
         <div class="options">
           <div class="option-container">
-            <language-select
+            <LanguageSelect
               class="language-select"
               :contracted="!expanded"
               :value="language"
-              :supported-languages="languages"
+              :supportedLanguages="languages"
               @input="$emit('change-language', $event)"
             />
           </div>
 
-          <div v-show="!hideExpandButton" class="option-container">
-            <tool-tip :enabled="!expanded" :text="hideText" side="right">
-              <div class="option" @click="toggleExpanded">
-                <icon-svg
-                  :icon="expanded ? 'expand-8-1' : 'expand-full-1'"
+          <div
+            v-show="!hideExpandButton"
+            class="option-container"
+          >
+            <ToolTip
+              :enabled="!expanded"
+              :text="hideText"
+              side="right"
+            >
+              <div
+                class="option"
+                @click="toggleExpanded"
+              >
+                <IconSvg
+                  :icon="expanded ? 'close_fullscreen' : 'open_in_full'"
                   :scheme="'neutral-cloudy'"
                   :size="!expanded ? 'md' : 'ant'"
                 />
 
                 <span class="label">{{ hideText }}</span>
               </div>
-            </tool-tip>
+            </ToolTip>
           </div>
         </div>
       </div>
@@ -184,7 +217,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 $transition-time: 0.4s;
 
@@ -222,7 +255,9 @@ $transition-time: 0.4s;
     }
 
     &.move-transition {
-      transition: opacity 100ms, top 100ms;
+      transition:
+        opacity 100ms,
+        top 100ms;
     }
   }
 
@@ -240,10 +275,6 @@ $transition-time: 0.4s;
   }
 
   .footer {
-    .language-select ::v-deep .unnnic-language-select {
-      padding: $unnnic-inset-xs;
-    }
-
     .category {
       padding-bottom: 0;
 
@@ -285,7 +316,7 @@ $transition-time: 0.4s;
       padding-bottom: $unnnic-spacing-stack-xs;
     }
 
-    ::v-deep > .unnnic-tooltip {
+    :deep(.unnnic-tooltip) {
       width: 100%;
       display: block;
     }
@@ -309,7 +340,7 @@ $transition-time: 0.4s;
       display: flex;
       align-items: center;
 
-      ::v-deep .unnnic-icon {
+      :deep(.unnnic-icon) {
         transition: all $transition-time;
         float: left;
         margin-right: 0;
@@ -326,14 +357,21 @@ $transition-time: 0.4s;
         overflow: hidden;
         text-overflow: ellipsis;
         user-select: none;
+        margin-left: $unnnic-spacing-xs;
       }
 
       &:hover:not(.disabled) {
-        background-color: rgba($unnnic-color-brand-weni, $unnnic-opacity-level-light);
+        background-color: rgba(
+          $unnnic-color-brand-weni,
+          $unnnic-opacity-level-light
+        );
       }
 
       &.selected {
-        background-color: rgba($unnnic-color-brand-weni, $unnnic-opacity-level-light);
+        background-color: rgba(
+          $unnnic-color-brand-weni,
+          $unnnic-opacity-level-light
+        );
 
         font-weight: $unnnic-font-weight-bold;
         color: $unnnic-color-neutral-darkest;
@@ -342,7 +380,7 @@ $transition-time: 0.4s;
       &.disabled {
         cursor: not-allowed;
 
-        .unnnic-icon ::v-deep .primary {
+        .unnnic-icon :deep(.primary) {
           fill: $unnnic-color-neutral-clean;
         }
 
@@ -351,7 +389,7 @@ $transition-time: 0.4s;
         }
       }
 
-      .notify{
+      .notify {
         position: absolute;
         top: 0;
         right: 0;
@@ -369,10 +407,6 @@ $transition-time: 0.4s;
         margin-bottom: $unnnic-spacing-stack-xs;
       }
 
-      .option ::v-deep .unnnic-icon {
-        margin-right: $unnnic-spacing-inline-xs;
-      }
-
       &:not(:last-child) .divider {
         width: 0;
         height: 0;