Refactor: Remove CA State Web Template (#2526)

machikoyasuda · web-flow · commit ef4d4e83a9fe · 2024-11-26T16:55:58.000-08:00
- Remove CA State Web Template dependency, replace with Bootstrap
- Remove CA State Web Template domain from CSP
diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html
@@ -16,23 +16,17 @@
     <title>{% block page-title %}{% endblock page-title %}| {% translate "Cal-ITP Benefits" %}</title>
     {# djlint:on #}
 
-    {% block preload %}{% endblock preload %}
+    {% block preload %}
+    {% endblock preload %}
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css">
-
-    {% comment %}
-      CA State Template v6.0.7 comes with Bootstrap v5.1.3
-      See https://github.com/Office-of-Digital-Services/California-State-Web-Template/releases/tag/v6.0.7
-    {% endcomment %}
-    <link href="https://california.azureedge.net/cdt/statetemplate/6.0.7/css/cagov.core.min.css" rel="stylesheet">
-
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+          crossorigin="anonymous">
     <link href="{% static "css/styles.css" %}" rel="stylesheet">
     <link href="{% static "img/favicon.ico" %}" rel="icon" type="image/x-icon" />
 
-    {% comment %}
-      CA State Template v6.0.7 does not include jQuery
-      See https://github.com/Office-of-Digital-Services/California-State-Web-Template/releases/tag/v6.0.7
-    {% endcomment %}
     <script nonce="{{ request.csp_nonce }}"
             src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"
             integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
@@ -149,15 +143,8 @@
 
     </footer>
 
-    {% comment %}
-      CA State Template v6.0.7 comes with Bootstrap v5.1.3
-      see https://github.com/Office-of-Digital-Services/California-State-Web-Template/releases/tag/v6.0.7
-
-      But we aren't using CA State Template Javascript, so include Bootstrap directly
-    {% endcomment %}
-    <script nonce="{{ request.csp_nonce }}"
-            src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
-            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
             crossorigin="anonymous"></script>
 
     <script nonce="{{ request.csp_nonce }}">
diff --git a/benefits/core/templates/core/includes/lang-selector.html b/benefits/core/templates/core/includes/lang-selector.html
@@ -16,7 +16,7 @@
       {% get_language_info for code as langinfo %}
       <input name="next" type="hidden" value="{{ redirect_to }}" />
       <input name="language" type="hidden" value="{{ code }}" />
-      <button class="btn btn-lg btn-outline-light" type="submit">{{ langinfo.name_local | capfirst }}</button>
+      <button class="btn btn-outline-light" type="submit">{{ langinfo.name_local | capfirst }}</button>
     </form>
   {% endif %}
 {% endfor %}
diff --git a/benefits/core/templates/core/includes/nocookies.html b/benefits/core/templates/core/includes/nocookies.html
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block content %}
-  <div class="text-left">
+  <div class="text-start">
     <span class="navbar-brand">{% translate "Cookies are disabled" %}</span>
     <span class="navbar-text">
       {% translate "To function properly, this website requires a browser that supports cookies. Please enable cookies for this website and" %}
diff --git a/benefits/core/templates/core/includes/noscript.html b/benefits/core/templates/core/includes/noscript.html
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block content %}
-  <div class="text-left">
+  <div class="text-start">
     <span class="navbar-brand">{% translate "JavaScript is disabled" %}</span>
     <span class="navbar-text">
       {% translate "To function properly, this website requires a browser that supports JavaScript. Please enable JavaScript for this website and" %}
diff --git a/benefits/core/templates/core/landing.html b/benefits/core/templates/core/landing.html
@@ -21,7 +21,7 @@
     <div class="row align-items-end align-items-lg-center">
       <div class="col-lg-5">
         <div class="box py-3 px-3 py-lg-0 px-lg-0 mt-lg-5 pt-lg-4">
-          <h1 class="text-left p-0 ">
+          <h1 class="text-start p-0 ">
             {% block headline %}
             {% endblock headline %}
           </h1>
diff --git a/benefits/in_person/templates/error-base.html b/benefits/in_person/templates/error-base.html
@@ -9,7 +9,7 @@
     <div class="row justify-content-center">
         <div class="col-lg-6">
             <div class="border border-3 p-3">
-                <h2 class="p-0 m-0 text-left">In-person enrollment</h2>
+                <h2 class="p-0 m-0 text-start">In-person enrollment</h2>
             </div>
             <div class="border border-3 border-top-0 p-3 min-vh-60 d-flex flex-column justify-content-between">
                 <div class="d-flex">
diff --git a/benefits/in_person/templates/in_person/eligibility.html b/benefits/in_person/templates/in_person/eligibility.html
@@ -8,7 +8,7 @@
     <div class="row justify-content-center">
         <div class="col-11 col-md-10 col-lg-6 border border-3 px-0">
             <div class="border border-3 border-top-0 border-start-0 border-end-0">
-                <h2 class="p-3 m-0 text-left">In-person enrollment</h2>
+                <h2 class="p-3 m-0 text-start">In-person enrollment</h2>
             </div>
             <div class="p-3">{% include "core/includes/form.html" with form=form %}</div>
             <div class="row d-flex justify-content-start p-3 pt-8">
diff --git a/benefits/in_person/templates/in_person/enrollment/index.html b/benefits/in_person/templates/in_person/enrollment/index.html
@@ -9,7 +9,7 @@
     <div class="row justify-content-center">
         <div class="col-lg-6">
             <div class="border border-3 p-3">
