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

package/lib/components/PopoverV2/popoverV2.dark.tokens.tsx

@@ -0,0 +1,228 @@
+import { FoundationTokenType } from '../../tokens/theme.token'
+import { ResponsivePopoverV2Tokens } from './popoverV2.token'
+
+export const getPopoverV2DarkToken = (
+    foundationTokens: FoundationTokenType
+): ResponsivePopoverV2Tokens => {
+    return {
+        sm: {
+            // background (size-independent)
+            background: foundationTokens.colors.gray[0],
+            // border (size-independent)
+            border: foundationTokens.border.radius[8],
+            // shadow (size-independent)
+            shadow: foundationTokens.shadows,
+            // gap.[size]
+            gap: {
+                sm: foundationTokens.unit[12],
+                md: foundationTokens.unit[12],
+                lg: foundationTokens.unit[12],
+            },
+            // zIndex (size-independent)
+            zIndex: 101,
+            // borderRadius.[size]
+            borderRadius: {
+                sm: foundationTokens.border.radius[8],
+                md: foundationTokens.border.radius[8],
+                lg: foundationTokens.border.radius[8],
+            },
+            // padding.[side].[size]
+            padding: {
+                left: {
+                    sm: foundationTokens.unit[16],
+                    md: foundationTokens.unit[16],
+                    lg: foundationTokens.unit[16],
+                },
+                right: {
+                    sm: foundationTokens.unit[16],
+                    md: foundationTokens.unit[16],
+                    lg: foundationTokens.unit[16],
+                },
+                top: {
+                    sm: foundationTokens.unit[12],
+                    md: foundationTokens.unit[12],
+                    lg: foundationTokens.unit[12],
+                },
+                bottom: {
+                    sm: foundationTokens.unit[16],
+                    md: foundationTokens.unit[16],
+                    lg: foundationTokens.unit[16],
+                },
+            },
+            TopContainer: {
+                gap: {
+                    sm: foundationTokens.unit[8],
+                    md: foundationTokens.unit[8],
+                    lg: foundationTokens.unit[8],
+                },
+                heading: {
+                    // heading.fontSize.[size]
+                    fontSize: {
+                        sm: foundationTokens.font.size.body.md.fontSize,
+                        md: foundationTokens.font.size.body.lg.fontSize,
+                        lg: foundationTokens.font.size.body.lg.fontSize,
+                    },
+                    // heading.fontWeight.[size]
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[600],
+                        md: foundationTokens.font.weight[600],
+                        lg: foundationTokens.font.weight[600],
+                    },
+                    // heading.color (size-independent)
+                    color: foundationTokens.colors.gray[900],
+                    // heading.lineHeight.[size]
+                    lineHeight: {
+                        sm: foundationTokens.unit[24],
+                        md: foundationTokens.unit[24],
+                        lg: foundationTokens.unit[24],
+                    },
+
+                    IconSize: {
+                        sm: foundationTokens.font.fontSize[18],
+                        md: foundationTokens.font.fontSize[18],
+                        lg: foundationTokens.font.fontSize[18],
+                    },
+                },
+                description: {
+                    // description.fontSize.[size]
+                    fontSize: {
+                        sm: foundationTokens.font.size.body.sm.fontSize,
+                        md: foundationTokens.font.size.body.md.fontSize,
+                        lg: foundationTokens.font.size.body.lg.fontSize,
+                    },
+                    // description.fontWeight.[size]
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[500],
+                        md: foundationTokens.font.weight[500],
+                        lg: foundationTokens.font.weight[500],
+                    },
+                    // description.color (size-independent)
+                    color: foundationTokens.colors.gray[500],
+                    // description.lineHeight.[size]
+                    lineHeight: {
+                        sm: foundationTokens.unit[16],
+                        md: foundationTokens.unit[16],
+                        lg: foundationTokens.unit[16],
+                    },
+                },
+            },
+            bottomContainer: {
+                // footer.gap.[size]
+                gap: {
+                    sm: foundationTokens.unit[12],
+                    md: foundationTokens.unit[12],
+                    lg: foundationTokens.unit[12],
+                },
+            },
+        },
+        lg: {
+            // background (size-independent)
+            background: foundationTokens.colors.gray[900],
+            // border (size-independent)
+            border: foundationTokens.border.radius[8],
+            // shadow (size-independent)
+            shadow: foundationTokens.shadows,
+            // gap.[size]
+            gap: {
+                sm: foundationTokens.unit[12],
+                md: foundationTokens.unit[12],
+                lg: foundationTokens.unit[12],
+            },
+            // zIndex (size-independent)
+            zIndex: 101,
+            // borderRadius.[size]
+            borderRadius: {
+                sm: foundationTokens.border.radius[8],
+                md: foundationTokens.border.radius[8],
+                lg: foundationTokens.border.radius[8],
+            },
+            // padding.[side].[size]
+            padding: {
+                left: {
+                    sm: foundationTokens.unit[16],
+                    md: foundationTokens.unit[16],
+                    lg: foundationTokens.unit[16],
+                },
+                right: {
+                    sm: foundationTokens.unit[16],
+                    md: foundationTokens.unit[16],
+                    lg: foundationTokens.unit[16],
+                },
+                top: {
+                    sm: foundationTokens.unit[12],
+                    md: foundationTokens.unit[12],
+                    lg: foundationTokens.unit[12],
+                },
+                bottom: {
+                    sm: foundationTokens.unit[16],
+                    md: foundationTokens.unit[16],
+                    lg: foundationTokens.unit[16],
+                },
+            },
+            TopContainer: {
+                gap: {
+                    sm: foundationTokens.unit[8],
+                    md: foundationTokens.unit[8],
+                    lg: foundationTokens.unit[8],
+                },
+                heading: {
+                    // heading.fontSize.[size]
+                    fontSize: {
+                        sm: foundationTokens.font.size.body.md.fontSize,
+                        md: foundationTokens.font.size.body.lg.fontSize,
+                        lg: foundationTokens.font.size.body.lg.fontSize,
+                    },
+                    // heading.fontWeight.[size]
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[600],
+                        md: foundationTokens.font.weight[600],
+                        lg: foundationTokens.font.weight[600],
+                    },
+                    // heading.color (size-independent)
+                    color: foundationTokens.colors.gray[0],
+                    // heading.lineHeight.[size]
+                    lineHeight: {
+                        sm: foundationTokens.unit[24],
+                        md: foundationTokens.unit[24],
+                        lg: foundationTokens.unit[24],
+                    },
+
+                    IconSize: {
+                        sm: foundationTokens.font.fontSize[18],
+                        md: foundationTokens.font.fontSize[18],
+                        lg: foundationTokens.font.fontSize[18],
+                    },
+                },
+                description: {
+                    // description.fontSize.[size]
+                    fontSize: {
+                        sm: foundationTokens.font.size.body.sm.fontSize,
+                        md: foundationTokens.font.size.body.md.fontSize,
+                        lg: foundationTokens.font.size.body.lg.fontSize,
+                    },
+                    // description.fontWeight.[size]
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[500],
+                        md: foundationTokens.font.weight[500],
+                        lg: foundationTokens.font.weight[500],
+                    },
+                    // description.color (size-independent)
+                    color: foundationTokens.colors.gray[400],
+                    // description.lineHeight.[size]
+                    lineHeight: {
+                        sm: foundationTokens.unit[20],
+                        md: foundationTokens.unit[20],
+                        lg: foundationTokens.unit[20],
+                    },
+                },
+            },
+            bottomContainer: {
+                gap: {
+                    sm: foundationTokens.unit[12],
+                    md: foundationTokens.unit[12],
+                    lg: foundationTokens.unit[12],
+                },
+            },
+        },
+    }
+}

