Merge pull request #343 from newfold-labs/enhance/add-slug-primary-se…

…condary-pills Add `data-slug` to primary and secondary chips
newfold-labs · Oct 25, 2023 · 531384a · 531384a
2 parents b73a552 + e6677c0
commit 531384a
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 42 deletions.
diff --git a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/index.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
@@ -128,6 +128,7 @@ const StepPrimarySetup = () => {
 			return (
 				<div
 					key={ types[ type ]?.slug }
+					data-slug={ types[ type ]?.slug }
 					tabIndex={ idx + 1 }
 					role="button"
 					className={ `${

diff --git a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/index.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
@@ -203,6 +203,7 @@ const StepSecondaryStep = () => {
 			return (
 				<div
 					key={ types[ type ]?.slug }
+					data-slug={ types[ type ]?.slug }
 					role="button"
 					tabIndex={ idx + 1 }
 					className={ `${
@@ -238,28 +239,28 @@ const StepSecondaryStep = () => {
 								<div className="category-scrolling-wrapper">
 									{ primaryTypesList &&
 										primaryTypesList.length > 1 && (
-										<div className="category-scrolling-wrapper__left-btn">
-											<span
-												className="category-scrolling-wrapper__left-btn-icon"
-												onClick={ () =>
-													changePrimaryType(
-														'back'
-													)
-												}
-												onKeyUp={ () =>
-													changePrimaryType(
-														'back'
-													)
-												}
-												role="button"
-												tabIndex={ 0 }
-												style={ {
-													backgroundImage:
+											<div className="category-scrolling-wrapper__left-btn">
+												<span
+													className="category-scrolling-wrapper__left-btn-icon"
+													onClick={ () =>
+														changePrimaryType(
+															'back'
+														)
+													}
+													onKeyUp={ () =>
+														changePrimaryType(
+															'back'
+														)
+													}
+													role="button"
+													tabIndex={ 0 }
+													style={ {
+														backgroundImage:
 															'var(--chevron-left-icon)',
-												} }
-											/>
-										</div>
-									) }
+													} }
+												/>
+											</div>
+										) }
 									<div className="category-scrolling-wrapper__type">
 										<span
 											className="category-scrolling-wrapper__type-icon"
@@ -273,28 +274,28 @@ const StepSecondaryStep = () => {
 									</div>
 									{ primaryTypesList &&
 										primaryTypesList.length > 1 && (
-										<div className="category-scrolling-wrapper__right-btn">
-											<span
-												className="category-scrolling-wrapper__right-btn-icon"
-												onClick={ () =>
-													changePrimaryType(
-														'next'
-													)
-												}
-												onKeyUp={ () =>
-													changePrimaryType(
-														'next'
-													)
-												}
-												role="button"
-												tabIndex={ 0 }
-												style={ {
-													backgroundImage:
+											<div className="category-scrolling-wrapper__right-btn">
+												<span
+													className="category-scrolling-wrapper__right-btn-icon"
+													onClick={ () =>
+														changePrimaryType(
+															'next'
+														)
+													}
+													onKeyUp={ () =>
+														changePrimaryType(
+															'next'
+														)
+													}
+													role="button"
+													tabIndex={ 0 }
+													style={ {
+														backgroundImage:
 															'var(--chevron-right-icon)',
-												} }
-											/>
-										</div>
-									) }
+													} }
+												/>
+											</div>
+										) }
 								</div>
 							) }
 						</div>