Merge pull request #20324 from overleaf/jel-plans-toggle

[web] Use input for period toggle on new plans

GitOrigin-RevId: 0e1b76d92aa2143eb6721b9b2cd19505803fb153

services/web/frontend/stylesheets/app/plans/plans-new-design.less

@@ -214,8 +214,8 @@
   }
 
   .plans-new-period-switcher-container {
+    position: relative;
     display: inline-flex;
-    justify-content: center;
     background-color: var(--neutral-10);
     border-radius: var(--border-radius-full-new);
     padding: var(--spacing-03);
@@ -227,46 +227,50 @@
       margin-bottom: var(--spacing-09);
     }
 
-    .plans-new-period-switcher {
+    label {
+      display: inline-flex;
+      align-items: center;
+      margin: 0;
       font-size: var(--font-size-05);
       font-weight: 600;
       line-height: var(--line-height-04);
       text-align: center;
       padding: var(--spacing-01) var(--spacing-04);
       border-radius: var(--border-radius-full-new);
-      display: flex;
-      align-items: center;
-      border: unset;
-      background-color: unset;
 
       &:hover {
         background-color: var(--neutral-20);
+        cursor: pointer;
       }
+    }
 
-      &.active {
-        background-color: var(--green-50);
-        color: white;
-        box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
-
-        .plans-new-discount-badge {
-          background-color: var(--green-10);
-          color: var(--green-60);
-        }
-      }
-
+    input[type='radio'] {
+      position: absolute;
+      left: -9999px;
       &:focus,
       &:focus-visible {
         outline: 0;
       }
+    }
 
-      &:focus-visible {
-        .box-shadow-button-input();
-      }
+    input[type='radio']:focus-visible + label,
+    input[type='radio']:checked:focus-visible + label {
+      .box-shadow-button-input();
+    }
 
+    input[type='radio']:checked + label {
+      background-color: var(--green-50);
+      color: white;
+      box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
       .plans-new-discount-badge {
-        margin-left: 6px;
+        background-color: var(--green-10);
+        color: var(--green-60);
       }
     }
+
+    .plans-new-discount-badge {
+      margin-left: var(--spacing-03);
+    }
   }
 
   .plans-new-discount-badge {

services/web/locales/en.json

@@ -209,6 +209,7 @@
   "beta_program_opt_out_action": "Opt-Out of Beta Program",
   "better_bibliographies": "Better bibliographies",
   "bibliographies": "Bibliographies",
+  "billing_period_sentence_case": "Billing period",
   "binary_history_error": "Preview not available for this file type",
   "blank_project": "Blank Project",
   "blocked_filename": "This file name is blocked.",