@weni/unnnic-system 2.0.0 → 2.0.2

package/src/components/Card/Card.vue

@@ -1,31 +1,36 @@
 <template>
-    <component
-      class="unnnic-card-component"
-      :is="currentComponent"
-      :v-bind="$attrs"
-      :title="title"
-      :text="text"
-      :info="info"
-      :icon="currentTypeIcon"
-      :icon-src="iconSrc"
-      :rating="rating"
-      :comments="comments"
-      :type-action="typeAction"
-      :button-action="buttonAction"
-      :value="value"
-      :percent="percent"
-      :inverted-percentage="invertedPercentage"
-      :status="status"
-      :description="description"
-      :info-position="infoPosition"
-      :enabled="enabled"
-      :scheme="scheme"
-      :clickable="clickable"
-      :has-information-icon="hasInformationIcon"
-      @openModal="openModal"
+  <component
+    class="unnnic-card-component"
+    :is="currentComponent"
+    v-bind="$attrs"
+    :title="title"
+    :text="text"
+    :info="info"
+    :icon="currentTypeIcon"
+    :iconSrc="iconSrc"
+    :rating="rating"
+    :comments="comments"
+    :typeAction="typeAction"
+    :buttonAction="buttonAction"
+    :value="value"
+    :percent="percent"
+    :invertedPercentage="invertedPercentage || null"
+    :status="status"
+    :description="description"
+    :infoPosition="infoPosition"
+    :enabled="enabled"
+    :scheme="scheme"
+    :clickable="clickable || null"
+    :hasInformationIcon="hasInformationIcon || null"
+    @openModal="openModal"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]
     >
-      <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
-    </component>
+      <slot :name="name" />
+    </template>
+  </component>
 </template>
 
 <script>
@@ -46,7 +51,16 @@ export default {
       default: 'title',
       validator(value) {
         return (
-          ['title', 'status', 'dash', 'account', 'default', 'blank', 'content', 'marketplace'].indexOf(value) !== -1
+          [
+            'title',
+            'status',
+            'dash',
+            'account',
+            'default',
+            'blank',
+            'content',
+            'marketplace',
+          ].indexOf(value) !== -1
         );
       },
     },
