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

package/lib/components/ProgressBarV2/ProgressBarV2.tsx

@@ -0,0 +1,85 @@
+import { useMemo, forwardRef } from 'react'
+import Block from '../Primitives/Block/Block'
+import {
+    ProgressBarV2Appearance,
+    ProgressBarV2Props,
+    ProgressBarV2InternalProps,
+    ProgressBarV2Size,
+    ProgressBarV2Variant,
+} from './progressBarV2.types'
+import type { ProgressBarV2TokenType } from './progressBarV2.tokens'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import { extractAriaProps, generateDefaultAriaLabel } from './utils'
+import { LinearProgressBarV2 } from './LinearProgressBarV2'
+import { CircularProgressBarV2 } from './CircularProgressBarV2'
+import { filterBlockedProps } from '../../utils/prop-helpers'
+
+const ProgressBarV2 = forwardRef<HTMLDivElement, ProgressBarV2Props>(
+    (
+        {
+            value,
+            size = ProgressBarV2Size.MD,
+            variant = ProgressBarV2Variant.LINEAR,
+            appearance = ProgressBarV2Appearance.SOLID,
+            showLabel = false,
+            min = 0,
+            max = 100,
+            ...rest
+        },
+        ref
+    ) => {
+        const progressBarToken =
+            useResponsiveTokens<ProgressBarV2TokenType>('PROGRESS_BARV2')
+        const {
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledby,
+            restProps,
+        } = extractAriaProps(rest)
+        const filteredRest = filterBlockedProps(restProps)
+
+        const defaultAriaLabel = useMemo(() => {
+            if (ariaLabel || ariaLabelledby) return ariaLabel
+            return generateDefaultAriaLabel(value, min, max)
+        }, [value, min, max, ariaLabel, ariaLabelledby])
+
+        const sharedProps: ProgressBarV2InternalProps = {
+            value,
+            min,
+            max,
+            ariaLabel: defaultAriaLabel,
+            ariaLabelledby,
+            showLabel,
+            tokens: progressBarToken,
+        }
+
+        if (variant === ProgressBarV2Variant.CIRCULAR) {
+            return (
+                <Block
+                    {...filteredRest}
+                    data-progressbar="progressbar"
+                    ref={ref}
+                >
+                    <CircularProgressBarV2
+                        {...sharedProps}
+                        size={size}
+                        appearance={appearance}
+                    />
+                </Block>
+            )
+        }
+
+        return (
+            <Block {...filteredRest} data-progressbar="progressbar" ref={ref}>
+                <LinearProgressBarV2
+                    {...sharedProps}
+                    size={size}
+                    appearance={appearance}
+                />
+            </Block>
+        )
+    }
+)
+
+ProgressBarV2.displayName = 'ProgressBarV2'
+
+export default ProgressBarV2

package/lib/components/ProgressBarV2/index.ts

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

package/lib/components/ProgressBarV2/progressBarV2.dark.tokens.ts

