Repository: cal-itp/benefits

Issue:
Use minified version of CA State Web Template, possibly upgrade
## Acceptance Criteria

<!-- Remember to consider edge cases -->

- [ ] Use minified version of CA State Web Template
- [ ] Investigate using the upgraded jQuery-less version of the CA State Web Template

## Additional Context
https://github.com/cal-itp/benefits/issues/767#issuecomment-1176786102



Discussion:
I wonder if it would better to be on the ["latest release"](https://webstandards.ca.gov/state-template/), which is 5.6, instead of a beta version. The [template example site](https://template.webstandards.ca.gov/) is all based on 5.6. 

![latest_release](https://user-images.githubusercontent.com/25497886/178544597-5bb43f53-0063-431c-bda8-db62dcec6714.gif)

Being on the same version would make it easier to use components from the CA Web Template. (We currently use their [alert bar](https://github.com/cal-itp/benefits/blob/dev/benefits/core/templates/core/includes/alert.html), and it took some trial-and-error to get it to work with the 6.0.2 CSS/JS.)

~This wouldn't help us with moving away from jQuery though.~ 5.6.0 is jQuery-less!
@machikoyasuda showed me that the Web Template repo actually has [updated examples](https://github.com/Office-of-Digital-Innovation/California-State-Web-Template/tree/v6.0.7/sample), so we can just clone it locally if we ever need to reference their samples!

I'm good with upgrading to minified 6.0.7 👍 
Knowing exactly what version of Bootstrap the latest CA Web template uses will be helpful and necessary for the Page refactor/grid ticket.
`6.0.8` has been released since we created this ticket. Going for that!
> Knowing exactly what version of Bootstrap the latest CA Web template uses will be helpful and necessary for the Page refactor/grid ticket.

Looks like State Template `6.0.8` uses Bootstrap `5.1.3`: https://github.com/Office-of-Digital-Services/California-State-Web-Template/blob/6.0.8/src/scss/bootstrap/scss/bootstrap.scss#L2
@angela-tran @machikoyasuda I am questioning if we even need to keep the `cagov.core.min.js`? I think the only possible thing we used from there was the "Back to Top" arrow?

Loading the new version is throwing a bunch of console errors that I'd rather not deal with, and rather not the user see. Any thoughts?
@thekaveman @angela-tran Yea, I think we can remove `cagov.core.min.js` - as long as we ensure there are no regressions on all the places we use jQuery (the forms).
> @angela-tran @machikoyasuda I am questioning if we even need to keep the `cagov.core.min.js`? I think the only possible thing we used from there was the "Back to Top" arrow?
> 
> Loading the new version is throwing a bunch of console errors that I'd rather not deal with, and rather not the user see. Any thoughts?

So we had removed `cagov.core.min.js` in https://github.com/cal-itp/benefits/pull/235. It was needed / added back in #294's https://github.com/cal-itp/benefits/pull/294/commits/6b771c48d206726b00ca7a31a80969cf80c50f9c so we could show an alert banner if reCAPTCHA failed... if it's causing more trouble than it's worth, maybe we should just take out the alert banner?
That's right, thank you for the reminder @angela-tran!

I vote we take it out and/or use something more Bootstrap native. Maybe we just include Bootstrap's JS instead of CA Gov?
I have mistaken on `6.0.8` being _released_ -- there is [currently a branch](https://github.com/Office-of-Digital-Services/California-State-Web-Template/tree/6.0.8) for that work, but not a tag/release.

Will base on the the [latest tag/release: `v6.0.7`](https://github.com/Office-of-Digital-Services/California-State-Web-Template/releases/tag/v6.0.7)
Having a problem processing the new CSS file with `bin/init.sh`.

Error message:

```bash
Post-processing 'css/cagov.core.v6.0.7.min.css' failed!

...

ValueError: The file 'css/fonts/ca-gov-icon.woff' could not be found with  
<django.contrib.staticfiles.storage.ManifestStaticFilesStorage object at 0x7f29be12d960>.
```

This file is referenced ultimately from [`source/scss/cagov/icon-font.scss`](https://github.com/Office-of-Digital-Services/California-State-Web-Template/blob/v6.0.7/source/scss/cagov/icon-font.scss#L7):

```scss
@font-face {
  font-family: "CaGov";
  src: url("../fonts/CaGov.ttf?ocljyw") format("truetype"), url("fonts/ca-gov-icon.woff?t3czrh") format("woff"),
    url("../fonts/CaGov.woff2?ocljyw") format("woff2"), url("../fonts/CaGov.svg??ocljyw#CaGov") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
```

But the file at `url("fonts/ca-gov-icon.woff?t3czrh")` is nowhere to be found in the repo... I've searched through multiple branches, tags, commits... 

Resolving patch:
diff --git a/benefits/settings.py b/benefits/settings.py
--- a/benefits/settings.py
+++ b/benefits/settings.py
@@ -266,7 +266,7 @@ def _filter_empty(ls):
 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/cdt/statetemplate/", "https://fonts.gstatic.com/"]
+CSP_FONT_SRC = ["'self'", "https://california.azureedge.net/", "https://fonts.gstatic.com/"]
 env_font_src = _filter_empty(os.environ.get("DJANGO_CSP_FONT_SRC", "").split(","))
 CSP_FONT_SRC.extend(env_font_src)
 
@@ -281,7 +281,7 @@ def _filter_empty(ls):
 
 CSP_SCRIPT_SRC = [
     "'unsafe-inline'",
-    "https://california.azureedge.net/cdt/statetemplate/",
+    "https://california.azureedge.net/",
     "https://cdn.amplitude.com/libs/",
     "https://code.jquery.com/",
     "*.littlepay.com",
@@ -294,7 +294,7 @@ def _filter_empty(ls):
 CSP_STYLE_SRC = [
     "'self'",
     "'unsafe-inline'",
-    "https://california.azureedge.net/cdt/statetemplate/",
+    "https://california.azureedge.net/",
     "https://fonts.googleapis.com/css",
 ]
 env_style_src = _filter_empty(os.environ.get("DJANGO_CSP_STYLE_SRC", "").split(","))


Test patch: