Merge pull request #131 from brainstormforce/SUR-284

Sur-284 All onboarding screens
brainstormforce · Oct 14, 2024 · 83adfc3 · 83adfc3
2 parents 1da985b + cac8f7c
commit 83adfc3
Show file tree

Hide file tree

Showing 19 changed files with 2,004 additions and 82 deletions.
diff --git a/src/components/input/input.jsx b/src/components/input/input.jsx
@@ -17,6 +17,7 @@ const InputComponent = (
 		onError = () => {},
 		prefix = null,
 		suffix = null,
+		label = '',
 		...props
 	},
 	ref
@@ -76,9 +77,14 @@ const InputComponent = (
 		md: 'p-3.5 rounded-md',
 		lg: 'p-4 rounded-lg',
 	};
+	const labelClasses = {
+		sm: 'text-sm font-medium',
+		md: 'text-sm font-medium',
+		lg: 'text-base font-medium',
+	};
 	const textClasses = {
 		sm: 'text-xs',
-		md: 'text-base',
+		md: 'text-sm',
 		lg: 'text-base',
 	};
 	const sizeClassesWithPrefix = {
@@ -177,56 +183,90 @@ const InputComponent = (
 
 	if ( type === 'file' ) {
 		return (
-			<div className={ cn( 'relative flex focus-within:z-10', className ) }>
+			<div className="flex flex-col items-start gap-1.5 [&_*]:box-border box-border">
+				<label
+					className={ cn( labelClasses[ size ], 'text-field-label' ) }
+					htmlFor={ inputId }
+				>
+					{ label }
+				</label>
+				<div
+					className={ cn(
+						'w-full relative flex focus-within:z-10',
+						className
+					) }
+				>
+					<input
+						ref={ ref }
+						id={ inputId }
+						type="file"
+						className={ cn(
+							baseClasses,
+							disabledUploadFileClasses,
+							sizeClasses[ size ],
+							textClasses[ size ],
+							focusClasses,
+							hoverClasses,
+							errorFileClasses,
+							fileClasses
+						) }
+						disabled={ disabled }
+						onChange={ handleChange }
+						onInvalid={ onError }
+						{ ...props }
+					/>
+					<div
+						className={ cn(
+							uploadIconClasses,
+							'right-0 pr-3',
+							uploadIconSizeClasses[ size ]
+						) }
+					>
+						<Upload />
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col items-start gap-1.5 [&_*]:box-border box-border">
+			<label
+				className={ cn( labelClasses[ size ], 'text-field-label' ) }
+				htmlFor={ inputId }
+			>
+				{ label }
+			</label>
+			<div
+				className={ cn(
+					'w-full relative flex focus-within:z-10',
+					className
+				) }
+			>
+				{ getPrefix() }
 				<input
 					ref={ inputRef }
 					id={ inputId }
-					type="file"
+					type={ type }
 					className={ cn(
 						baseClasses,
-						disabledUploadFileClasses,
+						disabledClasses,
 						sizeClasses[ size ],
 						textClasses[ size ],
+						sizeClassesWithPrefix[ size ],
+						sizeClassesWithSuffix[ size ],
 						focusClasses,
 						hoverClasses,
-						errorFileClasses,
-						fileClasses
+						errorClasses
 					) }
 					disabled={ disabled }
 					onChange={ handleChange }
 					onInvalid={ onError }
+					value={ getValue() }
 					{ ...props }
 				/>
 				{ getSuffix() }
 			</div>
-		);
-	}
-
-	return (
-		<div className={ cn( 'relative flex focus-within:z-10', className ) }>
-			{ getPrefix() }
-			<input
-				ref={ ref }
-				id={ inputId }
-				type={ type }
-				className={ cn(
-					baseClasses,
-					disabledClasses,
-					sizeClasses[ size ],
-					textClasses[ size ],
-					sizeClassesWithPrefix[ size ],
-					sizeClassesWithSuffix[ size ],
-					focusClasses,
-					hoverClasses,
-					errorClasses
-				) }
-				disabled={ disabled }
-				onChange={ handleChange }
-				onInvalid={ onError }
-				value={ getValue() }
-				{ ...props }
-			/>
-			{ getSuffix() }
 		</div>
 	);
 };

diff --git a/src/components/menu-item/menu-item.jsx b/src/components/menu-item/menu-item.jsx
@@ -98,8 +98,8 @@ const MenuList = ( {
 						( showArrowOnHover && isHovered ) ? (
 							/* eslint-disable */
 							<ChevronDown />
-							/* eslint-enable */
-							) : null }
+						) : /* eslint-enable */
+							null }
 					</motion.span>
 				) }
 			</div>

