Merge pull request #1435 from 18F/develop

[Feature] Update default font size and use color palette -- Staging
18F · Nov 19, 2024 · 1217ca2 · 1217ca2
2 parents f2849bd + a1c94fe
commit 1217ca2
Show file tree

Hide file tree

Showing 39 changed files with 455 additions and 360 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -13,7 +13,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v4
         with:
-          node-version: "lts/*"
+          node-version-file: ".nvmrc"
           cache: 'npm'
       - name: Install node dependencies
         # Fix for installing puppeteer which is a pa11y dependency.
@@ -31,7 +31,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v4
         with:
-          node-version: "lts/*"
+          node-version-file: ".nvmrc"
           cache: 'npm'
       - name: Install node dependencies
         # Fix for installing puppeteer which is a pa11y dependency.
@@ -41,18 +41,33 @@ jobs:
         run: npm ci --verbose --timing
       - name: Lint SCSS
         run: npm run lint:styles
+  audit-dependencies:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Code checkout
+        uses: actions/checkout@v4
+      - name: Install Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: 'npm'
+      - name: Install node dependencies
+        run: npm ci
+      - name: Validate npm package signatures
+        run: npm audit signatures
   test:
     needs:
       - lint-js
       - lint-styles
+      - audit-dependencies
     runs-on: ubuntu-latest
     steps:
       - name: Code Checkout
         uses: actions/checkout@v4
       - name: Install Node
         uses: actions/setup-node@v4
         with:
-          node-version: "lts/*"
+          node-version-file: ".nvmrc"
           cache: 'npm'
       - name: Install node dependencies
         # Fix for installing puppeteer which is a pa11y dependency.
@@ -66,6 +81,7 @@ jobs:
     needs:
       - lint-js
       - lint-styles
+      - audit-dependencies
       - test
     if: github.ref == 'refs/heads/develop'
     uses: 18F/analytics.usa.gov/.github/workflows/deploy.yml@develop
@@ -89,6 +105,7 @@ jobs:
     needs:
       - lint-js
       - lint-styles
+      - audit-dependencies
       - test
     if: github.ref == 'refs/heads/staging'
     uses: 18F/analytics.usa.gov/.github/workflows/deploy.yml@develop
@@ -112,6 +129,7 @@ jobs:
     needs:
       - lint-js
       - lint-styles
+      - audit-dependencies
       - test
     if: github.ref == 'refs/heads/master'
     uses: 18F/analytics.usa.gov/.github/workflows/deploy.yml@develop

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -70,7 +70,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v4
         with:
-          node-version: "lts/*"
+          node-version-file: ".nvmrc"
           cache: 'npm'
       - name: Install node dependencies
         run: npm ci --timing

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-20.11
+22
diff --git a/_includes/about.html b/_includes/about.html
@@ -3,7 +3,7 @@
     <h1 class="analytics-about__header margin-0 padding-bottom-1">
       On this page
     </h1>
-    <ul class="analytics-definitions__table-of-contents usa-list margin-top-0">
+    <ul class="analytics-about__table-of-contents usa-list margin-top-0">
       <li><a href="#about-this-site">About this site</a></li>
       <li>
         <a href="#download-ga4-data">

diff --git a/_includes/analytics_definitions.html b/_includes/analytics_definitions.html
@@ -31,7 +31,7 @@ <h1 class="analytics-definitions__header margin-0 padding-bottom-1">
       >
         <button
           type="button"
-          class="usa-accordion__button white bg-dark-blue"
+          class="usa-accordion__button white bg-palette-color-2"
           aria-expanded="true"
           aria-controls="report-descriptions-content"
         >
@@ -179,15 +179,18 @@ <h3 id="report_realtime_top_pages" class="usa-accordion__heading">
             class="usa-accordion__content usa-prose"
           >
             <ul>
