@weni/unnnic-system 1.3.3 → 1.4.2

package/src/assets/scss/fonts.scss

@@ -1,34 +1,34 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
-
-// Font family
-$unnnic-font-family-primary: 'Aleo', serif;
-$unnnic-font-family-secondary: Lato;
-
-// Font weight
-$unnnic-font-weight-black: 900;
-$unnnic-font-weight-bold: 700;
-$unnnic-font-weight-regular: 400;
-$unnnic-font-weight-light: 300;
-
-// Font size
-$unnnic-font-size-body-sm: 0.5rem;
-$unnnic-font-size-body-md: 0.75rem;
-$unnnic-font-size-body-gt: 0.875rem;
-$unnnic-font-size-body-lg: 1rem;
-
-$unnnic-font-size-title-sm: 1.25rem;
-$unnnic-font-size-title-md: 1.5rem;
-$unnnic-font-size-title-lg: 2rem;
-
-$unnnic-font-size-h4: 2.5rem;
-$unnnic-font-size-h3: 3rem;
-$unnnic-font-size-h2: 3.5rem;
-$unnnic-font-size-h1: 4.5rem;
-
-// Line height
-// Add this to font size when using
-$unnnic-line-height-small: 0.25rem;
-$unnnic-line-height-medium: 0.5rem;
-$unnnic-line-height-md: $unnnic-line-height-medium;
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+
+// Font family
+$unnnic-font-family-primary: 'Aleo', serif;
+$unnnic-font-family-secondary: Lato;
+
+// Font weight
+$unnnic-font-weight-black: 900;
+$unnnic-font-weight-bold: 700;
+$unnnic-font-weight-regular: 400;
+$unnnic-font-weight-light: 300;
+
+// Font size
+$unnnic-font-size-body-sm: 0.5rem;
+$unnnic-font-size-body-md: 0.75rem;
+$unnnic-font-size-body-gt: 0.875rem;
+$unnnic-font-size-body-lg: 1rem;
+
+$unnnic-font-size-title-sm: 1.25rem;
+$unnnic-font-size-title-md: 1.5rem;
+$unnnic-font-size-title-lg: 2rem;
+
+$unnnic-font-size-h4: 2.5rem;
+$unnnic-font-size-h3: 3rem;
+$unnnic-font-size-h2: 3.5rem;
+$unnnic-font-size-h1: 4.5rem;
+
+// Line height
+// Add this to font size when using
+$unnnic-line-height-small: 0.25rem;
+$unnnic-line-height-medium: 0.5rem;
+$unnnic-line-height-md: $unnnic-line-height-medium;
 $unnnic-line-height-large: 1rem;

package/src/assets/scss/grid.scss

