From 34b0f86ce1a64a0ffbee25701480adc7961fa387 Mon Sep 17 00:00:00 2001
From: Cyrine Ben Romdhane <135605630+anicyne@users.noreply.github.com>
Date: Mon, 16 Dec 2024 13:41:27 +0100
Subject: [PATCH] Refactor nav and progress

Refs: #7036
---
 .../src/components/progress/shadow.tsx        |  2 +-
 .../themes/default/src/components/nav.scss    | 10 ++++-----
 .../default/src/components/progress.scss      | 22 +++++++++----------
 .../themes/ecl/src/ecl-ec/components/nav.scss |  2 +-
 .../ecl/src/ecl-ec/components/progress.scss   | 22 +++++++++----------
 .../themes/itzbund/src/components/nav.scss    |  2 +-
 .../itzbund/src/components/progress.scss      | 22 +++++++++----------
 7 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/packages/components/src/components/progress/shadow.tsx b/packages/components/src/components/progress/shadow.tsx
index 877e983de4..e72a30f1e1 100644
--- a/packages/components/src/components/progress/shadow.tsx
+++ b/packages/components/src/components/progress/shadow.tsx
@@ -126,7 +126,7 @@ export class KolProcess implements ProgressAPI {
 					max={this.state._max}
 					value={this.state._value}
 				></progress>
-				<span aria-live="polite" aria-relevant="removals text" class="visually-hidden">
+				<span class="kol-progress__span" aria-live="polite" aria-relevant="removals text" class="visually-hidden">
 					{this.state._liveValue} von {this.state._max} {this.state._unit}
 				</span>
 			</div>
diff --git a/packages/themes/default/src/components/nav.scss b/packages/themes/default/src/components/nav.scss
index ceea286a20..d1b8aab649 100644
--- a/packages/themes/default/src/components/nav.scss
+++ b/packages/themes/default/src/components/nav.scss
@@ -17,8 +17,8 @@
 			&--nested {
 				padding-left: rem(16);
 
-				a,
-				button {
+				.kol-link-wc,
+				.kol-button-wc {
 					font-weight: normal !important;
 					border-left-color: transparent !important;
 				}
@@ -31,12 +31,12 @@
 			}
 
 			&--item {
-				a:hover {
+				.kol-link-wc:hover {
 					text-decoration: underline;
 				}
 
-				a,
-				button {
+				.kol-link-wc,
+				.kol-button-wc {
 					align-items: center;
 					color: var(--color-primary);
 					display: flex;
diff --git a/packages/themes/default/src/components/progress.scss b/packages/themes/default/src/components/progress.scss
index 25e61f2940..5db340c418 100644
--- a/packages/themes/default/src/components/progress.scss
+++ b/packages/themes/default/src/components/progress.scss
@@ -5,7 +5,7 @@
 		font-family: var(--font-family);
 
 		&__progress,
-		span {
+		&__span {
 			display: block;
 			height: 0;
 			overflow: hidden;
@@ -17,17 +17,17 @@
 				stroke: var(--color-primary-variant);
 			}
 		}
-	}
 
-	svg line:first-child,
-	svg circle:first-child {
-		fill: transparent;
-		stroke: var(--color-mute-variant);
-	}
+		&__line line:first-child,
+		&__cycle circle:first-child {
+			fill: transparent;
+			stroke: var(--color-mute-variant);
+		}
 
-	svg line:last-child,
-	svg circle:last-child {
-		fill: transparent;
-		stroke: var(--color-primary);
+		&__line line:last-child,
+		&__cycle circle:last-child {
+			fill: transparent;
+			stroke: var(--color-primary);
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/nav.scss b/packages/themes/ecl/src/ecl-ec/components/nav.scss
index c794a16e47..dbe74345ad 100644
--- a/packages/themes/ecl/src/ecl-ec/components/nav.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/nav.scss
@@ -48,7 +48,7 @@
 				flex-grow: 1;
 			}
 
-			&--expand-button button {
+			&--expand-button .kol-button-wc {
 				background-color: var(--color-blue-130);
 				margin: auto;
 				height: 100%;
diff --git a/packages/themes/ecl/src/ecl-ec/components/progress.scss b/packages/themes/ecl/src/ecl-ec/components/progress.scss
index 1ba16c4ab3..63fbb29d68 100644
--- a/packages/themes/ecl/src/ecl-ec/components/progress.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/progress.scss
@@ -5,7 +5,7 @@
 		font-family: var(--font-family);
 
 		&__progress,
-		span {
+		&__span {
 			display: block;
 			height: 0;
 			overflow: hidden;
@@ -15,17 +15,17 @@
 		&__progress {
 			display: none;
 		}
-	}
 
-	svg line:first-child,
-	svg circle:first-child {
-		fill: transparent;
-		stroke: var(--color-grey-25);
-	}
+		&__line line:first-child,
+		&__circle circle:first-child {
+			fill: transparent;
+			stroke: var(--color-grey-25);
+		}
 
-	svg line:last-child,
-	svg circle:last-child {
-		stroke: var(--color-blue-130);
-		fill: transparent;
+		&__line line:last-child,
+		&__circle circle:last-child {
+			stroke: var(--color-blue-130);
+			fill: transparent;
+		}
 	}
 }
diff --git a/packages/themes/itzbund/src/components/nav.scss b/packages/themes/itzbund/src/components/nav.scss
index 88ecbd5b8a..a74be0c2ad 100644
--- a/packages/themes/itzbund/src/components/nav.scss
+++ b/packages/themes/itzbund/src/components/nav.scss
@@ -56,7 +56,7 @@
 					border-bottom: 0.375em solid var(--color-citrin);
 				}
 
-				a {
+				.kol-link-wc {
 					border-radius: var(--border-radius);
 					background-color: var(--color-petrol);
 					border: rem(1) solid transparent;
diff --git a/packages/themes/itzbund/src/components/progress.scss b/packages/themes/itzbund/src/components/progress.scss
index bbb37cc082..8e5864f4cb 100644
--- a/packages/themes/itzbund/src/components/progress.scss
+++ b/packages/themes/itzbund/src/components/progress.scss
@@ -5,7 +5,7 @@
 		--kolibri-text-label-padding: #{rem(60)};
 
 		&__progress,
-		span {
+		&__span {
 			display: block;
 			height: 0;
 			overflow: hidden;
@@ -15,17 +15,17 @@
 		&__progress {
 			display: none;
 		}
-	}
 
-	svg line:first-child,
-	svg circle:first-child {
-		fill: transparent;
-		stroke: var(--color-fluorit);
-	}
+		&__line line:first-child,
+		&__circle circle:first-child {
+			fill: transparent;
+			stroke: var(--color-fluorit);
+		}
 
-	svg line:last-child,
-	svg circle:last-child {
-		stroke: var(--color-achat);
-		fill: transparent;
+		&__line line:last-child,
+		&__circle circle:last-child {
+			stroke: var(--color-achat);
+			fill: transparent;
+		}
 	}
 }