design-system-next 2.11.20 → 2.11.22

package/src/components/lozenge/lozenge.vue

@@ -1,31 +1,40 @@
 <template>
-  <div :class="lozengeClasses.wrapperClasses">
-    <div v-if="visible && !loading" :class="lozengeClasses.baseClasses">
-      <div :class="lozengeClasses.toneClasses">
-        <div v-if="$slots.icon" class="spr-flex spr-h-3 spr-w-3 spr-items-center spr-overflow-hidden">
-          <slot name="icon" />
+  <div :class="['spr-lozenge__wrapper', lozengeClasses.wrapperClasses]">
+    <div v-if="visible && !loading" :class="['spr-lozenge__base', lozengeClasses.baseClasses]">
+      <div :class="['spr-lozenge__tone',lozengeClasses.toneClasses]" :tabindex="props.interactive || props.dropdown ? 0 : -1">
+        <div v-if="$slots.icon || props.icon" class="spr-lozenge__prefix-icon spr-flex spr-h-3 spr-w-3 spr-items-center spr-overflow-hidden">
+          <slot name="icon">
+            <icon :icon="props.icon" />
+          </slot>
         </div>
 
-        <div v-if="$slots.avatar" class="spr-flex spr-items-center">
-          <slot name="avatar" />
+        <div v-if="$slots.avatar || props.url" class="spr-lozenge__avatar">
+          <slot name="avatar">
+            <div v-if="url" class="spr-h-4 spr-w-4 spr-overflow-hidden">
+              <img class="spr-h-full spr-w-full spr-rounded-full spr-object-cover" :src="url" alt="avatar" />
+            </div>
+          </slot>
         </div>
 
-        <div v-if="url && !$slots.avatar" class="spr-h-4 spr-w-4 spr-overflow-hidden">
-          <img class="spr-h-full spr-w-full spr-rounded-full spr-object-cover" :src="url" alt="avatar" />
-        </div>
+        <span class="spr-lozenge__label spr-label-xs-medium">{{ label }}</span>
 
-        <div>{{ label }}</div>
+        <div v-if="$slots.postfixIcon || props.postfixIcon || props.dropdown" class="spr-lozenge__prefix-icon spr-flex spr-h-3 spr-w-3 spr-items-center spr-overflow-hidden">
+          <slot name="postfixIcon">
+            <icon v-if="props.postfixIcon" :icon="props.postfixIcon" />
+            <icon v-else icon="ph:caret-down-fill" />
+          </slot>
+        </div>
       </div>
     </div>
-    <div v-if="visible && loading" :class="lozengeClasses.baseClasses" />
+    <div v-if="visible && loading" :class="['spr-lozenge__loading', lozengeClasses.baseClasses]" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { lozengePropTypes } from './lozenge';
 import { useLozenge } from './use-lozenge';
+import { Icon } from '@iconify/vue';
 
 const props = defineProps(lozengePropTypes);
-
 const { lozengeClasses } = useLozenge(props);
 </script>

package/src/components/lozenge/use-lozenge.ts

@@ -1,7 +1,5 @@
-import { toRefs, computed, ComputedRef } from 'vue';
-
+import { toRefs, computed, ComputedRef, useSlots } from 'vue';
 import classNames from 'classnames';
