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

package/lib/components/Inputs/TextInput/textInput.tokens.ts

@@ -0,0 +1,305 @@
+import type { CSSObject } from 'styled-components'
+import type { FoundationTokenType } from '../../../tokens/theme.token'
+import { TextInputSize, TextInputState } from './types'
+import { BreakpointType } from '../../../breakpoints/breakPoints'
+
+export type TextInputTokensType = {
+    placeholder: {
+        color: CSSObject['color']
+        fontWeight: CSSObject['fontWeight']
+    }
+    gap: CSSObject['gap']
+    label: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: {
+            [key in TextInputState]: CSSObject['color']
+        }
+    }
+    subLabel: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: {
+            [key in TextInputState]: CSSObject['color']
+        }
+    }
+    hintText: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: {
+            [key in TextInputState]: CSSObject['color']
+        }
+    }
+    helpIcon: {
+        width: CSSObject['width']
+        color: {
+            [key in TextInputState]: CSSObject['color']
+        }
+    }
+    errorMessage: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: CSSObject['color']
+    }
+    required: {
+        color: CSSObject['color']
+    }
+    inputContainer: {
+        fontSize: {
+            [key in TextInputSize]: CSSObject['fontSize']
+        }
+        fontWeight: {
+            [key in TextInputSize]: CSSObject['fontWeight']
+        }
+        color: {
+            [key in TextInputState]: CSSObject['color']
+        }
+        borderRadius: {
+            [key in TextInputSize]: CSSObject['borderRadius']
+        }
+        boxShadow: CSSObject['boxShadow']
+        padding: {
+            x: {
+                [key in TextInputSize]: CSSObject['padding']
+            }
+            y: {
+                [key in TextInputSize]: CSSObject['padding']
+            }
+        }
+        border: {
+            [key in TextInputState]: CSSObject['border']
+        }
+        backgroundColor: {
+            [key in TextInputState]: CSSObject['backgroundColor']
+        }
+    }
+}
+
+export type ResponsiveTextInputTokens = {
+    [key in keyof BreakpointType]: TextInputTokensType
+}
+
+export const getTextInputTokens = (
+    foundationTokens: FoundationTokenType
+): ResponsiveTextInputTokens => {
+    return {
+        sm: {
+            placeholder: {
+                color: foundationTokens.colors.gray[400],
+                fontWeight: foundationTokens.font.weight[500],
+            },
+            gap: foundationTokens.unit[8],
+            label: {
+                fontSize: foundationTokens.font.size.body.md.fontSize,
+                fontWeight: foundationTokens.font.weight[500],
+                color: {
+                    default: foundationTokens.colors.gray[700],
+                    hover: foundationTokens.colors.gray[700],
+                    focus: foundationTokens.colors.gray[700],
+                    disabled: foundationTokens.colors.gray[400],
+                    error: foundationTokens.colors.red[600],
+                },
+            },
+            subLabel: {
+                fontSize: foundationTokens.font.size.body.md.fontSize,
+                fontWeight: foundationTokens.font.weight[400],
+                color: {
+                    default: foundationTokens.colors.gray[400],
+                    hover: foundationTokens.colors.gray[400],
+                    focus: foundationTokens.colors.gray[400],
+                    disabled: foundationTokens.colors.gray[300],
+                    error: foundationTokens.colors.red[600],
+                },
+            },
+            helpIcon: {
+                width: foundationTokens.unit[14],
+                color: {
+                    default: foundationTokens.colors.gray[400],
+                    hover: foundationTokens.colors.gray[400],
+                    focus: foundationTokens.colors.gray[400],
+                    disabled: foundationTokens.colors.gray[400],
+                    error: foundationTokens.colors.red[600],
+                },
+            },
+            hintText: {
+                fontSize: foundationTokens.font.size.body.md.fontSize,
+                fontWeight: foundationTokens.font.weight[400],
+                color: {
+                    default: foundationTokens.colors.gray[500],
+                    hover: foundationTokens.colors.gray[500],
+                    focus: foundationTokens.colors.gray[500],
+                    disabled: foundationTokens.colors.gray[400],
+                    error: foundationTokens.colors.red[600],
+                },
+            },
+            errorMessage: {
+                fontSize: foundationTokens.font.size.body.md.fontSize,
+                fontWeight: foundationTokens.font.weight[500],
+                color: foundationTokens.colors.red[600],
+            },
+            required: {
+                color: foundationTokens.colors.red[600],
+            },
+            inputContainer: {
+                borderRadius: {
+                    sm: foundationTokens.unit[10],
+                    md: foundationTokens.unit[10],
+                    lg: foundationTokens.unit[10],
+                },
+                fontSize: {
+                    sm: foundationTokens.font.size.body.md.fontSize,
+                    md: foundationTokens.font.size.body.md.fontSize,
+                    lg: foundationTokens.font.size.body.md.fontSize,
+                },
+                fontWeight: {
+                    sm: foundationTokens.font.weight[500],
+                    md: foundationTokens.font.weight[500],
+                    lg: foundationTokens.font.weight[500],
+                },
+                color: {
+                    default: foundationTokens.colors.gray[700],
+                    hover: foundationTokens.colors.gray[700],
+                    focus: foundationTokens.colors.gray[700],
+                    error: foundationTokens.colors.red[800],
+                    disabled: foundationTokens.colors.gray[300],
+                },
+                padding: {
+                    x: {
+                        sm: foundationTokens.unit[10],
+                        md: foundationTokens.unit[12],
+                        lg: foundationTokens.unit[14],
+                    },
+                    y: {
+                        sm: foundationTokens.unit[6],
+                        md: foundationTokens.unit[8],
+                        lg: foundationTokens.unit[14],
+                    },
+                },
+                border: {
+                    default: `1px solid ${foundationTokens.colors.gray[200]}`,
+                    hover: `1px solid ${foundationTokens.colors.gray[400]}`,
+                    focus: `1px solid ${foundationTokens.colors.primary[500]}`,
+                    error: `1px solid ${foundationTokens.colors.red[500]}`,
+                    disabled: `1px solid ${foundationTokens.colors.gray[200]}`,
+                },
+                backgroundColor: {
+                    default: foundationTokens.colors.gray[0],
+                    disabled: foundationTokens.colors.gray[50],
+                    hover: foundationTokens.colors.gray[0],
+                    focus: foundationTokens.colors.gray[0],
+                    error: foundationTokens.colors.gray[0],
+                },
+                boxShadow: foundationTokens.shadows.sm,
+            },
+        },
+        lg: {
+            placeholder: {
+                color: foundationTokens.colors.gray[400],
+                fontWeight: foundationTokens.font.weight[500],
+            },
+            gap: foundationTokens.unit[8],
+            label: {
+                fontSize: foundationTokens.font.size.body.md.fontSize,
+                fontWeight: foundationTokens.font.weight[500],
+                color: {
+                    default: foundationTokens.colors.gray[700],
+                    hover: foundationTokens.colors.gray[700],
+                    focus: foundationTokens.colors.gray[700],
+                    disabled: foundationTokens.colors.gray[400],
+                    error: foundationTokens.colors.red[600],
+                },
+            },
+            subLabel: {
+                fontSize: foundationTokens.font.size.body.md.fontSize,
+                fontWeight: foundationTokens.font.weight[400],
+                color: {
+                    default: foundationTokens.colors.gray[400],
+                    hover: foundationTokens.colors.gray[400],
+                    focus: foundationTokens.colors.gray[400],
+                    disabled: foundationTokens.colors.gray[300],
+                    error: foundationTokens.colors.red[600],
+                },
+            },
+            helpIcon: {
+                width: foundationTokens.unit[14],
+                color: {
+                    default: foundationTokens.colors.gray[400],
+                    hover: foundationTokens.colors.gray[400],
+                    focus: foundationTokens.colors.gray[400],
+                    disabled: foundationTokens.colors.gray[400],
+                    error: foundationTokens.colors.red[600],
+                },
+            },
+            hintText: {
+                fontSize: foundationTokens.font.size.body.md.fontSize,
+                fontWeight: foundationTokens.font.weight[400],
+                color: {
+                    default: foundationTokens.colors.gray[500],
+                    hover: foundationTokens.colors.gray[500],
+                    focus: foundationTokens.colors.gray[500],
+                    disabled: foundationTokens.colors.gray[400],
+                    error: foundationTokens.colors.red[600],
+                },
+            },
+            errorMessage: {
+                fontSize: foundationTokens.font.size.body.md.fontSize,
+                fontWeight: foundationTokens.font.weight[500],
+                color: foundationTokens.colors.red[600],
+            },
+            required: {
+                color: foundationTokens.colors.red[600],
+            },
+            inputContainer: {
+                borderRadius: {
+                    sm: foundationTokens.unit[10],
+                    md: foundationTokens.unit[10],
+                    lg: foundationTokens.unit[10],
+                },
+                fontSize: {
+                    sm: foundationTokens.font.size.body.md.fontSize,
+                    md: foundationTokens.font.size.body.md.fontSize,
+                    lg: foundationTokens.font.size.body.md.fontSize,
+                },
+                fontWeight: {
+                    sm: foundationTokens.font.weight[500],
+                    md: foundationTokens.font.weight[500],
+                    lg: foundationTokens.font.weight[500],
+                },
+                color: {
+                    default: foundationTokens.colors.gray[700],
+                    hover: foundationTokens.colors.gray[700],
+                    focus: foundationTokens.colors.gray[700],
+                    error: foundationTokens.colors.red[800],
+                    disabled: foundationTokens.colors.gray[300],
+                },
+                padding: {
+                    x: {
+                        sm: foundationTokens.unit[10],
+                        md: foundationTokens.unit[12],
+                        lg: foundationTokens.unit[14],
+                    },
+                    y: {
+                        sm: foundationTokens.unit[4],
+                        md: foundationTokens.unit[6],
+                        lg: foundationTokens.unit[8],
+                    },
+                },
+                border: {
+                    default: `1px solid ${foundationTokens.colors.gray[200]}`,
+                    hover: `1px solid ${foundationTokens.colors.gray[400]}`,
+                    focus: `1px solid ${foundationTokens.colors.primary[500]}`,
+                    error: `1px solid ${foundationTokens.colors.red[500]}`,
+                    disabled: `1px solid ${foundationTokens.colors.gray[200]}`,
+                },
+                backgroundColor: {
+                    default: foundationTokens.colors.gray[0],
+                    disabled: foundationTokens.colors.gray[50],
+                    hover: foundationTokens.colors.gray[0],
+                    focus: foundationTokens.colors.gray[0],
+                    error: foundationTokens.colors.gray[0],
+                },
+                boxShadow: foundationTokens.shadows.sm,
+            },
+        },
+    }
+}

