Hourly details toggle (#1943)

* Whatever this is, it works

* Styling for desktop

* Toggle logic updates, along with some spacing stuff

* Adjust spacing on chart titles and forecast item card

* Adjust spacing on chart titles and forecast item card

* Adjust toggle button sizing on tablet-lg and larger

* Update web/themes/new_weather_theme/assets/js/components/forecast-details-toggle.js

Co-authored-by: Greg Walker <142943695+greg-does-weather@users.noreply.github.com>

---------

Co-authored-by: partly-igor <igor.korenfeld@noaa.gov>
Co-authored-by: Greg Walker <142943695+greg-does-weather@users.noreply.github.com>

tests/playwright/e2e/daily-forecast-alerts.spec.js

@@ -11,7 +11,7 @@ describe("alerts in the daily tab", () => {
 
   describe("has alerts on the daily overviews", () => {
     test("combines multiple alerts into a single link", async ({ page }) => {
-      const day = await page.locator(".wx-daily-forecast-block li").first();
+      const day = await page.locator(".wx-daily-forecast-block .wx-daily-forecast-list-item").first();
       const links = await day.locator(".daily-alert-summary .wx-alert-link");
 
       await test.step("there is only one link", async () => {
@@ -26,7 +26,7 @@ describe("alerts in the daily tab", () => {
     });
 
     test("single alerts show the alert type", async ({ page }) => {
-      const day = await page.locator(".wx-daily-forecast-block li").nth(1);
+      const day = await page.locator(".wx-daily-forecast-block .wx-daily-forecast-list-item").nth(1);
       const links = await day.locator(".daily-alert-summary .wx-alert-link");
 
       await test.step("there is only one link", async () => {
@@ -45,7 +45,7 @@ describe("alerts in the daily tab", () => {
     test("multiple alerts link opens the alerts tab only", async ({ page }) => {
       const link = await page
         .locator(
-          ".wx-daily-forecast-block li .daily-alert-summary .wx-alert-link a",
+          ".wx-daily-forecast-block .wx-daily-forecast-list-item .daily-alert-summary .wx-alert-link a",
         )
         .first();
 
@@ -62,7 +62,7 @@ describe("alerts in the daily tab", () => {
       const alertID = "alert_8760a86c78e313ccfc42aa4eb5166572a0e26e9d_003_1";
       const link = await page
         .locator(
-          ".wx-daily-forecast-block li .daily-alert-summary .wx-alert-link a",
+          ".wx-daily-forecast-block .wx-daily-forecast-list-item .daily-alert-summary .wx-alert-link a",
         )
         .nth(1);
 

tests/playwright/e2e/daily-forecast-hourly-table.spec.js

@@ -10,7 +10,7 @@ describe("hourly table within the daily forecast", () => {
   });
 
   test("shows hourly expand/collapse button", async ({ page }) => {
-    const days = await page.locator(".wx-daily-forecast-block li").all();
+    const days = await page.locator(".wx-daily-forecast-block .wx-daily-forecast-list-item").all();
 
     for await (const day of days) {
       const hourlyButton = day.locator("wx-hourly-toggle");

tests/playwright/e2e/daily-forecast.spec.js

@@ -9,7 +9,7 @@ describe("daily forecast", () => {
 
   test("does not display missing day periods", async ({ page }) => {
     await page.goto("/point/21.305/-157.858");
-    const lastDay = page.locator(".wx-daily-forecast-block li").last();
+    const lastDay = page.locator(".wx-daily-forecast-block .wx-daily-forecast-list-item").last();
 
     const periods = lastDay.locator(".wx-daily-forecast-summary-area");
 

tests/playwright/e2e/qpf-table.spec.js

@@ -10,7 +10,7 @@ describe("quantitative precipitation forecast table", () => {
   });
 
   test("shows snow, ice, and water when all are present", async ({ page }) => {
-    const day = await page.locator(".wx-daily-forecast-block li").first();
+    const day = await page.locator(".wx-daily-forecast-block .wx-daily-forecast-list-item").first();
     await day.locator("span.toggle-text").click();
 
     const headings = await day.locator(".wx-precip-table thead th");
@@ -24,7 +24,7 @@ describe("quantitative precipitation forecast table", () => {
   });
 
   test("shows snow and water when there is no ice", async ({ page }) => {
-    const day = await page.locator(".wx-daily-forecast-block li").nth(1);
+    const day = await page.locator(".wx-daily-forecast-block .wx-daily-forecast-list-item").nth(1);
     await day.locator("span.toggle-text").click();
 
     const headings = await day.locator(".wx-precip-table thead th");
@@ -37,7 +37,7 @@ describe("quantitative precipitation forecast table", () => {
   });
 
   test("shows ice and water when there is no snow", async ({ page }) => {
-    const day = await page.locator(".wx-daily-forecast-block li").nth(2);
+    const day = await page.locator(".wx-daily-forecast-block .wx-daily-forecast-list-item").nth(2);
     await day.locator("span.toggle-text").click();
 
     const headings = await day.locator(".wx-precip-table thead th");
@@ -50,7 +50,7 @@ describe("quantitative precipitation forecast table", () => {
   });
 
   test("shows rain when there is no snow or ice", async ({ page }) => {
-    const day = await page.locator(".wx-daily-forecast-block li").nth(3);
+    const day = await page.locator(".wx-daily-forecast-block .wx-daily-forecast-list-item").nth(3);
     await day.locator("span.toggle-text").click();
 
     const headings = await day.locator(".wx-precip-table thead th");
@@ -64,9 +64,9 @@ describe("quantitative precipitation forecast table", () => {
   test("still shows the graph and table when there is no precipitation forecast", async ({
     page,
   }) => {
-    const day = await page.locator(".wx-daily-forecast-block li").nth(4);
+    const day = await page.locator(".wx-daily-forecast-block .wx-daily-forecast-list-item").nth(4);
     await day.locator("span.toggle-text").click();
-
+    await day.locator(".wx-forecast-details-toggle li:nth-child(2) button").click();
     const headings = await day.locator(".wx-precip-table thead th");
 
     // period, rain

web/themes/new_weather_theme/assets/js/components/forecast-details-toggle.js

@@ -0,0 +1,25 @@
+// The click event for each toggle button will
+// update the visual selection class and also update the
+// selection data attribute
+const toggleHandler = ({ target: button }) => {
+  const toggleContainer = button?.closest(".wx-forecast-details-toggle");
+  const selectedName = button?.dataset.selectionName;
+
+  toggleContainer?.setAttribute("data-selected", selectedName);
+
+  const buttons = Array.from(toggleContainer.getElementsByTagName("button"));
+  buttons.forEach((btn) => {
+    btn.classList.add("usa-button--outline");
+    if (btn.dataset.selectionName === selectedName) {
+      btn.classList.remove("usa-button--outline");
+    }
+  });
+};
+
+Array.from(document.getElementsByClassName("wx-forecast-details-toggle"))
+  .forEach(toggleContainer => {
+    const buttons = Array.from(toggleContainer.getElementsByTagName("button"));
+    buttons.forEach(button => {
+      button.addEventListener("click", toggleHandler);
+    });
+  });

web/themes/new_weather_theme/assets/js/point.page.js

@@ -14,3 +14,4 @@ import("./charts/hourly-humidity.js");
 import("./charts/hourly-wind.js");
 import("./charts/hourly-dewpoint.js");
 import("./charts/qpf.js");
+import("./components/forecast-details-toggle.js");

web/themes/new_weather_theme/assets/sass/components/forecast-details-toggle.scss

@@ -0,0 +1,22 @@
+@use "uswds-core" as *;
+
+.wx-forecast-details-toggle ~ * {
+    display: none;
+}
+
+.wx-forecast-details-toggle ~ h4 {
+    display: block;
+}
+
+.wx-forecast-details-toggle[data-selected="charts"] ~ *:not(wx-hourly-table) {
+    display: initial;
+}
+
+.wx-forecast-details-toggle[data-selected="charts"] ~ *:last-child {
+    display: none;
+}
+
+.wx-forecast-details-toggle[data-selected="table"] ~ wx-hourly-table,
+.wx-forecast-details-toggle[data-selected="table"] ~ *:last-child {
+    display: initial;
+}

web/themes/new_weather_theme/assets/sass/styles.scss

@@ -31,5 +31,6 @@
 @use "components/wfo-page";
 @use "components/wx-charts";
 @use "components/wx-loader";
+@use "components/forecast-details-toggle";
 @use "components/quick-forecast";
 @use "components/accordion";

web/themes/new_weather_theme/new_weather_theme.libraries.yml

@@ -25,7 +25,7 @@ front-page:
         defer: true
 
 point-page:
-  version: 2024-10-17.3
+  version: 2024-10-22
   js:
     assets/js/point.page.js:
       attributes:

web/themes/new_weather_theme/templates/partials/daily-forecast-list-item.html.twig

@@ -10,14 +10,14 @@ only be a nighttime period.
 
 {% set itemId =  periods[0].monthAndDay | lower | replace({" ":"-"}) %}
 
-<li class="display-block" {% if itemId %}id="{{itemId}}{% endif %}">
+<li class="wx-daily-forecast-list-item display-block" {% if itemId %}id="{{itemId}}{% endif %}">
   <div class="bg-white padding-y-205 padding-x-205 shadow-1 grid-col-12">
      {# outer grid-row stores everything that's visible visible without expansion #}
      <div class="grid-row border-0 tablet-lg:border-bottom-1px tablet-lg:border-base-lighter tablet-lg:padding-bottom-2">
 
       {# start of date, temps, and alert #}
       <div class="grid-row grid-col-12 tablet-lg:grid-col-4 border-bottom-1px border-base-lighter padding-bottom-2 margin-bottom-2 tablet-lg:border-0 tablet-lg:margin-bottom-05 tablet-lg:margin-right-2 tablet-lg:padding-bottom-0">
-        <div class="daily-date-and-temp display-flex flex-row flex-justify flex-align-center tablet:grid-col-6 tablet__wx-flex-justify-start">
+        <div class="daily-date-and-temp display-flex flex-row flex-justify tablet:grid-col-6 tablet__wx-flex-justify-start">
           <h3 class="padding-0 margin-0">
             <time class="display-block text-bold font-heading-md text-primary-dark minw-15 margin-right-3" datetime="{{ periods[0].startTime }}">
               {% if dayLabel %}
@@ -29,7 +29,7 @@ only be a nighttime period.
             </time>
           </h3>
 
-          <div class="display-flex">
+          <div class="display-flex margin-top-1px">
           {% include '@new_weather_theme/partials/daily-high-low.html.twig' with { 'periods': periods, 'useOnlyLow': useOnlyLow  } %}
           </div>
         </div>
@@ -110,6 +110,8 @@ only be a nighttime period.
         <span class="toggle-text font-mono font-mono-s text-ls-neg-1"></span>
       </wx-hourly-toggle>
       <div class="hourly-toggle-target" id="{{itemId}}-hourly-togglee">
+          {% include '@new_weather_theme/partials/forecast-details-toggle.html.twig' %}
+          <h4 class="font-heading-md text-normal text-primary-darker margin-top-0 margin-bottom-205">Hourly forecast</h4>
           {% include '@new_weather_theme/partials/hourly-table.html.twig'
           with {
               for: periods[0].monthAndDay,

web/themes/new_weather_theme/templates/partials/forecast-details-toggle.html.twig

@@ -0,0 +1,14 @@
+<div class="wx-forecast-details-toggle grid-row grid-col-12 tablet:grid-col-6 margin-y-205" data-selected="table">
+    <ul class="usa-button-group usa-button-group--segmented tablet-lg:grid-col-8">
+        <li class="usa-button-group__item flex-1 display-flex">
+            <button type="button" class="usa-button flex-1" data-selection-name="table">
+                {{"Table" | t}}
+            </button>
+        </li>
+        <li class="usa-button-group__item flex-1 display-flex">
+            <button type="button" class="usa-button usa-button--outline flex-1" data-selection-name="charts">
+                {{"Charts" | t}}
+            </button>
+        </li>
+    </ul>
+</div>

web/themes/new_weather_theme/templates/partials/hourly-charts.html.twig

@@ -8,13 +8,14 @@
 {% set windGusts = hours | map(h => h.windGust) | json_encode %}
 {% set windDirections = hours | map(h => h.windDirection) | json_encode %}
 
-<div class="wx-chart-wrapper margin-top-3 margin-bottom-4">
-  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-05">
+<div class="wx-chart-wrapper">
+  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-3 margin-bottom-05">
     {{ "Temperature" | t }} <span class="usa-sr-only"> {{ "chart" | t }} </span>
   </h5>
   <div class="position-sticky left-0 display-flex desktop:display-none flex-justify padding-top-2 padding-bottom-05">
     {% include "@new_weather_theme/partials/scroll-buttons.html.twig" %}
   </div>
+
   <div class="wx-chart wx-hourly-temp-chart-container margin-bottom-105 position-relative grid-col-12 width-full overflow-x-auto" tabindex="0" data-times="{{ times }}" data-temps="{{ temps }}" data-feels-like="{{ feelsLike }}" data-sync-scrolling="true">
     <div class="maxh-card-lg" style="width: max(100%, calc(var(--chart-datapoint-width) * {{times | split(',') | length}}))">
       <canvas>
@@ -33,8 +34,8 @@
   </div>
 </div>
 
-<div class="wx-chart-wrapper margin-bottom-2">
-  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-05">
+<div class="wx-chart-wrapper">
+  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-4 margin-bottom-05">
     {{ "Chance of precipitation" | t }} <span class="usa-sr-only"> {{ "chart" | t }} </span>
   </h5>
   <div class="position-sticky left-0 display-flex desktop:display-none flex-justify padding-top-2 padding-bottom-05">
@@ -48,13 +49,14 @@
   </div>
 </div>
 
-<div class="wx-chart-wrapper margin-bottom-4">
-  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-05">
+<div class="wx-chart-wrapper">
+  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-2 margin-bottom-05">
     {{ "Wind" | t }} <span class="usa-sr-only"> {{ "chart" | t }} </span>
   </h5>
   <div class="position-sticky left-0 display-flex desktop:display-none flex-justify padding-top-2 padding-bottom-05">
     {% include "@new_weather_theme/partials/scroll-buttons.html.twig" %}
   </div>
+
   <div class="wx-chart wx-hourly-wind-chart-container margin-bottom-105 position-relative grid-col-12 width-full overflow-x-auto"  tabindex="0" data-times="{{ times }}" data-wind-speeds="{{ windSpeeds }}" data-wind-gusts="{{ windGusts }}" data-wind-directions="{{ windDirections }}" data-sync-scrolling="true">
     <div class="maxh-card-lg" style="width: max(100%, calc(var(--chart-datapoint-width) * {{times | split(',') | length}}))">
       <canvas></canvas>
@@ -72,8 +74,8 @@
   </div>
 </div>
 
-<div class="wx-chart-wrapper margin-bottom-2">
-  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-05">
+<div class="wx-chart-wrapper">
+  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-4 margin-bottom-05">
     {{ "Humidity" | t }} <span class="usa-sr-only"> {{ "chart" | t }} </span>
   </h5>
   <div class="position-sticky left-0 display-flex desktop:display-none flex-justify padding-top-2 padding-bottom-05">

web/themes/new_weather_theme/templates/partials/hourly-table.html.twig

@@ -1,5 +1,4 @@
 <wx-hourly-table class="display-block position-relative margin-top-2 bg-white">
-  <h4 class="font-heading-md text-normal text-primary-darker margin-top-0 margin-bottom-205">Hourly forecast</h4>
   <div class="display-flex flex-justify">
     {% include "@new_weather_theme/partials/scroll-buttons.html.twig" %}
   </div>

web/themes/new_weather_theme/templates/partials/precip-table.html.twig

@@ -1,7 +1,7 @@
 
   <div class="grid-row wx-qpf-periods"> 
     <div class="grid-col-12"> 
-      <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-105">{{ "Precipitation amounts" |t }}</h5>
+      <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-2 margin-bottom-05">{{ "Precipitation amounts" |t }}</h5>
     </div>
   </div>
 
@@ -21,7 +21,7 @@
   {% endif %}
 
   <div class="margin-bottom-205">
-    <div class="wx-qpf-chart-container margin-y-205 position-relative grid-col-12"
+    <div class="wx-qpf-chart-container maxh-card-lg position-relative grid-col-12"
       data-times="{{ times | escape('html_attr') }}"
       data-liquid="{{ liquid | escape('html_attr') }}"
       data-snow="{{ snow | escape('html_attr') }}"