Merge pull request #142 from brainstormforce/uat-feedback-menu

Uat feedback radio
brainstormforce · Oct 16, 2024 · a505170 · a505170
2 parents 4dbcc3a + 2c7ce5e
commit a505170
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 29 deletions.
diff --git a/src/components/cards/widget-blocks.stories.jsx b/src/components/cards/widget-blocks.stories.jsx
@@ -280,7 +280,7 @@ const Template1 = () => {
 							useSwitch={ option.useSwitch }
 							className="px-2"
 							badgeItem={ option.bagde }
-							buttonWrapperClasses="bg-background-primary"
+							buttonWrapperClasses="bg-background-primary border-0"
 						/>
 					) ) }
 				</RadioButton.Group>

diff --git a/src/components/radio-button/radio-button.jsx b/src/components/radio-button/radio-button.jsx
@@ -222,10 +222,11 @@ const RadioButtonComponent = (
 				className={ cn(
 					! inlineIcon && 'space-y-1.5 mt-[2px]',
 					reversePosition && ( useSwitch ? 'ml-10' : 'ml-4' ),
-					inlineIcon && 'flex gap-2'
+					inlineIcon && 'flex gap-2',
+					inlineIcon && ! label.description && 'items-center'
 				) }
 			>
-				{ icon && <span>{ icon } </span> }
+				{ icon && <>{ icon }</> }
 				<div className={ cn( 'space-y-1.5' ) }>
 					<p
 						className={ cn(
@@ -280,13 +281,13 @@ const RadioButtonComponent = (
 				'inline-flex items-center relative cursor-pointer transition-all duration-300',
 				!! label && 'items-start justify-between',
 				minWidth && 'min-w-[180px]',
-				buttonWrapperClasses,
 				borderOn &&
 					'border border-border-subtle border-solid rounded-md shadow-sm hover:ring-2 hover:ring-border-interactive',
 				borderOn && checkedValue && 'ring-2 ring-border-interactive',
 				size === 'sm' ? 'px-3 py-3' : 'px-4 py-4',
 				'pr-12',
-				isDisabled && 'cursor-not-allowed opacity-40'
+				isDisabled && 'cursor-not-allowed opacity-40',
+				buttonWrapperClasses
 			) }
 			htmlFor={ radioButtonId }
 			onClick={ handleLabelClick } // Toggle switch when label is clicked
@@ -306,10 +307,12 @@ const RadioButtonComponent = (
 				<div className="absolute mr-0.5 bottom-1.5 right-3">
 					<Tooltip
 						arrow
-						title={ info?.heading }
-						content={ info?.description }
 						triggers={ [ 'hover', 'focus' ] }
 						placement="top"
+						label={ {
+							heading: info?.heading,
+							description: info?.description,
+						} }
 					>
 						<Info
 							className={ cn(

diff --git a/src/templates/dashboard-astra/dashboard-astra.stories.js b/src/templates/dashboard-astra/dashboard-astra.stories.js
@@ -489,7 +489,7 @@ export const AstraDashboard = () => {
 												className="px-2"
 												badgeItem={ option.badge }
 												disabled={ option.disabled }
-												buttonWrapperClasses="bg-background-primary rounded-md shadow-sm"
+												buttonWrapperClasses="bg-background-primary rounded-md shadow-sm border-0"
 											/>
 										)
 									) }

diff --git a/src/templates/dashboard-spectra/dashboard-spectra.stories.js b/src/templates/dashboard-spectra/dashboard-spectra.stories.js
@@ -550,7 +550,7 @@ export const SpectraDashboard = () => {
 												useSwitch={ option.useSwitch }
 												className="px-2"
 												badgeItem={ option.bagde }
-												buttonWrapperClasses="bg-background-primary"
+												buttonWrapperClasses="bg-background-primary border-0"
 											/>
 										)
 									) }

diff --git a/src/templates/onboarding-backup/onboarding-backup.stories.js b/src/templates/onboarding-backup/onboarding-backup.stories.js
@@ -96,7 +96,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Email2` }
@@ -109,7 +109,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Email3` }
@@ -130,7 +130,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Email4` }
@@ -143,7 +143,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Email5` }
@@ -156,7 +156,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Email6` }
@@ -177,7 +177,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Email7` }
@@ -190,7 +190,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Email8` }
@@ -211,7 +211,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Email9` }
@@ -224,7 +224,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Email11` }
@@ -237,7 +237,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Email12` }
@@ -250,7 +250,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Starter64` }
@@ -263,7 +263,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Email13` }
@@ -276,7 +276,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Email14` }
@@ -289,7 +289,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <SureEmailIcon /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 						</RadioButton.Group>
 					</div>

diff --git a/src/templates/onboarding-import/onboarding-import.stories.js b/src/templates/onboarding-import/onboarding-import.stories.js
@@ -66,20 +66,23 @@ const Template = ( args ) => {
 								heading: `SEOPress`,
 							} }
 							borderOn={ true }
+							buttonWrapperClasses={ 'border-0' }
 						/>
 						<RadioButton.Button
 							value="aioSeo"
 							label={ {
 								heading: `AIO SEO`,
 							} }
 							borderOn={ true }
+							buttonWrapperClasses={ 'border-0' }
 						/>
 						<RadioButton.Button
 							value="youstSeo"
 							label={ {
 								heading: `Yoast SEO`,
 							} }
 							borderOn={ true }
+							buttonWrapperClasses={ 'border-0' }
 						/>
 					</RadioButton.Group>
 				</div>

diff --git a/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.js b/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.js
@@ -97,7 +97,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <PrestoPlayerLogo /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Starter` }
@@ -119,7 +119,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <PrestoPlayerLogo /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `SureCart` }
@@ -141,7 +141,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <PrestoPlayerLogo /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Presto` }
@@ -163,7 +163,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <PrestoPlayerLogo /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Astra2` }
@@ -185,7 +185,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <PrestoPlayerLogo /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 							<RadioButton.Button
 								value={ `Starter2` }
@@ -207,7 +207,7 @@ const Template = ( args ) => {
 								borderOn
 								icon={ <PrestoPlayerLogo /> }
 								onChange={ () => {} }
-								buttonWrapperClasses="bg-white"
+								buttonWrapperClasses="bg-white border-0"
 							/>
 						</RadioButton.Group>
 					</div>