@@ -0,0 +1,203 @@
+import { FoundationTokenType } from '../../tokens/theme.token'
+import {
+    ProgressBarV2Appearance,
+    ProgressBarV2Size,
+} from './progressBarV2.types'
+import type { ResponsiveProgressBarV2Tokens } from './progressBarV2.tokens'
+
+export const getProgressBarV2DarkTokens = (
+    foundationToken: FoundationTokenType
+): ResponsiveProgressBarV2Tokens => {
+    return {
+        sm: {
+            linear: {
+                height: {
+                    [ProgressBarV2Size.SM]: foundationToken.unit[12],
+                    [ProgressBarV2Size.MD]: foundationToken.unit[20],
+                    [ProgressBarV2Size.LG]: foundationToken.unit[24],
+                },
+                fill: {
+                    backgroundColor: {
+                        [ProgressBarV2Appearance.SOLID]: String(
+                            foundationToken.colors.primary[600]
+                        ),
+                        [ProgressBarV2Appearance.SEGMENTED]: String(
+                            foundationToken.colors.primary[600]
+                        ),
+                    },
+                    borderRadius: {
+                        [ProgressBarV2Appearance.SOLID]: String(
+                            foundationToken.border.radius[8]
+                        ),
+                        [ProgressBarV2Appearance.SEGMENTED]: String(
+                            foundationToken.border.radius[2]
+                        ),
+                    },
+                },
+                empty: {
+                    backgroundColor: {
+                        [ProgressBarV2Appearance.SOLID]: String(
+                            foundationToken.colors.gray[150]
+                        ),
+                        [ProgressBarV2Appearance.SEGMENTED]: 'transparent',
+                    },
+                    backgroundImage: {
+                        [ProgressBarV2Appearance.SOLID]: undefined,
+                        [ProgressBarV2Appearance.SEGMENTED]: `repeating-linear-gradient(
+                    to right,
+                    ${String(foundationToken.colors.gray[100])},
+                    ${String(foundationToken.colors.gray[100])} ${foundationToken.unit[2]},
+                    transparent ${foundationToken.unit[2]},
+                    transparent ${foundationToken.unit[8]}
+                )`,
+                    },
+                    backgroundSize: {
+                        [ProgressBarV2Appearance.SOLID]: undefined,
+                        [ProgressBarV2Appearance.SEGMENTED]: `${foundationToken.unit[10]} 100%`,
+                    },
+                },
+                borderRadius: {
+                    [ProgressBarV2Appearance.SOLID]: String(
+                        foundationToken.border.radius[8]
+                    ),
+                    [ProgressBarV2Appearance.SEGMENTED]: '0px',
+                },
+                gap: foundationToken.unit[8],
+            },
+            circular: {
+                size: {
+                    [ProgressBarV2Size.SM]: foundationToken.unit[40],
+                    [ProgressBarV2Size.MD]: foundationToken.unit[60],
+                    [ProgressBarV2Size.LG]: foundationToken.unit[80],
+                },
+                strokeWidth: {
+                    [ProgressBarV2Size.SM]: 3,
+                    [ProgressBarV2Size.MD]: 4,
+                    [ProgressBarV2Size.LG]: 6,
+                },
+                stroke: {
+                    [ProgressBarV2Appearance.SOLID]: String(
+                        foundationToken.colors.primary[600]
+                    ),
+                    [ProgressBarV2Appearance.SEGMENTED]: String(
+                        foundationToken.colors.primary[600]
+                    ),
+                },
+                background: {
+                    [ProgressBarV2Appearance.SOLID]: String(
+                        foundationToken.colors.gray[150]
+                    ),
+                    [ProgressBarV2Appearance.SEGMENTED]: String(
+                        foundationToken.colors.gray[150]
+                    ),
+                },
+                dashArray: {
+                    [ProgressBarV2Appearance.SOLID]: '',
+                    [ProgressBarV2Appearance.SEGMENTED]: '4 2',
+                },
+                motion: 'stroke-dashoffset 0.3s ease-in-out',
+            },
+            label: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[500],
+                color: String(foundationToken.colors.gray[300]),
+            },
+            transition: 'width 0.3s ease-in-out',
+        },
+        lg: {
+            linear: {
+                height: {
+                    [ProgressBarV2Size.SM]: foundationToken.unit[12],
+                    [ProgressBarV2Size.MD]: foundationToken.unit[20],
+                    [ProgressBarV2Size.LG]: foundationToken.unit[24],
+                },
+                fill: {
+                    backgroundColor: {
+                        [ProgressBarV2Appearance.SOLID]: String(
+                            foundationToken.colors.primary[600]
+                        ),
+                        [ProgressBarV2Appearance.SEGMENTED]: String(
+                            foundationToken.colors.primary[600]
+                        ),
+                    },
+                    borderRadius: {
+                        [ProgressBarV2Appearance.SOLID]: String(
+                            foundationToken.border.radius[8]
+                        ),
+                        [ProgressBarV2Appearance.SEGMENTED]: String(
+                            foundationToken.border.radius[2]
+                        ),
+                    },
+                },
+                empty: {
+                    backgroundColor: {
+                        [ProgressBarV2Appearance.SOLID]: String(
+                            foundationToken.colors.gray[150]
+                        ),
+                        [ProgressBarV2Appearance.SEGMENTED]: 'transparent',
+                    },
+                    backgroundImage: {
+                        [ProgressBarV2Appearance.SOLID]: undefined,
+                        [ProgressBarV2Appearance.SEGMENTED]: `repeating-linear-gradient(
+                    to right,
+                    ${String(foundationToken.colors.gray[100])},
+                    ${String(foundationToken.colors.gray[100])} ${foundationToken.unit[2]},
+                    transparent ${foundationToken.unit[2]},
+                    transparent ${foundationToken.unit[8]}
+                )`,
+                    },
+                    backgroundSize: {
+                        [ProgressBarV2Appearance.SOLID]: undefined,
+                        [ProgressBarV2Appearance.SEGMENTED]: `${foundationToken.unit[10]} 100%`,
+                    },
+                },
+                borderRadius: {
+                    [ProgressBarV2Appearance.SOLID]: String(
+                        foundationToken.border.radius[8]
+                    ),
+                    [ProgressBarV2Appearance.SEGMENTED]: '0px',
+                },
+                gap: foundationToken.unit[8],
+            },
+            circular: {
+                size: {
+                    [ProgressBarV2Size.SM]: foundationToken.unit[40],
+                    [ProgressBarV2Size.MD]: foundationToken.unit[60],
+                    [ProgressBarV2Size.LG]: foundationToken.unit[80],
+                },
+                strokeWidth: {
+                    [ProgressBarV2Size.SM]: 3,
+                    [ProgressBarV2Size.MD]: 4,
+                    [ProgressBarV2Size.LG]: 6,
+                },
+                stroke: {
+                    [ProgressBarV2Appearance.SOLID]: String(
+                        foundationToken.colors.primary[600]
+                    ),
+                    [ProgressBarV2Appearance.SEGMENTED]: String(
+                        foundationToken.colors.primary[600]
+                    ),
+                },
+                background: {
+                    [ProgressBarV2Appearance.SOLID]: String(
+                        foundationToken.colors.gray[150]
+                    ),
+                    [ProgressBarV2Appearance.SEGMENTED]: String(
+                        foundationToken.colors.gray[150]
+                    ),
+                },
+                dashArray: {
+                    [ProgressBarV2Appearance.SOLID]: '',
+                    [ProgressBarV2Appearance.SEGMENTED]: '4 2',
+                },
+                motion: 'stroke-dashoffset 0.3s ease-in-out',
+            },
+            label: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[500],
+                color: String(foundationToken.colors.gray[300]),
+            },
+            transition: 'width 0.3s ease-in-out',
+        },
+    }
+}

