Disassemble the card code into components.

newfold-labs · Feb 20, 2024 · 87c268e · 87c268e
1 parent 37f5bb3
commit 87c268e
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 17 deletions.
diff --git a/...hOptionsTemplate/CardWithOptions/index.js → ...ngSPA/components/CardWithOptions/index.js b/...hOptionsTemplate/CardWithOptions/index.js → ...ngSPA/components/CardWithOptions/index.js
@@ -1,11 +1,11 @@
-import { OptionItem } from '../';
 import { memo } from '@wordpress/element';
+import OptionWithHeadingSubHeading from '../OptionWithHeadingSubHeading';
 
 const CardWithOptions = ( { title, options, selection, callback } ) => {
 	const buildOptions = () => {
 		return options.map( ( data, idx ) => {
 			return (
-				<OptionItem
+				<OptionWithHeadingSubHeading
 					key={ idx }
 					idx={ idx }
 					title={ data.title }

diff --git a/...sTemplate/CardWithOptions/stylesheet.scss → ...omponents/CardWithOptions/stylesheet.scss b/...sTemplate/CardWithOptions/stylesheet.scss → ...omponents/CardWithOptions/stylesheet.scss
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/index.js b/src/OnboardingSPA/components/CardWithOptionsTemplate/index.js
diff --git a/...rdWithOptionsTemplate/OptionItem/index.js → ...ents/OptionWithHeadingSubHeading/index.js b/...rdWithOptionsTemplate/OptionItem/index.js → ...ents/OptionWithHeadingSubHeading/index.js
@@ -2,13 +2,19 @@ import classNames from 'classnames';
 import { memo } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 
-const OptionItem = ( { idx, title, desc, isSelected, callback } ) => {
+const OptionWithHeadingSubHeading = ( {
+	idx,
+	title,
+	desc,
+	isSelected,
+	callback,
+} ) => {
 	return (
 		<div
 			key={ idx }
 			role="button"
 			tabIndex={ 0 }
-			className={ 'nfd-sg-card__data__option' }
+			className={ 'nfd__option_heading_subheading' }
 			onClick={ () => {
 				if ( callback && typeof callback === 'function' ) {
 					callback( idx + 1 );
@@ -22,25 +28,32 @@ const OptionItem = ( { idx, title, desc, isSelected, callback } ) => {
 		>
 			<div
 				className={ classNames(
-					'nfd-sg-card__data__option__wrapper',
-					isSelected && 'nfd-sg-card__data__option__wrapper--selected'
+					'nfd__option_heading_subheading__wrapper',
+					isSelected &&
+						'nfd__option_heading_subheading__wrapper--selected'
 				) }
 			>
-				<div className={ 'nfd-sg-card__data__option__left' }>
-					<div className={ 'nfd-sg-card__data__option__left_top' }>
+				<div className={ 'nfd__option_heading_subheading__left' }>
+					<div
+						className={ 'nfd__option_heading_subheading__left_top' }
+					>
 						{ title }
 					</div>
-					<div className={ 'nfd-sg-card__data__option__left_bottom' }>
+					<div
+						className={
+							'nfd__option_heading_subheading__left_bottom'
+						}
+					>
 						{ desc }
 					</div>
 				</div>
 				<Icon
-					className={ 'nfd-sg-card__data__option__right' }
+					className={ 'nfd__option_heading_subheading__right' }
 					icon={ chevronRight }
 				/>
 			</div>
 		</div>
 	);
 };
 
-export default memo( OptionItem );
+export default memo( OptionWithHeadingSubHeading );
diff --git a/...ptionsTemplate/OptionItem/stylesheet.scss → ...tionWithHeadingSubHeading/stylesheet.scss b/...ptionsTemplate/OptionItem/stylesheet.scss → ...tionWithHeadingSubHeading/stylesheet.scss
@@ -1,6 +1,6 @@
 $background-color: var(--nfd-onboarding-card-background);
 
-.nfd-sg-card__data__option {
+.nfd__option_heading_subheading {
 
 	&__wrapper {
 		display: flex;

diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -5,7 +5,7 @@ import getContents from './contents';
 import { HEADER_SITEGEN } from '../../../../constants';
 import { store as nfdOnboardingStore } from '../../../store';
 import CommonLayout from '../../../components/Layouts/Common';
-import { CardWithOptions } from '../../../components/CardWithOptionsTemplate';
+import CardWithOptions from '../../../components/CardWithOptions';
 import SiteGenLoader from '../../../components/Loaders/SiteGenLoader';
 import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi';
 

diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
@@ -56,8 +56,8 @@
 @import "../components/TextInput/TextInputSiteGen/stylesheet";
 @import "../components/ToggleDarkMode/stylesheet";
 @import "../components/Button/NextButtonSiteGen/stylesheet";
-@import "../components/CardWithOptionsTemplate/OptionItem/stylesheet";
-@import "../components/CardWithOptionsTemplate/CardWithOptions/stylesheet";
+@import "../components/OptionWithHeadingSubHeading/stylesheet";
+@import "../components/CardWithOptions/stylesheet";
 @import "../components/Loaders/SiteGenLoader/stylesheet";
 @import "../components/Footer/stylesheet";
 @import "../components/LivePreview/SiteGenCard/stylesheet";