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

package/lib/components/StatCardV2/StatCardV2Change.tsx

@@ -2,6 +2,7 @@ import { ArrowDown, ArrowUp } from 'lucide-react'
 import { addPxToValue } from '../../global-utils/GlobalUtils'
 import Block from '../Primitives/Block/Block'
 import Text from '../Text/Text'
+import { Tooltip } from '../Tooltip'
 import {
     StatCardV2ArrowDirection,
     type StatCardV2ChangeProps,
@@ -13,6 +14,7 @@ const StatCardV2Change = ({
     rightSymbol,
     arrowDirection,
     changeType,
+    tooltip,
     tokens,
     id,
 }: StatCardV2ChangeProps) => {
@@ -24,7 +26,7 @@ const StatCardV2Change = ({
 
     if (changeValueText === undefined || changeValueText === null) return null
 
-    return (
+    const changeContent = (
         <Block
             display="flex"
             alignItems="center"
@@ -33,6 +35,7 @@ const StatCardV2Change = ({
                     .gap
             }
             data-element="statcard-delta"
+            cursor={tooltip ? 'pointer' : undefined}
         >
             <Block
                 data-element="change-arrow"
@@ -84,6 +87,12 @@ const StatCardV2Change = ({
             </Block>
         </Block>
     )
+
+    if (!tooltip) {
+        return changeContent
+    }
+
+    return <Tooltip content={tooltip}>{changeContent}</Tooltip>
 }
 
 export default StatCardV2Change

package/lib/components/StatCardV2/StatCardV2NoData.tsx

@@ -102,6 +102,7 @@ const StatCardV2NoData = ({
                             title={title}
                             helpIconText={helpIconText}
                             tokens={tokens}
+                            isSmallScreen={isSmallScreen}
                         />
                     </Block>
                 </Block>

package/lib/components/StatCardV2/StatCardV2Skeleton.tsx

@@ -1,4 +1,5 @@
-import { Skeleton, SkeletonVariant } from '../Skeleton'
+import { Skeleton } from '../Skeleton'
+import type { SkeletonVariant } from '../Skeleton/types'
 import type { StatCardV2SkeletonProps } from './statcardV2.types'
 
 const StatCardV2Skeleton = ({

package/lib/components/StatCardV2/StatCardV2Title.tsx

@@ -1,80 +1,210 @@
+import { useEffect, useRef, useState } from 'react'
 import { CircleHelp } from 'lucide-react'
 import { addPxToValue } from '../../global-utils/GlobalUtils'
 import Block from '../Primitives/Block/Block'
 import Text from '../Text/Text'
 import { Tooltip } from '../Tooltip'
 import type { StatCardV2TitleProps } from './statcardV2.types'
+import type { StatCardV2TokensType } from './statcardV2.tokens'
+
+type StatCardV2TitleTextProps = {
+    title: string
+    id?: string
+    tokens: StatCardV2TokensType
+    isSmallScreen: boolean
+}
+
+const StatCardV2TitleText = ({
+    title,
+    id,
+    tokens,
+    isSmallScreen,
+}: StatCardV2TitleTextProps) => {
+    const [forceTooltipOpen, setForceTooltipOpen] = useState(false)
+    const titleRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (!isSmallScreen || !forceTooltipOpen) return
+
+        const handlePointerDown = (event: PointerEvent) => {
+            if (titleRef.current?.contains(event.target as Node)) return
+            setForceTooltipOpen(false)
+        }
+
+        document.addEventListener('pointerdown', handlePointerDown)
+        return () =>
+            document.removeEventListener('pointerdown', handlePointerDown)
+    }, [isSmallScreen, forceTooltipOpen])
+
+    const titleText = (
+        <Text
+            id={id}
+            fontSize={
+                tokens.topContainer.dataContainer.titleContainer.title.fontSize
+            }
+            fontWeight={
+                tokens.topContainer.dataContainer.titleContainer.title
+                    .fontWeight
+            }
+            lineHeight={addPxToValue(
+                tokens.topContainer.dataContainer.titleContainer.title
+                    .lineHeight
+            )}
+            color={tokens.topContainer.dataContainer.titleContainer.title.color}
+            style={{
+                display: '-webkit-box',
+                WebkitLineClamp: 1,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                wordBreak: 'break-word',
+            }}
+            data-element="statcard-header"
+            data-id={title || 'statcard-header'}
+        >
+            {title}
+        </Text>
+    )
+
+    if (!isSmallScreen) {
+        return <Tooltip content={title}>{titleText}</Tooltip>
+    }
+
+    return (
+        <Block
+            ref={titleRef}
+            minWidth={0}
+            flexGrow={1}
+            onClick={() => {
+                setForceTooltipOpen(!forceTooltipOpen)
+            }}
+            style={{ cursor: 'pointer' }}
+        >
+            <Tooltip open={forceTooltipOpen} content={title}>
+                {titleText}
+            </Tooltip>
+        </Block>
+    )
+}
+
+type StatCardV2HelpIconProps = {
+    helpIconText: string
+    title: string
+    tokens: StatCardV2TokensType
+    isSmallScreen: boolean
+}
+
+const StatCardV2HelpIcon = ({
+    helpIconText,
+    title,
+    tokens,
+    isSmallScreen,
+}: StatCardV2HelpIconProps) => {
+    const [forceTooltipOpen, setForceTooltipOpen] = useState(false)
+    const helpIconRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (!isSmallScreen || !forceTooltipOpen) return
+
+        const handlePointerDown = (event: PointerEvent) => {
+            if (helpIconRef.current?.contains(event.target as Node)) return
+            setForceTooltipOpen(false)
+        }
+
+        document.addEventListener('pointerdown', handlePointerDown)
+        return () =>
+            document.removeEventListener('pointerdown', handlePointerDown)
+    }, [isSmallScreen, forceTooltipOpen])
+
+    const helpIconTrigger = (
+        <Block
+            as="span"
+            display="inline-flex"
+            alignItems="center"
+            justifyContent="center"
+            role="button"
+            tabIndex={0}
+            aria-label={helpIconText || `Help for ${title}`}
+        >
+            <CircleHelp
+                width={
+                    tokens.topContainer.dataContainer.titleContainer.helpIcon
+                        .width
+                }
+                height={
+                    tokens.topContainer.dataContainer.titleContainer.helpIcon
+                        .height
+                }
+                color={
+                    tokens.topContainer.dataContainer.titleContainer.helpIcon
+                        .color.default
+                }
+                aria-hidden="true"
+            />
+        </Block>
+    )
+
+    if (!isSmallScreen) {
+        return (
+            <Block
+                data-element="help-icon"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                flexShrink={0}
+            >
+                <Tooltip content={helpIconText}>{helpIconTrigger}</Tooltip>
+            </Block>
+        )
+    }
+
+    return (
+        <Block
+            ref={helpIconRef}
+            data-element="help-icon"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            flexShrink={0}
+            onClick={() => {
+                setForceTooltipOpen(!forceTooltipOpen)
+            }}
+        >
+            <Tooltip open={forceTooltipOpen} content={helpIconText}>
+                {helpIconTrigger}
+            </Tooltip>
+        </Block>
+    )
+}
 
 const StatCardV2Title = ({
     title,
     helpIconText,
     tokens,
     id,
+    isSmallScreen = false,
 }: StatCardV2TitleProps) => {
     if (!title) return null
+
     return (
         <Block
             display="flex"
             alignItems="center"
             gap={tokens.topContainer.dataContainer.titleContainer.gap}
         >
-            <Text
+            <StatCardV2TitleText
+                title={title}
                 id={id}
-                fontSize={
-                    tokens.topContainer.dataContainer.titleContainer.title
-                        .fontSize
-                }
-                fontWeight={
-                    tokens.topContainer.dataContainer.titleContainer.title
-                        .fontWeight
-                }
-                lineHeight={addPxToValue(
-                    tokens.topContainer.dataContainer.titleContainer.title
-                        .lineHeight
-                )}
-                color={
-                    tokens.topContainer.dataContainer.titleContainer.title.color
-                }
-                data-element="statcard-header"
-                data-id={title || 'statcard-header'}
-            >
-                {title}
-            </Text>
+                tokens={tokens}
+                isSmallScreen={isSmallScreen}
+            />
             {helpIconText && (
-                <Block
-                    data-element="help-icon"
-                    display="flex"
-                    alignItems="center"
-                    justifyContent="center"
-                >
-                    <Tooltip content={helpIconText}>
-                        <Block
-                            as="span"
-                            display="inline-flex"
-                            alignItems="center"
-                            justifyContent="center"
-                            role="button"
-                            tabIndex={0}
-                            aria-label={helpIconText || `Help for ${title}`}
-                        >
-                            <CircleHelp
-                                width={
-                                    tokens.topContainer.dataContainer
-                                        .titleContainer.helpIcon.width
-                                }
-                                height={
-                                    tokens.topContainer.dataContainer
-                                        .titleContainer.helpIcon.height
-                                }
-                                color={
-                                    tokens.topContainer.dataContainer
-                                        .titleContainer.helpIcon.color.default
-                                }
-                                aria-hidden="true"
-                            />
-                        </Block>
-                    </Tooltip>
-                </Block>
+                <StatCardV2HelpIcon
+                    helpIconText={helpIconText}
+                    title={title}
+                    tokens={tokens}
+                    isSmallScreen={isSmallScreen}
+                />
             )}
         </Block>
     )

package/lib/components/StatCardV2/StatCardV2Value.tsx

@@ -1,6 +1,8 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react'
 import { addPxToValue } from '../../global-utils/GlobalUtils'
 import Block from '../Primitives/Block/Block'
 import Text from '../Text/Text'
+import { Tooltip } from '../Tooltip'
 import type { StatCardV2Props, StatCardV2Variant } from './statcardV2.types'
 import type { StatCardV2TokensType } from './statcardV2.tokens'
 
@@ -32,16 +34,76 @@ export const renderVariantFallbackValue = (
     )
 }
 
+type StatCardV2ValueTooltipProps = {
+    content: ReactNode
+    isSmallScreen: boolean
+    children: ReactNode
+}
+
+const StatCardV2ValueTooltip = ({
+    content,
+    isSmallScreen,
+    children,
+}: StatCardV2ValueTooltipProps) => {
+    const [open, setOpen] = useState(false)
+    const triggerRef = useRef<HTMLSpanElement>(null)
+
+    useEffect(() => {
+        if (!isSmallScreen || !open || !content) return
+
+        const handlePointerDown = (event: PointerEvent) => {
+            const target = event.target as Node
+            if (triggerRef.current?.contains(target)) return
+
+            const tooltipEl = document.querySelector('[data-tooltip="tooltip"]')
+            if (tooltipEl?.contains(target)) return
+
+            setOpen(false)
+        }
+
+        document.addEventListener('pointerdown', handlePointerDown)
+        return () =>
+            document.removeEventListener('pointerdown', handlePointerDown)
+    }, [isSmallScreen, open, content])
+
+    if (content === undefined || content === null || content === '') {
+        return <>{children}</>
+    }
+
+    if (!isSmallScreen) {
+        return <Tooltip content={content}>{children}</Tooltip>
+    }
+
+    return (
+        <Tooltip content={content} open={open}>
+            <span
+                ref={triggerRef}
+                style={{ display: 'inline-flex', cursor: 'pointer' }}
+                onClick={(event) => {
+                    event.stopPropagation()
+                    setOpen(true)
+                }}
+            >
+                {children}
+            </span>
+        </Tooltip>
+    )
+}
+
 const StatCardV2Value = ({
     value,
+    valueTooltip,
     tokens,
     variant,
     id,
+    isSmallScreen = false,
 }: {
     value: StatCardV2Props['value']
+    valueTooltip?: ReactNode
     tokens: StatCardV2TokensType
     variant: StatCardV2Variant
     id?: string
+    isSmallScreen?: boolean
 }) => {
     const valueTokens = tokens.topContainer.dataContainer.statsContainer.value
 
@@ -51,16 +113,22 @@ const StatCardV2Value = ({
             : STATCARD_FALLBACK_DISPLAY
 
     return (
-        <Text
-            id={id}
-            fontSize={valueTokens[variant].fontSize}
-            fontWeight={valueTokens[variant].fontWeight}
-            lineHeight={addPxToValue(valueTokens[variant].lineHeight)}
-            color={valueTokens[variant].color}
-            data-element="statcard-data"
+        <StatCardV2ValueTooltip
+            content={valueTooltip}
+            isSmallScreen={isSmallScreen}
         >
-            {displayValue}
-        </Text>
+            <Text
+                id={id}
+                fontSize={valueTokens[variant].fontSize}
+                fontWeight={valueTokens[variant].fontWeight}
+                lineHeight={addPxToValue(valueTokens[variant].lineHeight)}
+                color={valueTokens[variant].color}
+                style={valueTooltip ? { cursor: 'pointer' } : undefined}
+                data-element="statcard-data"
+            >
+                {displayValue}
+            </Text>
+        </StatCardV2ValueTooltip>
     )
 }
 

package/lib/components/StatCardV2/statcardV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveStatCardV2Tokens } from './statcardV2.tokens'
+import type { ResponsiveStatCardV2Tokens } from './statcardV2.tokens.types'
 import { StatCardV2Variant } from './statcardV2.types'
 
 export const getStatCardV2DarkTokens = (

package/lib/components/StatCardV2/statcardV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveStatCardV2Tokens } from './statcardV2.tokens'
+import type { ResponsiveStatCardV2Tokens } from './statcardV2.tokens.types'
 import { StatCardV2Variant } from './statcardV2.types'
 
 export const getStatCardV2LightTokens = (

package/lib/components/StatCardV2/statcardV2.tokens.ts

@@ -1,87 +1,13 @@
-import { CSSObject } from 'styled-components'
-import { BreakpointType } from '../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { Theme } from '../../context/theme.enum'
 import { getStatCardV2LightTokens } from './statcardV2.light.tokens'
 import { getStatCardV2DarkTokens } from './statcardV2.dark.tokens'
-import { StatCardV2ChangeType, StatCardV2Variant } from './statcardV2.types'
+import type { ResponsiveStatCardV2Tokens } from './statcardV2.tokens.types'
 
-export type StatCardV2TokensType = {
-    height: CSSObject['height']
-    width: CSSObject['width']
-    maxWidth: CSSObject['maxWidth']
-    minWidth: CSSObject['minWidth']
-    paddingTop: CSSObject['paddingTop']
-    paddingBottom: CSSObject['paddingBottom']
-    paddingLeft: CSSObject['paddingLeft']
-    paddingRight: CSSObject['paddingRight']
-    border: CSSObject['border']
-    borderRadius: CSSObject['borderRadius']
-    backgroundColor: CSSObject['backgroundColor']
-    boxShadow: CSSObject['boxShadow']
-    topContainer: {
-        gap: CSSObject['gap']
-        dataContainer: {
-            gap: CSSObject['gap']
-            titleContainer: {
-                gap: CSSObject['gap']
-                title: {
-                    fontSize: CSSObject['fontSize']
-                    fontWeight: CSSObject['fontWeight']
-                    color: CSSObject['color']
-                    lineHeight: CSSObject['lineHeight']
-                }
-                helpIcon: {
-                    width: CSSObject['width']
-                    height: CSSObject['height']
-                    color: {
-                        default: CSSObject['color']
-                        hover: CSSObject['color']
-                    }
-                }
-            }
-            statsContainer: {
-                gap: CSSObject['gap']
-                value: {
-                    [key in StatCardV2Variant]: {
-                        fontSize: CSSObject['fontSize']
-                        fontWeight: CSSObject['fontWeight']
-                        color: CSSObject['color']
-                        lineHeight: CSSObject['lineHeight']
-                    }
-                }
-                changeContainer: {
-                    gap: CSSObject['gap']
-                    change: {
-                        fontSize: CSSObject['fontSize']
-                        fontWeight: CSSObject['fontWeight']
-                        color: {
-                            [key in StatCardV2ChangeType]: CSSObject['color']
-                        }
-                        lineHeight: CSSObject['lineHeight']
-                    }
-                    arrow: {
-                        width: CSSObject['width']
-                        height: CSSObject['height']
-                        color: {
-                            [key in StatCardV2ChangeType]: CSSObject['color']
-                        }
-                    }
-                }
-            }
-            subtitle: {
-                fontSize: CSSObject['fontSize']
-                fontWeight: CSSObject['fontWeight']
-                color: CSSObject['color']
-                lineHeight: CSSObject['lineHeight']
-            }
-        }
-    }
-}
-
-export type ResponsiveStatCardV2Tokens = {
-    [key in keyof BreakpointType]: StatCardV2TokensType
-}
+export type {
+    ResponsiveStatCardV2Tokens,
+    StatCardV2TokensType,
+} from './statcardV2.tokens.types'
 
 export const getStatCardV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/StatCardV2/statcardV2.tokens.types.ts

@@ -0,0 +1,90 @@
+import { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export enum StatCardV2Variant {
+    CHART = 'chart',
+    PROGRESS_BAR = 'progress',
+    NUMBER = 'number',
+}
+
+export enum StatCardV2ChangeType {
+    INCREASE = 'increase',
+    DECREASE = 'decrease',
+}
+
+export type StatCardV2TokensType = {
+    height: CSSObject['height']
+    width: CSSObject['width']
+    maxWidth: CSSObject['maxWidth']
+    minWidth: CSSObject['minWidth']
+    paddingTop: CSSObject['paddingTop']
+    paddingBottom: CSSObject['paddingBottom']
+    paddingLeft: CSSObject['paddingLeft']
+    paddingRight: CSSObject['paddingRight']
+    border: CSSObject['border']
+    borderRadius: CSSObject['borderRadius']
+    backgroundColor: CSSObject['backgroundColor']
+    boxShadow: CSSObject['boxShadow']
+    topContainer: {
+        gap: CSSObject['gap']
+        dataContainer: {
+            gap: CSSObject['gap']
+            titleContainer: {
+                gap: CSSObject['gap']
+                title: {
+                    fontSize: CSSObject['fontSize']
+                    fontWeight: CSSObject['fontWeight']
+                    color: CSSObject['color']
+                    lineHeight: CSSObject['lineHeight']
+                }
+                helpIcon: {
+                    width: CSSObject['width']
+                    height: CSSObject['height']
+                    color: {
+                        default: CSSObject['color']
+                        hover: CSSObject['color']
+                    }
+                }
+            }
+            statsContainer: {
+                gap: CSSObject['gap']
+                value: {
+                    [key in StatCardV2Variant]: {
+                        fontSize: CSSObject['fontSize']
+                        fontWeight: CSSObject['fontWeight']
+                        color: CSSObject['color']
+                        lineHeight: CSSObject['lineHeight']
+                    }
+                }
+                changeContainer: {
+                    gap: CSSObject['gap']
+                    change: {
+                        fontSize: CSSObject['fontSize']
+                        fontWeight: CSSObject['fontWeight']
+                        color: {
+                            [key in StatCardV2ChangeType]: CSSObject['color']
+                        }
+                        lineHeight: CSSObject['lineHeight']
+                    }
+                    arrow: {
+                        width: CSSObject['width']
+                        height: CSSObject['height']
+                        color: {
+                            [key in StatCardV2ChangeType]: CSSObject['color']
+                        }
+                    }
+                }
+            }
+            subtitle: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                color: CSSObject['color']
+                lineHeight: CSSObject['lineHeight']
+            }
+        }
+    }
+}
+
+export type ResponsiveStatCardV2Tokens = {
+    [key in keyof BreakpointType]: StatCardV2TokensType
+}