-
 import type { LozengePropTypes } from './lozenge';
 
 interface LozengeClasses {
@@ -11,7 +9,9 @@ interface LozengeClasses {
 }
 
 export const useLozenge = (props: LozengePropTypes) => {
-  const { tone, fill, loading } = toRefs(props);
+  const { tone, fill, loading, interactive, url, dropdown } = toRefs(props);
+  const slots = useSlots();
+  const isInteractive = computed(() => interactive.value || dropdown.value);
 
   const lozengeClasses: ComputedRef<LozengeClasses> = computed(() => {
     const wrapperClasses = classNames({
@@ -25,31 +25,62 @@ export const useLozenge = (props: LozengePropTypes) => {
     });
 
     const toneClasses = classNames(
-      'spr-label-xs-medium spr-inline-flex spr-items-center spr-gap-size-spacing-6xs spr-rounded-md spr-border spr-border-solid spr-p-size-spacing-5xs spr-text-xs spr-uppercase',
+      'spr-box-border spr-h-[20px] spr-inline-flex spr-items-center spr-gap-size-spacing-6xs spr-rounded-md spr-border-solid spr-p-size-spacing-5xs spr-text-xs spr-uppercase',
       {
-        'spr-text-color-pending-base spr-background-color-pending-weak !spr-border-color-pending-base':
-          tone.value === 'pending' && !fill.value,
-        'spr-text-color-information-base spr-background-color-information-weak !spr-border-color-information-base':
-          tone.value === 'information' && !fill.value,
-        'spr-text-color-success-base spr-background-color-success-weak !spr-border-color-success-base':
-          tone.value === 'success' && !fill.value,
-        'spr-text-color-base spr-background-color-base !spr-border-color-base': tone.value === 'neutral' && !fill.value,
-        'spr-text-color-danger-base spr-background-color-danger-weak !spr-border-color-danger-base':
-          tone.value === 'danger' && !fill.value,
-        'spr-text-color-caution-base spr-background-color-caution-weak !spr-border-color-caution-base':
-          tone.value === 'caution' && !fill.value,
-        'spr-text-color-strong !spr-border-color-base spr-background-color': tone.value === 'plain' && !fill.value,
+        'spr-h-[20px]': !url.value,
+        'spr-h-[24px]': url.value || slots.avatar,
+        'spr-border': !fill.value,
+        'spr-cursor-pointer': isInteractive.value,
+        // #region - Styles for hollow lozenge
+        // Pending
+        'spr-text-mango-800 spr-background-color-pending-weak spr-border-mango-800': tone.value === 'pending' && !fill.value,
+        'hover:spr-bg-[#FFF89E] active:spr-bg-[#FFF56B]': tone.value === 'pending' && !fill.value && isInteractive.value,
+        // Information
+        'spr-text-blueberry-800 spr-background-color-information-weak spr-border-blueberry-800': tone.value === 'information' && !fill.value,
+        'hover:spr-bg-[#ADD6FF] active:spr-bg-[#7ABDFF]': tone.value === 'information' && !fill.value && isInteractive.value,
+        // Success
+        'spr-text-kangkong-800 spr-background-color-success-weak spr-border-kangkong-800': tone.value === 'success' && !fill.value,
+        'hover:spr-bg-[#AFF8C6] active:spr-bg-[#80F4A4]': tone.value === 'success' && !fill.value && isInteractive.value,
+        // Neutral
+        'spr-text-mushroom-800 spr-background-color-base spr-border-mushroom-800': tone.value === 'neutral' && !fill.value,
+        'hover:spr-bg-[#D3D9D9] active:spr-bg-[#B8C1C1]': tone.value === 'neutral' && !fill.value && isInteractive.value,
+        // Danger
+        'spr-text-tomato-800 spr-background-color-danger-weak spr-border-tomato-800': tone.value === 'danger' && !fill.value,
+        'hover:spr-bg-[#FCB0B3] active:spr-bg-[#FB7F83]': tone.value === 'danger' && !fill.value && isInteractive.value,
+        // Caution
+        'spr-text-carrot-800 spr-background-color-caution-weak spr-border-carrot-800': tone.value === 'caution' && !fill.value,
+        'hover:spr-bg-[#FFE79E] active:spr-bg-[#FFDA6B]': tone.value === 'caution' && !fill.value && isInteractive.value,
+        // Plain
+        'spr-text-color-strong spr-border-color-base spr-background-color': tone.value === 'plain' && !fill.value,
+        'hover:spr-bg-[#E6E6E6] active:spr-bg-[#CCCCCC]': tone.value === 'plain' && !fill.value && isInteractive.value,
+        // #endregion - Styles for hollow (!fill) lozenge
 
-        'spr-background-color-pending-base spr-text-color-strong !spr-border-0': tone.value === 'pending' && fill.value,
-        'spr-background-color-information-base spr-text-color-inverted-strong !spr-border-0':
-          tone.value === 'information' && fill.value,
-        'spr-background-color-success-base spr-text-color-inverted-strong !spr-border-0':
-          tone.value === 'success' && fill.value,
-        'spr-background-color-base spr-text-color-strong !spr-border-0': tone.value === 'neutral' && fill.value,
-        'spr-background-color-danger-base spr-text-color-inverted-strong !spr-border-0':
-          tone.value === 'danger' && fill.value,
-        'spr-background-color-caution-base spr-text-color-strong !spr-border-0': tone.value === 'caution' && fill.value,
-        'spr-text-color-strong spr-background-color !spr-border-0': tone.value === 'plain' && fill.value,
+        // #region - Styles for filled lozenge
+        'spr-border-0': fill.value,
+        'spr-text-color-strong': fill.value && (tone.value === 'pending' || tone.value === 'neutral' || tone.value === 'caution' || tone.value === 'plain'),
+        'spr-text-color-inverted-strong': fill.value && (tone.value === 'information' || tone.value === 'success' || tone.value === 'danger'),
+        // Pending
+        'spr-background-color-pending-base': tone.value === 'pending' && fill.value,
+        'hover:spr-background-color-pending-hover active:spr-background-color-pending-pressed': tone.value === 'pending' && fill.value && isInteractive.value,
+        // Information
+        'spr-background-color-information-base': tone.value === 'information' && fill.value,
+        'hover:spr-background-color-information-hover active:spr-background-color-information-pressed': tone.value === 'information' && fill.value && isInteractive.value,
+        // Success
+        'spr-background-color-success-base': tone.value === 'success' && fill.value,
+        'hover:spr-background-color-success-hover active:spr-background-color-success-pressed': tone.value === 'success' && fill.value && isInteractive.value,
+        // Neutral
+        'spr-background-color-base': tone.value === 'neutral' && fill.value,
+        'hover:spr-background-color-surface active:spr-background-color-pressed': tone.value === 'neutral' && fill.value && isInteractive.value,
+        // Danger
+        'spr-background-color-danger-base': tone.value === 'danger' && fill.value,
+        'hover:spr-background-color-danger-hover active:spr-background-color-danger-pressed': tone.value === 'danger' && fill.value && isInteractive.value,
+        // Caution
+        'spr-background-color-caution-base': tone.value === 'caution' && fill.value,
+        'hover:spr-background-color-caution-hover active:spr-background-color-caution-pressed': tone.value === 'caution' && fill.value && isInteractive.value,
+        // Plain
+        'spr-background-color': tone.value === 'plain' && fill.value,
+        'hover:spr-background-color-hover active:spr-background-color-pressed': tone.value === 'plain' && fill.value && isInteractive.value,
+        // #endregion - Styles for filled lozenge
       },
     );
 

package/src/components/sidenav/sidenav.ts

@@ -32,6 +32,7 @@ export type ParentLinkItem = {
   menuLinks: MenuLink[];
   submenuLinks?: SubmenuLink[];
   hidden?: boolean;
+  attributes?: Attributes[];
 };
 
 export type MenuLink = {
@@ -43,6 +44,7 @@ export type MenuLinkItem = {
   title: string;
   hidden: boolean;
   redirect: Redirect;
+  attributes?: Attributes[];
   submenuLinks: SubmenuLink[];
 };
 
@@ -55,6 +57,7 @@ export type SubmenuLinkItem = {
   title: string;
   hidden: boolean;
   redirect: Redirect;
+  attributes?: Attributes[];
 };
 
 export type Redirect = {
@@ -85,6 +88,16 @@ export interface NavItem {
   children?: NavItem[] | null;
   groupName?: string | null;
   hidden?: boolean;
+  attributes?: Attributes[] | null;
+}
+
+export type Attributes = {
+  name: string;
+  value: unknown | string | number | boolean | AttrLozenge;
+};
+type AttrLozenge = {
+  label: string;
+  tone?: string;
 }
 
 export interface MappedNavItem {
@@ -95,6 +108,7 @@ export interface MappedNavItem {
     isAbsoluteURL: boolean;
     link: string;
   };
+  attributes?: AttrLozenge | unknown [];
   menuLinks?: {
     menuHeading: string;
     items: MappedNavItem[];

package/src/components/sidenav/sidenav.vue

@@ -241,10 +241,20 @@
                               class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
                             ></div>
                             <span>{{ menuLinkItem.title }}</span>
-                            <Icon
-                              icon="ph:caret-right"
-                              class="spr-h-[16px] spr-w-[16px] spr-transform spr-font-normal spr-transition-transform spr-duration-300"
-                            />
+                            <div class="spr-flex spr-items-center spr-gap-1">
+                              <template v-for="(attr, i) in menuLinkItem?.attributes" :key="i"> 
+                                <spr-lozenge
+                                  v-if="attr?.name === 'lozenge' && attr?.value"
+                                  :label="(attr.value && typeof attr?.value === 'object' && 'label' in attr.value) ? String(attr.value.label) : ''"
+                                  :tone="getLozengeTone(attr)"
+                                  fill
+                                />
+                              </template>
+                              <Icon
+                                icon="ph:caret-right"
+                                class="spr-h-[16px] spr-w-[16px] spr-transform spr-font-normal spr-transition-transform spr-duration-300"
+                              />
+                            </div>
                           </div>
                           <!-- #endregion - Menu links -->
 
@@ -301,6 +311,16 @@
                                       class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
                                     ></div>
                                     <span>{{ submenuLinkItem.title }}</span>
+                                    <div class="spr-flex spr-items-center spr-gap-1">
+                                      <template v-for="(attr, i) in submenuLinkItem?.attributes" :key="i"> 
+                                        <spr-lozenge
+                                          v-if="attr?.name === 'lozenge' && attr?.value"
+                                          :label="(attr.value && typeof attr?.value === 'object' && 'label' in attr.value) ? String(attr.value.label) : ''"
+                                          :tone="getLozengeTone(attr)"
+                                          fill
+                                        />
+                                      </template>
+                                    </div>
                                   </div>
                                   <!-- #endregion - Submenu Links -->
                                 </template>
@@ -330,6 +350,14 @@
                             class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
                           ></div>
                           <span>{{ menuLinkItem.title }}</span>
+                          <template v-for="(attr, i) in menuLinkItem?.attributes" :key="i"> 
+                            <spr-lozenge
+                              v-if="attr?.name === 'lozenge' && attr?.value"
+                              :label="(attr.value && typeof attr?.value === 'object' && 'label' in attr.value) ? String(attr.value.label) : ''"
+                              :tone="getLozengeTone(attr)"
+                              fill
+                            />
+                          </template>
                         </div>
                       </template>
                       <!-- #endregion - Menu link only -->
@@ -765,7 +793,7 @@
           @click="isUserMenuVisible = !isUserMenuVisible"
         >
           <template v-if="props.userMenu.profileImage && !userProfileError">
-            <img :src="props.userMenu.profileImage" alt="profile-image" @error="userProfileError = true" />
+            <img :src="props.userMenu.profileImage" alt="profile" @error="userProfileError = true" />
           </template>
           <template v-else>
             <span>{{ getUserInitials(props.userMenu.name) }}</span>
@@ -788,7 +816,7 @@
                 ]"
               >
                 <template v-if="props.userMenu.profileImage && !userProfileError">
-                  <img :src="props.userMenu.profileImage" alt="profile-image" @error="userProfileError = true" />
+                  <img :src="props.userMenu.profileImage" alt="profile" @error="userProfileError = true" />
                 </template>
                 <template v-else>
                   <span>{{ getUserInitials(props.userMenu.name) }}</span>
@@ -847,6 +875,7 @@ import { useSidenav } from './use-sidenav';
 
 import SprTooltip from '../tooltip/tooltip.vue';
 import SprBadge from '../badge/badge.vue';
+import SprLozenge from '../lozenge/lozenge.vue';
 
 const props = defineProps(sidenavPropTypes);
 const emit = defineEmits(sidenavEmitTypes);
@@ -859,5 +888,6 @@ const {
   getUserInitials,
   handleRedirect,
   generateId,
+  getLozengeTone,
 } = useSidenav(props, emit);
 </script>

package/src/components/sidenav/use-sidenav.ts

@@ -1,7 +1,7 @@
-import { ref, toRefs, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 
 import type { SetupContext } from 'vue';
-import type { SidenavPropTypes, SidenavEmitTypes, ParentLinkItem, NavLinks, NavItem, MenuLinkItem } from './sidenav';
+import type { SidenavPropTypes, SidenavEmitTypes, ParentLinkItem, NavLinks, NavItem, MenuLinkItem, Attributes } from './sidenav';
 
 interface ObjectItem {
   redirect?: {
@@ -17,7 +17,8 @@ interface ObjectItem {
 }
 
 export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEmitTypes>['emit']) => {
-  const { navLinks } = toRefs(props);
+  // Create a separate reactive reference for the navigation data
+  const navLinks = ref<NavLinks>({ top: [], bottom: [] });
 
   const isQuckActionMenuVisible = ref(false);
   const isUserMenuVisible = ref(false);
@@ -148,6 +149,7 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
         subMenuHeading: string;
         items: ParentLinkItem[];
       }[],
+      attributes: item.attributes || [],
     };
   };
 
@@ -180,9 +182,19 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
     return transformedData;
   };
 
+  const getLozengeTone = (attr: Attributes)  => {
+    if (typeof attr === 'object' && attr !== null && 'tone' in attr && typeof attr.tone === 'string' && ['danger', 'information', 'plain', 'pending', 'success', 'neutral', 'caution'].includes(attr.tone)) {
+      return attr.tone as 'danger' | 'information' | 'plain' | 'pending' | 'success' | 'neutral' | 'caution';
+    }
+    return 'success'; // Default tone
+  };
+
   onMounted(async () => {
     if (props.isNavApi) {
       navLinks.value = await transformedNavItems(props.navLinks);
+    } else {
+      // Use the original navLinks from props
+      navLinks.value = props.navLinks;
     }
   });
 
@@ -195,5 +207,6 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
     handleRedirect,
     generateId,
     transformedNavItems,
+    getLozengeTone
   };
 };