From c20fb1cb79fdc198157c584beac4fb1067ff91fa Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Mon, 15 Jul 2024 08:29:28 -0500
Subject: [PATCH] Merge pull request #19376 from
 overleaf/jel-light-touch-remove-unused

[web] Remove unused code for light touch plans page redesign

GitOrigin-RevId: 9e160ed59eec5f8a700b88c0591fb0200c2dc403
---
 .../plans/light-redesign/_mixins.pug          | 46 +++++--------------
 .../app/plans/plans-light-touch-redesign.less | 12 ++---
 2 files changed, 17 insertions(+), 41 deletions(-)

diff --git a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug
index 29373a8a7c..6df523decc 100644
--- a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug
+++ b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug
@@ -28,31 +28,20 @@ mixin currency_and_payment_methods()
 
 
 mixin plans_table(period, config)
-	- var baseColspan = config.baseColspan || 1
 	- var maxColumn = config.maxColumn || 4
 	- var tableHeadKeys = Object.keys(config.tableHead)
+	- var highlightedColKey = tableHeadKeys[config.highlightedColumn.index]
+
 	tr(class=`plans-table-cols-${tableHeadKeys.length}`)
-		th(colspan=baseColspan)
+		th
 		- for (var i = 0; i < maxColumn; i++)
 			- var tableHeadKey = tableHeadKeys[i]
 			- var tableHeadOptions = Object.values(config.tableHead)[i] || {}
-			- var colspan = tableHeadOptions.colspan || baseColspan
-			- var highlighted = i === config.highlightedColumn.index
+			- var highlighted = highlightedColKey === tableHeadKey
 			- var eventTrackingKey = config.eventTrackingKey
 			- var additionalEventSegmentation = config.additionalEventSegmentation || {}
-			-
-				if (highlighted) {
-					var thClass = 'plans-table-green-highlighted'
-				} else {
-					var thClass = ''
-				}
-				thClass += ' plans-table-column-header'
-				if (colspan > 1) {
-					var scopeValue = 'colgroup'
-				}
-				else {
-					var scopeValue = 'col'
-				}
+			- var thClass = highlighted ? 'plans-table-green-highlighted' : ''
+
 			case tableHeadKey
 				when 'individual_free'
 					- var ariaLabel = translate("free")
@@ -77,8 +66,7 @@ mixin plans_table(period, config)
 			th(
 				aria-label=ariaLabel
 				class=thClass
-				colspan=colspan
-				scope=scopeValue
+				scope="col"
 			)
 				.plans-table-th
 					if (highlighted)
@@ -104,7 +92,7 @@ mixin plans_table(period, config)
 							+table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
 
 	for featuresPerSection in config.features
-		- var dividerColspan = Object.values(config.tableHead).reduce((prev, curr) => (prev) + (curr.colspan || 1), baseColspan)
+		- var dividerColspan = Object.values(config.tableHead).length + 1
 		if featuresPerSection.divider
 			tr.plans-table-divider
 				td(
@@ -134,12 +122,10 @@ mixin plans_table(period, config)
 				class=`plans-table-cols-${tableHeadKeys.length}`
 			)
 				th(
-					class="plans-table-row-header"
 					event-tracking="plans-page-table"
 					event-tracking-trigger="hover"
 					event-tracking-ga="subscription-funnel"
 					event-tracking-label=`${feature.feature}`
-					colspan=baseColspan
 					scope="row"
 				)
 					.plans-table-feature-name
@@ -165,19 +151,9 @@ mixin plans_table(period, config)
 							| #{translate(feature.feature)}
 				for plan, planIndex in Object.keys(feature.plans)
 					- var tableHeadOptions = Object.values(config.tableHead)[planIndex] || {}
-					- var colspan = tableHeadOptions.colspan || baseColspan
-					-
-						if (planIndex === config.highlightedColumn.index) {
-							var tdClass = 'plans-table-green-highlighted'
-						} else if (planIndex === config.highlightedColumn.index - 1) {
-							var tdClass = 'plans-table-cell-before-green-highlighted-column'
-						} else {
-							var tdClass = ''
-						}
-					td(
-						class=tdClass
-						colspan=colspan
-					)
+					- var tdClass = planIndex === config.highlightedColumn.index ? 'plans-table-green-highlighted' : ''
+
+					td(class=tdClass)
 						+table_cell(feature, plan)
 
 mixin table_individual(period)
diff --git a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less b/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less
index 6740ded870..a9e19c1159 100644
--- a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less
+++ b/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less
@@ -557,7 +557,7 @@
     // See https://stackoverflow.com/a/56913789 for more details
     height: 100%;
 
-    .plans-table-row-header {
+    th[scope='row'] {
       font-weight: 500;
     }
 
@@ -616,12 +616,12 @@
       }
     }
 
-    .plans-table-column-header,
+    th[scope='col'],
     td {
       text-align: center;
     }
 
-    .plans-table-column-header {
+    th[scope='col'] {
       font-family: @headings-font-family;
       font-size: @font-size-h2;
       font-weight: @headings-font-weight;
@@ -650,7 +650,7 @@
 
       // css hack for table border-radius on the first feature name
       &:nth-child(2) {
-        .plans-table-row-header:first-child {
+        th[scope='row']:first-child {
           .plans-table-feature-name {
             border-top-left-radius: @plans-table-border-radius;
 
@@ -798,7 +798,7 @@
         }
       }
 
-      .plans-table-column-header {
+      th[scope='col'] {
         font-size: 12px;
       }
 
@@ -811,7 +811,7 @@
       // the width: 100vw rule will enhance the flex-flow on the tr by ensuring the feature name (first column of each feature row)
       // will have the full width of viewport,
       // and making the first td appear like the it is in its own row (although it's technically still on the same tr as the other tds)
-      .plans-table-row-header {
+      th[scope='row'] {
         width: 100vw;
 
         span.plans-table-feature-name {