@@ -114,8 +128,21 @@ export default {
       type: String,
       default: 'aux-blue',
       validator(value) {
-        return ['feedback-red', 'feedback-green', 'feedback-yellow', 'feedback-blue', 'feedback-grey',
-          'aux-blue', 'aux-purple', 'aux-orange', 'aux-lemon', 'aux-pink', 'brand-weni-soft'].indexOf(value) !== -1;
+        return (
+          [
+            'feedback-red',
+            'feedback-green',
+            'feedback-yellow',
+            'feedback-blue',
+            'feedback-grey',
+            'aux-blue',
+            'aux-purple',
+            'aux-orange',
+            'aux-lemon',
+            'aux-pink',
+            'brand-weni-soft',
+          ].indexOf(value) !== -1
+        );
       },
     },
     clickable: {
@@ -173,12 +200,12 @@ $scheme-colors:
   '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,
-   'brand-weni-soft' $unnnic-color-brand-weni-soft;
+  '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,
+  'brand-weni-soft' $unnnic-color-brand-weni-soft;
 
 @each $name, $color in $scheme-colors {
   .unnnic-card-scheme {

package/src/components/Card/CardCompany.vue

@@ -2,20 +2,31 @@
   <div class="unnnic-card-company">
     <div class="content">
       <div class="header">
-        <div class="title" :title="title">
+        <div
+          class="title"
+          :title="title"
+        >
           {{ cutLength(title, 20) }}
         </div>
 
-        <div v-if="tag" class="tag">{{ tag }}</div>
+        <div
+          v-if="tag"
+          class="tag"
+        >
+          {{ tag }}
+        </div>
       </div>
 
-      <div class="description" :title="description">
+      <div
+        class="description"
+        :title="description"
+      >
         {{ cutLength(description, 36) }}
       </div>
 
       <div class="members">
         <div class="avatars">
-          <tool-tip
+          <ToolTip
             v-for="(member, index) in membersLimited"
             :key="index"
             class="avatar-container"
@@ -24,28 +35,40 @@
             enabled
           >
             <div class="avatar__background">
-              <div class="avatar" :style="{ backgroundImage: `url(${member.photo})` }" />
+              <div
+                class="avatar"
+                :style="{ backgroundImage: `url(${member.photo})` }"
+              />
             </div>
-          </tool-tip>
+          </ToolTip>
         </div>
 
         <div class="members-description">{{ membersDescription }}</div>
       </div>
     </div>
     <div class="join-button">
-      <unnnic-tag @click="join" :text="joinLabel" scheme="aux-blue" clickable></unnnic-tag>
+      <UnnnicTag
+        @click="join"
+        :text="joinLabel"
+        scheme="aux-blue"
+        clickable
+      ></UnnnicTag>
     </div>
-    <div class="more-button" v-if="options.length">
-      <unnnic-dropdown>
-        <unnnic-icon
-          slot="trigger"
-          icon="navigation-menu-vertical-1"
-          scheme="neutral-cleanest"
-          size="sm"
-          clickable
-        />
-
-        <unnnic-dropdown-item
+    <div
+      class="more-button"
+      v-if="options.length"
+    >
+      <UnnnicDropdown>
+        <template v-slot:trigger>
+          <UnnnicIcon
+            icon="navigation-menu-vertical-1"
+            scheme="neutral-cleanest"
+            size="sm"
+            clickable
+          />
+        </template>
+
+        <UnnnicDropdownItem
           v-for="(option, index) in options"
           :key="index"
           @click="
@@ -57,7 +80,7 @@
           "
         >
           <div :class="['menu-item', { [option.scheme]: option.scheme }]">
-            <unnnic-icon
+            <UnnnicIcon
               class="icon"
               size="sm"
               :icon="option.icon"
@@ -66,8 +89,8 @@
 
             {{ option.title }}
           </div>
-        </unnnic-dropdown-item>
-      </unnnic-dropdown>
+        </UnnnicDropdownItem>
+      </UnnnicDropdown>
     </div>
   </div>
 </template>
@@ -153,7 +176,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-card-company {
   background-color: $unnnic-color-background-sky;

package/src/components/Card/CardData.vue

@@ -3,8 +3,11 @@
     <div class="header">
       <div class="title">{{ title }}</div>
 
-      <div v-if="checked" class="check">
-        <unnnic-icon
+      <div
+        v-if="checked"
+        class="check"
+      >
+        <UnnnicIcon
           size="md"
           icon="check-circle-1-1-1"
           scheme="feedback-green"
@@ -14,9 +17,12 @@
 
     <div class="description">{{ description }}</div>
 
-    <div v-if="score || info" class="footer">
+    <div
+      v-if="score || info"
+      class="footer"
+    >
       <div class="evaluation">
-        <unnnic-icon
+        <UnnnicIcon
           v-if="score"
           size="sm"
           icon="rating-star-1"
@@ -63,7 +69,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .card {
   background-color: $unnnic-color-background-snow;

package/src/components/Card/CardStatusesContainer.vue

@@ -2,11 +2,17 @@
   <div class="unnnic-card-container">
     <div class="header">
       <div class="title">
-        <span class="name" :title="name.length > 25 ? name : null">
+        <span
+          class="name"
+          :title="name.length > 25 ? name : null"
+        >
           {{ name }}
         </span>
 
-        <div v-if="subtitle" class="subtitle">
+        <div
+          v-if="subtitle"
+          class="subtitle"
+        >
           {{ subtitle }}
         </div>
       </div>
@@ -14,23 +20,37 @@
       <slot name="header-buttons" />
     </div>
 
-    <div v-if="description" class="description">
+    <div
+      v-if="description"
+      class="description"
+    >
       {{ description }}
     </div>
 
-    <div v-if="descriptionRow || descriptionRowInfo" class="description-row-container">
-      <div v-if="descriptionRow" class="description-row">
+    <div
+      v-if="descriptionRow || descriptionRowInfo"
+      class="description-row-container"
+    >
+      <div
+        v-if="descriptionRow"
+        class="description-row"
+      >
         {{ descriptionRow }}
       </div>
 
-      <unnnic-tool-tip v-if="descriptionRowInfo" side="top" :text="descriptionRowInfo" enabled>
-        <unnnic-icon
+      <UnnnicToolTip
+        v-if="descriptionRowInfo"
+        side="top"
+        :text="descriptionRowInfo"
+        enabled
+      >
+        <UnnnicIcon
           class="info"
           icon="information-circle-4"
           size="sm"
           scheme="neutral-soft"
-        ></unnnic-icon>
-      </unnnic-tool-tip>
+        ></UnnnicIcon>
+      </UnnnicToolTip>
     </div>
 
     <div class="separator" />
@@ -43,11 +63,19 @@
         gridTemplateColumns: `repeat(auto-fit, minmax(${minStatusWidth}, 1fr))`,
       }"
     >
-      <div class="status" v-for="(status, index) in statuses" :key="index">
+      <div
+        class="status"
+        v-for="(status, index) in statuses"
+        :key="index"
+      >
         <div class="title">{{ status.title }}</div>
 
         <div class="content">
-          <unnnic-avatar-icon :icon="status.icon" :scheme="status.scheme" size="xs" />
+          <UnnnicAvatarIcon
+            :icon="status.icon"
+            :scheme="status.scheme"
+            size="xs"
+          />
 
           <div class="number">
             {{ status.count }}
@@ -102,7 +130,7 @@ export default {
     },
 
     minStatusWidth: {
-      type: String,
+      type: [String, Number],
       default: 5.625 * unnnicFontSize,
     },
   },
@@ -110,7 +138,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-card-container {
   padding: $unnnic-inset-sm;
@@ -189,7 +217,10 @@ export default {
     display: grid;
     justify-content: space-between;
     gap: $unnnic-spacing-inline-xs;
-    grid-template-columns: repeat(auto-fit, minmax(5.625 * $unnnic-font-size, 1fr));
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(5.625 * $unnnic-font-size, 1fr)
+    );
 
     .status {
       flex: 1;

package/src/components/Card/ContentCard.vue

@@ -6,8 +6,13 @@
       'unnnic-card-content__clickable': clickable,
     }"
   >
-    <div :class="['unnnic-card-content__icon', enabled && 'unnnic-card-content__icon--disabled']">
-      <unnnic-icon-svg
+    <div
+      :class="[
+        'unnnic-card-content__icon',
+        enabled && 'unnnic-card-content__icon--disabled',
+      ]"
+    >
+      <UnnnicIconSvg
         :icon="icon"
         scheme="neutral-cloudy"
         size="sm"
@@ -15,7 +20,9 @@
     </div>
     <div class="unnnic-card-content__content">
       <div class="unnnic-card-content__content__title">{{ title }}</div>
-      <div class="unnnic-card-content__content__description">{{ description }}</div>
+      <div class="unnnic-card-content__content__description">
+        {{ description }}
+      </div>
     </div>
   </div>
 </template>
@@ -54,7 +61,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-card-content {
   display: flex;
@@ -128,7 +135,10 @@ export default {
     background-color: $unnnic-color-neutral-lightest;
 
     &--disabled {
-      background-color: rgba($unnnic-color-brand-weni-dark, $unnnic-opacity-level-extra-light);
+      background-color: rgba(
+        $unnnic-color-brand-weni-dark,
+        $unnnic-opacity-level-extra-light
+      );
     }
   }
 }

package/src/components/Card/DashCard.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="unnnic-card-dash">
     <div class="header">
-      <unnnic-avatar-icon
+      <UnnnicAvatarIcon
         size="sm"
         :scheme="scheme"
         :icon="icon"
-      ></unnnic-avatar-icon>
+      />
 
       <div class="label">{{ title }}</div>
     </div>
@@ -13,8 +13,11 @@
     <div class="content">
       <div class="value">{{ value }}</div>
 
-      <div v-if="percent" :class="['percent', `unnnic-card-scheme--feedback-${color}`]">
-        <unnnic-icon
+      <div
+        v-if="percent"
+        :class="['percent', `unnnic-card-scheme--feedback-${color}`]"
+      >
+        <UnnnicIcon
           :icon="`graph-stats-${percent >= 0 ? 'ascend' : 'descend'}-2`"
           :scheme="`feedback-${color}`"
           size="sm"
@@ -79,7 +82,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-card-dash {
   display: flex;

package/src/components/Card/DefaultCard.vue

@@ -1,17 +1,23 @@
 <template>
-  <div :class="{
+  <div
+    :class="{
       'unnnic-card-default': true,
       'unnnic-card-default__clickable': clickable,
-    }">
+    }"
+  >
     <div class="unnnic-card-default__content">
       <div class="unnnic-card-default__title">{{ title }}</div>
-      <p class="unnnic-card-default__description" :title="description">{{ description }}</p>
+      <p
+        class="unnnic-card-default__description"
+        :title="description"
+      >
+        {{ description }}
+      </p>
     </div>
   </div>
 </template>
 
 <script>
-
 export default {
   name: 'unnnic-card',
   props: {
@@ -32,7 +38,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-card-default {
   display: flex;

package/src/components/Card/MarketplaceCard.vue

@@ -10,23 +10,36 @@
     @click="cardClick"
   >
     <div :class="['unnnic-card-marketplace__icons']">
-      <img class="unnnic-card-marketplace__icons__app" :src="iconSrc" />
+      <img
+        class="unnnic-card-marketplace__icons__app"
+        :src="iconSrc"
+      />
       <slot name="actions"></slot>
     </div>
     <div class="unnnic-card-marketplace__content">
       <div class="unnnic-card-marketplace__content__title">{{ title }}</div>
-      <div class="unnnic-card-marketplace__content__description" :title="description">
+      <div
+        class="unnnic-card-marketplace__content__description"
+        :title="description"
+      >
         {{ description }}
       </div>
-      <div v-if="typeAction === 'add'" class="unnnic-card-marketplace__content__rating">
-        <unnnic-icon-svg
+      <div
+        v-if="typeAction === 'add'"
+        class="unnnic-card-marketplace__content__rating"
+      >
+        <UnnnicIconSvg
           class="unnnic-card-marketplace__content__rating__star"
           scheme="feedback-yellow"
           icon="rating-star-1"
           size="ant"
         />
-        <div class="unnnic-card-marketplace__content__rating__value">{{ rating }}</div>
-        <div class="unnnic-card-marketplace__content__rating__comments">({{ comments }})</div>
+        <div class="unnnic-card-marketplace__content__rating__value">
+          {{ rating }}
+        </div>
+        <div class="unnnic-card-marketplace__content__rating__comments">
+          ({{ comments }})
+        </div>
       </div>
     </div>
   </div>

package/src/components/Card/StatusCard.vue

@@ -1,14 +1,23 @@
 <template>
   <div :class="['unnnic-card-status', `unnnic-card-scheme--${scheme}--border`]">
     <div class="header">
-      <unnnic-icon :icon="icon" scheme="neutral-dark" size="md" class="icon" />
+      <UnnnicIcon
+        :icon="icon"
+        scheme="neutral-dark"
+        size="md"
+        class="icon"
+      />
 
       <div class="label">{{ title }}</div>
     </div>
 
     <div class="content">
       <div class="title-container">
-        <unnnic-icon icon="indicator" :scheme="scheme" size="sm" />
+        <UnnnicIcon
+          icon="indicator"
+          :scheme="scheme"
+          size="sm"
+        />
         <div class="title">{{ status }}</div>
       </div>
 
@@ -49,7 +58,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-card-status {
   display: flex;

package/src/components/Card/TitleCard.vue

@@ -1,25 +1,29 @@
 <template>
   <div class="unnnic-card-title">
     <div :class="['avatar-icon', `unnnic-card-scheme--${scheme}`]">
-      <unnnic-icon :icon="icon" :scheme="scheme" size="md" />
+      <UnnnicIcon
+        :icon="icon"
+        :scheme="scheme"
+        size="md"
+      />
     </div>
 
     <div class="title">{{ title }}</div>
 
-    <tool-tip
+    <ToolTip
       class="information"
       :side="infoPosition"
       :text="info"
       v-if="hasInformationIcon"
       :enabled="enabled"
     >
-      <unnnic-icon
+      <UnnnicIcon
         icon="information-circle-4"
         class="unnnic-card-title__content_info"
         size="sm"
         scheme="neutral-soft"
       />
-    </tool-tip>
+    </ToolTip>
   </div>
 </template>
 
@@ -64,7 +68,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-card-title {
   display: flex;