package/lib/components/ProgressBarV2/progressBarV2.light.tokens.ts

@@ -0,0 +1,203 @@
+import { FoundationTokenType } from '../../tokens/theme.token'
+import {
+    ProgressBarV2Appearance,
+    ProgressBarV2Size,
+} from './progressBarV2.types'
+import type { ResponsiveProgressBarV2Tokens } from './progressBarV2.tokens'
+
+export const getProgressBarV2LightTokens = (
+    foundationToken: FoundationTokenType
+): ResponsiveProgressBarV2Tokens => {
+    return {
+        sm: {
+            linear: {
+                height: {
+                    [ProgressBarV2Size.SM]: foundationToken.unit[12],
+                    [ProgressBarV2Size.MD]: foundationToken.unit[20],
+                    [ProgressBarV2Size.LG]: foundationToken.unit[24],
+                },
+                fill: {
+                    backgroundColor: {
+                        [ProgressBarV2Appearance.SOLID]: String(
+                            foundationToken.colors.primary[600]
+                        ),
+                        [ProgressBarV2Appearance.SEGMENTED]: String(
+                            foundationToken.colors.primary[600]
+                        ),
+                    },
+                    borderRadius: {
+                        [ProgressBarV2Appearance.SOLID]: String(
+                            foundationToken.border.radius[8]
+                        ),
+                        [ProgressBarV2Appearance.SEGMENTED]: String(
+                            foundationToken.border.radius[2]
+                        ),
+                    },
+                },
+                empty: {
+                    backgroundColor: {
+                        [ProgressBarV2Appearance.SOLID]: String(
+                            foundationToken.colors.gray[150]
+                        ),
+                        [ProgressBarV2Appearance.SEGMENTED]: 'transparent',
+                    },
+                    backgroundImage: {
+                        [ProgressBarV2Appearance.SOLID]: undefined,
+                        [ProgressBarV2Appearance.SEGMENTED]: `repeating-linear-gradient(
+                    to right,
+                    ${String(foundationToken.colors.gray[100])},
+                    ${String(foundationToken.colors.gray[100])} ${foundationToken.unit[2]},
+                    transparent ${foundationToken.unit[2]},
+                    transparent ${foundationToken.unit[8]}
+                )`,
+                    },
+                    backgroundSize: {
+                        [ProgressBarV2Appearance.SOLID]: undefined,
+                        [ProgressBarV2Appearance.SEGMENTED]: `${foundationToken.unit[10]} 100%`,
+                    },
+                },
+                borderRadius: {
+                    [ProgressBarV2Appearance.SOLID]: String(
+                        foundationToken.border.radius[8]
+                    ),
+                    [ProgressBarV2Appearance.SEGMENTED]: '0px',
+                },
+                gap: foundationToken.unit[8],
+            },
+            circular: {
+                size: {
+                    [ProgressBarV2Size.SM]: foundationToken.unit[40],
+                    [ProgressBarV2Size.MD]: foundationToken.unit[60],
+                    [ProgressBarV2Size.LG]: foundationToken.unit[80],
+                },
+                strokeWidth: {
+                    [ProgressBarV2Size.SM]: 3,
+                    [ProgressBarV2Size.MD]: 4,
+                    [ProgressBarV2Size.LG]: 6,
+                },
+                stroke: {
+                    [ProgressBarV2Appearance.SOLID]: String(
+                        foundationToken.colors.primary[600]
+                    ),
+                    [ProgressBarV2Appearance.SEGMENTED]: String(
+                        foundationToken.colors.primary[600]
+                    ),
+                },
+                background: {
+                    [ProgressBarV2Appearance.SOLID]: String(
+                        foundationToken.colors.gray[150]
+                    ),
+                    [ProgressBarV2Appearance.SEGMENTED]: String(
+                        foundationToken.colors.gray[150]
+                    ),
+                },
+                dashArray: {
+                    [ProgressBarV2Appearance.SOLID]: '',
+                    [ProgressBarV2Appearance.SEGMENTED]: '4 2',
+                },
+                motion: 'stroke-dashoffset 0.3s ease-in-out',
+            },
+            label: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[500],
+                color: String(foundationToken.colors.gray[600]),
+            },
+            transition: 'width 0.3s ease-in-out',
+        },
+        lg: {
+            linear: {
+                height: {
+                    [ProgressBarV2Size.SM]: foundationToken.unit[12],
+                    [ProgressBarV2Size.MD]: foundationToken.unit[20],
+                    [ProgressBarV2Size.LG]: foundationToken.unit[24],
+                },
+                fill: {
+                    backgroundColor: {
+                        [ProgressBarV2Appearance.SOLID]: String(
+                            foundationToken.colors.primary[600]
+                        ),
+                        [ProgressBarV2Appearance.SEGMENTED]: String(
+                            foundationToken.colors.primary[600]
+                        ),
+                    },
+                    borderRadius: {
+                        [ProgressBarV2Appearance.SOLID]: String(
+                            foundationToken.border.radius[8]
+                        ),
+                        [ProgressBarV2Appearance.SEGMENTED]: String(
+                            foundationToken.border.radius[2]
+                        ),
+                    },
+                },
+                empty: {
+                    backgroundColor: {
+                        [ProgressBarV2Appearance.SOLID]: String(
+                            foundationToken.colors.gray[150]
+                        ),
+                        [ProgressBarV2Appearance.SEGMENTED]: 'transparent',
+                    },
+                    backgroundImage: {
+                        [ProgressBarV2Appearance.SOLID]: undefined,
+                        [ProgressBarV2Appearance.SEGMENTED]: `repeating-linear-gradient(
+                    to right,
+                    ${String(foundationToken.colors.gray[100])},
+                    ${String(foundationToken.colors.gray[100])} ${foundationToken.unit[2]},
+                    transparent ${foundationToken.unit[2]},
+                    transparent ${foundationToken.unit[8]}
+                )`,
+                    },
+                    backgroundSize: {
+                        [ProgressBarV2Appearance.SOLID]: undefined,
+                        [ProgressBarV2Appearance.SEGMENTED]: `${foundationToken.unit[10]} 100%`,
+                    },
+                },
+                borderRadius: {
+                    [ProgressBarV2Appearance.SOLID]: String(
+                        foundationToken.border.radius[8]
+                    ),
+                    [ProgressBarV2Appearance.SEGMENTED]: '0px',
+                },
+                gap: foundationToken.unit[8],
+            },
+            circular: {
+                size: {
+                    [ProgressBarV2Size.SM]: foundationToken.unit[40],
+                    [ProgressBarV2Size.MD]: foundationToken.unit[60],
+                    [ProgressBarV2Size.LG]: foundationToken.unit[80],
+                },
+                strokeWidth: {
+                    [ProgressBarV2Size.SM]: 3,
+                    [ProgressBarV2Size.MD]: 4,
+                    [ProgressBarV2Size.LG]: 6,
+                },
+                stroke: {
+                    [ProgressBarV2Appearance.SOLID]: String(
+                        foundationToken.colors.primary[600]
+                    ),
+                    [ProgressBarV2Appearance.SEGMENTED]: String(
+                        foundationToken.colors.primary[600]
+                    ),
+                },
+                background: {
+                    [ProgressBarV2Appearance.SOLID]: String(
+                        foundationToken.colors.gray[150]
+                    ),
+                    [ProgressBarV2Appearance.SEGMENTED]: String(
+                        foundationToken.colors.gray[150]
+                    ),
+                },
+                dashArray: {
+                    [ProgressBarV2Appearance.SOLID]: '',
+                    [ProgressBarV2Appearance.SEGMENTED]: '4 2',
+                },
+                motion: 'stroke-dashoffset 0.3s ease-in-out',
+            },
+            label: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[500],
+                color: String(foundationToken.colors.gray[600]),
+            },
+            transition: 'width 0.3s ease-in-out',
+        },
+    }
+}

