@weni/unnnic-system 1.3.2 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "main": "./dist/unnnic.common.js",
   "files": [
     "dist/*",

package/src/assets/icons/graph-stats-descend-2.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
-  <path d="M 5.937 11.563 C 6.187 11.563 6.424 11.66 6.6 11.838 L 15.587 20.824 C 15.764 21 16 21.098 16.25 21.098 C 16.501 21.098 16.736 21 16.913 20.824 L 20.824 16.913 C 21.354 16.382 22.06 16.09 22.811 16.09 C 23.564 16.09 24.27 16.382 24.801 16.913 L 33.125 25.237 L 33.125 19.063 C 33.125 18.545 33.545 18.125 34.063 18.125 C 34.58 18.125 35 18.545 35 19.063 L 35 27.5 C 35 27.612 34.98 27.723 34.943 27.824 C 34.939 27.835 34.934 27.847 34.93 27.857 C 34.835 28.087 34.649 28.273 34.429 28.363 C 34.416 28.368 34.403 28.373 34.389 28.378 C 34.283 28.418 34.174 28.438 34.063 28.438 L 25.625 28.438 C 25.108 28.438 24.688 28.018 24.688 27.5 C 24.688 26.983 25.108 26.563 25.625 26.563 L 31.801 26.563 L 23.478 18.239 C 23.3 18.062 23.064 17.964 22.814 17.964 C 22.564 17.964 22.328 18.062 22.15 18.239 L 18.24 22.149 C 17.71 22.679 17.004 22.972 16.251 22.972 C 15.499 22.972 14.792 22.68 14.261 22.149 L 5.275 13.163 C 5.097 12.987 5 12.75 5 12.5 C 5 12.25 5.097 12.014 5.275 11.838 C 5.451 11.66 5.687 11.563 5.937 11.563 Z" fill="#3B414D" class="primary" bx:origin="0.5 0.49997"/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+  <path d="M 5.937 11.563 C 6.187 11.563 6.424 11.66 6.6 11.838 L 15.587 20.824 C 15.764 21 16 21.098 16.25 21.098 C 16.501 21.098 16.736 21 16.913 20.824 L 20.824 16.913 C 21.354 16.382 22.06 16.09 22.811 16.09 C 23.564 16.09 24.27 16.382 24.801 16.913 L 33.125 25.237 L 33.125 19.063 C 33.125 18.545 33.545 18.125 34.063 18.125 C 34.58 18.125 35 18.545 35 19.063 L 35 27.5 C 35 27.612 34.98 27.723 34.943 27.824 C 34.939 27.835 34.934 27.847 34.93 27.857 C 34.835 28.087 34.649 28.273 34.429 28.363 C 34.416 28.368 34.403 28.373 34.389 28.378 C 34.283 28.418 34.174 28.438 34.063 28.438 L 25.625 28.438 C 25.108 28.438 24.688 28.018 24.688 27.5 C 24.688 26.983 25.108 26.563 25.625 26.563 L 31.801 26.563 L 23.478 18.239 C 23.3 18.062 23.064 17.964 22.814 17.964 C 22.564 17.964 22.328 18.062 22.15 18.239 L 18.24 22.149 C 17.71 22.679 17.004 22.972 16.251 22.972 C 15.499 22.972 14.792 22.68 14.261 22.149 L 5.275 13.163 C 5.097 12.987 5 12.75 5 12.5 C 5 12.25 5.097 12.014 5.275 11.838 C 5.451 11.66 5.687 11.563 5.937 11.563 Z" fill="#3B414D" class="primary" bx:origin="0.5 0.49997"/>
+</svg>

package/src/components/Accordion/Accordion.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import unnnicIconSvg from '../Icon-svg.vue';
+import unnnicIconSvg from '../Icon.vue';
 
 export default {
   model: {

package/src/components/Alert/Alert.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import unnnicIconSvg from '../Icon-svg.vue';
+import unnnicIconSvg from '../Icon.vue';
 import Version1dot1 from './Version1dot1.vue';
 
 export default {

package/src/components/Alert/Version1dot1.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   components: {

package/src/components/AvatarIcon/AvatarIcon.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   components: {

package/src/components/Banner/InfoBanner.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-banner',

package/src/components/Breadcrumb/Breadcrumb.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-breadcrumb',

package/src/components/Button/Button.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-button',

package/src/components/Button/ButtonIcon.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   components: {

package/src/components/Card/BlankCard.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-card',

package/src/components/Card/CardCompany.vue

@@ -64,7 +64,7 @@
 
 <script>
 import UnnnicTag from '../Tag/Tag.vue';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 import UnnnicDropdown from '../Dropdown/Dropdown.vue';
 import UnnnicDropdownItem from '../Dropdown/DropdownItem.vue';
 import ToolTip from '../ToolTip/ToolTip.vue';

package/src/components/Card/CardData.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import unnnicIcon from '../Icon-svg.vue';
+import unnnicIcon from '../Icon.vue';
 
 export default {
   components: { unnnicIcon },

package/src/components/Card/ContentCard.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-card',

package/src/components/Card/DashCard.vue

@@ -31,7 +31,7 @@
 
 <script>
 import UnnnicAvatarIcon from '../AvatarIcon/AvatarIcon.vue';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'unnnic-card',

package/src/components/Card/MarketplaceCard.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-card',

package/src/components/Card/StatusCard.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'unnnic-card',

package/src/components/Card/TitleCard.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 import ToolTip from '../ToolTip/ToolTip.vue';
 
 export default {

package/src/components/CardProject/CardProject.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import unnnicIcon from '../Icon-svg.vue';
+import unnnicIcon from '../Icon.vue';
 import unnnicDropdown from '../Dropdown/Dropdown.vue';
 import unnnicTag from '../Tag/Tag.vue';
 import unnnicAvatarIcon from '../AvatarIcon/AvatarIcon.vue';

package/src/components/Carousel/TagCarousel.vue

@@ -49,7 +49,7 @@
 
 <script>
 import UnnnicTag from '../Tag/Tag.vue';
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-tag-carousel',

package/src/components/ChatText/ChatText.vue

@@ -27,7 +27,7 @@
 
 <script>
 import UnnnicToolTip from '../ToolTip/ToolTip.vue';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   components: {

package/src/components/Checkbox/Checkbox.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import unnnicIconSvg from '../Icon-svg.vue';
+import unnnicIconSvg from '../Icon.vue';
 
 export default {
   model: {

package/src/components/Dropdown/LanguageSelect.vue

@@ -77,7 +77,7 @@
 <script>
 import vClickOutside from 'v-click-outside';
 import unnnicFlag from '../Flag.vue';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'LanguageSelect',

package/src/components/Flag.vue

@@ -8,7 +8,7 @@
 <script>
 /* eslint-disable global-require */
 /* eslint-disable import/no-dynamic-require */
-import UnnnicIconSvg from './Icon-svg.vue';
+import UnnnicIconSvg from './Icon.vue';
 
 export default {
   name: 'Flag',

package/src/components/Icon.vue

@@ -1,14 +1,19 @@
 <template>
-    <span
-      @click="onClick"
-      :class="`unnnic-icon icon-${icon} unnnic-icon-${size || 'md'}
-        ${scheme ? `unnnic-icon-scheme--${scheme}` : ''}
-        ${scheme && hasBackground ? `unnnic-icon-background-scheme--${scheme}` : ''}
-        icon-${size} ${ clickable ? 'unnnic--clickable' : '' }`">
-    </span>
+<span
+    @click="onClick"
+    :class="[
+      'unnnic-icon',
+      `unnnic-icon__size--${size}`,
+      clickable ? 'unnnic--clickable' : '',
+      lineHeight ? `unnnic-icon__line-height--${lineHeight}` : '',
+      scheme ? `unnnic-icon-scheme--${scheme}` : '',
+    ]"
+    v-html="svg" />
 </template>
 
 <script>
+import icons from '../utils/icons';
+
 export default {
   name: 'uIcon',
   props: {
@@ -24,17 +29,25 @@ export default {
       type: String,
       default: 'md',
       validator(value) {
-        if (!value) return true;
         return ['nano', 'xs', 'sm', 'ant', 'md', 'lg', 'xl'].indexOf(value) !== -1;
       },
     },
+    lineHeight: {
+      type: String,
+      default: null,
+      validator(value) {
+        return !value || ['sm', 'md', 'lg'].indexOf(value) !== -1;
+      },
+    },
     scheme: {
       type: String,
       default: '',
     },
-    hasBackground: {
-      type: Boolean,
-      default: false,
+  },
+  mounted() {},
+  computed: {
+    svg() {
+      return icons[this.icon];
     },
   },
   methods: {
@@ -46,71 +59,89 @@ export default {
 };
 </script>
 
+<style lang="scss" scoped>
+@import "../assets/scss/unnnic.scss";
+
+.unnnic-icon ::v-deep svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>
+
 <style lang="scss">
-@import '../assets/scss/unnnic.scss';
-@import '../assets/fonts/icons.css';
+@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,
-   'neutral-soft' $unnnic-color-neutral-soft;
+$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,
+  "brand-weni" $unnnic-color-brand-weni,
+  "brand-weni-soft" $unnnic-color-brand-weni-soft,
+  "brand-weni-dark" $unnnic-color-brand-weni-dark,
+  "brand-sec" $unnnic-color-brand-sec,
+  "neutral-clean" $unnnic-color-neutral-clean,
+  "neutral-cleanest" $unnnic-color-neutral-cleanest,
+  "neutral-dark" $unnnic-color-neutral-dark,
+  "neutral-soft" $unnnic-color-neutral-soft,
+  "neutral-darkest" $unnnic-color-neutral-darkest,
+  "neutral-cloudy" $unnnic-color-neutral-cloudy,
+  "neutral-snow" $unnnic-color-neutral-snow,
+  "background-snow" $unnnic-color-background-snow;
 
 @each $name, $color in $scheme-colors {
   .unnnic-icon-scheme {
     &--#{$name} {
-      color: $color;
-
-      &--icon {
-        color: $color;
+      & .primary {
+        fill: $color;
       }
-    }
-  }
-
-  .unnnic-icon-background-scheme {
-    &--#{$name} {
-      background-color: rgba($color, $unnnic-opacity-level-extra-light);
-      border-radius: $unnnic-border-radius-sm;
-      padding: $unnnic-inset-nano;
-    }
 
-    &--border {
-      border-left: 4px solid $color;
+      & .primary-stroke {
+        stroke: $color;
+      }
     }
   }
 }
 
-.unnnic-icon {
-  &-xs {
-    font-size: $unnnic-icon-size-xs;
-  }
-
-  &-sm {
-    font-size: $unnnic-icon-size-sm;
-  }
+$icon-sizes:
+    'xl' $unnnic-icon-size-xl,
+    'lg' $unnnic-icon-size-lg,
+    'md' $unnnic-icon-size-md,
+    'ant' $unnnic-icon-size-ant,
+    'sm' $unnnic-icon-size-sm,
+    'xs' $unnnic-icon-size-xs;
 
-  &-ant {
-    font-size: $unnnic-icon-size-ant;
-  }
+$line-heights:
+  'sm' $unnnic-line-height-small,
+  'md' $unnnic-line-height-medium,
+  'lg' $unnnic-line-height-large;
 
-  &-md {
-    font-size: $unnnic-icon-size-md;
-  }
+    .unnnic-icon {
+      position: relative;
+      display: inline-block;
+      vertical-align: middle;
 
-  &-lg {
-    font-size: $unnnic-icon-size-lg;
-  }
+        @each $name, $size in $icon-sizes {
+            &__size--#{$name} {
+                width: $size;
+                height: $size;
+                min-width: $size;
+                min-height: $size;
 
-  &-xl {
-    font-size: $unnnic-icon-size-xl;
-  }
-}
+                @each $line-name, $line-size in $line-heights {
+                  &.unnnic-icon__line-height--#{$line-name} svg {
+                    position: relative;
+                    top: (($size + $line-size) - ($size*1.2))/1.2;
+                  }
+              }
+            }
+        }
 
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
 </style>

package/src/components/Input/TextInput.vue

@@ -38,7 +38,7 @@
 
 <script>
 import BaseInput from './BaseInput.vue';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   components: {

package/src/components/Modal/Modal.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-modal',

package/src/components/ModalUpload/ModalUpload.vue

@@ -47,7 +47,7 @@
 
 <script>
 import UnnnicUploadArea from '../UploadArea/UploadArea.vue';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 import UnnnicButton from '../Button/Button.vue';
 
 export default {

package/src/components/MultiSelect/MultiSelect.vue

@@ -45,7 +45,7 @@
 
 <script>
 import vClickOutside from 'v-click-outside';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 import UnnnicRadio from '../Radio/Radio.vue';
 
 export default {

package/src/components/Radio/Radio.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import unnnicIconSvg from '../Icon-svg.vue';
+import unnnicIconSvg from '../Icon.vue';
 
 export default {
   model: {

package/src/components/Sidebar/SidebarItem.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import UIcon from '../Icon-svg.vue';
+import UIcon from '../Icon.vue';
 import ToolTip from '../ToolTip/ToolTip.vue';
 
 export default {

package/src/components/Sidebar/SidebarPrimary.vue

@@ -77,7 +77,7 @@
 <script>
 import ToolTip from '../ToolTip/ToolTip.vue';
 import languageSelect from '../Dropdown/LanguageSelect.vue';
-import iconSvg from '../Icon-svg.vue';
+import iconSvg from '../Icon.vue';
 
 export default {
   components: {

package/src/components/Switch/Switch.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-switch',

package/src/components/Tag/BrandTag.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-brand-tag',

package/src/components/Tag/DefaultTag.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-tag',

package/src/components/Tag/IndicatorTag.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 import ToolTip from '../ToolTip/ToolTip.vue';
 
 export default {

package/src/components/UploadArea/UploadArea.vue

@@ -70,7 +70,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 import UnnnicImportCard from '../ImportCard/ImportCard.vue';
 
 export default {

package/src/components/index.js

@@ -12,7 +12,6 @@ import dropdown from './Dropdown/Dropdown.vue';
 import dropdownItem from './Dropdown/DropdownItem.vue';
 import avatarIcon from './AvatarIcon/AvatarIcon.vue';
 import icon from './Icon.vue';
-import iconSvg from './Icon-svg.vue';
 import toolTip from './ToolTip/ToolTip.vue';
 import card from './Card/Card.vue';
 import cardCompany from './Card/CardCompany.vue';
@@ -64,7 +63,7 @@ const components = {
   unnnicTableRow: tableRow,
   unnnicAvatarIcon: avatarIcon,
   unnnicIcon: icon,
-  unnnicIconSvg: iconSvg,
+  unnnicIconSvg: icon,
   unnnicDropdown: dropdown,
   unnnicDropdownItem: dropdownItem,
   unnnicToolTip: toolTip,
@@ -123,7 +122,7 @@ export const unnnicDropdown = dropdown;
 export const unnnicDropdownItem = dropdownItem;
 export const unnnicAvatarIcon = avatarIcon;
 export const unnnicIcon = icon;
-export const unnnicIconSvg = iconSvg;
+export const unnnicIconSvg = icon;
 export const unnnicToolTip = toolTip;
 export const unnnicCard = card;
 export const unnnicCardCompany = cardCompany;

package/src/stories/CardProject.stories.js

@@ -1,6 +1,6 @@
 import unnnicCardProject from '../components/CardProject/CardProject.vue';
 import unnnicDropdownItem from '../components/Dropdown/DropdownItem.vue';
-import unnnicIcon from '../components/Icon-svg.vue';
+import unnnicIcon from '../components/Icon.vue';
 
 export default {
   title: 'example/CardProject',

package/src/stories/Comment.stories.js

@@ -2,7 +2,7 @@ import unnnicComment from '../components/Comment/Comment.vue';
 import unnnicButton from '../components/Button/Button.vue';
 import unnnicDropdown from '../components/Dropdown/Dropdown.vue';
 import unnnicDropdownItem from '../components/Dropdown/DropdownItem.vue';
-import unnnicIconSvg from '../components/Icon-svg.vue';
+import unnnicIconSvg from '../components/Icon.vue';
 
 export default {
   title: 'Example/Comment',
@@ -43,7 +43,7 @@ const Template = (args, { argTypes }) => ({
           size="small"
         />
       </unnnic-dropdown-item>
-    </unnnic-dropdown>    
+    </unnnic-dropdown>
   </unnnic-comment>
   `,
 });