package/lib/components/PopoverV2/popoverV2.light.tokens.tsx

@@ -0,0 +1,228 @@
+import { FoundationTokenType } from '../../tokens/theme.token'
+import { ResponsivePopoverV2Tokens } from './popoverV2.token'
+
+export const getPopoverV2LightToken = (
+    foundationTokens: FoundationTokenType
+): ResponsivePopoverV2Tokens => {
+    return {
+        sm: {
+            // background (size-independent)
+            background: foundationTokens.colors.gray[0],
+            // border (size-independent)
+            border: foundationTokens.border.radius[8],
+            // shadow (size-independent)
+            shadow: foundationTokens.shadows,
+            // gap.[size]
+            gap: {
+                sm: foundationTokens.unit[12],
+                md: foundationTokens.unit[12],
+                lg: foundationTokens.unit[12],
+            },
+            // zIndex (size-independent)
+            zIndex: 101,
+            // borderRadius.[size]
+            borderRadius: {
+                sm: foundationTokens.border.radius[8],
+                md: foundationTokens.border.radius[8],
+                lg: foundationTokens.border.radius[8],
+            },
+            // padding.[side].[size]
+            padding: {
+                left: {
+                    sm: foundationTokens.unit[16],
+                    md: foundationTokens.unit[16],
+                    lg: foundationTokens.unit[16],
+                },
+                right: {
+                    sm: foundationTokens.unit[16],
+                    md: foundationTokens.unit[16],
+                    lg: foundationTokens.unit[16],
+                },
+                top: {
+                    sm: foundationTokens.unit[12],
+                    md: foundationTokens.unit[12],
+                    lg: foundationTokens.unit[12],
+                },
+                bottom: {
+                    sm: foundationTokens.unit[16],
+                    md: foundationTokens.unit[16],
+                    lg: foundationTokens.unit[16],
+                },
+            },
+            TopContainer: {
+                gap: {
+                    sm: foundationTokens.unit[8],
+                    md: foundationTokens.unit[8],
+                    lg: foundationTokens.unit[8],
+                },
+                heading: {
+                    // heading.fontSize.[size]
+                    fontSize: {
+                        sm: foundationTokens.font.size.body.md.fontSize,
+                        md: foundationTokens.font.size.body.lg.fontSize,
+                        lg: foundationTokens.font.size.body.lg.fontSize,
+                    },
+                    // heading.fontWeight.[size]
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[600],
+                        md: foundationTokens.font.weight[600],
+                        lg: foundationTokens.font.weight[600],
+                    },
+                    // heading.color (size-independent)
+                    color: foundationTokens.colors.gray[900],
+                    // heading.lineHeight.[size]
+                    lineHeight: {
+                        sm: foundationTokens.unit[24],
+                        md: foundationTokens.unit[24],
+                        lg: foundationTokens.unit[24],
+                    },
+
+                    IconSize: {
+                        sm: foundationTokens.font.fontSize[18],
+                        md: foundationTokens.font.fontSize[18],
+                        lg: foundationTokens.font.fontSize[18],
+                    },
+                },
+                description: {
+                    // description.fontSize.[size]
+                    fontSize: {
+                        sm: foundationTokens.font.size.body.sm.fontSize,
+                        md: foundationTokens.font.size.body.md.fontSize,
+                        lg: foundationTokens.font.size.body.lg.fontSize,
+                    },
+                    // description.fontWeight.[size]
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[500],
+                        md: foundationTokens.font.weight[500],
+                        lg: foundationTokens.font.weight[500],
+                    },
+                    // description.color (size-independent)
+                    color: foundationTokens.colors.gray[500],
+                    // description.lineHeight.[size]
+                    lineHeight: {
+                        sm: foundationTokens.unit[16],
+                        md: foundationTokens.unit[16],
+                        lg: foundationTokens.unit[16],
+                    },
+                },
+            },
+            bottomContainer: {
+                // footer.gap.[size]
+                gap: {
+                    sm: foundationTokens.unit[12],
+                    md: foundationTokens.unit[12],
+                    lg: foundationTokens.unit[12],
+                },
+            },
+        },
+        lg: {
+            // background (size-independent)
+            background: foundationTokens.colors.gray[0],
+            // border (size-independent)
+            border: foundationTokens.border.radius[8],
+            // shadow (size-independent)
+            shadow: foundationTokens.shadows,
+            // gap.[size]
+            gap: {
+                sm: foundationTokens.unit[12],
+                md: foundationTokens.unit[12],
+                lg: foundationTokens.unit[12],
+            },
+            // zIndex (size-independent)
+            zIndex: 101,
+            // borderRadius.[size]
+            borderRadius: {
+                sm: foundationTokens.border.radius[8],
+                md: foundationTokens.border.radius[8],
+                lg: foundationTokens.border.radius[8],
+            },
+            // padding.[side].[size]
+            padding: {
+                left: {
+                    sm: foundationTokens.unit[16],
+                    md: foundationTokens.unit[16],
+                    lg: foundationTokens.unit[16],
+                },
+                right: {
+                    sm: foundationTokens.unit[16],
+                    md: foundationTokens.unit[16],
+                    lg: foundationTokens.unit[16],
+                },
+                top: {
+                    sm: foundationTokens.unit[12],
+                    md: foundationTokens.unit[12],
+                    lg: foundationTokens.unit[12],
+                },
+                bottom: {
+                    sm: foundationTokens.unit[16],
+                    md: foundationTokens.unit[16],
+                    lg: foundationTokens.unit[16],
+                },
+            },
+            TopContainer: {
+                gap: {
+                    sm: foundationTokens.unit[8],
+                    md: foundationTokens.unit[8],
+                    lg: foundationTokens.unit[8],
+                },
+                heading: {
+                    // heading.fontSize.[size]
+                    fontSize: {
+                        sm: foundationTokens.font.size.body.md.fontSize,
+                        md: foundationTokens.font.size.body.lg.fontSize,
+                        lg: foundationTokens.font.size.body.lg.fontSize,
+                    },
+                    // heading.fontWeight.[size]
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[600],
+                        md: foundationTokens.font.weight[600],
+                        lg: foundationTokens.font.weight[600],
+                    },
+                    // heading.color (size-independent)
+                    color: foundationTokens.colors.gray[900],
+                    // heading.lineHeight.[size]
+                    lineHeight: {
+                        sm: foundationTokens.unit[24],
+                        md: foundationTokens.unit[24],
+                        lg: foundationTokens.unit[24],
+                    },
+                    IconSize: {
+                        sm: foundationTokens.font.fontSize[18],
+                        md: foundationTokens.font.fontSize[18],
+                        lg: foundationTokens.font.fontSize[18],
+                    },
+                },
+                description: {
+                    // description.fontSize.[size]
+                    fontSize: {
+                        sm: foundationTokens.font.size.body.sm.fontSize,
+                        md: foundationTokens.font.size.body.md.fontSize,
+                        lg: foundationTokens.font.size.body.lg.fontSize,
+                    },
+                    // description.fontWeight.[size]
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[500],
+                        md: foundationTokens.font.weight[500],
+                        lg: foundationTokens.font.weight[500],
+                    },
+                    // description.color (size-independent)
+                    color: foundationTokens.colors.gray[500],
+                    // description.lineHeight.[size]
+                    lineHeight: {
+                        sm: foundationTokens.unit[20],
+                        md: foundationTokens.unit[20],
+                        lg: foundationTokens.unit[20],
+                    },
+                },
+            },
+            bottomContainer: {
+                // footer.gap.[size]
+                gap: {
+                    sm: foundationTokens.unit[12],
+                    md: foundationTokens.unit[12],
+                    lg: foundationTokens.unit[12],
+                },
+            },
+        },
+    }
+}

