From 4261fca9af93d1159340851e9cd95170d66376df Mon Sep 17 00:00:00 2001
From: Cyrine Ben Romdhane <135605630+anicyne@users.noreply.github.com>
Date: Tue, 10 Dec 2024 14:03:55 +0100
Subject: [PATCH] Apply BEM refactoring to tree-item

Refs: #7036
---
 .../src/components/tree-item/component.tsx    | 20 +++---
 .../src/components/tree-item/shadow.tsx       |  1 -
 .../src/components/tree-item/style.scss       | 37 +++++-----
 .../test/__snapshots__/snapshot.spec.tsx.snap | 40 +++++------
 .../default/src/components/tree-item.scss     | 59 ++++++++--------
 .../ecl/src/ecl-ec/components/tree-item.scss  | 65 +++++++++---------
 .../ecl/src/ecl-eu/components/tree-item.scss  | 67 ++++++++++---------
 .../itzbund/src/components/tree-item.scss     | 66 +++++++++---------
 8 files changed, 181 insertions(+), 174 deletions(-)

diff --git a/packages/components/src/components/tree-item/component.tsx b/packages/components/src/components/tree-item/component.tsx
index 7411029f3d..2b87642742 100644
--- a/packages/components/src/components/tree-item/component.tsx
+++ b/packages/components/src/components/tree-item/component.tsx
@@ -4,6 +4,7 @@ import type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeIte
 import { validateActive, validateHref, validateLabel, validateOpen } from '../../schema';
 import { KolLinkWcTag, KolIconTag, KolTreeTag } from '../../core/component-names';
 import { nonce } from '../../utils/dev.utils';
