@juspay/blend-design-system 0.0.37-beta.8 → 0.0.37

package/lib/components/CardV2/cardV2.dark.tokens.ts

@@ -0,0 +1,177 @@
+import type { FoundationTokenType } from '../../tokens/theme.token'
+import { CardV2Orientation, CardV2Padding, CardV2Variant } from './cardV2.types'
+import type { ResponsiveCardV2Tokens } from './cardV2.tokens.types'
+
+export const getCardV2DarkTokens = (
+    foundationToken: FoundationTokenType
+): ResponsiveCardV2Tokens => {
+    const lgTokens = {
+        width: '100%',
+        minWidth: '0',
+        maxWidth: '100%',
+        borderRadius: foundationToken.border.radius[12],
+        border: {
+            [CardV2Variant.OUTLINED]: `1px solid ${foundationToken.colors.gray[700]}`,
+            [CardV2Variant.ELEVATED]: `1px solid ${foundationToken.colors.gray[700]}`,
+            [CardV2Variant.GHOST]: '1px solid transparent',
+        },
+        backgroundColor: {
+            [CardV2Variant.OUTLINED]: foundationToken.colors.gray[900],
+            [CardV2Variant.ELEVATED]: foundationToken.colors.gray[900],
+            [CardV2Variant.GHOST]: 'transparent',
+        },
+        boxShadow: {
+            [CardV2Variant.OUTLINED]: 'none',
+            [CardV2Variant.ELEVATED]: foundationToken.shadows.sm,
+            [CardV2Variant.GHOST]: 'none',
+        },
+        state: {
+            hover: {
+                border: `1px solid ${foundationToken.colors.gray[600]}`,
+                boxShadow: foundationToken.shadows.sm,
+            },
+            selected: {
+                border: `1px solid ${foundationToken.colors.primary[400]}`,
+                boxShadow: `0 0 0 3px ${foundationToken.colors.primary[900]}`,
+            },
+            focus: {
+                outline: `2px solid ${foundationToken.colors.primary[400]}`,
+                outlineOffset: foundationToken.unit[2],
+            },
+        },
+        padding: {
+            [CardV2Padding.NONE]: {
+                x: '0',
+                y: '0',
+            },
+            [CardV2Padding.COMPACT]: {
+                x: foundationToken.unit[10],
+                y: foundationToken.unit[10],
+            },
+            [CardV2Padding.COMFORTABLE]: {
+                x: foundationToken.unit[12],
+                y: foundationToken.unit[12],
+            },
+        },
+        layout: {
+            gap: foundationToken.unit[10],
+            mediaGap: {
+                [CardV2Orientation.VERTICAL]: foundationToken.unit[10],
+                [CardV2Orientation.HORIZONTAL]: foundationToken.unit[12],
+            },
+        },
+        media: {
+            width: foundationToken.unit[64],
+            height: foundationToken.unit[64],
+            minHeight: '96px',
+            borderRadius: foundationToken.border.radius[8],
+            backgroundColor: foundationToken.colors.gray[800],
+        },
+        header: {
+            gap: foundationToken.unit[6],
+            eyebrow: {
+                fontSize: foundationToken.font.fontSize[12],
+                fontWeight: foundationToken.font.weight[600],
+                lineHeight: foundationToken.font.lineHeight[18],
+                color: foundationToken.colors.gray[300],
+            },
+            title: {
+                fontSize: foundationToken.font.fontSize[16],
+                fontWeight: foundationToken.font.weight[600],
+                lineHeight: foundationToken.font.lineHeight[24],
+                color: foundationToken.colors.gray[50],
+            },
+            subtitle: {
+                fontSize: foundationToken.font.fontSize[14],
+                fontWeight: foundationToken.font.weight[500],
+                lineHeight: foundationToken.font.lineHeight[20],
+                color: foundationToken.colors.gray[300],
+            },
+        },
+        body: {
+            gap: foundationToken.unit[10],
+            description: {
+                fontSize: foundationToken.font.fontSize[14],
+                fontWeight: foundationToken.font.weight[400],
+                lineHeight: foundationToken.font.lineHeight[20],
+                color: foundationToken.colors.gray[200],
+            },
+        },
+        footer: {
+            gap: foundationToken.unit[8],
+            paddingTop: foundationToken.unit[10],
+            borderTop: `1px solid ${foundationToken.colors.gray[700]}`,
+        },
+        actions: {
+            gap: foundationToken.unit[8],
+        },
+    }
+
+    const smTokens = {
+        ...lgTokens,
+        borderRadius: foundationToken.border.radius[8],
+        padding: {
+            [CardV2Padding.NONE]: {
+                x: '0',
+                y: '0',
+            },
+            [CardV2Padding.COMPACT]: {
+                x: foundationToken.unit[8],
+                y: foundationToken.unit[8],
+            },
+            [CardV2Padding.COMFORTABLE]: {
+                x: foundationToken.unit[10],
+                y: foundationToken.unit[10],
+            },
+        },
+        layout: {
+            gap: foundationToken.unit[8],
+            mediaGap: {
+                [CardV2Orientation.VERTICAL]: foundationToken.unit[8],
+                [CardV2Orientation.HORIZONTAL]: foundationToken.unit[10],
+            },
+        },
+        media: {
+            ...lgTokens.media,
+            width: foundationToken.unit[56],
+            height: foundationToken.unit[56],
+            minHeight: '80px',
+        },
+        header: {
+            ...lgTokens.header,
+            gap: foundationToken.unit[4],
+            title: {
+                ...lgTokens.header.title,
+                fontSize: foundationToken.font.fontSize[14],
+                lineHeight: foundationToken.font.lineHeight[20],
+            },
+            subtitle: {
+                ...lgTokens.header.subtitle,
+                fontSize: foundationToken.font.fontSize[12],
+                lineHeight: foundationToken.font.lineHeight[18],
+            },
+        },
+        body: {
+            ...lgTokens.body,
+            gap: foundationToken.unit[8],
+            description: {
+                ...lgTokens.body.description,
+                fontSize: foundationToken.font.fontSize[12],
+                lineHeight: foundationToken.font.lineHeight[18],
+            },
+        },
+        footer: {
+            ...lgTokens.footer,
+            gap: foundationToken.unit[6],
+            paddingTop: foundationToken.unit[8],
+        },
+        actions: {
+            gap: foundationToken.unit[6],
+        },
+    }
+
+    return {
+        sm: smTokens,
+        lg: lgTokens,
+    }
+}

