@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/components/Card/card.tokens.ts

@@ -0,0 +1,360 @@
+import type { CSSObject } from 'styled-components'
+import { CardVariant } from './types'
+import { type FoundationTokenType } from '../../tokens/theme.token'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type CardState = 'default' | 'hover'
+
+/**
+ * Card Tokens following proper hierarchy pattern
+ *
+ * Structure:
+ * container (outermost) -> header/body (sections) -> text/content/actions (elements) -> properties
+ *
+ * Pattern:
+ * - container.property.[variant].[state] (for variant-dependent properties)
+ * - container.header.text.title.property (for shared text styling)
+ * - container.body.actions.inline.gap.[variant] (for variant-dependent spacing)
+ *
+ * Hierarchy:
+ * - Container: Outermost wrapper with base styling and variant-dependent properties
+ * - Header: Header section with text styling and variant-specific box styling
+ * - Body: Body section with text, content, actions, and variant-specific spacing
+ */
+export type CardTokenType = {
+    // Base properties (shared across variants)
+    maxWidth: CSSObject['maxWidth']
+    borderRadius: CSSObject['borderRadius']
+    border: CSSObject['border']
+
+    boxShadow: CSSObject['boxShadow']
+    backgroundColor: CSSObject['backgroundColor']
+    padding: {
+        [CardVariant.DEFAULT]: {
+            x: CSSObject['padding']
+            y: CSSObject['padding']
+        }
+        [CardVariant.ALIGNED]: {
+            x: CSSObject['padding']
+            y: CSSObject['padding']
+        }
+        [CardVariant.CUSTOM]: undefined
+    }
+
+    // Header section
+    header: {
+        // Box styling (only DEFAULT variant has gray background box)
+        [CardVariant.DEFAULT]: {
+            backgroundColor: CSSObject['backgroundColor']
+            padding: {
+                x: CSSObject['padding']
+                y: CSSObject['padding']
+            }
+            borderBottom: CSSObject['borderBottom']
+        }
+        [CardVariant.ALIGNED]: undefined
+        [CardVariant.CUSTOM]: undefined
+
+        // Text styling within header
+        text: {
+            title: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                color: CSSObject['color']
+                gap: CSSObject['gap'] // Gap between slots and title
+            }
+            subTitle: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                color: CSSObject['color']
+            }
+            gap: CSSObject['gap'] // Gap between title and subtitle
+        }
+    }
+
+    // Body section
+    body: {
+        // Body container padding (only DEFAULT variant has padding)
+        padding: {
+            [CardVariant.DEFAULT]: {
+                x: CSSObject['padding']
+                y: CSSObject['padding']
+            }
+            [CardVariant.ALIGNED]: undefined // paddig should be there
+            [CardVariant.CUSTOM]: undefined // 12 px default padding
+        }
+
+        // Spacing between body elements (bodySlot1 → bodyTitle → content → bodySlot2 → actionButton)
+        gap: {
+            [key in CardVariant]: CSSObject['gap']
+        }
+
+        // Text styling for body content
+        text: {
+            title: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                color: CSSObject['color']
+            }
+            content: {
+                fontSize: CSSObject['fontSize']
+                color: CSSObject['color']
+                fontWeight: CSSObject['fontWeight']
+            }
+            gap: CSSObject['gap'] // Gap between bodyTitle and content description
+        }
+
+        // Action buttons styling - Simple gap (14px default, 24px for center-aligned)
+        actions: {
+            gap: CSSObject['gap'] // Base gap for actions (14px)
+            centerAlignGap: CSSObject['gap'] // Gap for center-aligned cards (24px)
+        }
+
+        // Alignment styling (only for ALIGNED variant, similar to header.boxStyling)
+        alignment: {
+            [CardVariant.ALIGNED]: {
+                cardSlot: {
+                    vertical: {
+                        marginBottom: CSSObject['marginBottom']
+                        minHeight: CSSObject['minHeight']
+                    }
+                    horizontal: {
+                        marginRight: CSSObject['marginRight']
+                        width: CSSObject['width']
+                        height: CSSObject['height']
+                    }
+                }
+            }
+            [CardVariant.DEFAULT]: undefined
+            [CardVariant.CUSTOM]: undefined
+        }
+    }
+}
+
+export type ResponsiveCardTokens = {
+    [key in keyof BreakpointType]: CardTokenType
+}
+
+export const getCardTokens = (
+    foundationToken: FoundationTokenType
+): ResponsiveCardTokens => {
+    return {
+        sm: {
+            // Base properties (shared)
+            maxWidth: 'auto',
+            borderRadius: foundationToken.border.radius[12],
+            border: `1px solid ${foundationToken.colors.gray[200]}`,
+
+            boxShadow: foundationToken.shadows.sm,
+            backgroundColor: foundationToken.colors.gray[0],
+            padding: {
+                [CardVariant.DEFAULT]: {
+                    x: foundationToken.unit[16],
+                    y: foundationToken.unit[16],
+                },
+                [CardVariant.ALIGNED]: {
+                    x: foundationToken.unit[16],
+                    y: foundationToken.unit[16],
+                },
+                [CardVariant.CUSTOM]: undefined,
+            },
+
+            // Header section
+            header: {
+                [CardVariant.DEFAULT]: {
+                    backgroundColor: foundationToken.colors.gray[25],
+                    padding: {
+                        x: foundationToken.unit[16],
+                        y: foundationToken.unit[12],
+                    },
+                    borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                },
+                [CardVariant.ALIGNED]: undefined,
+                [CardVariant.CUSTOM]: undefined,
+                text: {
+                    title: {
+                        fontSize: foundationToken.font.size.body.lg.fontSize,
+                        fontWeight: foundationToken.font.weight[600],
+                        color: foundationToken.colors.gray[800],
+                        gap: foundationToken.unit[8],
+                    },
+                    subTitle: {
+                        fontSize: foundationToken.font.size.body.sm.fontSize,
+                        fontWeight: foundationToken.font.weight[500],
+                        color: foundationToken.colors.gray[500],
+                    },
+                    gap: foundationToken.unit[2], // Gap between title and subtitle
+                },
+            },
+
+            // Body section
+            body: {
+                padding: {
+                    [CardVariant.DEFAULT]: {
+                        x: foundationToken.unit[16],
+                        y: foundationToken.unit[16],
+                    },
+                    [CardVariant.ALIGNED]: undefined,
+                    [CardVariant.CUSTOM]: undefined,
+                },
+                gap: {
+                    [CardVariant.DEFAULT]: foundationToken.unit[16],
+                    [CardVariant.ALIGNED]: foundationToken.unit[16],
+                    [CardVariant.CUSTOM]: foundationToken.unit[16],
+                },
+                text: {
+                    title: {
+                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        fontWeight: foundationToken.font.weight[500],
+                        color: foundationToken.colors.gray[800],
+                    },
+                    content: {
+                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        color: foundationToken.colors.gray[500],
+                        fontWeight: foundationToken.font.weight[400],
+                    },
+                    gap: foundationToken.unit[6],
+                },
+                actions: {
+                    gap: foundationToken.unit[14], // Base gap for actions (14px)
+                    centerAlignGap: foundationToken.unit[24], // Gap for center-aligned cards (24px)
+                },
+                alignment: {
+                    [CardVariant.ALIGNED]: {
+                        cardSlot: {
+                            vertical: {
+                                marginBottom: foundationToken.unit[16],
+                                minHeight: '142px',
+                            },
+                            horizontal: {
+                                marginRight: foundationToken.unit[16],
+                                width: foundationToken.unit[92],
+                                height: foundationToken.unit[92],
+                                // flexShrink: 0,
+                            },
+                        },
+                        // centerAlign: {
+                        //     textAlign: 'center',
+                        //     alignItems: 'center',
+                        //     justifyContent: 'center',
+                        // },
+                        // content: {
+                        //     flex: '1',
+                        // },
+                    },
+                    [CardVariant.DEFAULT]: undefined,
+                    [CardVariant.CUSTOM]: undefined,
+                },
+            },
+        },
+
+        lg: {
+            // Base properties (shared)
+            maxWidth: 'auto',
+            borderRadius: foundationToken.border.radius[12],
+            border: `1px solid ${foundationToken.colors.gray[200]}`,
+
+            boxShadow: foundationToken.shadows.sm,
+            backgroundColor: foundationToken.colors.gray[0],
+            padding: {
+                [CardVariant.DEFAULT]: {
+                    x: foundationToken.unit[16],
+                    y: foundationToken.unit[16],
+                },
+                [CardVariant.ALIGNED]: {
+                    x: foundationToken.unit[16],
+                    y: foundationToken.unit[16],
+                },
+                [CardVariant.CUSTOM]: undefined,
+            },
+
+            // Header section
+            header: {
+                [CardVariant.DEFAULT]: {
+                    backgroundColor: foundationToken.colors.gray[25],
+                    padding: {
+                        x: foundationToken.unit[16],
+                        y: foundationToken.unit[12],
+                    },
+                    borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                },
+                [CardVariant.ALIGNED]: undefined,
+                [CardVariant.CUSTOM]: undefined,
+                text: {
+                    title: {
+                        fontSize: foundationToken.font.size.body.lg.fontSize,
+                        fontWeight: foundationToken.font.weight[600],
+                        color: foundationToken.colors.gray[800],
+                        gap: foundationToken.unit[8],
+                    },
+                    subTitle: {
+                        fontSize: foundationToken.font.size.body.sm.fontSize,
+                        fontWeight: foundationToken.font.weight[500],
+                        color: foundationToken.colors.gray[500],
+                    },
+                    gap: foundationToken.unit[2], // Gap between title and subtitle
+                },
+            },
+
+            // Body section
+            body: {
+                padding: {
+                    [CardVariant.DEFAULT]: {
+                        x: foundationToken.unit[16],
+                        y: foundationToken.unit[16],
+                    },
+                    [CardVariant.ALIGNED]: undefined,
+                    [CardVariant.CUSTOM]: undefined,
+                },
+                gap: {
+                    [CardVariant.DEFAULT]: foundationToken.unit[16],
+                    [CardVariant.ALIGNED]: foundationToken.unit[16],
+                    [CardVariant.CUSTOM]: foundationToken.unit[16],
+                },
+                text: {
+                    title: {
+                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        fontWeight: foundationToken.font.weight[500],
+                        color: foundationToken.colors.gray[800],
+                    },
+                    content: {
+                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        color: foundationToken.colors.gray[500],
+                        fontWeight: foundationToken.font.weight[400],
+                    },
+                    gap: foundationToken.unit[6],
+                },
+                actions: {
+                    gap: foundationToken.unit[14], // Base gap for actions (14px)
+                    centerAlignGap: foundationToken.unit[24], // Gap for center-aligned cards (24px)
+                },
+                alignment: {
+                    [CardVariant.ALIGNED]: {
+                        cardSlot: {
+                            vertical: {
+                                marginBottom: foundationToken.unit[16],
+                                minHeight: '142px',
+                            },
+                            horizontal: {
+                                marginRight: foundationToken.unit[16],
+                                width: foundationToken.unit[92],
+                                height: foundationToken.unit[92],
+                                // flexShrink: 0,
+                            },
+                        },
+                        // centerAlign: {
+                        //     textAlign: 'center',
+                        //     alignItems: 'center',
+                        //     justifyContent: 'center',
+                        // },
+                        // content: {
+                        //     flex: '1',
+                        // },
+                    },
+                    [CardVariant.DEFAULT]: undefined,
+                    [CardVariant.CUSTOM]: undefined,
+                },
+            },
+        },
+    }
+}