package/lib/components/ProgressBarV2/progressBarV2.tokens.ts

@@ -0,0 +1,80 @@
+import { BreakpointType } from '../../breakpoints/breakPoints'
+import { Theme } from '../../context/theme.enum'
+import { FoundationTokenType } from '../../tokens/theme.token'
+import { getProgressBarV2DarkTokens } from './progressBarV2.dark.tokens'
+import { getProgressBarV2LightTokens } from './progressBarV2.light.tokens'
+import type {
+    ProgressBarV2Appearance,
+    ProgressBarV2Size,
+} from './progressBarV2.types'
+import type { CSSObject } from 'styled-components'
+
+export type ProgressBarV2TokenType = {
+    linear: {
+        height: {
+            [key in ProgressBarV2Size]: CSSObject['height']
+        }
+        fill: {
+            backgroundColor: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor']
+            }
+            borderRadius: {
+                [key in ProgressBarV2Appearance]: CSSObject['borderRadius']
+            }
+        }
+        empty: {
+            backgroundColor: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor']
+            }
+            backgroundImage: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundImage']
+            }
+            backgroundSize: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundSize']
+            }
+        }
+        borderRadius: {
+            [key in ProgressBarV2Appearance]: CSSObject['borderRadius']
+        }
+        gap: CSSObject['gap']
+    }
+    circular: {
+        size: {
+            [key in ProgressBarV2Size]: CSSObject['width']
+        }
+        strokeWidth: {
+            [key in ProgressBarV2Size]: number
+        }
+        stroke: {
+            [key in ProgressBarV2Appearance]: CSSObject['stroke']
+        }
+        background: {
+            [key in ProgressBarV2Appearance]: CSSObject['stroke']
+        }
+        dashArray: {
+            [key in ProgressBarV2Appearance]: string
+        }
+        motion: string
+    }
+    label: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: CSSObject['color']
+    }
+    transition: string
+}
+
+export type ResponsiveProgressBarV2Tokens = {
+    [key in keyof BreakpointType]: ProgressBarV2TokenType
+}
+
+export const getProgressBarV2Tokens = (
+    foundationToken: FoundationTokenType,
+    theme: Theme | string = Theme.LIGHT
+): ResponsiveProgressBarV2Tokens => {
+    if (theme === Theme.DARK || theme === 'dark') {
+        return getProgressBarV2DarkTokens(foundationToken)
+    }
+
+    return getProgressBarV2LightTokens(foundationToken)
+}

