@weni/unnnic-system 1.16.23 → 1.16.25-develop.0

package/package.json

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

package/src/assets/scss/colors.scss

@@ -1,21 +1,82 @@
-/* Background */
-$unnnic-color-background-solo: #E8F4F4;
-$unnnic-color-background-sky: #F4F6F8;
-$unnnic-color-background-grass: #F5F6F6;
-$unnnic-color-background-carpet: #F9F9F9;
-$unnnic-color-background-snow: #FFFFFF;
+$unnnic-color-weni-50: #EEFFFC;
+$unnnic-color-weni-100: #C6FFF7;
+$unnnic-color-weni-200: #8EFFF1;
+$unnnic-color-weni-300: #4DFBEA;
+$unnnic-color-weni-400: #19E8DA;
+$unnnic-color-weni-500: #00DED2;
+$unnnic-color-weni-600: #00A49F;
+$unnnic-color-weni-700: #028380;
+$unnnic-color-weni-800: #086766;
+$unnnic-color-weni-900: #0C5554;
+$unnnic-color-weni-950: #003234;
 
-/* Neutral */
 $unnnic-color-neutral-black: #272B33;
 $unnnic-color-neutral-darkest: #3B414D;
 $unnnic-color-neutral-dark: #4E5666;
 $unnnic-color-neutral-cloudy: #67738B;
-$unnnic-color-neutral-cleanest: #9CACCC;
-$unnnic-color-neutral-clean: #D0D3D9;
+$unnnic-color-neutral-clean: #9CACCC;
+$unnnic-color-neutral-cleanest: #D0D3D9;
 $unnnic-color-neutral-soft: #E2E6ED;
-$unnnic-color-neutral-lightest: #F4F6F8;
-$unnnic-color-neutral-light: #F9F9F9;
-$unnnic-color-neutral-snow: #FFFFFF;
+$unnnic-color-neutral-light: #F4F6F8;
+$unnnic-color-neutral-lightest: #F9F9F9;
+$unnnic-color-neutral-white: #FFFFFF;
+
+$unnnic-color-background-solo: #E8F4F4;
+$unnnic-color-background-sky: $unnnic-color-neutral-light;
+$unnnic-color-background-grass: #F5F6F6;
+$unnnic-color-background-lightest: $unnnic-color-neutral-lightest;
+$unnnic-color-background-white: $unnnic-color-neutral-white;
+
+$unnnic-color-aux-green-100: #C6F6D5;
+$unnnic-color-aux-green-300: #68D391;
+$unnnic-color-aux-green-500: #38A169;
+$unnnic-color-aux-green-700: #276749;
+$unnnic-color-aux-green-900: #1C4532;
+
+$unnnic-color-aux-blue-100: #BEE3F8;
+$unnnic-color-aux-blue-300: #63B3ED;
+$unnnic-color-aux-blue-500: #3182CE;
+$unnnic-color-aux-blue-700: #2C5282;
+$unnnic-color-aux-blue-900: #1A365D;
+
+$unnnic-color-aux-purple-100: #E9D8FD;
+$unnnic-color-aux-purple-300: #B794F4;
+$unnnic-color-aux-purple-500: #805AD5;
+$unnnic-color-aux-purple-700: #553C9A;
+$unnnic-color-aux-purple-900: #322659;
+
+$unnnic-color-aux-red-100: #FED7D7;
+$unnnic-color-aux-red-300: #FC8181;
+$unnnic-color-aux-red-500: #E53E3E;
+$unnnic-color-aux-red-700: #9B2C2C;
+$unnnic-color-aux-red-900: #63171B;
+
+$unnnic-color-aux-orange-100: #FEEBC8;
+$unnnic-color-aux-orange-300: #F6AD55;
+$unnnic-color-aux-orange-500: #DD6B20;
+$unnnic-color-aux-orange-700: #9C4221;
+$unnnic-color-aux-orange-900: #652B19;
+
+$unnnic-color-aux-yellow-100: #FEFCBF;
+$unnnic-color-aux-yellow-300: #F6E05E;
+$unnnic-color-aux-yellow-500: #D69E2E;
+$unnnic-color-aux-yellow-700: #975A16;
+$unnnic-color-aux-yellow-900: #5F370E;
+
+$unnnic-color-floweditor-blue: #0080A3;
+$unnnic-color-floweditor-purple: #7A00A3;
+$unnnic-color-floweditor-wine: #A3006A;
+$unnnic-color-floweditor-orange: #F99707;
+$unnnic-color-floweditor-pink: #DE16BA;
+$unnnic-color-floweditor-turquoise: $unnnic-color-weni-500;
+$unnnic-color-floweditor-green: #00A339;
+
+/* Background */
+$unnnic-color-background-carpet: $unnnic-color-neutral-lightest;
+$unnnic-color-background-snow: $unnnic-color-neutral-white;
+
+/* Neutral */
+$unnnic-color-neutral-snow: $unnnic-color-neutral-white;
 
 /* Feedback colors */
 $unnnic-color-feedback-red: #FF4545;