diff --git a/src/components/radio-button/radio-button.jsx b/src/components/radio-button/radio-button.jsx
@@ -44,6 +44,7 @@ const RadioButtonGroup = ( {
 	vertical = false,
 	columns = 4,
 	multiSelection = false,
+	gapClassname = 'gap-2',
 } ) => {
 	const isControlled = useMemo( () => typeof value !== 'undefined', [ value ] );
 	const nameAttr = useMemo(
@@ -90,8 +91,9 @@ const RadioButtonGroup = ( {
 		[ onChange ]
 	);
 	className = cn(
-		`grid grid-cols-4 gap-2`,
+		`grid grid-cols-4`,
 		columnClasses[ columns ],
+		gapClassname,
 		style === 'tile' && 'gap-0',
 		vertical && 'grid-cols-1',
 		className
@@ -319,7 +321,7 @@ const RadioButtonComponent = (
 			) }
 			<label
 				className={ cn(
-					'absolute mr-0.5 right-3 flex items-center cursor-pointer rounded-full w-7',
+					'absolute mr-0.5 right-3 flex items-center cursor-pointer rounded-full gap-2',
 					reversePosition && 'left-0',
 					isDisabled && 'cursor-not-allowed'
 				) }

diff --git a/src/components/radio-button/radio-button.stories.js b/src/components/radio-button/radio-button.stories.js
@@ -57,6 +57,13 @@ export default {
 				type: { summary: 'string' },
 			},
 		},
+		gapClassName: {
+			description: 'To customize the gap between Radio Buttons.',
+			control: {
+				type: 'text',
+			},
+			defaultValue: 'gap-2',
+		},
 		by: {
 			description: 'Used to compare the checked value. Typically "id".',
 			table: {

diff --git a/src/components/radio-button/readme.md b/src/components/radio-button/readme.md
@@ -34,6 +34,11 @@
 - **default value:** undefined
 - **description:** Used to customize the container when as value is not equal to a `Fragment`.
 
+### gapClassname
+- **type:** `string`
+- **default value:** `gap-2`
+- **description:** To customize the gap between Radio Buttons.
+
 ### style
 - **type:** `string`
 - **default value:** `simple`

diff --git a/src/components/select/select.jsx b/src/components/select/select.jsx
@@ -232,7 +232,7 @@ function SelectButton( {
 		</div>
 	);
 }
-
+SelectButton.displayName = 'Select.Button';
 function SelectOptions( {
 	children,
 	searchBy = 'id', // Used to identify searched value using the key. Default is 'id'.
@@ -423,7 +423,7 @@ function SelectOptions( {
 		</>
 	);
 }
-
+SelectOptions.displayName = 'Select.Options';
 function SelectItem( { value, selected, children, className, ...props } ) {
 	const {
 		sizeValue,
@@ -515,6 +515,7 @@ function SelectItem( { value, selected, children, className, ...props } ) {
 		</div>
 	);
 }
+SelectItem.displayName = 'Select.Option';
 
 const Select = ( {
 	id,

diff --git a/src/components/toaster/utils.jsx b/src/components/toaster/utils.jsx
@@ -7,13 +7,28 @@ const DEFAULT_THEME = 'light';
 const DEFAULT_VARIANT = 'neutral';
 const DEFAULT_ACTION_TYPE = 'button';
 
-export const getIconColor = ( { theme = DEFAULT_THEME, variant = DEFAULT_VARIANT } ) => {
+export const getIconColor = ( {
+	theme = DEFAULT_THEME,
+	variant = DEFAULT_VARIANT,
+} ) => {
 	let color = theme === 'light' ? 'text-icon-secondary' : 'text-icon-inverse';
 	const variantClasses = {
-		info: theme === 'light' ? 'text-support-info' : 'text-support-info-inverse',
-		success: theme === 'light' ? 'text-support-success' : 'text-support-success-inverse',
-		warning: theme === 'light' ? 'text-support-warning' : 'text-support-warning-inverse',
-		error: theme === 'light' ? 'text-support-error' : 'text-support-error-inverse',
+		info:
+			theme === 'light'
+				? 'text-support-info'
+				: 'text-support-info-inverse',
+		success:
+			theme === 'light'
+				? 'text-support-success'
+				: 'text-support-success-inverse',
+		warning:
+			theme === 'light'
+				? 'text-support-warning'
+				: 'text-support-warning-inverse',
+		error:
+			theme === 'light'
+				? 'text-support-error'
+				: 'text-support-error-inverse',
 	};
 	color = variantClasses[ variant ] || color;
 
@@ -26,7 +41,7 @@ export const getIcon = ( {
 	variant = DEFAULT_VARIANT,
 } ) => {
 	const commonClasses = '[&>svg]:h-5 [&>svg]:w-5';
-	let color = getIconColor( { theme, variant } );
+	const color = getIconColor( { theme, variant } );
 
 	if ( icon && isValidElement( icon ) ) {
 		const updatedIcon = cloneElement( icon, {