package/lib/components/Inputs/TextInput/types.ts

@@ -0,0 +1,41 @@
+export enum TextInputSize {
+    SMALL = 'sm',
+    MEDIUM = 'md',
+    LARGE = 'lg',
+}
+
+export enum TextInputState {
+    DEFAULT = 'default',
+    HOVER = 'hover',
+    FOCUS = 'focus',
+    ERROR = 'error',
+    DISABLED = 'disabled',
+}
+
+export enum TextInputGroupPosition {
+    CENTER = 'center',
+    LEFT = 'left',
+    RIGHT = 'right',
+}
+
+export type TextInputProps = {
+    label?: string
+    sublabel?: string
+    hintText?: string
+    helpIconHintText?: string
+    error?: boolean
+    errorMessage?: string
+    size?: TextInputSize
+    leftSlot?: React.ReactNode
+    rightSlot?: React.ReactNode
+    value: string
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void
+    cursor?: 'text' | 'pointer' | 'default' | 'not-allowed'
+    passwordToggle?: boolean
+    textInputGroupPosition?: TextInputGroupPosition
+} & Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'size' | 'style' | 'className' | 'onBlur' | 'onFocus'
+>

package/lib/components/Inputs/TextInput/utils.ts

@@ -0,0 +1,43 @@
+import { TextInputTokensType } from './textInput.tokens'
+import { TextInputGroupPosition, TextInputSize } from './types'
+
+export const getTextInputBorderRadius = (
+    size: TextInputSize,
+    textInputGroupPosition: TextInputGroupPosition | undefined,
+    tokens: TextInputTokensType
+): { borderRadius: string; borderRight?: string } => {
+    const variantBorderRadius = String(tokens.inputContainer.borderRadius[size])
+    const styles = {
+        borderRadius: '',
+        borderRight: '',
+    }
+    if (textInputGroupPosition === undefined) {
+        return {
+            ...styles,
+            borderRadius: variantBorderRadius,
+            borderRight: '',
+        }
+    }
+
+    if (textInputGroupPosition === TextInputGroupPosition.LEFT) {
+        return {
+            ...styles,
+            borderRadius: `${variantBorderRadius} 0 0 ${variantBorderRadius}`,
+            borderRight: '0px ',
+        }
+    }
+
+    if (textInputGroupPosition === TextInputGroupPosition.RIGHT) {
+        return {
+            ...styles,
+            borderRadius: `0 ${variantBorderRadius} ${variantBorderRadius} 0`,
+            borderRight: '',
+        }
+    }
+
+    return {
+        ...styles,
+        borderRadius: '0px 0px 0px 0px',
+        borderRight: '0px ',
+    }
+}