package/lib/components/CardV2/cardV2.light.tokens.ts

@@ -0,0 +1,177 @@
+import type { FoundationTokenType } from '../../tokens/theme.token'
+import { CardV2Orientation, CardV2Padding, CardV2Variant } from './cardV2.types'
+import type { ResponsiveCardV2Tokens } from './cardV2.tokens.types'
+
+export const getCardV2LightTokens = (
+    foundationToken: FoundationTokenType
+): ResponsiveCardV2Tokens => {
+    const lgTokens = {
+        width: '100%',
+        minWidth: '0',
+        maxWidth: '100%',
+        borderRadius: foundationToken.border.radius[12],
+        border: {
+            [CardV2Variant.OUTLINED]: `1px solid ${foundationToken.colors.gray[200]}`,
+            [CardV2Variant.ELEVATED]: `1px solid ${foundationToken.colors.gray[100]}`,
+            [CardV2Variant.GHOST]: '1px solid transparent',
+        },
+        backgroundColor: {
+            [CardV2Variant.OUTLINED]: foundationToken.colors.gray[0],
+            [CardV2Variant.ELEVATED]: foundationToken.colors.gray[0],
+            [CardV2Variant.GHOST]: 'transparent',
+        },
+        boxShadow: {
+            [CardV2Variant.OUTLINED]: 'none',
+            [CardV2Variant.ELEVATED]: foundationToken.shadows.sm,
+            [CardV2Variant.GHOST]: 'none',
+        },
+        state: {
+            hover: {
+                border: `1px solid ${foundationToken.colors.gray[300]}`,
+                boxShadow: foundationToken.shadows.sm,
+            },
+            selected: {
+                border: `1px solid ${foundationToken.colors.primary[500]}`,
+                boxShadow: `0 0 0 3px ${foundationToken.colors.primary[50]}`,
+            },
+            focus: {
+                outline: `2px solid ${foundationToken.colors.primary[500]}`,
+                outlineOffset: foundationToken.unit[2],
+            },
+        },
+        padding: {
+            [CardV2Padding.NONE]: {
+                x: '0',
+                y: '0',
+            },
+            [CardV2Padding.COMPACT]: {
+                x: foundationToken.unit[10],
+                y: foundationToken.unit[10],
+            },
+            [CardV2Padding.COMFORTABLE]: {
+                x: foundationToken.unit[12],
+                y: foundationToken.unit[12],
+            },
+        },
+        layout: {
+            gap: foundationToken.unit[10],
+            mediaGap: {
+                [CardV2Orientation.VERTICAL]: foundationToken.unit[10],
+                [CardV2Orientation.HORIZONTAL]: foundationToken.unit[12],
+            },
+        },
+        media: {
+            width: foundationToken.unit[64],
+            height: foundationToken.unit[64],
+            minHeight: '96px',
+            borderRadius: foundationToken.border.radius[8],
+            backgroundColor: foundationToken.colors.gray[50],
+        },
+        header: {
+            gap: foundationToken.unit[6],
+            eyebrow: {
+                fontSize: foundationToken.font.fontSize[12],
+                fontWeight: foundationToken.font.weight[600],
+                lineHeight: foundationToken.font.lineHeight[18],
+                color: foundationToken.colors.gray[500],
+            },
+            title: {
+                fontSize: foundationToken.font.fontSize[16],
+                fontWeight: foundationToken.font.weight[600],
+                lineHeight: foundationToken.font.lineHeight[24],
+                color: foundationToken.colors.gray[800],
+            },
+            subtitle: {
+                fontSize: foundationToken.font.fontSize[14],
+                fontWeight: foundationToken.font.weight[500],
+                lineHeight: foundationToken.font.lineHeight[20],
+                color: foundationToken.colors.gray[500],
+            },
+        },
+        body: {
+            gap: foundationToken.unit[10],
+            description: {
+                fontSize: foundationToken.font.fontSize[14],
+                fontWeight: foundationToken.font.weight[400],
+                lineHeight: foundationToken.font.lineHeight[20],
+                color: foundationToken.colors.gray[600],
+            },
+        },
+        footer: {
+            gap: foundationToken.unit[8],
+            paddingTop: foundationToken.unit[10],
+            borderTop: `1px solid ${foundationToken.colors.gray[100]}`,
+        },
+        actions: {
+            gap: foundationToken.unit[8],
+        },
+    }
+
+    const smTokens = {
+        ...lgTokens,
+        borderRadius: foundationToken.border.radius[8],
+        padding: {
+            [CardV2Padding.NONE]: {
+                x: '0',
+                y: '0',
+            },
+            [CardV2Padding.COMPACT]: {
+                x: foundationToken.unit[8],
+                y: foundationToken.unit[8],
+            },
+            [CardV2Padding.COMFORTABLE]: {
+                x: foundationToken.unit[10],
+                y: foundationToken.unit[10],
+            },
+        },
+        layout: {
+            gap: foundationToken.unit[8],
+            mediaGap: {
+                [CardV2Orientation.VERTICAL]: foundationToken.unit[8],
+                [CardV2Orientation.HORIZONTAL]: foundationToken.unit[10],
+            },
+        },
+        media: {
+            ...lgTokens.media,
+            width: foundationToken.unit[56],
+            height: foundationToken.unit[56],
+            minHeight: '80px',
+        },
+        header: {
+            ...lgTokens.header,
+            gap: foundationToken.unit[4],
+            title: {
+                ...lgTokens.header.title,
+                fontSize: foundationToken.font.fontSize[14],
+                lineHeight: foundationToken.font.lineHeight[20],
+            },
+            subtitle: {
+                ...lgTokens.header.subtitle,
+                fontSize: foundationToken.font.fontSize[12],
+                lineHeight: foundationToken.font.lineHeight[18],
+            },
+        },
+        body: {
+            ...lgTokens.body,
+            gap: foundationToken.unit[8],
+            description: {
+                ...lgTokens.body.description,
+                fontSize: foundationToken.font.fontSize[12],
+                lineHeight: foundationToken.font.lineHeight[18],
+            },
+        },
+        footer: {
+            ...lgTokens.footer,
+            gap: foundationToken.unit[6],
+            paddingTop: foundationToken.unit[8],
+        },
+        actions: {
+            gap: foundationToken.unit[6],
+        },
+    }
+
+    return {
+        sm: smTokens,
+        lg: lgTokens,
+    }
+}