package/lib/components/Card/index.ts

@@ -0,0 +1,3 @@
+export { default as Card } from './Card'
+export * from './card.tokens'
+export * from './types'

package/lib/components/Card/types.ts

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react'
+import type { ButtonProps } from '../Button/types'
+import { SkeletonVariant } from '../Skeleton'
+
+export enum CardVariant {
+    DEFAULT = 'default',
+    ALIGNED = 'aligned',
+    CUSTOM = 'custom',
+}
+
+export enum CardAlignment {
+    VERTICAL = 'vertical',
+    HORIZONTAL = 'horizontal',
+}
+
+export type DefaultCardProps = {
+    variant?: CardVariant.DEFAULT
+    headerSlot1?: ReactNode
+    headerTitle?: string
+    headerTag?: ReactNode
+    headerSlot2?: ReactNode
+    subHeader?: string
+
+    bodySlot1?: ReactNode
+    bodyTitle?: string
+    content?: ReactNode
+    bodySlot2?: ReactNode
+    actionButton?: ButtonProps
+}
+
+export type AlignedCardProps = {
+    variant: CardVariant.ALIGNED
+    alignment: CardAlignment
+    centerAlign?: boolean
+    cardSlot?: ReactNode
+
+    headerTitle?: string
+    headerTag?: ReactNode
+    headerSlot2?: ReactNode
+    subHeader?: string
+
+    bodySlot1?: ReactNode
+    bodyTitle?: string
+    content?: ReactNode
+    actionButton?: ButtonProps
+}
+
+export type CustomCardProps = {
+    variant: CardVariant.CUSTOM
+    children: ReactNode
+}
+
+export type CardSkeletonProps = {
+    variant: SkeletonVariant
+    show: boolean
+    height?: string
+    width?: string
+}
+
+export type CardProps = {
+    maxWidth?: string
+    /**
+     * Height of the card. Accepts any valid CSS height value.
+     * Examples: "200px", "100%", "50vh", "auto"
+     * Note: For percentage heights to work, parent container must have a defined height.
+     */
+    maxHeight?: string
+    /**
+     * Minimum height of the card. Accepts any valid CSS height value.
+     * Useful when you want the card to grow with content but maintain a minimum height.
+     */
+    minHeight?: string
+    skeleton?: CardSkeletonProps
+} & (DefaultCardProps | AlignedCardProps | CustomCardProps)

