@juspay/blend-design-system 0.0.37-beta.4 → 0.0.37-beta.5

package/lib/components/Sidebar/types.ts

@@ -1,12 +1,21 @@
 import { type ReactNode } from 'react'
+import type { BadgeColor, BadgePosition, BadgeSize } from '../Badge/Badge.types'
 import type { DirectoryData, NavbarItem } from '../Directory/types'
 import type { MerchantInfo } from '../Topbar/types'
 
+export type TenantBadge = {
+    text: string
+    size?: BadgeSize
+    color?: BadgeColor
+    position?: BadgePosition
+}
+
 export type LeftPanelItem = {
     label: string
     icon: ReactNode
     value?: string
     showInPanel?: boolean
+    badge?: TenantBadge
 }
 
 export type LeftPanelInfo = {
@@ -23,6 +32,7 @@ export type TenantItem = {
     value?: string
     icon: ReactNode
     showInPanel?: boolean
+    badge?: TenantBadge
 }
 
 export type SidebarMerchantInfo = {
@@ -39,7 +49,7 @@ export type SidebarStateChangeType = 'collapsed' | 'expanded' | 'intermediate'
 export type SidebarProps = {
     showLeftPanel?: boolean
     children: ReactNode
-    data: DirectoryData[]
+    data: DirectoryData[] | null
     leftPanel?: LeftPanelInfo
     topbar: ReactNode
     footer?: ReactNode

package/lib/components/Sidebar/utils.ts

@@ -144,7 +144,7 @@ export const isControlledSidebar = (
 }
 
 export const getMobileNavigationItems = (
-    directory: DirectoryData[]
+    directory?: DirectoryData[] | null
 ): MobileNavigationItem[] => {
     if (!directory || !Array.isArray(directory)) {
         return []

package/lib/components/SidebarV2/SecondarySidebar.tsx

@@ -1,8 +1,10 @@
+import type { ButtonHTMLAttributes } from 'react'
 import { SidebarV2TokensType } from './sidebarV2.tokens'
-import type { SecondarySidebarInfo } from './types'
+import type { SecondarySidebarInfo, SecondarySidebarItem } from './types'
 import Block from '../Primitives/Block/Block'
 import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
 import { TooltipV2, TooltipV2Side, TooltipV2Size } from '../TooltipV2'
+import { Badge, BadgeColor, BadgeSize } from '../Badge'
 import styled from 'styled-components'
 
 const ScrollableContainer = styled(Block)`
@@ -22,6 +24,82 @@ type Props = {
     tokens: SidebarV2TokensType
 }
 
+type SecondarySidebarItemButtonProps = {
+    item: SecondarySidebarItem
+    isSelected: boolean
+    onSelect: (value: string) => void
+    buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>
+    tokens: SidebarV2TokensType
+}
+
+function SecondarySidebarItemButton({
+    item,
+    isSelected,
+    onSelect,
+    buttonProps,
+    tokens,
+}: SecondarySidebarItemButtonProps) {
+    const itemButton = (
+        <PrimitiveButton
+            {...buttonProps}
+            type="button"
+            cursor="pointer"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            width={tokens.secondarySidebar.item.width}
+            height={tokens.secondarySidebar.item.height}
+            borderRadius={tokens.secondarySidebar.item.borderRadius}
+            border={
+                isSelected
+                    ? tokens.secondarySidebar.item.border.active
+                    : tokens.secondarySidebar.item.border.default
+            }
+            _hover={{
+                backgroundColor:
+                    tokens.secondarySidebar.item.backgroundColor.hover,
+                outline: 'none',
+                border: isSelected
+                    ? tokens.secondarySidebar.item.border.active
+                    : tokens.secondarySidebar.item.border.hover,
+            }}
+            onClick={(e) => {
+                onSelect(item.value)
+                buttonProps?.onClick?.(e)
+            }}
+            aria-label={`Select tenant: ${item.label}`}
+            aria-pressed={isSelected}
+        >
+            <span aria-hidden="true">{item.icon}</span>
+        </PrimitiveButton>
+    )
+
+    const trigger = item.badge ? (
+        <Badge
+            text={item.badge.text.slice(0, 2)}
+            size={item.badge.size || BadgeSize.SM}
+            color={item.badge.color || BadgeColor.PRIMARY}
+            position={item.badge.position || 'bottom-right'}
+            isCircular
+        >
+            {itemButton}
+        </Badge>
+    ) : (
+        itemButton
+    )
+
+    return (
+        <TooltipV2
+            content={item.label}
+            side={TooltipV2Side.RIGHT}
+            delayDuration={500}
+            size={TooltipV2Size.SM}
+        >
+            {trigger}
+        </TooltipV2>
+    )
+}
+
 export function SecondarySidebar({ id, secondarySidebar, tokens }: Props) {
     if (!secondarySidebar || (secondarySidebar?.items?.length ?? 0) === 0) {
         return null
@@ -59,50 +137,14 @@ export function SecondarySidebar({ id, secondarySidebar, tokens }: Props) {
                 style={{ minHeight: 0 }}
             >
                 {items?.map((item) => (
-                    <TooltipV2
+                    <SecondarySidebarItemButton
                         key={item.value}
-                        content={item.label}
-                        side={TooltipV2Side.RIGHT}
-                        delayDuration={500}
-                        size={TooltipV2Size.SM}
-                    >
-                        <PrimitiveButton
-                            {...buttonProps}
-                            type="button"
-                            cursor="pointer"
-                            display="flex"
-                            alignItems="center"
-                            justifyContent="center"
-                            width={tokens.secondarySidebar.item.width}
-                            height={tokens.secondarySidebar.item.height}
-                            borderRadius={
-                                tokens.secondarySidebar.item.borderRadius
-                            }
-                            border={
-                                isSelected(item.value)
-                                    ? tokens.secondarySidebar.item.border.active
-                                    : tokens.secondarySidebar.item.border
-                                          .default
-                            }
-                            _hover={{
-                                backgroundColor:
-                                    tokens.secondarySidebar.item.backgroundColor
-                                        .hover,
-                                outline: 'none',
-                                border: isSelected(item.value)
-                                    ? tokens.secondarySidebar.item.border.active
-                                    : tokens.secondarySidebar.item.border.hover,
-                            }}
-                            onClick={(e) => {
-                                onSelect?.(item.value)
-                                buttonProps?.onClick?.(e)
-                            }}
-                            aria-label={`Select tenant: ${item.label}`}
-                            aria-pressed={isSelected(item.value)}
-                        >
-                            <span aria-hidden="true">{item.icon}</span>
-                        </PrimitiveButton>
-                    </TooltipV2>
+                        item={item}
+                        isSelected={isSelected(item.value)}
+                        onSelect={onSelect}
+                        buttonProps={buttonProps}
+                        tokens={tokens}
+                    />
                 ))}
             </ScrollableContainer>
 

package/lib/components/SidebarV2/SidebarV2Panel.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react'
 import styled from 'styled-components'
 import Block from '../Primitives/Block/Block'
 import Directory from '../Directory/Directory'
+import { normalizeDirectoryData } from '../Directory/utils'
 import type { DirectoryData } from '../Directory/types'
 import SidebarV2Header from './SidebarV2Header'
 import SidebarV2Footer from './SidebarV2Footer'
@@ -43,7 +44,7 @@ export type SidebarV2PanelProps = {
     sidebarCollapseKey: string
     onToggle: () => void
     sidebarNavId?: string
-    data: DirectoryData[]
+    data: DirectoryData[] | null
     idPrefix: string
     activeItem?: string | null
     onActiveItemChange?: (item: string | null) => void
@@ -77,6 +78,7 @@ const SidebarV2Panel = ({
     tokens,
 }: SidebarV2PanelProps) => {
     const trackHover = shouldTrackHover(setIsHovering)
+    const directoryData = normalizeDirectoryData(data)
 
     return (
         <Block
@@ -118,7 +120,7 @@ const SidebarV2Panel = ({
                 }
             >
                 <Directory
-                    directoryData={data}
+                    directoryData={directoryData}
                     idPrefix={idPrefix}
                     activeItem={activeItem}
                     onActiveItemChange={onActiveItemChange}

package/lib/components/SidebarV2/index.ts

@@ -8,6 +8,7 @@ export type {
     SecondarySidebarItem,
     SidebarV2Props,
     SidebarV2StateChangeType,
+    TenantBadge,
 } from './types'
 export { SidebarV2StateChange } from './types'
 export type { SidebarV2PanelProps } from './SidebarV2Panel'

package/lib/components/SidebarV2/types.ts

@@ -1,6 +1,9 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
 import type { DirectoryData } from '../Directory/types'
 import type { MerchantInfo } from '../Topbar/types'
+import type { TenantBadge } from '../Sidebar/types'
+
+export type { TenantBadge } from '../Sidebar/types'
 
 export enum SidebarV2StateChange {
     COLLAPSED = 'collapsed',
@@ -14,6 +17,7 @@ export type SecondarySidebarItem = {
     label: string
     value: string
     icon: ReactNode
+    badge?: TenantBadge
 }
 
 export type SecondarySidebarInfo = {

package/lib/components/StatCard/statcard.tokens.ts

@@ -325,7 +325,7 @@ export const getStatCardToken = (
                         width: foundationToken.unit[20],
                     },
                     title: {
-                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        fontSize: foundationToken.font.size.body.lg.fontSize,
                         fontWeight: foundationToken.font.weight[500],
                         color: foundationToken.colors.gray[400],
                     },