package/lib/components/CardV2/cardV2.tokens.ts

@@ -0,0 +1,21 @@
+import type { FoundationTokenType } from '../../tokens/theme.token'
+import { Theme } from '../../context/theme.enum'
+import { getCardV2DarkTokens } from './cardV2.dark.tokens'
+import { getCardV2LightTokens } from './cardV2.light.tokens'
+import type { ResponsiveCardV2Tokens } from './cardV2.tokens.types'
+
+export type {
+    CardV2TokensType,
+    ResponsiveCardV2Tokens,
+} from './cardV2.tokens.types'
+
+export const getCardV2Tokens = (
+    foundationToken: FoundationTokenType,
+    theme: Theme | string = Theme.LIGHT
+): ResponsiveCardV2Tokens => {
+    if (theme === Theme.DARK || theme === 'dark') {
+        return getCardV2DarkTokens(foundationToken)
+    }
+
+    return getCardV2LightTokens(foundationToken)
+}

package/lib/components/CardV2/cardV2.tokens.types.ts

@@ -0,0 +1,94 @@
+import type { CSSObject } from 'styled-components'
+import type { BreakpointType } from '../../breakpoints/breakPoints'
+import { CardV2Orientation, CardV2Padding, CardV2Variant } from './cardV2.types'
+
+export type CardV2TokensType = {
+    width: CSSObject['width']
+    minWidth: CSSObject['minWidth']
+    maxWidth: CSSObject['maxWidth']
+    borderRadius: CSSObject['borderRadius']
+    border: {
+        [key in CardV2Variant]: CSSObject['border']
+    }
+    backgroundColor: {
+        [key in CardV2Variant]: CSSObject['backgroundColor']
+    }
+    boxShadow: {
+        [key in CardV2Variant]: CSSObject['boxShadow']
+    }
+    state: {
+        hover: {
+            border: CSSObject['border']
+            boxShadow: CSSObject['boxShadow']
+        }
+        selected: {
+            border: CSSObject['border']
+            boxShadow: CSSObject['boxShadow']
+        }
+        focus: {
+            outline: CSSObject['outline']
+            outlineOffset: CSSObject['outlineOffset']
+        }
+    }
+    padding: {
+        [key in CardV2Padding]: {
+            x: CSSObject['padding']
+            y: CSSObject['padding']
+        }
+    }
+    layout: {
+        gap: CSSObject['gap']
+        mediaGap: {
+            [key in CardV2Orientation]: CSSObject['gap']
+        }
+    }
+    media: {
+        width: CSSObject['width']
+        height: CSSObject['height']
+        minHeight: CSSObject['minHeight']
+        borderRadius: CSSObject['borderRadius']
+        backgroundColor: CSSObject['backgroundColor']
+    }
+    header: {
+        gap: CSSObject['gap']
+        eyebrow: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            lineHeight: CSSObject['lineHeight']
+            color: CSSObject['color']
+        }
+        title: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            lineHeight: CSSObject['lineHeight']
+            color: CSSObject['color']
+        }
+        subtitle: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            lineHeight: CSSObject['lineHeight']
+            color: CSSObject['color']
+        }
+    }
+    body: {
+        gap: CSSObject['gap']
+        description: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            lineHeight: CSSObject['lineHeight']
+            color: CSSObject['color']
+        }
+    }
+    footer: {
+        gap: CSSObject['gap']
+        paddingTop: CSSObject['paddingTop']
+        borderTop: CSSObject['borderTop']
+    }
+    actions: {
+        gap: CSSObject['gap']
+    }
+}
+
+export type ResponsiveCardV2Tokens = {
+    [key in keyof BreakpointType]: CardV2TokensType
+}

