SUR-429, SUR-430, SUR-431 - style: Update Radio button padding and gap

src/components/radio-button/radio-button.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import RadioButton, { RadioButtonGroupProps } from './radio-button';
-import { Plus } from 'lucide-react';
+import { AppWindow, ChartNoAxesGantt, House, Infinity, Instagram, LogIn, Map, Newspaper, PanelLeftClose, PictureInPicture, Plus, Share2, UserPlus } from 'lucide-react';
 import { Meta, StoryFn } from '@storybook/react';
 import Badge from '../badge';
 
@@ -142,3 +142,225 @@ export const RadioWithBorderSmallSize = RadioWithBorderTemplate.bind( {} );
 RadioWithBorderSmallSize.args = {
 	size: 'sm',
 };
+
+const defaultRadioButtonGroupData = [
+	{
+		id: '1',
+		value: 'analytics',
+		icon: <LogIn />,
+		label: 'Login Form',
+		description: 'Demo',
+		toggleLabel: 'Enable',
+		hideSelection: true,
+		useSwitch: false,
+		bagde: (
+			<Badge
+				label={ 'PRO' }
+				size="xxs"
+				icon={ null }
+				variant="inverse"
+				closable={ false }
+				className="py-0"
+			/>
+		),
+	},
+	{
+		id: '2',
+		value: 'notifications',
+		icon: <UserPlus />,
+		label: 'Registration Form',
+		description: 'Demo',
+		toggleLabel: 'Disable',
+		hideSelection: true,
+		useSwitch: false,
+		bagde: (
+			<Badge
+				label={ 'PRO' }
+				size="xxs"
+				icon={ null }
+				variant="inverse"
+				closable={ false }
+				className="py-0"
+			/>
+		),
+	},
+	{
+		id: '3',
+		value: 'settings',
+		icon: <Instagram />,
+		label: 'Instagram Feed',
+		description: 'Demo',
+		toggleLabel: 'Settings',
+		hideSelection: true,
+		useSwitch: false,
+		bagde: (
+			<Badge
+				label={ 'PRO' }
+				size="xxs"
+				icon={ null }
+				variant="inverse"
+				closable={ false }
+				className="py-0"
+			/>
+		),
+	},
+	{
+		id: '4',
+		value: 'security',
+		icon: <Infinity />,
+		label: 'Loop Builder',
+		description: 'Demo',
+		toggleLabel: 'Security',
+		hideSelection: true,
+		useSwitch: false,
+		bagde: (
+			<Badge
+				label={ 'PRO' }
+				size="xxs"
+				icon={ null }
+				variant="inverse"
+				closable={ false }
+				className="py-0"
+			/>
+		),
+	},
+	{
+		id: '5',
+		value: 'marketing',
+		icon: <AppWindow />,
+		label: 'Marketing Button',
+		description: 'Demo',
+		toggleLabel: 'Billing',
+		hideSelection: false,
+		useSwitch: true,
+	},
+	{
+		id: '6',
+		value: 'modal',
+		icon: <PictureInPicture />,
+		label: 'Modal',
+		description: 'Demo',
+		toggleLabel: 'modal',
+		hideSelection: false,
+		useSwitch: true,
+	},
+	{
+		id: '7',
+		value: 'socialshare',
+		icon: <Share2 />,
+		label: 'Social Share',
+		description: 'Demo',
+		toggleLabel: 'socialshare',
+		hideSelection: false,
+		useSwitch: true,
+	},
+	{
+		id: '8',
+		value: 'Blockquote',
+		icon: <Newspaper />,
+		label: 'Blockquote',
+		description: 'Demo',
+		toggleLabel: 'blockquote',
+		hideSelection: false,
+		useSwitch: true,
+	},
+	{
+		id: '9',
+		value: 'contenttimeline',
+		icon: <ChartNoAxesGantt />,
+		label: 'Content Timeline',
+		description: 'Demo',
+		toggleLabel: 'contenttimeline',
+		hideSelection: false,
+		useSwitch: true,
+	},
+	{
+		id: '10',
+		value: 'googlemaps',
+		icon: <Map />,
+		label: 'Google Maps',
+		description: 'Demo',
+		toggleLabel: 'googlemaps',
+		hideSelection: false,
+		useSwitch: true,
+		bagde: (
+			<Badge
+				label={ 'New' }
+				size="xxs"
+				icon={ null }
+				variant="green"
+				closable={ false }
+				className="py-0"
+			/>
+		),
+	},
+	{
+		id: '11',
+		value: 'lottieanimation',
+		icon: <House />,
+		label: 'Lottie Animation',
+		description: 'Demo',
+		toggleLabel: 'lottieanimation',
+		hideSelection: false,
+		useSwitch: true,
+	},
+	{
+		id: '12',
+		value: 'animations',
+		icon: <PanelLeftClose />,
+		label: 'Animations',
+		description: 'Documentation',
+		toggleLabel: 'animations',
+		hideSelection: false,
+		useSwitch: true,
+		bagde: (
+			<Badge
+				label={ 'Extension' }
+				size="xxs"
+				icon={ null }
+				variant="yellow"
+				closable={ false }
+				className="py-0"
+			/>
+		),
+	},
+];
+
+const RadioButtonTileTemplate: StoryFn<RadioButtonGroupProps> = () => {
+	return (
+		<RadioButton.Group
+			as="div"
+			size="sm"
+			defaultValue={ `option-${ defaultRadioButtonGroupData[ 0 ].id }` }
+			multiSelection={ true }
+			onChange={ ( value ) => {
+				return value;
+			} }
+			className="w-full gap-1"
+		>
+			{ defaultRadioButtonGroupData.map(
+				( option ) => (
+					<RadioButton.Button
+						key={ `option-${ option.id }` }
+						borderOn={ true }
+						borderOnActive={ false }
+						value={ option.value }
+						icon={ option.icon }
+						hideSelection={
+							option.hideSelection
+						}
+						label={ {
+							heading: option.label,
+							description: option.description,
+						} }
+						useSwitch={ option.useSwitch }
+						badgeItem={ option.bagde }
+						buttonWrapperClasses="bg-background-primary border-0"
+					/>
+				)
+			) }
+		</RadioButton.Group>
+	);
+};
+
+export const RadioButtonTile = RadioButtonTileTemplate.bind( {} );