@@ -1,52 +1,52 @@
-.unnnic-grid-xs {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
-    padding: 0 16px;
-}
-
-.unnnic-grid-sm {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
-    padding: 0 16px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-md {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/6)*100% - (16px * 5/6)));
-    padding: 0 48px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-lg {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
-    padding: 0 64px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-xl {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
-    padding: 0 176px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-giant {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
-    padding: 0 24px;
-    box-sizing: border-box;
-}
-
-@for $i from 1 to 13 {
-    .unnnic-grid-span-#{$i} {
-        grid-column: span #{$i};
-    }
+.unnnic-grid-xs {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
+    padding: 0 16px;
+}
+
+.unnnic-grid-sm {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
+    padding: 0 16px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-md {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/6)*100% - (16px * 5/6)));
+    padding: 0 48px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-lg {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 64px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-xl {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 176px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-giant {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 24px;
+    box-sizing: border-box;
+}
+
+@for $i from 1 to 13 {
+    .unnnic-grid-span-#{$i} {
+        grid-column: span #{$i};
+    }
 }

package/src/assets/scss/spacing.scss

@@ -1,92 +1,92 @@
-// Icon size
-$unnnic-icon-size-xl: 2.5rem;
-$unnnic-icon-size-lg: 2rem;
-$unnnic-icon-size-md: 1.5rem;
-$unnnic-icon-size-ant: 1.25rem;
-$unnnic-icon-size-sm: 1rem;
-$unnnic-icon-size-xs: 0.75rem;
-
-// Avatar size
-$unnnic-avatar-size-lg: 6.5rem;
-$unnnic-avatar-size-md: 4.5rem;
-$unnnic-avatar-size-sm: 2.5rem;
-$unnnic-avatar-size-xs: 2rem;
-$unnnic-avatar-size-nano: 1.25rem;
-
-// Border radius
-$unnnic-border-radius-sm: 0.25rem;
-$unnnic-border-radius-md: 0.5rem;
-$unnnic-border-radius-lg: 1rem;
-$unnnic-border-radius-pill: 37.5rem;
-
-// Border width
-$unnnic-border-width-thinner: 0.0625rem;
-$unnnic-border-width-thin: 0.125rem;
-$unnnic-border-width-thick: 0.25rem;
-
-// Shadow levels
-$unnnic-shadow-level-near: 0rem 0.25rem 8px rgba(0, 0, 0, .12);
-$unnnic-shadow-level-separated: 0px 8px 16px rgba(0, 0, 0, .08);
-$unnnic-shadow-level-far: 0px 12px 32px rgba(0, 0, 0, .04);
-$unnnic-shadow-level-distant: 0px 20px 40px rgba(0, 0, 0, .06);
-
-// Opacity levels
-$unnnic-opacity-level-darkest: 0.8;
-$unnnic-opacity-level-dark: 0.64;
-$unnnic-opacity-level-clarifying: 0.48;
-$unnnic-opacity-level-overlay: 0.4;
-$unnnic-opacity-level-clear: 0.32;
-$unnnic-opacity-level-light: 0.16;
-$unnnic-opacity-level-extra-light: 0.08;
-
-// Spacing
-$unnnic-inset-nano: 0.5rem;
-$unnnic-inset-xs: 0.75rem;
-$unnnic-inset-sm: 1rem;
-$unnnic-inset-md: 1.5rem;
-$unnnic-inset-lg: 2rem;
-$unnnic-spacing-inset-nano: $unnnic-inset-nano;
-$unnnic-spacing-inset-xs: $unnnic-inset-xs;
-$unnnic-spacing-inset-sm: $unnnic-inset-sm;
-$unnnic-spacing-inset-md: $unnnic-inset-md;
-$unnnic-spacing-inset-lg: $unnnic-inset-lg;
-
-// Squish
-$unnnic-squish-nano: 0.5rem 1rem;
-$unnnic-squish-xs: 0.75rem 1rem;
-$unnnic-squish-sm: 0.75rem 1.5rem;
-$unnnic-squish-md: 1rem 1.5rem;
-$unnnic-squish-lg: 1.5rem 2rem;
-
-// Inline
-$unnnic-inline-nano: 0.25rem;
-$unnnic-inline-xs: 0.5rem;
-$unnnic-inline-ant: 0.75rem;
-$unnnic-inline-sm: 1rem;
-$unnnic-inline-md: 1.5rem;
-$unnnic-inline-lg: 2rem;
-$unnnic-inline-xl: 2.5rem;
-$unnnic-inline-giant: 3rem;
-$unnnic-inline-xgiant: 4rem;
-$unnnic-inline-awesome: 5rem;
-$unnnic-spacing-inline-nano: $unnnic-inline-nano;
-$unnnic-spacing-inline-xs: $unnnic-inline-xs;
-$unnnic-spacing-inline-ant: $unnnic-inline-ant;
-$unnnic-spacing-inline-sm: $unnnic-inline-sm;
-$unnnic-spacing-inline-md: $unnnic-inline-md;
-$unnnic-spacing-inline-lg: $unnnic-inline-lg;
-$unnnic-spacing-inline-xl: $unnnic-inline-xl;
-$unnnic-spacing-inline-giant: $unnnic-inline-giant;
-$unnnic-spacing-inline-xgiant: $unnnic-inline-xgiant;
-$unnnic-spacing-inline-awesome: $unnnic-inline-awesome;
-
-// Stack
-$unnnic-spacing-stack-nano: 0.25rem;
-$unnnic-spacing-stack-xs: 0.5rem;
-$unnnic-spacing-stack-sm: 1rem;
-$unnnic-spacing-stack-md: 1.5rem;
-$unnnic-spacing-stack-lg: 2rem;
-$unnnic-spacing-stack-xl: 2.5rem;
-$unnnic-spacing-stack-giant: 3rem;
-$unnnic-spacing-stack-xgiant: 4rem;
-$unnnic-spacing-stack-awesome: 5rem;
+// Icon size
+$unnnic-icon-size-xl: 2.5rem;
+$unnnic-icon-size-lg: 2rem;
+$unnnic-icon-size-md: 1.5rem;
+$unnnic-icon-size-ant: 1.25rem;
+$unnnic-icon-size-sm: 1rem;
+$unnnic-icon-size-xs: 0.75rem;
+
+// Avatar size
+$unnnic-avatar-size-lg: 6.5rem;
+$unnnic-avatar-size-md: 4.5rem;
+$unnnic-avatar-size-sm: 2.5rem;
+$unnnic-avatar-size-xs: 2rem;
+$unnnic-avatar-size-nano: 1.25rem;
+
+// Border radius
+$unnnic-border-radius-sm: 0.25rem;
+$unnnic-border-radius-md: 0.5rem;
+$unnnic-border-radius-lg: 1rem;
+$unnnic-border-radius-pill: 37.5rem;
+
+// Border width
+$unnnic-border-width-thinner: 0.0625rem;
+$unnnic-border-width-thin: 0.125rem;
+$unnnic-border-width-thick: 0.25rem;
+
+// Shadow levels
+$unnnic-shadow-level-near: 0rem 0.25rem 8px rgba(0, 0, 0, .12);
+$unnnic-shadow-level-separated: 0px 8px 16px rgba(0, 0, 0, .08);
+$unnnic-shadow-level-far: 0px 12px 32px rgba(0, 0, 0, .04);
+$unnnic-shadow-level-distant: 0px 20px 40px rgba(0, 0, 0, .06);
+
+// Opacity levels
+$unnnic-opacity-level-darkest: 0.8;
+$unnnic-opacity-level-dark: 0.64;
+$unnnic-opacity-level-clarifying: 0.48;
+$unnnic-opacity-level-overlay: 0.4;
+$unnnic-opacity-level-clear: 0.32;
+$unnnic-opacity-level-light: 0.16;
+$unnnic-opacity-level-extra-light: 0.08;
+
+// Spacing
+$unnnic-inset-nano: 0.5rem;
+$unnnic-inset-xs: 0.75rem;
+$unnnic-inset-sm: 1rem;
+$unnnic-inset-md: 1.5rem;
+$unnnic-inset-lg: 2rem;
+$unnnic-spacing-inset-nano: $unnnic-inset-nano;
+$unnnic-spacing-inset-xs: $unnnic-inset-xs;
+$unnnic-spacing-inset-sm: $unnnic-inset-sm;
+$unnnic-spacing-inset-md: $unnnic-inset-md;
+$unnnic-spacing-inset-lg: $unnnic-inset-lg;
+
+// Squish
+$unnnic-squish-nano: 0.5rem 1rem;
+$unnnic-squish-xs: 0.75rem 1rem;
+$unnnic-squish-sm: 0.75rem 1.5rem;
+$unnnic-squish-md: 1rem 1.5rem;
+$unnnic-squish-lg: 1.5rem 2rem;
+
+// Inline
+$unnnic-inline-nano: 0.25rem;
+$unnnic-inline-xs: 0.5rem;
+$unnnic-inline-ant: 0.75rem;
+$unnnic-inline-sm: 1rem;
+$unnnic-inline-md: 1.5rem;
+$unnnic-inline-lg: 2rem;
+$unnnic-inline-xl: 2.5rem;
+$unnnic-inline-giant: 3rem;
+$unnnic-inline-xgiant: 4rem;
+$unnnic-inline-awesome: 5rem;
+$unnnic-spacing-inline-nano: $unnnic-inline-nano;
+$unnnic-spacing-inline-xs: $unnnic-inline-xs;
+$unnnic-spacing-inline-ant: $unnnic-inline-ant;
+$unnnic-spacing-inline-sm: $unnnic-inline-sm;
+$unnnic-spacing-inline-md: $unnnic-inline-md;
+$unnnic-spacing-inline-lg: $unnnic-inline-lg;
+$unnnic-spacing-inline-xl: $unnnic-inline-xl;
+$unnnic-spacing-inline-giant: $unnnic-inline-giant;
+$unnnic-spacing-inline-xgiant: $unnnic-inline-xgiant;
+$unnnic-spacing-inline-awesome: $unnnic-inline-awesome;
+
+// Stack
+$unnnic-spacing-stack-nano: 0.25rem;
+$unnnic-spacing-stack-xs: 0.5rem;
+$unnnic-spacing-stack-sm: 1rem;
+$unnnic-spacing-stack-md: 1.5rem;
+$unnnic-spacing-stack-lg: 2rem;
+$unnnic-spacing-stack-xl: 2.5rem;
+$unnnic-spacing-stack-giant: 3rem;
+$unnnic-spacing-stack-xgiant: 4rem;
+$unnnic-spacing-stack-awesome: 5rem;

package/src/assets/scss/unnnic.scss

@@ -1,10 +1,10 @@
-@import './colors.scss';
-@import './fonts.scss';
-@import './spacing.scss';
-@import './grid.scss';
-
-.unnnic {
-    &--clickable {
-        cursor: pointer;
-    }
-}
+@import './colors.scss';
+@import './fonts.scss';
+@import './spacing.scss';
+@import './grid.scss';
+
+.unnnic {
+    &--clickable {
+        cursor: pointer;
+    }
+}

package/src/components/Button/ButtonIcon.vue

@@ -1,11 +1,11 @@
 <template>
   <button
-    :class="['button-icon', size]"
+    :class="['button-icon', size, type]"
     v-on="$listeners"
   >
     <unnnic-icon
       :icon="icon"
-      scheme="neutral-darkest"
+      :scheme="iconScheme"
       size="ant"
     ></unnnic-icon>
   </button>
@@ -20,6 +20,11 @@ export default {
   },
 
   props: {
+    type: {
+      type: String,
+      default: 'secondary',
+    },
+
     size: {
       type: String,
       required: true,
@@ -33,6 +38,16 @@ export default {
       required: true,
     },
   },
+
+  computed: {
+    iconScheme() {
+      if (this.type === 'primary') {
+        return 'neutral-snow';
+      }
+
+      return 'neutral-darkest';
+    },
+  },
 };
 </script>
 
@@ -40,23 +55,9 @@ export default {
 @import "../../assets/scss/unnnic.scss";
 
 .button-icon {
-  background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-light);
-  border-radius: $unnnic-border-radius-sm;
-  position: relative;
   border: 0;
   cursor: pointer;
-
-  &:before {
-    content: " ";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
-    border-radius: inherit;
-    pointer-events: none;
-  }
+  border-radius: $unnnic-border-radius-sm;
 
   &.small {
     padding: $unnnic-spacing-inset-nano;
@@ -66,11 +67,36 @@ export default {
     padding: $unnnic-spacing-inset-xs;
   }
 
-  &:hover {
-    background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-overlay);
+  &.primary {
+    background-color: $unnnic-color-neutral-darkest;
+
+    &:hover {
+      opacity: $unnnic-opacity-level-clear;
+    }
+  }
+
+  &.secondary {
+    background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-light);
+    position: relative;
 
     &:before {
-      border: 0;
+      content: " ";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+      border-radius: inherit;
+      pointer-events: none;
+    }
+
+    &:hover {
+      background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-overlay);
+
+      &:before {
+        border: 0;
+      }
     }
   }
 }

package/src/components/Card/MarketplaceCard.vue

@@ -107,8 +107,8 @@ export default {
     justify-content: space-between;
 
     &__app {
-      width: 56px;
-      height: 56px;
+      width: $unnnic-icon-size-xl;
+      height: $unnnic-icon-size-xl;
     }
 
     &__button {

package/src/components/DatePicker/DatePicker.vue

@@ -162,12 +162,12 @@ export default {
 
   data() {
     const today = new Date();
-    const referenceDate = `${today.getMonth() + 1}-1-${today.getFullYear()}`;
+    const referenceDate = `${today.getMonth() + 1} 1 ${today.getFullYear()}`;
 
     return {
       referenceDate,
-      startDate: this.initialStartDate || '',
-      endDate: this.initialEndDate || '',
+      startDate: this.initialStartDate.replace(/-/g, ' ') || '',
+      endDate: this.initialEndDate.replace(/-/g, ' ') || '',
       optionSelected: '',
     };
   },
@@ -198,7 +198,7 @@ export default {
 
   methods: {
     dateToString(date) {
-      return `${date.getMonth() + 1}-${date.getDate()}-${date.getFullYear()}`;
+      return `${date.getMonth() + 1} ${date.getDate()} ${date.getFullYear()}`;
     },
 
     stringToTime(date) {
@@ -206,7 +206,7 @@ export default {
     },
 
     getDate(date) {
-      return new Date(date).getDate();
+      return new Date(date.toString()).getDate();
     },
 
     getMonth(date) {
@@ -353,7 +353,7 @@ export default {
 
       if (this.endDate) {
         const secondMonth = this.addMonth(this.referenceDate, 1);
-        const firstDateOfEndDate = `${this.getMonth(this.endDate) + 1}-1-${this.getFullYear(this.endDate)}`;
+        const firstDateOfEndDate = `${this.getMonth(this.endDate) + 1} 1 ${this.getFullYear(this.endDate)}`;
 
         if (![this.referenceDate, secondMonth].includes(firstDateOfEndDate)) {
           this.referenceDate = firstDateOfEndDate;