@weni/unnnic-system 3.0.1-alpha.1 → 3.0.1-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.0.1-alpha.1",
+  "version": "3.0.1-alpha.2",
   "type": "commonjs",
   "files": [
     "dist",

package/src/assets/scss/colors.scss

@@ -342,26 +342,26 @@ $scheme-colors:
   // Background semantic colors
   "bg-base" $unnnic-color-white,
   "bg-soft" $unnnic-color-gray-50,
-  "bg-muted" $unnnic-color-gray-200,
-  "bg-info" $unnnic-color-aux-blue-50,
-  "bg-success" $unnnic-color-aux-green-50,
+  "bg-muted" $unnnic-color-gray-100,
+  "bg-info" $unnnic-color-aux-blue-100,
+  "bg-success" $unnnic-color-aux-green-100,
   "bg-warning" $unnnic-color-aux-yellow-50,
   "bg-critical" $unnnic-color-aux-red-50,
   
   // Text semantic colors
-  "text-base" $unnnic-color-gray-900,
-  "text-muted" $unnnic-color-gray-500,
-  "text-emphasized" $unnnic-color-gray-950,
-  "text-inverted" $unnnic-color-teal-500,
-  "text-info" $unnnic-color-aux-blue-500,
-  "text-success" $unnnic-color-aux-green-500,
-  "text-warning" $unnnic-color-aux-yellow-600,
-  "text-critical" $unnnic-color-aux-red-500,
+  "fg-base" $unnnic-color-gray-500,
+  "fg-muted" $unnnic-color-gray-300,
+  "fg-emphasized" $unnnic-color-gray-900,
+  "fg-inverted" $unnnic-color-white,
+  "fg-info" $unnnic-color-aux-blue-500,
+  "fg-success" $unnnic-color-aux-green-500,
+  "fg-warning" $unnnic-color-aux-yellow-500,
+  "fg-critical" $unnnic-color-aux-red-500,
   
   // Border semantic colors
   "border-base" $unnnic-color-gray-200,
   "border-soft" $unnnic-color-gray-100,
-  "border-muted" $unnnic-color-gray-300,
+  "border-muted" $unnnic-color-gray-200,
   "border-emphasized" $unnnic-color-gray-400,
   "border-info" $unnnic-color-aux-blue-300,
   "border-success" $unnnic-color-aux-green-300,

package/src/components/ChatsHeader/ChatsHeader.vue

@@ -68,8 +68,9 @@
           <slot />
         </div>
       </main>
+      <slot v-if="slots['right']" name="right" />
       <UnnnicButton
-        v-if="close"
+        v-else-if="close"
         class="unnnic-chats-header__close--sm"
         type="tertiary"
         iconCenter="close-1"
@@ -79,80 +80,59 @@
     </header>
   </div>
 </template>
-<script>
-import UnnnicI18n from '../../mixins/i18n';
+
+<script lang="ts" setup>
+import { useSlots } from 'vue';
+import type { UnnnicColorToken } from '../../types/unnnic-utils';
 
 import UnnnicButton from '../Button/Button.vue';
 import UnnnicAvatarIcon from '../AvatarIcon/AvatarIcon.vue';
 import UnnnicChatsUserAvatar from '../ChatsUserAvatar/ChatsUserAvatar.vue';
 import UnnnicBreadcrumb from '../Breadcrumb/Breadcrumb.vue';
 
-export default {
+defineOptions({
   name: 'UnnnicChatsHeader',
+});
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  sectionIconScheme?: UnnnicColorToken;
+  avatarIcon?: string;
+  avatarName?: string;
+  back?: () => void;
+  close?: () => void;
+  avatarClick?: () => void;
+  titleClick?: () => void;
+  crumbs?: Array<{ name: string; path: string }>;
+  size?: 'auto' | 'small' | 'large';
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+  subtitle: '',
+  sectionIconScheme: 'aux-purple',
+  avatarIcon: '',
+  avatarName: '',
+  back: () => {},
+  close: () => {},
+  avatarClick: () => {},
+  titleClick: () => {},
+  crumbs: () => [],
+  size: 'auto',
+});
+
+const slots = useSlots();
+
+defineEmits<{
+  crumbClick: [crumb: { name: string; path: string }];
+}>();
 
-  components: {
-    UnnnicButton,
-    UnnnicAvatarIcon,
-    UnnnicChatsUserAvatar,
-    UnnnicBreadcrumb,
-  },
-
-  mixins: [UnnnicI18n],
-
-  props: {
-    title: {
-      type: String,
-      required: true,
-      default: '',
-    },
-    subtitle: {
-      type: String,
-      default: '',
-    },
-    sectionIconScheme: {
-      type: String,
-      default: 'aux-purple',
-    },
-    avatarIcon: {
-      type: String,
-      default: '',
-    },
-    avatarName: {
-      type: String,
-      default: '',
-    },
-    back: {
-      type: Function,
-      required: false,
-    },
-    close: {
-      type: Function,
-      required: false,
-    },
-    avatarClick: {
-      type: Function,
-      required: false,
-    },
-    titleClick: {
-      type: Function,
-      required: false,
-    },
-    crumbs: {
-      type: Array,
-      default: () => [],
-    },
-    size: {
-      type: String,
-      default: 'auto',
-      validator(size) {
-        return ['auto', 'small', 'large'].includes(size);
-      },
-    },
-  },
-};
 </script>
+
 <style lang="scss">
 @use '@/assets/scss/unnnic' as *;
+
 .unnnic-chats-header {
   padding: $unnnic-spacing-sm;
 

package/src/stories/ChatsHeader.stories.js

@@ -32,6 +32,27 @@ export const ContactInfos = {
   },
 };
 
+export const ContactRightSlot = {
+  args: {
+    title: 'John Doe',
+    avatarName: 'John Doe',
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UnnnicChatsHeader },
+    template: `
+      <UnnnicChatsHeader 
+        v-bind="args" 
+      >
+        <template #right>
+          right slot
+        </template>
+      </UnnnicChatsHeader>`,
+  }),
+}
+
 export const Dashboard = {
   args: {
     title: size === 'large' ? 'Lorem Ipsum Inc.' : 'Dashboard',

package/src/types/index.d.ts

@@ -1,6 +1,6 @@
-import type { App, Component } from 'vue';
+import type { App, Component } from "vue";
 
-export type { IconProps } from '../components/Icon.vue';
+export type { IconProps } from "../components/Icon.vue";
 
 export interface UnnnicPlugin {
   install(app: App): void;
@@ -48,4 +48,4 @@ export declare const unnnicCallModal: (props: any) => void;
 export declare const unnnicFontSize: any;
 
 declare const Unnnic: UnnnicPlugin;
-export default Unnnic; 
+export default Unnnic;

package/src/types/unnnic-utils.d.ts

@@ -0,0 +1,88 @@
+export type UnnnicColorToken =
+  | "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"
+  | "feedback-blue"
+  | "feedback-grey"
+  | "aux-blue"
+  | "aux-purple"
+  | "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"
+  | "brand-sec-dark"
+  | "brand-sec-soft"
+  | "brand-sec";