@weni/unnnic-system 1.16.35-develop.0 → 1.16.36-develop.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "1.16.35-develop.0",
+  "version": "1.16.36-develop.0",
   "main": "./dist/unnnic.common.js",
   "files": [
     "dist/*",

package/src/components/Button/Button.vue

@@ -35,7 +35,7 @@
       :scheme="iconScheme"
       :style="{ visibility: loading ? 'hidden' : null }"
       :size="iconSize"
-    ></unnnic-icon-svg>
+    />
 
     <span class="unnnic-button__label" :style="{ visibility: loading ? 'hidden' : null }">
       <slot /> {{ text }}
@@ -76,7 +76,7 @@ export default {
       type: String,
       default: 'primary',
       validator(value) {
-        return ['primary', 'secondary', 'terciary'].indexOf(value) !== -1;
+        return ['primary', 'secondary', 'terciary', 'ghost', 'warning'].indexOf(value) !== -1;
       },
     },
     iconLeft: {
@@ -121,11 +121,23 @@ export default {
     },
     iconScheme() {
       if (this.type === 'primary') {
-        return this.buttonDisabled ? 'neutral-clean' : 'background-snow';
+        return this.buttonDisabled ? 'neutral-clean' : 'neutral-white';
       }
 
       if (this.type === 'secondary') {
-        return this.buttonDisabled ? 'neutral-cloudy' : 'neutral-dark';
+        return this.buttonDisabled ? 'neutral-clean' : 'weni-900';
+      }
+
+      if (this.type === 'terciary') {
+        return this.buttonDisabled ? 'neutral-clean' : 'neutral-dark';
+      }
+
+      if (this.type === 'ghost') {
+        return this.buttonDisabled ? 'neutral-clean' : 'neutral-dark';
+      }
+
+      if (this.type === 'warning') {
+        return this.buttonDisabled ? 'neutral-clean' : 'neutral-white';
       }
 
       return '';
@@ -153,7 +165,6 @@ export default {
     transform: rotate(360deg);
   }
 }
-
 </style>
 
 <style lang="scss">
@@ -188,101 +199,128 @@ $scheme-colors:
   }
 
   &--primary {
-    background-color: $unnnic-color-neutral-darkest;
-    color: $unnnic-color-background-snow;
+    background-color: $unnnic-color-weni-600;
+    color: $unnnic-color-neutral-white;
 
     &:hover:enabled {
-      opacity: $unnnic-opacity-level-darkest;
-      border: 0;
+      background-color: $unnnic-color-weni-700;
     }
 
     &:disabled {
-      background-color: $unnnic-color-neutral-light;
+      background-color: $unnnic-color-neutral-soft;
       color: $unnnic-color-neutral-clean;
       cursor: not-allowed;
     }
+
+    &:active:enabled {
+      background-color: $unnnic-color-weni-800;
+    }
   }
 
   &--secondary {
-    background-color: rgba($unnnic-color-neutral-cleanest, $unnnic-opacity-level-light);
-    color: $unnnic-color-neutral-dark;
-    position: relative;
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      border-radius: $unnnic-border-radius-sm;
-      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
-    }
+    background-color: $unnnic-color-weni-50;
+    color: $unnnic-color-weni-800;
 
-    &:hover:enabled:after {
-      border-width: 0;
+    &:hover:enabled {
+      background-color: $unnnic-color-weni-100;
     }
 
     &:disabled {
-      background-color: $unnnic-color-neutral-light;
-      color: $unnnic-color-neutral-cloudy;
+      background-color: $unnnic-color-neutral-soft;
+      color: $unnnic-color-neutral-clean;
       cursor: not-allowed;
 
-      &:after {
-        border: $unnnic-border-width-thinner dashed $unnnic-color-neutral-cleanest;
-      }
+    }
+
+    &:active:enabled {
+      background-color: $unnnic-color-weni-200;
+      color: $unnnic-color-weni-900;
     }
   }
 
   &--terciary {
-    background-color: transparent;
+    background-color: $unnnic-color-neutral-white;
     color: $unnnic-color-neutral-dark;
+    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
 
-    position: relative;
-
-    &:hover:enabled:after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      border-radius: $unnnic-border-radius-sm;
-      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+    &:hover:enabled {
+      background-color: $unnnic-color-neutral-light;
     }
 
     &:disabled {
+      background-color: $unnnic-color-neutral-soft;
+      color: $unnnic-color-neutral-clean;
+      cursor: not-allowed;
+      border: 0;
+    }
+
+    &:active:enabled {
+      background-color: $unnnic-color-neutral-soft;
+    }
+  }
+
+  &--ghost {
+    background-color: transparent;
+    color: $unnnic-color-neutral-dark;
+
+    &:hover:enabled {
       background-color: $unnnic-color-neutral-light;
-      color: $unnnic-color-neutral-cleanest;
+    }
+
+    &:disabled {
+      color: $unnnic-color-neutral-clean;
       cursor: not-allowed;
     }
+
+    &:active:enabled {
+      background-color: $unnnic-color-neutral-soft;
+    }
+  }
+
+  &--warning {
+    background-color: $unnnic-color-aux-red-500;
+    color: $unnnic-color-neutral-white;
+
+    &:hover:enabled {
+      background-color:$unnnic-color-aux-red-700;
+    }
+
+    &:disabled {
+      background-color: $unnnic-color-neutral-soft;
+      color: $unnnic-color-neutral-clean;
+      cursor: not-allowed;
+    }
+
+    &:active:enabled {
+      background-color: $unnnic-color-aux-red-900;
+    }
   }
 
   &--size {
     &-large {
       padding: $unnnic-squish-xs;
-      font-size: $unnnic-font-size-body-lg;
-      line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
+      font-size: $unnnic-font-size-body-gt;
+      line-height: ($unnnic-font-size-body-gt + $unnnic-line-height-medium);
+      height: 46px;
     }
 
     &-small {
-      padding: $unnnic-squish-nano;
-      font-size: $unnnic-font-size-body-md;
-      line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
+      padding: $unnnic-squish-xs;
+      font-size: $unnnic-font-size-body-gt;
+      line-height: ($unnnic-font-size-body-gt + $unnnic-line-height-medium);
+      height: 38px;
     }
   }
 }
 