+import clsx from 'clsx';
 
 @Component({
 	tag: `kol-tree-item-wc`,
@@ -19,19 +20,15 @@ export class KolTreeItemWc implements TreeItemAPI {
 	public render(): JSX.Element {
 		const { _href, _active, _hasChildren, _open, _label } = this.state;
 		return (
-			<Host onSlotchange={this.handleSlotchange.bind(this)} class="kol-tree-item-wc">
+			<Host onSlotchange={this.handleSlotchange.bind(this)} class="kol-tree-item">
 				<li
-					class="tree-item"
+					class="kol-tree-item__item"
 					style={{
 						'--level': `${this.level}`,
 					}}
 				>
 					<KolLinkWcTag
-						class={{
-							'tree-link': true,
-							'first-level': this.level === 0,
-							active: Boolean(_active),
-						}}
+						class={clsx('kol-tree-item__link', this.level === 0 && 'kol-tree-item__link--first-level', Boolean(_active) && 'kol-tree-item__link--active')}
 						_href={_href}
 						_label=""
 						_role="treeitem"
@@ -43,9 +40,12 @@ export class KolTreeItemWc implements TreeItemAPI {
 						<span slot="expert">
 							{_hasChildren && (
 								// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
-								<span class="toggle-button" onClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}>
+								<span
+									class="kol-tree-item__toggle-button"
+									onClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}
+								>
 									<KolIconTag
-										class="toggle-button-icon"
+										class="kol-tree-item__toggle-button-icon"
 										_icons={`codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`}
 										_label={'' /* Label deliberately left empty */}
 									/>
@@ -54,7 +54,7 @@ export class KolTreeItemWc implements TreeItemAPI {
 							{_label}
 						</span>
 					</KolLinkWcTag>
-					<ul hidden={!_hasChildren || !_open} role="group" id={this.groupId}>
+					<ul class="kol-tree-item__children" hidden={!_hasChildren || !_open} role="group" id={this.groupId}>
 						<slot />
 					</ul>
 				</li>
diff --git a/packages/components/src/components/tree-item/shadow.tsx b/packages/components/src/components/tree-item/shadow.tsx
index c57332699d..dfd144d717 100644
--- a/packages/components/src/components/tree-item/shadow.tsx
+++ b/packages/components/src/components/tree-item/shadow.tsx
@@ -58,7 +58,6 @@ export class KolTreeItem implements TreeItemProps {
 	public render(): JSX.Element {
 		return (
 			<KolTreeItemWcTag
-				class="kol-tree-item"
 				_active={this._active}
 				_label={this._label}
 				_open={this._open}
diff --git a/packages/components/src/components/tree-item/style.scss b/packages/components/src/components/tree-item/style.scss
index 213527c1b2..ec50c5cd08 100644
--- a/packages/components/src/components/tree-item/style.scss
+++ b/packages/components/src/components/tree-item/style.scss
@@ -2,30 +2,31 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-tree-item {
+		$root: &;
 		font-size: rem(16);
-	}
 
-	ul {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
+		&__link {
+			&--first-level .kol-link {
+				padding-left: rem(6);
+			}
 
-	.tree-link {
-		&.first-level > a {
-			padding-left: rem(6);
+			.kol-link {
+				padding-right: rem(6);
+				padding-left: calc(rem(22.4) * var(--level));
+				padding-top: rem(6.4);
+				padding-bottom: rem(6.4);
+			}
 		}
 
-		& > a {
-			padding-right: rem(6);
-			padding-left: calc(rem(22.4) * var(--level));
-			padding-top: rem(6.4);
-			padding-bottom: rem(6.4);
+		&__children {
+			margin: 0;
+			padding: 0;
+			list-style: none;
 		}
-	}
 
-	a .kol-span {
-		place-items: unset; // unset 'center' style from global layer
+		.kol-span {
+			place-items: unset; // unset 'center' style from global layer
+		}
 	}
 }
diff --git a/packages/components/src/components/tree-item/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/tree-item/test/__snapshots__/snapshot.spec.tsx.snap
index f239a23852..d9c2dc5988 100644
--- a/packages/components/src/components/tree-item/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/tree-item/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,15 +3,15 @@
 exports[`kol-tree-item should render with _label="Label" _href="https://example.com" _active=false 1`] = `
 <kol-tree-item>
   <template shadowrootmode="open">
-    <kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
+    <kol-tree-item-wc class="kol-tree-item">
       <!---->
-      <li class="tree-item" style="--level: 0;">
-        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="first-level tree-link">
+      <li class="kol-tree-item__item" style="--level: 0;">
+        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="kol-tree-item__link kol-tree-item__link--first-level">
           <span slot="expert">
             Label
           </span>
         </kol-link-wc>
-        <ul hidden="" id="tree-group-nonce" role="group">
+        <ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
           <slot></slot>
         </ul>
       </li>
@@ -23,15 +23,15 @@ exports[`kol-tree-item should render with _label="Label" _href="https://example.
 exports[`kol-tree-item should render with _label="Label" _href="https://example.com" _active=true 1`] = `
 <kol-tree-item>
   <template shadowrootmode="open">
-    <kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
+    <kol-tree-item-wc class="kol-tree-item">
       <!---->
-      <li class="tree-item" style="--level: 0;">
-        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="0" class="active first-level tree-link">
+      <li class="kol-tree-item__item" style="--level: 0;">
+        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="0" class="kol-tree-item__link kol-tree-item__link--active kol-tree-item__link--first-level">
           <span slot="expert">
             Label
           </span>
         </kol-link-wc>
-        <ul hidden="" id="tree-group-nonce" role="group">
+        <ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
           <slot></slot>
         </ul>
       </li>
@@ -43,15 +43,15 @@ exports[`kol-tree-item should render with _label="Label" _href="https://example.
 exports[`kol-tree-item should render with _label="Label" _href="https://example.com" _open=false 1`] = `
 <kol-tree-item>
   <template shadowrootmode="open">
-    <kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
+    <kol-tree-item-wc class="kol-tree-item">
       <!---->
-      <li class="tree-item" style="--level: 0;">
-        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="first-level tree-link">
+      <li class="kol-tree-item__item" style="--level: 0;">
+        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="kol-tree-item__link kol-tree-item__link--first-level">
           <span slot="expert">
             Label
           </span>
         </kol-link-wc>
-        <ul hidden="" id="tree-group-nonce" role="group">
+        <ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
           <slot></slot>
         </ul>
       </li>
@@ -63,15 +63,15 @@ exports[`kol-tree-item should render with _label="Label" _href="https://example.
 exports[`kol-tree-item should render with _label="Label" _href="https://example.com" _open=true 1`] = `
 <kol-tree-item>
   <template shadowrootmode="open">
-    <kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
+    <kol-tree-item-wc class="kol-tree-item">
       <!---->
-      <li class="tree-item" style="--level: 0;">
-        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="first-level tree-link">
+      <li class="kol-tree-item__item" style="--level: 0;">
+        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="kol-tree-item__link kol-tree-item__link--first-level">
           <span slot="expert">
             Label
           </span>
         </kol-link-wc>
-        <ul hidden="" id="tree-group-nonce" role="group">
+        <ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
           <slot></slot>
         </ul>
       </li>
@@ -83,15 +83,15 @@ exports[`kol-tree-item should render with _label="Label" _href="https://example.
 exports[`kol-tree-item should render with _label="Label" _href="https://example.com" 1`] = `
 <kol-tree-item>
   <template shadowrootmode="open">
-    <kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
+    <kol-tree-item-wc class="kol-tree-item">
       <!---->
-      <li class="tree-item" style="--level: 0;">
-        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="first-level tree-link">
+      <li class="kol-tree-item__item" style="--level: 0;">
+        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="kol-tree-item__link kol-tree-item__link--first-level">
           <span slot="expert">
             Label
           </span>
         </kol-link-wc>
-        <ul hidden="" id="tree-group-nonce" role="group">
+        <ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
           <slot></slot>
         </ul>
       </li>
diff --git a/packages/themes/default/src/components/tree-item.scss b/packages/themes/default/src/components/tree-item.scss
index 551edad846..4cedbfc561 100644
--- a/packages/themes/default/src/components/tree-item.scss
+++ b/packages/themes/default/src/components/tree-item.scss
@@ -1,45 +1,44 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	.tree-link {
-		display: block;
-		border: rem(1) solid transparent;
+	.kol-tree-item {
+		$root: &;
 
-		&:hover,
-		&:focus-within {
-			border: rem(1) solid var(--color-primary);
-			background-color: var(--color-primary-variant);
+		&__link {
+			display: block;
+			border: rem(1) solid transparent;
 
-			& > a {
-				outline-offset: 0;
-			}
+			.kol-link {
+				display: block;
+				color: var(--color-text);
+				text-decoration: none;
+				text-align: left;
+
+				@at-root #{$root}__toggle-button {
+					display: inline-block;
 
-			& > a,
-			.toggle-button {
-				color: var(--color-light);
+					&:hover {
+						transform: scale(1.3);
+					}
+				}
 			}
-		}
 
-		&.active {
-			background-color: var(--color-primary);
+			&:hover,
+			&:focus-within {
+				border: rem(1) solid var(--color-primary);
+				background-color: var(--color-primary-variant);
 
-			a,
-			.toggle-button {
-				color: var(--color-light);
+				.kol-link {
+					outline-offset: 0;
+					color: var(--color-light);
+				}
 			}
-		}
-
-		a {
-			display: block;
-			color: var(--color-text);
-			text-decoration: none;
-			text-align: left;
 
-			.toggle-button {
-				display: inline-block;
+			&--active {
+				background-color: var(--color-primary);
 
-				&:hover {
-					transform: scale(1.3);
+				.kol-link {
+					color: var(--color-light);
 				}
 			}
 		}
diff --git a/packages/themes/ecl/src/ecl-ec/components/tree-item.scss b/packages/themes/ecl/src/ecl-ec/components/tree-item.scss
index 62923162b3..02c59caa93 100644
--- a/packages/themes/ecl/src/ecl-ec/components/tree-item.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/tree-item.scss
@@ -1,52 +1,55 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	.tree-item {
-		ul {
+	.kol-tree-item {
+		$root: &;
+
+		&__children {
 			display: flex;
 			flex-direction: column;
 		}
-	}
 
-	.tree-link {
-		display: block;
-		border: rem(2) solid transparent;
+		&__link {
+			display: block;
+			border: rem(2) solid transparent;
 
-		&:hover,
-		&:focus-within {
-			background-color: var(--color-sky);
-			border: rem(2) solid var(--color-yellow-120);
+			&:hover,
+			&:focus-within {
+				background-color: var(--color-sky);
+				border: rem(2) solid var(--color-yellow-120);
 
-			& > a {
-				color: var(--color-black);
+				.kol-link {
+					color: var(--color-black);
+				}
 			}
-		}
 
-		&.active {
-			font-weight: 700;
-			background-color: var(--color-yellow);
+			&--active {
+				font-weight: 700;
+				background-color: var(--color-yellow);
 
-			a {
-				color: var(--color-black);
+				.kol-link {
+					color: var(--color-black);
+					background-color: var(--color-yellow);
+				}
 			}
-		}
 
-		a {
-			display: block;
-			color: var(--color-black);
-			text-decoration: none;
-			text-align: left;
+			.kol-link {
+				display: block;
+				color: var(--color-black);
+				text-decoration: none;
+				text-align: left;
 
-			.toggle-button {
-				display: inline-block;
+				@at-root #{$root}__toggle-button {
+					display: inline-block;
 
-				&:hover {
-					transform: scale(1.3);
+					&:hover {
+						transform: scale(1.3);
+					}
 				}
-			}
 
-			&:focus {
-				color: var(--color-black);
+				&:focus {
+					color: var(--color-black);
+				}
 			}
 		}
 	}
diff --git a/packages/themes/ecl/src/ecl-eu/components/tree-item.scss b/packages/themes/ecl/src/ecl-eu/components/tree-item.scss
index 2cd9db7d18..0adc1fd566 100644
--- a/packages/themes/ecl/src/ecl-eu/components/tree-item.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/tree-item.scss
@@ -1,53 +1,56 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	.tree-item {
-		ul {
+	.kol-tree-item {
+		$root: &;
+
+		&__children {
 			display: flex;
 			flex-direction: column;
 		}
-	}
 
-	.tree-link {
-		display: block;
-		border: rem(2) solid transparent;
-		border-radius: rem(4);
+		&__link {
+			display: block;
+			border: rem(2) solid transparent;
+			border-radius: rem(4);
 
-		&:hover,
-		&:focus-within {
-			background-color: var(--color-sky);
-			border: rem(2) solid var(--color-blue);
+			&:hover,
+			&:focus-within {
+				background-color: var(--color-sky);
+				border: rem(2) solid var(--color-blue);
 
-			& > a {
-				color: var(--color-black);
+				.kol-link {
+					color: var(--color-black);
+				}
 			}
-		}
 
-		&.active {
-			background-color: var(--color-yellow);
+			&--active {
+				background-color: var(--color-yellow);
 
-			a {
-				color: var(--color-black);
+				.kol-link {
+					background-color: var(--color-yellow);
+					color: var(--color-black);
+				}
 			}
-		}
 
-		a {
-			display: block;
-			color: var(--color-black);
-			text-decoration: none;
-			text-align: left;
+			.kol-link {
+				display: block;
+				color: var(--color-black);
+				text-decoration: none;
+				text-align: left;
 
-			.toggle-button {
-				display: inline-block;
-				color: var(--color-blue);
+				@at-root #{$root}__toggle-button {
+					display: inline-block;
+					color: var(--color-blue);
 
-				&:hover {
-					transform: scale(1.3);
+					&:hover {
+						transform: scale(1.3);
+					}
 				}
-			}
 
-			&:focus {
-				color: var(--color-black);
+				&:focus {
+					color: var(--color-black);
+				}
 			}
 		}
 	}
diff --git a/packages/themes/itzbund/src/components/tree-item.scss b/packages/themes/itzbund/src/components/tree-item.scss
index 666f1219c4..9f4811cf0f 100644
--- a/packages/themes/itzbund/src/components/tree-item.scss
+++ b/packages/themes/itzbund/src/components/tree-item.scss
@@ -1,52 +1,54 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	.tree-item {
-		ul {
+	.kol-tree-item {
+		$root: &;
+
+		&__children {
 			display: flex;
 			flex-direction: column;
 		}
-	}
 
-	.tree-link {
-		display: block;
-		border: rem(2) solid transparent;
+		&__link {
+			display: block;
+			border: rem(2) solid transparent;
 
-		&:hover,
-		&:focus-within {
-			border: rem(2) solid var(--border-color);
+			.kol-link {
+				display: block;
+				color: var(--color-black);
+				text-decoration: none;
+				text-align: left;
 
-			& > a {
-				outline-offset: 0;
-				color: var(--color-petrol);
-			}
-		}
+				@at-root #{$root}__toggle-button {
+					display: inline-block;
+					color: var(--color-blue);
 
-		&.active {
-			background-color: var(--color-anthrazit);
+					&:hover {
+						transform: scale(1.3);
+					}
+				}
 
-			a {
-				color: var(--color-weiss);
+				&:focus {
+					color: var(--color-petrol);
+				}
 			}
-		}
-
-		a {
-			display: block;
-			color: var(--color-black);
-			text-decoration: none;
-			text-align: left;
 
-			.toggle-button {
-				display: inline-block;
-				color: var(--color-blue);
+			&:hover,
+			&:focus-within {
+				border: rem(2) solid var(--border-color);
 
-				&:hover {
-					transform: scale(1.3);
+				.kol-link {
+					outline-offset: 0;
+					color: var(--color-petrol);
 				}
 			}
 
-			&:focus {
-				color: var(--color-petrol);
+			&--active {
+				background-color: var(--color-anthrazit);
+
+				.kol-link {
+					color: var(--color-weiss);
+				}
 			}
 		}
 	}