package/lib/components/PopoverV2/popoverV2.token.ts

@@ -0,0 +1,85 @@
+import type { CSSObject } from 'styled-components'
+import { PopoverV2Size } from './popoverV2.types'
+import type { FoundationTokenType } from '../../tokens/theme.token'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+import { Theme } from '../../context/theme.enum'
+import { getPopoverV2LightToken } from './popoverV2.light.tokens'
+import { getPopoverV2DarkToken } from './popoverV2.dark.tokens'
+export type PopoverV2TokenType = {
+    background: CSSObject['backgroundColor']
+    border: CSSObject['border']
+    shadow: FoundationTokenType['shadows']
+    gap: {
+        [key in PopoverV2Size]: CSSObject['gap']
+    }
+    zIndex: CSSObject['zIndex']
+    borderRadius: {
+        [key in PopoverV2Size]: CSSObject['borderRadius']
+    }
+    padding: {
+        left: {
+            [key in PopoverV2Size]: CSSObject['paddingLeft']
+        }
+        right: {
+            [key in PopoverV2Size]: CSSObject['paddingRight']
+        }
+        top: {
+            [key in PopoverV2Size]: CSSObject['paddingTop']
+        }
+        bottom: {
+            [key in PopoverV2Size]: CSSObject['paddingBottom']
+        }
+    }
+    TopContainer: {
+        gap: {
+            [key in PopoverV2Size]: CSSObject['gap']
+        }
+        heading: {
+            color: CSSObject['color']
+            fontSize: {
+                [key in PopoverV2Size]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in PopoverV2Size]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in PopoverV2Size]: CSSObject['lineHeight']
+            }
+            IconSize: {
+                [key in PopoverV2Size]: CSSObject['size']
+            }
+        }
+        description: {
+            color: CSSObject['color']
+            fontSize: {
+                [key in PopoverV2Size]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in PopoverV2Size]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in PopoverV2Size]: CSSObject['lineHeight']
+            }
+        }
+    }
+    bottomContainer: {
+        gap: {
+            [key in PopoverV2Size]: CSSObject['gap']
+        }
+    }
+}
+
+export type ResponsivePopoverV2Tokens = {
+    [key in keyof BreakpointType]: PopoverV2TokenType
+}
+
+export const getPopoverV2Tokens = (
+    foundationToken: FoundationTokenType,
+    theme: Theme | string = Theme.LIGHT
+): ResponsivePopoverV2Tokens => {
+    if (theme === Theme.DARK || theme === 'dark') {
+        return getPopoverV2DarkToken(foundationToken)
+    }
+
+    return getPopoverV2LightToken(foundationToken)
+}

