Merge pull request #159 from clhenrick/css-clean-up

- rewrites and re-organizes all of the app's SCSS. This code was over 10 years old and poorly written by my former self lol. Makes use of Flexbox and CSS Grid where appropriate to reduce media queries and overall the amount of CSS.
- fixes incorrect usage of heading level elements in the info pages
- uses fluid type via container queries to improve the handling of type sizing in the homepage's slides (s/o to [Aleksandr Hovhannisyan](https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/)!)
- upgrades some dev deps:
  - prettier
  - sass
- removed dep `normalize.css` (in favor of custom css reset)
- probably some other things I'm forgetting (yes, this PR is way too big. oh well)

Author: clhenrick

.gitignore

@@ -3,4 +3,6 @@
 **/node_modules/
 **/dist/
 **/coverage/
-tmp/
+tmp/
+# Local Netlify folder
+.netlify

app/package.json

@@ -102,8 +102,9 @@
     "mini-css-extract-plugin": "^0.9.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
-    "prettier": "^2.0.4",
+    "prettier": "^2.3.0",
     "redux-mock-store": "^1.5.4",
+    "sass": "^1.86.3",
     "sass-loader": "^8.0.2",
     "serve": "^11.3.2",
     "style-loader": "^1.1.3",
@@ -125,12 +126,15 @@
     "handlebars": "4.7.7",
     "innersvg-polyfill": "^0.0.5",
     "lodash.throttle": "^4.1.1",
-    "normalize.css": "^8.0.1",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
     "regenerator-runtime": "^0.13.5",
-    "sass": "^1.58.0",
     "single-line-string": "^0.0.2"
+  },
+  "packageManager": "yarn@1.22.22",
+  "engines": {
+    "node": ">=16",
+    "yarn": ">=1.22"
   }
 }

app/public/locales/main-en.json

@@ -1,5 +1,6 @@
 {
   "nav_main": {
+    "accName": "primary",
     "title": "Am I Rent Stabilized?",
     "why": "Why it Matters",
     "how": "How it Works",

app/public/locales/main-es.json

@@ -1,5 +1,6 @@
 {
   "nav_main": {
+    "accName": "principal",
     "title": "¿Tengo Renta Estabilizada?",
     "why": "¿Porqué es importante?",
     "how": "¿Cómo funciona?",

app/public/locales/main-zh.json

@@ -1,5 +1,6 @@
 {
   "nav_main": {
+    "accName": "主要的",
     "title": "Am I Rent Stabilized?",
     "why": "为什么了租金稳定与否很重要?",
     "how": "租金稳定是怎么一回事？",

app/public/locales/why-en.json

@@ -6,7 +6,7 @@
     "resources": "Resources"
   },
   "nav_side": {
-    "h3": "Jump to a topic:",
+    "h2": "Jump to a topic:",
     "why": "Why is it important?",
     "what": "Why else should I care?",
     "under": "Under Attack",

app/src/components/advanceSlides.spec.js

@@ -16,6 +16,8 @@ jest.mock("../store", () => {
   };
 });
 
+const selector = ".button--go-next";
+
 describe("AdvanceSlides", () => {
   let advanceSlides;
   let spyButton;
@@ -25,7 +27,7 @@ describe("AdvanceSlides", () => {
 
   beforeAll(() => {
     setDocumentHtml(getMainHtml()); // eslint-disable-line no-undef
-    element = document.querySelector(".go-next.bottom-arrow");
+    element = document.querySelector(selector);
     spyButton = jest.spyOn(AdvanceSlides.prototype, "handleClick");
     spyAdvanceToSlide = jest.spyOn(AdvanceSlides.prototype, "advanceToSlide");
   });
@@ -47,9 +49,7 @@ describe("AdvanceSlides", () => {
   });
 
   test("The component's HTML exists", () => {
-    expect([
-      ...document.querySelectorAll(".go-next.bottom-arrow"),
-    ]).toHaveLength(6);
+    expect([...document.querySelectorAll(selector)]).toHaveLength(6);
   });
 
   test("The consumer should be able to call new() on AdvanceSlides class", () => {
@@ -73,7 +73,7 @@ describe("AdvanceSlides", () => {
   });
 
   test("The component's button handles a click event", () => {
-    document.querySelector(".go-next.bottom-arrow").click();
+    document.querySelector(selector).click();
     expect(spyButton).toHaveBeenCalled();
   });
 

app/src/components/languageToggle.spec.js

@@ -22,7 +22,7 @@ describe("LanguageToggle", () => {
 
   beforeAll(async () => {
     setDocumentHtml(getMainHtml()); // eslint-disable-line no-undef
-    element = document.querySelector("div.desktop .lang-toggle");
+    element = document.querySelector("aside.desktop .lang-toggle");
   });
 
   beforeEach(() => {
@@ -85,14 +85,14 @@ describe("LanguageToggle", () => {
     languageToggle = new LanguageToggle({ element, store });
 
     document
-      .querySelector("div.desktop .lang-toggle button[lang='es']")
+      .querySelector("aside.desktop .lang-toggle button[lang='es']")
       .click();
     expect(spyHandleClick).toHaveBeenCalledTimes(1);
 
     spyHandleClick.mockClear();
 
     document
-      .querySelector("div.desktop .lang-toggle button[lang='zh']")
+      .querySelector("aside.desktop .lang-toggle button[lang='zh']")
       .click();
     expect(spyHandleClick).toHaveBeenCalledTimes(1);
   });

app/src/components/languageToggleButton.js

@@ -22,17 +22,17 @@ export class LanguageToggleButton extends Component {
     this.className = `toggle-${this.lang}`;
     this.toggledClassName = `toggle-${LANGS.EN}`;
     this.element.innerHTML = this.label;
-    this.element.className = this.className;
+    this.element.className = `${this.className} button`;
     this.element.lang = this.lang;
   }
 
   toggle() {
     if (this.element.classList.contains(this.className)) {
-      this.element.className = this.toggledClassName;
+      this.element.className = `${this.toggledClassName} button`;
       this.element.innerHTML = IN_LANG.EN;
       this.element.lang = LANGS.EN;
     } else {
-      this.element.className = this.className;
+      this.element.className = `${this.className} button`;
       this.element.innerHTML = this.label;
       this.element.lang = this.lang;
     }

app/src/components/startOver.spec.js

@@ -11,7 +11,7 @@ describe("StartOver", () => {
 
   beforeAll(() => {
     setDocumentHtml(getMainHtml()); // eslint-disable-line no-undef
-    element = document.querySelector(".button.start-over");
+    element = document.querySelector(".button--primary.start-over");
     spyBindEvents = jest.spyOn(StartOver.prototype, "bindEvents");
     spyHandleClick = jest.spyOn(StartOver.prototype, "handleClick");
   });