@@ -38,7 +99,7 @@ $unnnic-color-aux-baby-green: #B2FCA6;
 $unnnic-color-aux-baby-pink: #FFCBF6;
 
 /* Brand */
-$unnnic-color-brand-weni: #00DED2;
+$unnnic-color-brand-weni: $unnnic-color-weni-500;
 $unnnic-color-brand-weni-dark: #005E5A;
 $unnnic-color-brand-weni-soft: #009E96;
 $unnnic-color-brand-sec-dark: #262626;
@@ -55,6 +116,8 @@ $scheme-colors:
   "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 */
   "neutral-black" $unnnic-color-neutral-black,
@@ -66,6 +129,7 @@ $scheme-colors:
   "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,
 
   /* Feedback colors */
@@ -88,7 +152,63 @@ $scheme-colors:
   "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,
+
   /* Brand */
+  "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,

package/src/assets/scss/spacing.scss

@@ -40,11 +40,22 @@ $unnnic-opacity-level-light: 0.16;
 $unnnic-opacity-level-extra-light: 0.08;
 
 // Spacing
-$unnnic-inset-nano: 0.5 * $unnnic-font-size;
-$unnnic-inset-xs: 0.75 * $unnnic-font-size;
-$unnnic-inset-sm: 1 * $unnnic-font-size;
-$unnnic-inset-md: 1.5 * $unnnic-font-size;
-$unnnic-inset-lg: 2 * $unnnic-font-size;
+$unnnic-spacing-nano: 0.25 * $unnnic-font-size;
+$unnnic-spacing-xs: 0.5 * $unnnic-font-size;
+$unnnic-spacing-ant: 0.75 * $unnnic-font-size;
+$unnnic-spacing-sm: $unnnic-font-size;
+$unnnic-spacing-md: 1.5 * $unnnic-font-size;
+$unnnic-spacing-lg: 2 * $unnnic-font-size;
+$unnnic-spacing-xl: 2.5 * $unnnic-font-size;
+$unnnic-spacing-giant: 3 * $unnnic-font-size;
+$unnnic-spacing-xgiant: 4 * $unnnic-font-size;
+$unnnic-spacing-awesome: 5 * $unnnic-font-size;
+
+$unnnic-inset-nano: $unnnic-spacing-xs;
+$unnnic-inset-xs: $unnnic-spacing-ant;
+$unnnic-inset-sm: $unnnic-spacing-sm;
+$unnnic-inset-md: $unnnic-spacing-md;
+$unnnic-inset-lg: $unnnic-spacing-lg;
 $unnnic-spacing-inset-nano: $unnnic-inset-nano;
 $unnnic-spacing-inset-xs: $unnnic-inset-xs;
 $unnnic-spacing-inset-sm: $unnnic-inset-sm;
@@ -52,23 +63,23 @@ $unnnic-spacing-inset-md: $unnnic-inset-md;
 $unnnic-spacing-inset-lg: $unnnic-inset-lg;
 
 // Squish
-$unnnic-squish-nano: 0.5 * $unnnic-font-size 1 * $unnnic-font-size;
-$unnnic-squish-xs: 0.75 * $unnnic-font-size 1 * $unnnic-font-size;
-$unnnic-squish-sm: 0.75 * $unnnic-font-size 1.5 * $unnnic-font-size;
-$unnnic-squish-md: 1 * $unnnic-font-size 1.5 * $unnnic-font-size;
-$unnnic-squish-lg: 1.5 * $unnnic-font-size 2 * $unnnic-font-size;
+$unnnic-squish-nano: $unnnic-spacing-xs $unnnic-spacing-sm;
+$unnnic-squish-xs: $unnnic-spacing-ant $unnnic-spacing-sm;
+$unnnic-squish-sm: $unnnic-spacing-ant $unnnic-spacing-md;
+$unnnic-squish-md: $unnnic-spacing-sm $unnnic-spacing-md;
+$unnnic-squish-lg: $unnnic-spacing-md $unnnic-spacing-lg;
 
 // Inline