package/lib/components/CardV2/cardV2.types.ts

@@ -0,0 +1,131 @@
+import type {
+    FC,
+    ForwardRefExoticComponent,
+    ReactNode,
+    RefAttributes,
+} from 'react'
+import type { CSSObject } from 'styled-components'
+import type { ButtonV2Props } from '../ButtonV2/buttonV2.types'
+import type { SkeletonVariant } from '../Skeleton/types'
+
+export enum CardV2Variant {
+    OUTLINED = 'outlined',
+    ELEVATED = 'elevated',
+    GHOST = 'ghost',
+}
+
+export enum CardV2Orientation {
+    VERTICAL = 'vertical',
+    HORIZONTAL = 'horizontal',
+}
+
+export enum CardV2Padding {
+    NONE = 'none',
+    COMPACT = 'compact',
+    COMFORTABLE = 'comfortable',
+}
+
+export enum CardV2ActionPlacement {
+    BODY = 'body',
+    FOOTER = 'footer',
+}
+
+export type CardV2SkeletonProps = {
+    show?: boolean
+    variant?: SkeletonVariant
+    height?: CSSObject['height']
+    width?: CSSObject['width']
+}
+
+export type CardV2Action = ButtonV2Props
+
+export type CardV2SectionProps = {
+    children?: ReactNode
+}
+
+export type CardV2HeaderProps = {
+    title?: ReactNode
+    truncateTitle?: boolean
+    subtitle?: ReactNode
+    eyebrow?: ReactNode
+    leadingSlot?: ReactNode
+    trailingSlot?: ReactNode
+    centered?: boolean
+}
+
+export type CardV2MetaProps = Pick<
+    CardV2HeaderProps,
+    'title' | 'truncateTitle' | 'subtitle' | 'eyebrow' | 'centered'
+>
+
+export type CardV2MediaProps = CardV2SectionProps & {
+    orientation?: CardV2Orientation
+    width?: CSSObject['width']
+    height?: CSSObject['height']
+    minHeight?: CSSObject['minHeight']
+}
+
+export type CardV2BodyProps = CardV2SectionProps & {
+    description?: ReactNode
+    actions?: CardV2Action | CardV2Action[]
+    centered?: boolean
+    scrollable?: boolean
+}
+
+export type CardV2ActionsProps = {
+    actions?: CardV2Action | CardV2Action[]
+    centered?: boolean
+}
+
+export type CardV2FooterProps = CardV2SectionProps & {
+    actions?: CardV2Action | CardV2Action[]
+    centered?: boolean
+    divider?: boolean
+}
+
+export type CardV2Props = {
+    variant?: CardV2Variant
+    orientation?: CardV2Orientation
+    padding?: CardV2Padding
+    title?: ReactNode
+    truncateTitle?: boolean
+    subtitle?: ReactNode
+    description?: ReactNode
+    eyebrow?: ReactNode
+    media?: ReactNode
+    mediaWidth?: CSSObject['width']
+    mediaHeight?: CSSObject['height']
+    mediaMinHeight?: CSSObject['minHeight']
+    leadingSlot?: ReactNode
+    trailingSlot?: ReactNode
+    footer?: ReactNode
+    actions?: CardV2Action | CardV2Action[]
+    actionPlacement?: CardV2ActionPlacement
+    centered?: boolean
+    interactive?: boolean
+    selected?: boolean
+    skeleton?: CardV2SkeletonProps
+    width?: CSSObject['width']
+    minWidth?: CSSObject['minWidth']
+    maxWidth?: CSSObject['maxWidth']
+    height?: CSSObject['height']
+    minHeight?: CSSObject['minHeight']
+    maxHeight?: CSSObject['maxHeight']
+    scrollable?: boolean
+    children?: ReactNode
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'>
+
+export type CardV2Component = ForwardRefExoticComponent<
+    CardV2Props & RefAttributes<HTMLDivElement>
+> & {
+    Header: FC<CardV2HeaderProps>
+    Meta: FC<CardV2MetaProps>
+    Media: FC<CardV2MediaProps>
+    Body: FC<CardV2BodyProps>
+    Content: FC<CardV2SectionProps>
+    Actions: FC<CardV2ActionsProps>
+    Footer: FC<CardV2FooterProps>
+    Skeleton: FC<{
+        skeleton?: CardV2SkeletonProps
+    }>
+}

package/lib/components/CardV2/index.ts

@@ -0,0 +1,13 @@
+export { default as CardV2 } from './CardV2'
+export {
+    CardV2Actions,
+    CardV2Body,
+    CardV2Content,
+    CardV2Footer,
+    CardV2Header,
+    CardV2Media,
+    CardV2Meta,
+} from './CardV2Components'
+export { default as CardV2Skeleton } from './CardV2Skeleton'
+export * from './cardV2.types'
+export * from './cardV2.tokens'

package/lib/components/Charts/ChartLegend.tsx

@@ -196,6 +196,7 @@ const ChartLegendsComponent: React.FC<ChartLegendsProps> = ({
     stacked = false,
     isSmallScreen = false,
     stackedLegendsData,
+    showAllLegends = false,
 }) => {
     const chartTokens = useResponsiveTokens<ChartTokensType>('CHARTS')
     const legendTokens = chartTokens.content.legend
@@ -211,6 +212,12 @@ const ChartLegendsComponent: React.FC<ChartLegendsProps> = ({
     const isExpanding = useRef<boolean>(false)
     // Have to revisit from optimizaion POV.
     const handleResize = useCallback(() => {
+        if (showAllLegends) {
+            setCuttOffIndex(displayLegends.length)
+            setIsLoading(false)
+            return
+        }
+
         if (!legendItemsContainerRef.current) {
             setIsLoading(false)
             return
@@ -270,11 +277,16 @@ const ChartLegendsComponent: React.FC<ChartLegendsProps> = ({
         const newCutoff = Math.max(1, Math.min(optimalCutoff, totalLegends))
         setCuttOffIndex(newCutoff)
         setIsLoading(false)
-    }, [displayLegends, legendTokens.gap])
+    }, [displayLegends, legendTokens.gap, showAllLegends])
 
     const debouncedResize = useDebounce(handleResize, 150)
 
     useResizeObserver(chartContainerRef, ({ width }) => {
+        if (showAllLegends) {
+            lastWidth.current = width
+            return
+        }
+
         if (width && Math.abs(width - lastWidth.current) > 10) {
             setIsLoading(true)
             if (width > lastWidth.current + 20) {
@@ -287,6 +299,13 @@ const ChartLegendsComponent: React.FC<ChartLegendsProps> = ({
     })
 
     useEffect(() => {
+        if (showAllLegends) {
+            setIsLoading(false)
+            setCuttOffIndex(displayLegends.length)
+            isExpanding.current = false
+            return
+        }
+
         setIsLoading(true)
         setCuttOffIndex(displayLegends.length)
         isExpanding.current = false
@@ -296,7 +315,7 @@ const ChartLegendsComponent: React.FC<ChartLegendsProps> = ({
         }, 150)
 
         return () => clearTimeout(timeoutId)
-    }, [displayLegends, handleResize])
+    }, [displayLegends, handleResize, showAllLegends])
 
     const getItemOpacity = (dataKey: string) => {
         if (hoveredKey) {
@@ -367,11 +386,12 @@ const ChartLegendsComponent: React.FC<ChartLegendsProps> = ({
             <Block
                 ref={legendItemsContainerRef}
                 display="flex"
-                height={FOUNDATION_THEME.unit[28]}
+                height={showAllLegends ? 'auto' : FOUNDATION_THEME.unit[28]}
                 alignItems="center"
-                overflowX="hidden"
+                flexWrap={showAllLegends ? 'wrap' : 'nowrap'}
+                overflowX={showAllLegends ? 'visible' : 'hidden'}
                 overflowY="visible"
-                whiteSpace="nowrap"
+                whiteSpace={showAllLegends ? 'normal' : 'nowrap'}
                 style={{ flex: 1, opacity: isLoading ? 0 : 1 }}
                 justifyContent={isSmallScreen ? 'center' : 'start'}
                 gap={legendTokens.gap}