-              <li>Metric: <a href="#metric_sessions">sessions</a></li>
+              <li>
+                Metric:
+                <a href="#metric_screen_page_views">screen page views</a>
+              </li>
               <li>
                 Dimensions: <a href="#dimension_host_name">hostname</a>, full
                 page URL, <a href="#dimension_page_title">page title</a>
               </li>
               <li>
                 Description: top 30 second-level domain websites and/or
-                subdomains based on the number of total sessions. Updated daily
-                for 7 and 30-day aggregate reports.
+                subdomains based on the number of total page views. Updated
+                daily for 7 and 30-day aggregate reports.
               </li>
             </ul>
           </div>
@@ -330,7 +333,7 @@ <h3 id="report_realtime_top_pages" class="usa-accordion__heading">
       >
         <button
           type="button"
-          class="usa-accordion__button white bg-dark-blue"
+          class="usa-accordion__button white bg-palette-color-2"
           aria-expanded="true"
           aria-controls="data-definitions-content"
         >
@@ -813,19 +816,40 @@ <h4 id="metric_event_count" class="usa-accordion__heading">
               <span> The number of times users triggered an event. </span>
             </div>
 
-            <h4 id="metric_sessions" class="usa-accordion__heading">
+            <h4 id="metric_screen_page_views" class="usa-accordion__heading">
               <button
                 type="button"
                 class="usa-accordion__button"
                 aria-expanded="false"
                 aria-controls="metrics__section6"
               >
-                Sessions
+                Screen page views
               </button>
             </h4>
             <div
               id="metrics__section6"
               class="usa-accordion__content usa-prose"
+            >
+              <span>
+                The number of app screens or web pages your users viewed.
+                Repeated views of a single page or screen are counted.
+                (screen_view + page_view events).
+              </span>
+            </div>
+
+            <h4 id="metric_sessions" class="usa-accordion__heading">
+              <button
+                type="button"
+                class="usa-accordion__button"
+                aria-expanded="false"
+                aria-controls="metrics__section7"
+              >
+                Sessions
+              </button>
+            </h4>
+            <div
+              id="metrics__section7"
+              class="usa-accordion__content usa-prose"
             >
               <span>
                 The number of sessions that began on websites or applications. A

diff --git a/_includes/data_download.html b/_includes/data_download.html
@@ -10,7 +10,7 @@ <h1>Download the data</h1>
 
       <p>
         <a
-          class="analytics-data__historical-data-link light-blue-two"
+          class="analytics-data__historical-data-link palette-color-4"
           href="/historical-data-download"
         >
           <em

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,4 +1,7 @@
-<header id="analytics-header" class="grid-row white bg-dark-blue padding-3">
+<header
+  id="analytics-header"
+  class="grid-row white bg-palette-color-1 padding-3"
+>
   <h1 class="margin-top-0 margin-x-0 margin-bottom-1">
     <img
       src="{{ site.baseurl }}/images/analytics.svg"

diff --git a/js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap b/js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap
@@ -34,7 +34,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           48.5%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 49%;"
         />
       </div>
@@ -52,7 +52,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           35.7%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 36%;"
         />
       </div>
@@ -70,7 +70,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           8.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 9%;"
         />
       </div>
@@ -88,7 +88,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 2%;"
         />
       </div>
@@ -106,7 +106,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 2%;"
         />
       </div>
@@ -124,7 +124,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.4%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 1%;"
         />
       </div>
@@ -142,7 +142,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 1%;"
         />
       </div>
@@ -160,7 +160,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>
@@ -178,7 +178,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>
@@ -196,7 +196,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.4%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>
@@ -227,7 +227,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           48.7%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 49%;"
         />
       </div>
@@ -245,7 +245,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           35.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 36%;"
         />
       </div>
@@ -263,7 +263,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           8.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 9%;"
         />
       </div>
@@ -281,7 +281,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 2%;"
         />
       </div>
@@ -299,7 +299,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 2%;"
         />
       </div>
@@ -317,7 +317,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.4%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 1%;"
         />
       </div>
@@ -335,7 +335,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 1%;"
         />
       </div>
@@ -353,7 +353,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>
@@ -371,7 +371,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>