package/lib/components/ProgressBarV2/progressBarV2.types.ts

@@ -0,0 +1,50 @@
+import type { HTMLAttributes } from 'react'
+import type { ProgressBarV2TokenType } from './progressBarV2.tokens'
+
+export enum ProgressBarV2Size {
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+}
+
+/** Bar geometry: horizontal track vs circular ring. */
+export enum ProgressBarV2Variant {
+    LINEAR = 'linear',
+    CIRCULAR = 'circular',
+}
+
+/**
+ * Fill / stroke style shared by linear and circular progress (continuous vs segmented).
+ */
+export enum ProgressBarV2Appearance {
+    SOLID = 'solid',
+    SEGMENTED = 'segmented',
+}
+
+export type ProgressBarV2Props = {
+    value: number
+    size?: ProgressBarV2Size
+    variant?: ProgressBarV2Variant
+    appearance?: ProgressBarV2Appearance
+    showLabel?: boolean
+    min?: number
+    max?: number
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>
+
+export type ProgressBarV2InternalProps = {
+    value: number
+    min: number
+    max: number
+    ariaLabel?: string
+    ariaLabelledby?: string
+    showLabel: boolean
+    tokens: ProgressBarV2TokenType
+}
+export type CircularProgressBarV2Props = ProgressBarV2InternalProps & {
+    size: ProgressBarV2Size
+    appearance: ProgressBarV2Appearance
+}
+export type LinearProgressBarV2Props = ProgressBarV2InternalProps & {
+    size: ProgressBarV2Size
+    appearance: ProgressBarV2Appearance
+}