package/lib/components/PopoverV2/popoverV2.types.ts

@@ -0,0 +1,70 @@
+import type { ButtonProps } from '../Button'
+import { SkeletonVariant } from '../Skeleton'
+
+export type PopoverV2ActionType = Omit<
+    ButtonProps,
+    'buttonGroupPosition' | 'subType'
+>
+
+export enum PopoverV2Size {
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+}
+
+export enum PopoverV2Side {
+    TOP = 'top',
+    RIGHT = 'right',
+    BOTTOM = 'bottom',
+    LEFT = 'left',
+}
+
+export enum PopoverV2Align {
+    START = 'start',
+    CENTER = 'center',
+    END = 'end',
+}
+
+type BodySkeletonV2Props = {
+    show?: boolean
+    width?: string
+    height?: string | number
+}
+
+export type PopoverV2SkeletonProps = {
+    show?: boolean
+    variant?: SkeletonVariant
+    bodySkeletonProps?: BodySkeletonV2Props
+}
+export type PopoverV2Dimensions = {
+    width?: number
+    maxWidth?: number
+    minWidth?: number
+    height?: number
+    minHeight?: number
+    maxHeight?: number
+}
+export type PopoverV2Props = {
+    heading?: string
+    description?: string
+    trigger: React.ReactNode
+    children: React.ReactNode
+    showCloseButton?: boolean
+    onOpenChange?: (open: boolean) => void
+    open?: boolean
+    asModal?: boolean
+    primaryAction?: PopoverV2ActionType
+    secondaryAction?: PopoverV2ActionType
+    sideOffset?: number
+    side?: PopoverV2Side
+    align?: PopoverV2Align
+    alignOffset?: number
+    // zIndex?: number
+    size?: PopoverV2Size
+    onClose?: () => void
+    // shadow?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
+    useDrawerOnMobile?: boolean
+    avoidCollisions?: boolean
+    skeleton?: PopoverV2SkeletonProps
+} & PopoverV2Dimensions &
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'slot' | 'className' | 'style'>