-@each $name, $color in $scheme-colors {
+@each $name,
+$color in $scheme-colors {
   .unnnic-button-scheme {
     &--#{$name} {
       background-color: $color;
     }
   }
 }
-
 </style>
 
 <style lang="scss" scoped>
@@ -294,6 +332,8 @@ $scheme-colors:
   &.unnnic-button--size {
     &-large {
       padding: $unnnic-inset-xs;
+      height: 46px;
+      width: 46px;
 
       .unnnic-icon {
         width: $unnnic-icon-size-md;
@@ -303,6 +343,8 @@ $scheme-colors:
 
     &-small {
       padding: $unnnic-inset-nano;
+      height: 38px;
+      width: 38px;
 
       .unnnic-icon {
         width: $unnnic-icon-size-ant;

package/src/components/Icon.vue

@@ -77,24 +77,94 @@ export default {
 <style lang="scss">
 @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,
-  "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,
+$scheme-colors:
+  "background-solo" $unnnic-color-background-solo,
+  "background-sky" $unnnic-color-background-sky,
+  "background-grass" $unnnic-color-background-grass,
+  "background-carpet" $unnnic-color-background-carpet,
+  "background-snow" $unnnic-color-background-snow,
+  "background-lightest" $unnnic-color-background-lightest,
+  "background-white" $unnnic-color-background-white,
+  "neutral-black" $unnnic-color-neutral-black,
   "neutral-darkest" $unnnic-color-neutral-darkest,
+  "neutral-dark" $unnnic-color-neutral-dark,
   "neutral-cloudy" $unnnic-color-neutral-cloudy,
+  "neutral-cleanest" $unnnic-color-neutral-cleanest,
+  "neutral-clean" $unnnic-color-neutral-clean,
+  "neutral-soft" $unnnic-color-neutral-soft,
+  "neutral-lightest" $unnnic-color-neutral-lightest,
+  "neutral-light" $unnnic-color-neutral-light,
+  "neutral-white" $unnnic-color-neutral-white,
   "neutral-snow" $unnnic-color-neutral-snow,
-  "background-snow" $unnnic-color-background-snow;
+  "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,
+  "aux-baby-blue" $unnnic-color-aux-baby-blue,
+  "aux-baby-yellow" $unnnic-color-aux-baby-yellow,
+  "aux-baby-red" $unnnic-color-aux-baby-red,
+  "aux-baby-green" $unnnic-color-aux-baby-green,
+  "aux-baby-pink" $unnnic-color-aux-baby-pink,
+  "aux-green-100" $unnnic-color-aux-green-100,
+  "aux-green-300" $unnnic-color-aux-green-300,
+  "aux-green-500" $unnnic-color-aux-green-500,
+  "aux-green-700" $unnnic-color-aux-green-700,
+  "aux-green-900" $unnnic-color-aux-green-900,
+  "aux-blue-100" $unnnic-color-aux-blue-100,
+  "aux-blue-300" $unnnic-color-aux-blue-300,
+  "aux-blue-500" $unnnic-color-aux-blue-500,
+  "aux-blue-700" $unnnic-color-aux-blue-700,
+  "aux-blue-900" $unnnic-color-aux-blue-900,
+  "aux-purple-100" $unnnic-color-aux-purple-100,
+  "aux-purple-300" $unnnic-color-aux-purple-300,
+  "aux-purple-500" $unnnic-color-aux-purple-500,
+  "aux-purple-700" $unnnic-color-aux-purple-700,
+  "aux-purple-900" $unnnic-color-aux-purple-900,
+  "aux-red-100" $unnnic-color-aux-red-100,
+  "aux-red-300" $unnnic-color-aux-red-300,
+  "aux-red-500" $unnnic-color-aux-red-500,
+  "aux-red-700" $unnnic-color-aux-red-700,
+  "aux-red-900" $unnnic-color-aux-red-900,
+  "aux-orange-100" $unnnic-color-aux-orange-100,
+  "aux-orange-300" $unnnic-color-aux-orange-300,
+  "aux-orange-500" $unnnic-color-aux-orange-500,
+  "aux-orange-700" $unnnic-color-aux-orange-700,
+  "aux-orange-900" $unnnic-color-aux-orange-900,
+  "aux-yellow-100" $unnnic-color-aux-yellow-100,
+  "aux-yellow-300" $unnnic-color-aux-yellow-300,
+  "aux-yellow-500" $unnnic-color-aux-yellow-500,
+  "aux-yellow-700" $unnnic-color-aux-yellow-700,
+  "aux-yellow-900" $unnnic-color-aux-yellow-900,
+  "floweditor-blue" $unnnic-color-floweditor-blue,
+  "floweditor-purple" $unnnic-color-floweditor-purple,
+  "floweditor-wine" $unnnic-color-floweditor-wine,
+  "floweditor-orange" $unnnic-color-floweditor-orange,
+  "floweditor-pink" $unnnic-color-floweditor-pink,
+  "floweditor-turquoise" $unnnic-color-floweditor-turquoise,
+  "floweditor-green" $unnnic-color-floweditor-green,
+  "weni-50" $unnnic-color-weni-50,
+  "weni-100" $unnnic-color-weni-100,
+  "weni-200" $unnnic-color-weni-200,
+  "weni-300" $unnnic-color-weni-300,
+  "weni-400" $unnnic-color-weni-400,
+  "weni-500" $unnnic-color-weni-500,
+  "weni-600" $unnnic-color-weni-600,
+  "weni-700" $unnnic-color-weni-700,
+  "weni-800" $unnnic-color-weni-800,
+  "weni-900" $unnnic-color-weni-900,
+  "weni-950" $unnnic-color-weni-950,
+  "brand-weni" $unnnic-color-brand-weni,
+  "brand-weni-dark" $unnnic-color-brand-weni-dark,
+  "brand-weni-soft" $unnnic-color-brand-weni-soft,
+  "brand-sec-dark" $unnnic-color-brand-sec-dark,
+  "brand-sec-soft" $unnnic-color-brand-sec-soft,
+  "brand-sec" $unnnic-color-brand-sec;
 
 @each $name, $color in $scheme-colors {
   .unnnic-icon-scheme {

package/src/stories/Button.stories.js

@@ -5,14 +5,14 @@ export default {
   title: 'Form/Button',
   component: unnnicButton,
   argTypes: {
-    type: { control: { type: 'select', options: ['primary', 'secondary', 'terciary'] } },
+    type: { control: { type: 'select', options: ['primary', 'secondary', 'terciary', 'ghost', 'warning'] } },
     size: { control: { type: 'select', options: ['large', 'small'] } },
     text: { control: { type: 'text' } },
     iconLeft: { control: { type: 'select', options: [null, ...iconList] } },
+    iconCenter: { control: { type: 'select', options: [null, ...iconList] } },
     iconRight: { control: { type: 'select', options: [null, ...iconList] } },
     disabled: { control: { type: 'boolean' } },
     loading: { control: { type: 'boolean' } },
-    scheme: { control: { type: 'select', options: ['feedback-red', 'feedback-green', 'feedback-yellow'] } },
   },
 };
 
@@ -42,6 +42,20 @@ Terciary.args = {
   disabled: false,
 };
 
+export const Ghost = Template.bind({});
+Ghost.args = {
+  type: 'ghost',
+  text: 'Button Text',
+  disabled: false,
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  type: 'warning',
+  text: 'Button Text',
+  disabled: false,
+};
+
 export const withIcon = Template.bind({});
 withIcon.args = {
   text: 'Button Text',

package/src/stories/Icon.stories.js

@@ -4,6 +4,24 @@ import icons from '../utils/icons';
 const iconsOptions = Object.keys(icons);
 
 const schemes = [
+  'background-solo',
+  'background-sky',
+  'background-grass',
+  'background-carpet',
+  'background-snow',
+  'background-lightest',
+  'background-white',
+  'neutral-black',
+  'neutral-darkest',
+  'neutral-dark',
+  'neutral-cloudy',
+  'neutral-cleanest',
+  'neutral-clean',
+  'neutral-soft',
+  'neutral-lightest',
+  'neutral-light',
+  'neutral-white',
+  'neutral-snow',
   'feedback-red',
   'feedback-green',
   'feedback-yellow',
@@ -14,13 +32,65 @@ const schemes = [
   'aux-orange',
   'aux-lemon',
   'aux-pink',
+  'aux-baby-blue',
+  'aux-baby-yellow',
+  'aux-baby-red',
+  'aux-baby-green',
+  'aux-baby-pink',
+  'aux-green-100',
+  'aux-green-300',
+  'aux-green-500',
+  'aux-green-700',
+  'aux-green-900',
+  'aux-blue-100',
+  'aux-blue-300',
+  'aux-blue-500',
+  'aux-blue-700',
+  'aux-blue-900',
+  'aux-purple-100',
+  'aux-purple-300',
+  'aux-purple-500',
+  'aux-purple-700',
+  'aux-purple-900',
+  'aux-red-100',
+  'aux-red-300',
+  'aux-red-500',
+  'aux-red-700',
+  'aux-red-900',
+  'aux-orange-100',
+  'aux-orange-300',
+  'aux-orange-500',
+  'aux-orange-700',
+  'aux-orange-900',
+  'aux-yellow-100',
+  'aux-yellow-300',
+  'aux-yellow-500',
+  'aux-yellow-700',
+  'aux-yellow-900',
+  'floweditor-blue',
+  'floweditor-purple',
+  'floweditor-wine',
+  'floweditor-orange',
+  'floweditor-pink',
+  'floweditor-turquoise',
+  'floweditor-green',
+  'weni-50',
+  'weni-100',
+  'weni-200',
+  'weni-300',
+  'weni-400',
+  'weni-500',
+  'weni-600',
+  'weni-700',
+  'weni-800',
+  'weni-900',
+  'weni-950',
   'brand-weni',
+  'brand-weni-dark',
   'brand-weni-soft',
-  'neutral-clean',
-  'neutral-cleanest',
-  'neutral-dark',
-  'neutral-soft',
-  'neutral-darkest',
+  'brand-sec-dark',
+  'brand-sec-soft',
+  'brand-sec',
 ];
 
 export default {