-$unnnic-inline-nano: 0.25 * $unnnic-font-size;
-$unnnic-inline-xs: 0.5 * $unnnic-font-size;
-$unnnic-inline-ant: 0.75 * $unnnic-font-size;
-$unnnic-inline-sm: 1 * $unnnic-font-size;
-$unnnic-inline-md: 1.5 * $unnnic-font-size;
-$unnnic-inline-lg: 2 * $unnnic-font-size;
-$unnnic-inline-xl: 2.5 * $unnnic-font-size;
-$unnnic-inline-giant: 3 * $unnnic-font-size;
-$unnnic-inline-xgiant: 4 * $unnnic-font-size;
-$unnnic-inline-awesome: 5 * $unnnic-font-size;
+$unnnic-inline-nano: $unnnic-spacing-nano;
+$unnnic-inline-xs: $unnnic-spacing-xs;
+$unnnic-inline-ant: $unnnic-spacing-ant;
+$unnnic-inline-sm: $unnnic-spacing-sm;
+$unnnic-inline-md: $unnnic-spacing-md;
+$unnnic-inline-lg: $unnnic-spacing-lg;
+$unnnic-inline-xl: $unnnic-spacing-xl;
+$unnnic-inline-giant: $unnnic-spacing-giant;
+$unnnic-inline-xgiant: $unnnic-spacing-xgiant;
+$unnnic-inline-awesome: $unnnic-spacing-awesome;
 $unnnic-spacing-inline-nano: $unnnic-inline-nano;
 $unnnic-spacing-inline-xs: $unnnic-inline-xs;
 $unnnic-spacing-inline-ant: $unnnic-inline-ant;
@@ -81,12 +92,12 @@ $unnnic-spacing-inline-xgiant: $unnnic-inline-xgiant;
 $unnnic-spacing-inline-awesome: $unnnic-inline-awesome;
 
 // Stack
-$unnnic-spacing-stack-nano: 0.25 * $unnnic-font-size;
-$unnnic-spacing-stack-xs: 0.5 * $unnnic-font-size;
-$unnnic-spacing-stack-sm: 1 * $unnnic-font-size;
-$unnnic-spacing-stack-md: 1.5 * $unnnic-font-size;
-$unnnic-spacing-stack-lg: 2 * $unnnic-font-size;
-$unnnic-spacing-stack-xl: 2.5 * $unnnic-font-size;
-$unnnic-spacing-stack-giant: 3 * $unnnic-font-size;
-$unnnic-spacing-stack-xgiant: 4 * $unnnic-font-size;
-$unnnic-spacing-stack-awesome: 5 * $unnnic-font-size;
+$unnnic-spacing-stack-nano: $unnnic-spacing-nano;
+$unnnic-spacing-stack-xs: $unnnic-spacing-xs;
+$unnnic-spacing-stack-sm: $unnnic-spacing-sm;
+$unnnic-spacing-stack-md: $unnnic-spacing-md;
+$unnnic-spacing-stack-lg: $unnnic-spacing-lg;
+$unnnic-spacing-stack-xl: $unnnic-spacing-xl;
+$unnnic-spacing-stack-giant: $unnnic-spacing-giant;
+$unnnic-spacing-stack-xgiant: $unnnic-spacing-xgiant;
+$unnnic-spacing-stack-awesome: $unnnic-spacing-awesome;

package/src/components/NavbarChats/NavbarChats.vue

