Merge pull request #10796 from overleaf/ds-plans-page-btn-tag

Replaced the a tag with button tag for plans page plans options

GitOrigin-RevId: 4717067ce0fc9209a65c0d323602d834a90951fc

services/web/app/views/subscriptions/_plans_page_mixins.pug

@@ -167,17 +167,16 @@ mixin currency_dropdown
 mixin plan_switch(location)
 	ul.nav.nav-pills
 		li(ng-class="{'active': ui.view == 'monthly'}")
-			a.btn.btn-default-outline(
-				href="#"
+			button.btn-default-outline(
 				ng-click="switchToMonthly($event,'" + location + "')"
 			) #{translate("monthly")}
 		li(ng-class="{'active': ui.view == 'annual'}")
-			a.btn.btn-default-outline(
+			button.btn-default-outline(
 				href="#"
 				ng-click="switchToAnnual($event,'" + location + "')"
 			) #{translate("annual")}
 		li(ng-class="{'active': ui.view == 'student'}")
-			a.btn.btn-default-outline(
+			button.btn-default-outline(
 				href="#"
 				ng-click="switchToStudent($event,'" + location + "')"
 			) #{translate("special_price_student")}

services/web/app/views/subscriptions/plans-marketing/_mixins.pug

@@ -201,13 +201,9 @@ mixin currency_dropdown
 mixin plan_switch(location)
 	ul.nav.nav-pills(class=(location === 'card' ? "above-cards" : ""))
 		li.active(data-ol-view-tab='monthly')
-			a.btn.btn-default-outline(
-				href="#"
-			) #{translate("monthly")}
+			button.btn-default-outline #{translate("monthly")}
 		li(data-ol-view-tab='annual' class=(location === 'card' ? "annual-saving-tooltip-container" : ""))
-			a.btn.btn-default-outline(
-				href="#"
-			) #{translate("annual")}
+			button.btn-default-outline #{translate("annual")}
 			if (location === 'card')
 				.tooltip.in.bottom.annual-saving-tooltip(
 					role="tooltip"
@@ -219,9 +215,7 @@ mixin plan_switch(location)
 						span(hidden data-ol-view="annual") #{translate("saving_20_percent")}
 						span(hidden data-ol-view="student") #{translate("save_20_percent_by_paying_annually")}
 		li(data-ol-view-tab='student')
-			a.btn.btn-default-outline(
-				href="#"
-			) #{translate("special_price_student")}
+			button.btn-default-outline #{translate("special_price_student")}
 
 mixin allCardsAndControls(controlsRowSpaced, listLocation)
 	- var location = listLocation ? 'card_' + listLocation : 'card'

services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug

@@ -10,9 +10,7 @@ include ./_mixins
 				event-tracking-trigger="click"
 				event-segmentation='{"button": "individual", "plans-page-layout-v2-annual": "new-plans-page"}'
 			)
-				a.btn.btn-default-outline(
-					href="#"
-				) #{translate("indvidual_plans")}
+				button.btn.btn-default-outline #{translate("indvidual_plans")}
 			li.plans-v2-top-switch-group(
 				data-ol-plans-v2-view-tab='group'
 				event-tracking="plans-page-toggle-plan"
@@ -20,7 +18,7 @@ include ./_mixins
 				event-tracking-trigger="click"
 				event-segmentation='{"button": "group", "plans-page-layout-v2-annual": "new-plans-page"}'
 			)
-				a.btn.btn-default-outline(
+				button.btn.btn-default-outline(
 					href="#"
 				)
 					span #{translate("group_plans")} 
@@ -32,7 +30,7 @@ include ./_mixins
 				event-tracking-trigger="click"
 				event-segmentation='{"button": "student", "plans-page-layout-v2-annual": "new-plans-page"}'
 			)
-				a.btn.btn-default-outline(
+				button.btn.btn-default-outline(
 					href="#"
 				) #{translate("student_plans")}
 

services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js

@@ -58,7 +58,7 @@ function setUpTabSwitching() {
   document.querySelectorAll('[data-ol-plans-v2-view-tab]').forEach(el => {
     const viewTab = el.getAttribute('data-ol-plans-v2-view-tab')
 
-    el.querySelector('a').addEventListener('click', function (e) {
+    el.querySelector('button').addEventListener('click', function (e) {
       e.preventDefault()
       eventTracking.send(
         'subscription-funnel',

services/web/frontend/js/pages/user/subscription/plans.js

@@ -28,7 +28,7 @@ function setUpViewSwitching(liEl) {
   const plansPageV2SplitTestVariant =
     getMeta('ol-splitTestVariants')?.[PLANS_PAGE_LAYOUT_V2_ANNUAL] ?? 'default'
   const view = liEl.getAttribute('data-ol-view-tab')
-  liEl.querySelector('a').addEventListener('click', function (e) {
+  liEl.querySelector('button').addEventListener('click', function (e) {
     e.preventDefault()
     eventTracking.send('subscription-funnel', 'plans-page', `${view}-prices`)
     eventTracking.sendMB('plans-page-toggle', {

services/web/frontend/stylesheets/app/plans-v2.less

@@ -48,7 +48,7 @@
       border-bottom-right-radius: @plans-v2-top-switch-item-border-radius;
     }
 
-    a {
+    button {
       padding: 4px 16px;
       height: 100%;
 
@@ -69,7 +69,7 @@
     &.active {
       background-color: @ol-blue-gray-4;
 
-      a.btn-default-outline {
+      button.btn-default-outline {
         color: @white;
       }
     }
@@ -106,7 +106,7 @@
 
       &.plans-v2-top-switch-individual,
       &.plans-v2-top-switch-student {
-        a {
+        button {
           display: flex;
           align-items: center;
           justify-content: center;
@@ -114,7 +114,7 @@
         }
       }
 
-      a {
+      button {
         white-space: unset;
         padding: 4px 8px;
         font-size: 14px;

services/web/frontend/stylesheets/app/plans.less

@@ -237,7 +237,7 @@
 @media (max-width: @screen-xs-max) {
   .plans ul.nav-pills {
     li {
-      a {
+      button {
         font-size: @font-size-small;
         padding: 8px 10px;
       }

services/web/frontend/stylesheets/components/navs-ol.less

@@ -1,6 +1,6 @@
 .nav-pills {
   > li {
-    > a {
+    > button {
       border-radius: @btn-border-radius-base;
     }
   }

services/web/frontend/stylesheets/components/navs.less

@@ -119,7 +119,7 @@
     float: left;
 
     // Links rendered as pills
-    > a {
+    > button {
       border-radius: @nav-pills-border-radius;
       border: 2px solid @nav-pills-link-color;
       color: @nav-pills-link-color;
@@ -135,7 +135,7 @@
     }
 
     // Active state
-    &.active > a {
+    &.active > button {
       &,
       &:hover,
       &:focus {