From e6677c09ec0ed4166cd1f45255d1f4c122d5f69b Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Wed, 25 Oct 2023 17:45:15 +0530
Subject: [PATCH] Add data-slug to primary and secondary chips

---
 .../SiteTypeSetup/PrimarySite/index.js        |  1 +
 .../SiteTypeSetup/SecondarySite/index.js      | 85 ++++++++++---------
 2 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/index.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
index 1158e2bc4..6a4cc0dc4 100644
--- 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
index 871f07c84..0ef3af4cd 100644
--- 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>