-                <h2 class="p-0 m-0 text-left">In-person enrollment</h2>
+                <h2 class="p-0 m-0 text-start">In-person enrollment</h2>
             </div>
             <div class="border border-3 border-top-0 p-3">
                 <div class="loading">
diff --git a/benefits/in_person/templates/in_person/enrollment/success.html b/benefits/in_person/templates/in_person/enrollment/success.html
@@ -9,7 +9,7 @@
     <div class="row justify-content-center">
         <div class="col-lg-6">
             <div class="border border-3 p-3">
-                <h2 class="p-0 m-0 text-left">In-person enrollment</h2>
+                <h2 class="p-0 m-0 text-start">In-person enrollment</h2>
             </div>
             <div class="border border-3 border-top-0 p-3 min-vh-60 d-flex flex-column justify-content-between">
                 <div class="d-flex">
diff --git a/benefits/settings.py b/benefits/settings.py
@@ -310,7 +310,7 @@ def RUNTIME_ENVIRONMENT():
 env_connect_src = _filter_empty(os.environ.get("DJANGO_CSP_CONNECT_SRC", "").split(","))
 CSP_CONNECT_SRC.extend(env_connect_src)
 
-CSP_FONT_SRC = ["'self'", "https://california.azureedge.net/", "https://fonts.gstatic.com/"]
+CSP_FONT_SRC = ["'self'", "https://fonts.gstatic.com/"]
 env_font_src = _filter_empty(os.environ.get("DJANGO_CSP_FONT_SRC", "").split(","))
 CSP_FONT_SRC.extend(env_font_src)
 
@@ -353,9 +353,8 @@ def RUNTIME_ENVIRONMENT():
 CSP_STYLE_SRC = [
     "'self'",
     "'unsafe-inline'",
-    "https://california.azureedge.net/",
     "https://fonts.googleapis.com/css",
-    "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/",
+    "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/",
 ]
 env_style_src = _filter_empty(os.environ.get("DJANGO_CSP_STYLE_SRC", "").split(","))
 CSP_STYLE_SRC.extend(env_style_src)
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -227,8 +227,9 @@ h4 {
 
 /* Language button */
 #header-container .btn-outline-light {
-  font-size: var(--bs-body-font-size);
-  padding: 3.5px 29.01px; /* 126 x 38px, all screen sizes  */
+  --bs-btn-font-size: var(--bs-body-font-size);
+  --bs-btn-padding-y: 3.5px;
+  --bs-btn-padding-x: 29.01px;
 }
 
 /* Main */
@@ -241,6 +242,7 @@ main {
   left: unset !important;
   transform: none;
   overflow: hidden;
+  height: 0;
 }
 
 #skip-to-content:focus {
@@ -320,6 +322,12 @@ footer .footer-links li a.footer-link:visited {
   }
 }
 
+.btn,
+.btn-lg {
+  --bs-btn-border-radius: var(--border-radius);
+  --bs-btn-hover-bg: #ffffff;
+}
+
 .btn.btn-lg.btn-primary {
   background-color: var(--primary-color);
   border-color: var(--primary-color);
@@ -343,10 +351,10 @@ footer .footer-links li a.footer-link:visited {
 .btn-outline-dark:focus,
 .btn-outline-dark:focus-visible,
 .btn-outline-light:focus,
-.btn-ouline-dark:focus-visible {
-  outline: 3px solid var(--focus-color) !important;
-  outline-offset: 2px !important;
-  box-shadow: none !important; /* override CA State Web Template */
+.btn-ouline-light:focus-visible {
+  outline: 3px solid var(--focus-color);
+  outline-offset: 2px;
+  box-shadow: none;
 }
 
 .btn-text {
@@ -358,7 +366,7 @@ footer .footer-links li a.footer-link:visited {
 /* Previous Button, Language Button */
 .btn-outline-dark,
 .btn-outline-light {
-  border-width: 2px;
+  --bs-btn-border-width: 2px;
 }
 
 /* Custom button: Loading spinner */
diff --git a/benefits/templates/admin/agency-dashboard-index.html b/benefits/templates/admin/agency-dashboard-index.html
@@ -8,10 +8,10 @@
 {% block content %}
     <div class="row">
         <div class="col-lg-12">
-            <h1 class="pt-0 pb-3 text-left">{{ agency.long_name }}</h1>
+            <h1 class="pt-0 pb-3 text-start">{{ agency.long_name }}</h1>
             {% if has_permission_for_in_person %}
                 <div class="border border-3 p-3">
-                    <h2 class="pt-0 pb-2 text-left">In-person enrollment</h2>
+                    <h2 class="pt-0 pb-2 text-start">In-person enrollment</h2>
                     <p>Verify transit benefit eligibility using agency criteria and complete a rider’s open-loop card enrollment.</p>
                     {% url routes.IN_PERSON_ELIGIBILITY as url_eligibility %}
                     <div class="row pt-4">
@@ -22,7 +22,7 @@ <h2 class="pt-0 pb-2 text-left">In-person enrollment</h2>
                 </div>
                 {% if transit_processor_portal_url %}
                     <div class="border border-3 p-3 mt-4">
-                        <h2 class="pt-0 pb-2 text-left">Transit Processor</h2>
+                        <h2 class="pt-0 pb-2 text-start">Transit Processor</h2>
                         <p>Manage fare-calculation, view rider transactions, and process refunds.</p>
                         <div class="row pt-4">
                             <div class="col-lg-3">