src/components/radio-button/radio-button.tsx

@@ -336,14 +336,17 @@ export const RadioButtonComponent = (
 		return (
 			<div
 				className={ cn(
-					! inlineIcon && 'space-y-1.5',
+					! inlineIcon && {
+						'space-y-3': size === 'sm',
+						'space-y-4': size === 'md',
+					},
 					reversePosition && ( useSwitch ? 'ml-10' : 'ml-4' ),
 					inlineIcon && 'flex gap-2',
 					inlineIcon && ! label.description && 'items-center'
 				) }
 			>
 				{ icon && <>{ icon }</> }
-				<div className={ cn( 'space-y-1.5' ) }>
+				<div className={ cn( 'space-y-0.5' ) }>
 					<p
 						className={ cn(
 							'text-text-primary font-medium m-0',
@@ -393,6 +396,13 @@ export const RadioButtonComponent = (
 		}
 	};
 
+	const paddingClasses = {
+		'pl-3.5 pr-2.5 py-2.5': size === 'sm' && ! ( icon && useSwitch ),
+		'p-3': size === 'sm' && ( ( icon && useSwitch ) || ( icon && badgeItem ) ),
+		'pl-4 pr-3 py-3': size === 'md' && ! ( icon && useSwitch ),
+		'p-4': size === 'md' && ( ( icon && useSwitch ) || ( icon && badgeItem ) ),
+	};
+
 	return (
 		<label
 			className={ cn(
@@ -405,8 +415,7 @@ export const RadioButtonComponent = (
 					borderOn &&
 					checkedValue &&
 					'outline-border-interactive',
-				size === 'sm' ? 'px-3.5 py-2.5' : 'px-4 py-3',
-				'pr-12',
+				paddingClasses,
 				isDisabled && 'cursor-not-allowed opacity-40',
 				buttonWrapperClasses
 			) }