package/lib/components/Card/utils.ts

@@ -0,0 +1,217 @@
+import React from 'react'
+import { CardVariant } from './types'
+import type { CardTokenType } from './card.tokens'
+import { ButtonSubType } from '../Button/types'
+
+/**
+ * Determines the card variant type
+ */
+export const getCardVariant = (variant?: CardVariant): CardVariant => {
+    return variant || CardVariant.DEFAULT
+}
+
+/**
+ * Checks if card is default variant
+ */
+export const isDefaultCard = (variant?: CardVariant): boolean => {
+    return getCardVariant(variant) === CardVariant.DEFAULT
+}
+
+/**
+ * Checks if card is aligned variant
+ */
+export const isAlignedCard = (variant?: CardVariant): boolean => {
+    return getCardVariant(variant) === CardVariant.ALIGNED
+}
+
+/**
+ * Checks if card is custom variant
+ */
+export const isCustomCard = (variant?: CardVariant): boolean => {
+    return getCardVariant(variant) === CardVariant.CUSTOM
+}
+
+/**
+ * Gets header box styles for default card
+ */
+export const getHeaderBoxStyles = (
+    cardToken: CardTokenType
+): React.CSSProperties => {
+    const boxStyling = cardToken.header[CardVariant.DEFAULT]
+    const padding = boxStyling?.padding
+        ? `${String(boxStyling.padding.y)} ${String(boxStyling.padding.x)}`
+        : undefined
+
+    return {
+        backgroundColor: boxStyling?.backgroundColor,
+        padding,
+        borderBottom: boxStyling?.borderBottom,
+        display: 'flex',
+        flexDirection: 'column' as const,
+    }
+}
+
+/**
+ * Gets header title styles (shared across all variants)
+ */
+export const getHeaderTitleStyles = (
+    cardToken: CardTokenType
+): React.CSSProperties => ({
+    fontSize: cardToken.header.text.title.fontSize,
+    fontWeight: cardToken.header.text.title.fontWeight,
+    color: cardToken.header.text.title.color,
+})
+
+/**
+ * Gets sub header styles (shared across all variants)
+ */
+export const getSubHeaderStyles = (
+    cardToken: CardTokenType
+): React.CSSProperties => ({
+    fontSize: cardToken.header.text.subTitle.fontSize,
+    fontWeight: cardToken.header.text.subTitle.fontWeight,
+    color: cardToken.header.text.subTitle.color,
+})
+
+/**
+ * Gets body title styles (shared across all variants)
+ */
+export const getBodyTitleStyles = (
+    cardToken: CardTokenType
+): React.CSSProperties => ({
+    fontSize: cardToken.body.text.title.fontSize,
+    fontWeight: cardToken.body.text.title.fontWeight,
+    color: cardToken.body.text.title.color,
+})
+
+/**
+ * Gets body content styles (shared across all variants)
+ */
+export const getBodyContentStyles = (
+    cardToken: CardTokenType
+): React.CSSProperties => ({
+    fontSize: cardToken.body.text.content.fontSize,
+    color: cardToken.body.text.content.color,
+})
+
+/**
+ * Gets body container styles for default card
+ */
+export const getBodyStyles = (
+    cardToken: CardTokenType
+): React.CSSProperties => {
+    const bodyPadding = cardToken.body.padding[CardVariant.DEFAULT]
+    const padding = bodyPadding
+        ? `${String(bodyPadding.y)} ${String(bodyPadding.x)}`
+        : undefined
+
+    return {
+        padding,
+        display: 'flex',
+        flexDirection: 'column' as const,
+    }
+}
+
+/**
+ * Gets spacing between header elements for a specific variant
+ */
+export const getHeaderSpacing = (cardToken: CardTokenType): string => {
+    return String(cardToken.header.text.title.gap)
+}
+
+/**
+ * Gets gap for sub header (replaced marginTop with gap)
+ */
+export const getHeaderMarginBottom = (
+    hasSubHeader: boolean,
+    cardToken: CardTokenType
+): string => {
+    if (!hasSubHeader) return '0'
+    return String(cardToken.header.text.gap)
+}
+
+/**
+ * Gets gap for elements after sub header (using body elements spacing)
+ */
+export const getSubHeaderMarginBottom = (
+    cardToken: CardTokenType,
+    variant: CardVariant
+): string => {
+    return String(cardToken.body.gap[variant] || '0')
+}
+
+/**
+ * Gets gap for body elements (using body elements spacing)
+ */
+export const getBodySlot1MarginBottom = (
+    hasBodyTitle: boolean,
+    cardToken: CardTokenType,
+    variant: CardVariant
+): string => {
+    if (!hasBodyTitle) return '0'
+    return String(cardToken.body.gap[variant] || '0')
+}
+
+/**
+ * Gets gap between body title and content (using title to content spacing)
+ */
+export const getBodyTitleMarginBottom = (
+    hasContent: boolean,
+    cardToken: CardTokenType
+): string => {
+    if (!hasContent) return '0'
+    return String(cardToken.body.text.gap || '0')
+}
+
+/**
+ * Gets gap after content (using body elements spacing)
+ */
+export const getContentMarginBottom = (
+    hasBodySlot2: boolean,
+    cardToken: CardTokenType,
+    variant: CardVariant
+): string => {
+    if (!hasBodySlot2) return '0'
+    return String(cardToken.body.gap[variant] || '0')
+}
+
+/**
+ * Gets gap before action button - Simple logic: 14px default, 24px for center-aligned
+ */
+export const getBodySlot2MarginBottom = (
+    hasActionButton: boolean,
+    _isInlineButton: boolean,
+    cardToken: CardTokenType,
+    centerAlign?: boolean
+): string => {
+    if (!hasActionButton) return '0'
+
+    // For center-aligned cards, always use centerAlignGap (24px)
+    if (centerAlign) {
+        return String(cardToken.body.actions.centerAlignGap || '0')
+    }
+
+    // For all other cases, use base gap (14px)
+    return String(cardToken.body.actions.gap || '0')
+}
+
+/**
+ * Gets custom card styles (simple wrapper with padding)
+ */
+
+/**
+ * Determines if action button is inline type
+ * Center-aligned cards use regular buttons, non-center-aligned use inline buttons
+ */
+export const isInlineActionButton = (
+    _actionButton?: {
+        subType?: ButtonSubType
+    },
+    centerAlign?: boolean
+): boolean => {
+    // For center-aligned cards, use regular buttons (not inline)
+    if (centerAlign) return false
+
+    // For all other cases, use inline buttons
+    return true
+}