@@ -0,0 +1,148 @@
+<template>
+  <nav class="unnnic-navbar-chats">
+    <ol class="unnnic-navbar-chats__list">
+      <li v-for="(link, index) in links" :key="link.icon + index">
+        <a
+          :class="[
+            'unnnic-navbar-chats__link',
+            'unnnic--clickable',
+            { selected: isSelected(link) },
+          ]"
+          @click="
+            () => {
+              selectLink(link);
+              link.action();
+            }
+          "
+        >
+          <unnnic-icon
+            :icon="isSelected(link) ? link.icon.selected : link.icon.default"
+            size="lg"
+            scheme="neutral-snow"
+          />
+        </a>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  name: 'unnnic-navbar-chats',
+
+  components: {
+    UnnnicIcon,
+  },
+
+  props: {
+    links: {
+      type: Array,
+      required: true,
+      default: () => [
+        {
+          name: '',
+          icon: {
+            default: '',
+            selected: '',
+          },
+          action: () => {},
+        },
+      ],
+      validator(value) {
+        if (value.length === 0) {
+          return false;
+        }
+
+        function isValidLink(link) {
+          const hasValidName = typeof link.name === 'string';
+          const hasValidIcon = typeof link.icon.default === 'string';
+          const hasValidAction = typeof link.action === 'function';
+
+          return hasValidName && hasValidIcon && hasValidAction;
+        }
+
+        return value.every(isValidLink);
+      },
+    },
+
+    initialLink: {
+      type: String,
+      required: false,
+    },
+  },
+
+  data() {
+    return {
+      selectedLink: null,
+    };
+  },
+
+  methods: {
+    selectLink(link) {
+      this.selectedLink = link;
+    },
+
+    isSelected(link) {
+      return this.selectedLink === link;
+    },
+  },
+
+  mounted() {
+    if (this.initialLink) {
+      const initialLinkToSelect = this.links.find((link) => link.name === this.initialLink);
+
+      this.selectLink(initialLinkToSelect);
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/unnnic.scss';
+
+.unnnic-navbar-chats {
+  width: 100vw;
+  max-width: 100%;
+
+  padding: $unnnic-spacing-xs $unnnic-spacing-sm;
+  box-sizing: border-box;
+
+  background-color: $unnnic-color-weni-600;
+
+  &__list {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    gap: $unnnic-spacing-sm;
+
+    width: 100%;
+    height: 100%;
+
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+
+    li {
+      flex: 1;
+    }
+  }
+
+  &__link {
+    display: flex;
+    border-radius: $unnnic-border-radius-sm;
+    padding: $unnnic-spacing-xs 0;
+
+    place-content: center;
+
+    margin: 0 auto;
+
+    &.selected {
+      background-color: $unnnic-color-weni-700;
+    }
+  }
+}
+</style>

package/src/stories/NavbarChats.stories.js

@@ -0,0 +1,68 @@
+/* eslint-disable no-alert */
+import unnnicNavbarChats from '../components/NavbarChats/NavbarChats.vue';
+
+export default {
+  title: 'Example/NavbarChats',
+  component: unnnicNavbarChats,
+  argTypes: {
+    links: [
+      {
+        icon: 'add-1',
+        action: () => {},
+      },
+    ],
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicNavbarChats },
+  template: '<unnnic-navbar-chats v-bind="$props"/>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  links: [
+    {
+      name: 'house',
+      icon: {
+        default: 'house-1-1',
+        selected: 'house-2-2',
+      },
+      action: () => {},
+    },
+    {
+      name: 'messaging',
+      icon: {
+        default: 'messaging-we-chat-3',
+        selected: 'messaging-we-chat-2',
+      },
+      action: () => {},
+    },
+    {
+      name: 'folder',
+      icon: {
+        default: 'folder-1',
+        selected: 'folder-2',
+      },
+      action: () => {},
+    },
+    {
+      name: 'gauge',
+      icon: {
+        default: 'gauge-dashboard-2',
+        selected: 'gauge-dashboard-1',
+      },
+      action: () => {},
+    },
+    {
+      name: 'cog',
+      icon: {
+        default: 'cog-1',
+        selected: 'cog-2',
+      },
+      action: () => {},
+    },
+  ],
+  initialLink: 'house',
+};

package/src/utils/colorsList.js

@@ -4,6 +4,8 @@ export default [
   'background-grass',
   'background-carpet',
   'background-snow',
+  'background-lightest',
+  'background-white',
   'neutral-black',
   'neutral-darkest',
   'neutral-dark',
@@ -13,6 +15,7 @@ export default [
   'neutral-soft',
   'neutral-lightest',
   'neutral-light',
+  'neutral-white',
   'neutral-snow',
   'feedback-red',
   'feedback-green',
@@ -29,6 +32,54 @@ export default [
   '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',