From 2580c82d0614b69dc8500d1da10ccfd9badb6208 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Mon, 21 Jun 2021 19:46:17 -0400
Subject: [PATCH] refactor: rename Tabber classes to be more semantic

---
 modules/ext.tabberNeue.js   |  8 ++++----
 modules/ext.tabberNeue.less | 14 +++++++-------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/modules/ext.tabberNeue.js b/modules/ext.tabberNeue.js
index cc7511b..55d6ee7 100644
--- a/modules/ext.tabberNeue.js
+++ b/modules/ext.tabberNeue.js
@@ -25,7 +25,7 @@ function initTabber( tabber ) {
 			tabPanel.setAttribute( 'aria-hidden', true );
 
 			tab.innerText = tabPanel.title;
-			tab.classList.add( 'tabber__item' );
+			tab.classList.add( 'tabber__tab' );
 			tab.setAttribute( 'title', tabPanel.title );
 			tab.setAttribute( 'role', 'tab' );
 			tab.setAttribute( 'href', '#' + hash );
@@ -39,7 +39,7 @@ function initTabber( tabber ) {
 		tabList.append( fragment );
 
 		container.classList.add( 'tabber__header' );
-		tabList.classList.add( 'tabber__nav' );
+		tabList.classList.add( 'tabber__tabs' );
 		tabList.setAttribute( 'role', 'tablist' );
 		prevButton.classList.add( 'tabber__header__prev' );
 		nextButton.classList.add( 'tabber__header__next' );
@@ -113,7 +113,7 @@ function initTabber( tabber ) {
 	 * @param {string} targetHash
 	 */
 	function showPanel( targetHash ) {
-		const ACTIVETABCLASS = 'tabber__item--active',
+		const ACTIVETABCLASS = 'tabber__tab--active',
 			ACTIVEPANELCLASS = 'tabber__panel--active',
 			targetPanel = document.getElementById( targetHash ),
 			targetTab = document.getElementById( 'tab-' + targetHash ),
@@ -137,7 +137,7 @@ function initTabber( tabber ) {
 			section.style.height = targetPanel.offsetHeight + 'px';
 		}
 
-		// Add active class to the tab item
+		// Add active class to the tab
 		targetTab.classList.add( ACTIVETABCLASS );
 		targetTab.setAttribute( 'aria-selected', true );
 		targetPanel.classList.add( ACTIVEPANELCLASS );
diff --git a/modules/ext.tabberNeue.less b/modules/ext.tabberNeue.less
index d94ac74..6196557 100644
--- a/modules/ext.tabberNeue.less
+++ b/modules/ext.tabberNeue.less
@@ -6,7 +6,7 @@
 	overflow: hidden;
 	flex-direction: column;
 
-	&__nav {
+	&__tabs {
 		display: flex;
 		overflow: auto hidden;
 		box-shadow: inset 0 -1px 0 0 #a2a9b1;
@@ -64,17 +64,17 @@
 			}
 		}
 
-		&--prev-visible .tabber__nav {
+		&--prev-visible .tabber__tabs {
 			-webkit-mask-image: linear-gradient( 90deg, transparent, #000 20% );
 			mask-image: linear-gradient( 90deg, transparent, #000 20% );
 		}
 
-		&--next-visible .tabber__nav {
+		&--next-visible .tabber__tabs {
 			-webkit-mask-image: linear-gradient( 90deg, #000 80%, transparent );
 			mask-image: linear-gradient( 90deg, #000 80%, transparent );
 		}
 
-		&--prev-visible.tabber__header--next-visible .tabber__nav {
+		&--prev-visible.tabber__header--next-visible .tabber__tabs {
 			-webkit-mask-image: linear-gradient( 90deg, transparent, #000 20%, #000 80%, transparent );
 			mask-image: linear-gradient( 90deg, transparent, #000 20%, #000 80%, transparent );
 		}
@@ -99,7 +99,7 @@
 		}
 	}
 
-	&__item {
+	&__tab {
 		display: inline-flex;
 		align-items: center;
 		padding: 5px 12px;
@@ -140,7 +140,7 @@
 
 @media ( hover: hover ) {
 	.tabber {
-		&__item {
+		&__tab {
 			&:hover {
 				box-shadow: inset 0 -2px 0 0 #447ff5;
 				color: #447ff5;
@@ -160,7 +160,7 @@
 	.tabber {
 		&__header,
 		&__section,
-		&__nav {
+		&__tabs {
 			scroll-behavior: smooth;
 		}
 	}