Merge branch 'main' into dh/index-accordion-content

la-ldaf · Oct 31, 2024 · ecc2835 · ecc2835
2 parents 9a9f912 + fe0c1ee
commit ecc2835
Show file tree

Hide file tree

Showing 77 changed files with 1,682 additions and 384 deletions.
diff --git a/e2e-tests/header.spec.ts b/e2e-tests/header.spec.ts
@@ -36,7 +36,7 @@ test("nav items can be expanded and collapsed", async ({ page }) => {
   // expect focus loss with mouse to collapse menu
   await navMenuButton.click();
   await page
-    .getByRole("heading", { name: "Department of Agriculture and Forestry\nState of Louisiana" })
+    .getByRole("heading", { name: "Louisiana Department of Agriculture and Forestry" })
     // Without forcing the click, PlayWright will return "subtree intercepts pointer events" error,
     //   which is rather amusing because that error means that this is working as intended.
     .click({ force: true });
@@ -55,7 +55,7 @@ test("mobile menu is closed on route change", async ({ page }) => {
   await mobileMenuButton.click();
   await expect(mobileMenuItem).toBeVisible();
   // perform navigation by clicking site title
-  await page.locator(".ldaf-title__compact a").first().click();
+  await page.locator(".ldaf-logo__mobile-title a").first().click();
   await expect(page).toHaveURL("/");
   await expect(mobileMenuItem).toBeHidden();
 });
diff --git a/e2e-tests/homepage.spec.ts b/e2e-tests/homepage.spec.ts
@@ -4,7 +4,7 @@ test("index page has expected h1", async ({ page }) => {
   await page.goto("/");
   await expect(
     page.getByRole("heading", {
-      name: "Department of Agriculture and Forestry\nState of Louisiana",
+      name: "Louisiana Department of Agriculture and Forestry",
     }),
   ).toBeVisible();
 });
diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+
+    <link rel="icon" type="image/png" href="%sveltekit.assets%/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" />
+    <link rel="shortcut icon" href="%sveltekit.assets%/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="LDAF" />
+    <link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
+
     <meta name="viewport" content="width=device-width" />
     <meta name="google-site-verification" content="z_ztslPeuodgQEEjtgJQhmBJ4TEW37PK504oo1VFt-w" />
     <!-- The following color is LDAF's $primary-darker -->

diff --git a/src/lib/__tests__/setup.ts b/src/lib/__tests__/setup.ts
@@ -30,6 +30,4 @@ vi.mock("$app/stores", (): typeof stores => {
   };
 });
 
-vi.mock("$lib/components/Header/HeaderBackgroundImage.svelte");
-
 vi.mock("$lib/services/server/kv");
diff --git a/src/lib/assets/header-background-optimized.jpg b/src/lib/assets/header-background-optimized.jpg
diff --git a/src/lib/assets/header-background.png b/src/lib/assets/header-background.png
diff --git a/src/lib/assets/header-bg-original.jpg b/src/lib/assets/header-bg-original.jpg
diff --git a/src/lib/assets/ldaf-flat-logo-transparent-optimized-2x.png b/src/lib/assets/ldaf-flat-logo-transparent-optimized-2x.png
diff --git a/src/lib/assets/ldaf-flat-logo-transparent-optimized.png b/src/lib/assets/ldaf-flat-logo-transparent-optimized.png
diff --git a/src/lib/assets/ldaf-flat-logo.png b/src/lib/assets/ldaf-flat-logo.png
diff --git a/src/lib/assets/ldaf-horiz-white-rgb-1200px.png b/src/lib/assets/ldaf-horiz-white-rgb-1200px.png
diff --git a/src/lib/assets/ldaf-horiz-white-rgb-600px.png b/src/lib/assets/ldaf-horiz-white-rgb-600px.png
diff --git a/src/lib/assets/ldaf-horiz-wide-strain-white-rgb-1200px.png b/src/lib/assets/ldaf-horiz-wide-strain-white-rgb-1200px.png
diff --git a/src/lib/assets/ldaf-horiz-wide-strain-white-rgb-600px.png b/src/lib/assets/ldaf-horiz-wide-strain-white-rgb-600px.png
diff --git a/src/lib/assets/ldaf-logo-transparent.png b/src/lib/assets/ldaf-logo-transparent.png
diff --git a/src/lib/assets/ldaf-logo-type-white-rgb-300px.png b/src/lib/assets/ldaf-logo-type-white-rgb-300px.png
diff --git a/src/lib/assets/ldaf-logo-type-white-rgb-600px.png b/src/lib/assets/ldaf-logo-type-white-rgb-600px.png
diff --git a/src/lib/assets/ldaf-logo.png b/src/lib/assets/ldaf-logo.png
diff --git a/src/lib/assets/ldaf-stacked-strain-full-color-rgb-176px.png b/src/lib/assets/ldaf-stacked-strain-full-color-rgb-176px.png
diff --git a/src/lib/assets/ldaf-stacked-strain-full-color-rgb-352px.png b/src/lib/assets/ldaf-stacked-strain-full-color-rgb-352px.png
diff --git a/src/lib/assets/ldaf-stacked-white-rgb-1200px.png b/src/lib/assets/ldaf-stacked-white-rgb-1200px.png
diff --git a/src/lib/assets/ldaf-stacked-white-rgb-600px.png b/src/lib/assets/ldaf-stacked-white-rgb-600px.png
diff --git a/src/lib/components/DotGovBanner/DotGovBanner.svelte b/src/lib/components/DotGovBanner/DotGovBanner.svelte
@@ -1,3 +1,10 @@
+<!--
+ This component is currently not in-use on the site (only in Storybook).
+ If / when there is a desire to include it, the LDAF logo will need to be
+   replaced with either the updated "Icon" logo or the state seal. Please
+   remove the `ldaf-flat-logo-transparent` file when you do so, as this is the
+   only place where that file is in-use.
+-->
 <script lang="ts">
   import "./DotGovBanner.scss";
   import ldafLogo from "$lib/assets/ldaf-flat-logo-transparent.png?w=16&imagetools";

diff --git a/...tes/(infoPages)/about/events/Event.svelte → src/lib/components/Event/Event.svelte b/...tes/(infoPages)/about/events/Event.svelte → src/lib/components/Event/Event.svelte
@@ -1,28 +1,44 @@
 <script lang="ts">
-  import type { PageServerData } from "./$types";
   import DateComponent from "$lib/components/Date";
   import Link from "$lib/components/Link";
   import {
     headingTagByLevel,
     type HeadingLevel,
   } from "$lib/components/ContentfulRichText/headings";
+  import constructEventSlug from "$lib/util/constructEventSlug";
 
-  export let event: PageServerData["events"][number];
+  interface EventData {
+    __typename?: "EventEntry";
+    slug?: string | null;
+    shortTitle?: string | null;
+    eventDescription?: string | null;
+    eventDateAndTime?: Date | string | null;
+    eventSummary?: string | null;
+    sys: {
+      __typename?: "Sys";
+      id: string;
+    };
+  }
+
+  export let event: NonNullable<EventData>;
   export let headingLevel: HeadingLevel = 2;
   export let variation: "big" | "small" = "big";
-  $: date = event?.eventDateAndTime ? new Date(event?.eventDateAndTime) : undefined;
+
+  const dateString = event?.eventDateAndTime as string;
+
+  $: date = event?.eventDateAndTime ? new Date(dateString) : undefined;
 </script>
 
 <div class="event">
   {#if event?.eventDateAndTime}
-    <DateComponent dateString={event.eventDateAndTime} {variation} />
+    <DateComponent {dateString} {variation} />
   {/if}
   <div class="event-details">
     {#if event?.shortTitle}
       <Link
         class="display-block"
         href={date && event?.slug
-          ? `/about/events/event/${date.toISOString().split("T")[0]}-${event.slug}`
+          ? `/about/events/event/${constructEventSlug(date, event.slug)}`
           : undefined}
       >
         <svelte:element this={headingTagByLevel[headingLevel]} class="event-title">

diff --git a/src/lib/components/Event/index.ts b/src/lib/components/Event/index.ts
@@ -0,0 +1 @@
+export { default } from "./Event.svelte";
diff --git a/src/lib/components/Footer/Footer.scss b/src/lib/components/Footer/Footer.scss
@@ -61,26 +61,17 @@
     .usa-link {
       color: $accent-warm;
     }
-
-    .ldaf-footer__logo {
-      @include at-media("tablet") {
-        flex-wrap: nowrap;
-        .ldaf-footer__logo-heading-container {
-          flex: 1 1 0%;
-        }
+    // never change color regardless of state
+    // extra specificity is needed to override USWDS
+    .ldaf-footer__address-phone .usa-link,
+    .ldaf-footer__copyright .usa-link {
+      &:visited,
+      &:hover,
+      &:active {
+        color: $accent-warm;
       }
     }
 
-    .ldaf-footer__logo-heading {
-      line-height: 1;
-      margin-bottom: 0rem;
-      margin-top: 1rem;
-    }
-    .ldaf-footer__logo-subheading {
-      margin-bottom: 0.5rem;
-      margin-top: 0rem;
-    }
-
     .usa-footer__contact-links {
       @include at-media("mobile-lg") {
         margin-top: 1.5rem;

diff --git a/src/lib/components/Footer/Footer.svelte b/src/lib/components/Footer/Footer.svelte
@@ -6,14 +6,12 @@
 
   import Icon from "$lib/components/Icon";
   import Link from "$lib/components/Link";
-  import Logo from "$lib/components/Header/Logo";
+  import Logo from "$lib/components/Logo";
 
   import type { AfterNavigate } from "@sveltejs/kit";
   import type { NavMenuType } from "$lib/components/Header/Nav";
-  import type { SiteTitleType } from "$lib/components/Header/Title";
 
   export let navItems: NavMenuType[] = [];
-  export let siteTitle: SiteTitleType;
   // we provide this from a parent component so that we can render the component in Storybook
   export let afterNavigate: undefined | ((callback: (navigation: AfterNavigate) => void) => void) =
     undefined;
@@ -92,21 +90,14 @@
   <div class="usa-footer__secondary-section ldaf-footer__secondary-section">
     <div class="grid-container">
       <div class="grid-row grid-gap">
-        <div
-          class="usa-footer__logo ldaf-footer__logo grid-row tablet:grid-col-6 desktop:grid-col-8 grid-gap-2"
-        >
-          <div class="tablet:grid-col-auto">
-            <div class="usa-footer__logo-img">
-              <Logo />
-            </div>
+        <div class="usa-footer__logo grid-row tablet:grid-col-6 desktop:grid-col-8 grid-gap-2">
+          <!-- Vertical, stacked logo for mobile. -->
+          <div class="display-block tablet:display-none">
+            <Logo placement="mobile-footer" />
           </div>
-          <div class="tablet:grid-col-auto ldaf-footer__logo-heading-container">
-            <p class="usa-footer__logo-heading ldaf-footer__logo-heading">
-              {siteTitle.wideTitleRow1}
-            </p>
-            <p class="ldaf-footer__logo-subheading">
-              {siteTitle.wideTitleRow2}
-            </p>
+          <!-- Horizontal logo for tablet and desktop. -->
+          <div class="display-none tablet:display-block">
+            <Logo placement="desktop-footer" />
           </div>
         </div>
         <div class="usa-footer__contact-links tablet:grid-col-6 desktop:grid-col-4">

diff --git a/src/lib/components/Footer/Footer.test.ts b/src/lib/components/Footer/Footer.test.ts
@@ -6,18 +6,19 @@ import { describe, it, expect } from "vitest";
 import Footer from "./Footer.svelte";
 
 import { footerNavTestContent } from "./__tests__/FooterTestContent";
-import titleTestContent from "$lib/components/Header/Title/__tests__/TitleTestContent";
 
 describe("Footer", () => {
   it("renders", () => {
-    render(Footer, { props: { navItems: footerNavTestContent, siteTitle: titleTestContent } });
+    render(Footer, { props: { navItems: footerNavTestContent } });
     expect(screen.getByText("SubMenu 1")).toBeVisible();
-    expect(screen.getByText("Department of Agriculture and Forestry")).toBeVisible();
+    expect(
+      screen.getByText("©2023 Louisiana Department of Agriculture and Forestry."),
+    ).toBeVisible();
   });
   it("handles user events to toggle menus", async () => {
     window.innerWidth = 360;
     const user = userEvent.setup();
-    render(Footer, { props: { navItems: footerNavTestContent, siteTitle: titleTestContent } });
+    render(Footer, { props: { navItems: footerNavTestContent } });
     const button = screen.getByRole("button", { name: "SubMenu 1" });
     expect(button.getAttribute("aria-expanded")).toBe("false");
     // open with user click.

diff --git a/src/lib/components/Header/Header.scss b/src/lib/components/Header/Header.scss
@@ -6,15 +6,7 @@ $header-height-without-navbar: 148px;
 
 .ldaf-header {
   position: relative;
-  background: linear-gradient(to right, transparent, $primary-darker 30%);
-}
-
-.ldaf-header .ldaf-header-bg-img {
-  position: absolute;
-  width: 30%;
-  height: 100%;
-  max-height: $header-height-without-navbar;
-  z-index: -1;
+  background-color: $primary-darker;
 }
 
 .ldaf-header .ldaf-nav__secondary {
@@ -104,7 +96,6 @@ $header-height-without-navbar: 148px;
     }
   }
 
-  .ldaf-commissioner__compact,
   .ldaf-logo__compact {
     display: none;
   }
@@ -118,7 +109,7 @@ $header-height-without-navbar: 148px;
 
   .ldaf-logo__compact {
     display: inline-block;
-    max-width: 68px;
+    max-width: 176px;
   }
 
   .usa-nav__inner .ldaf-agency-commissioner span {

diff --git a/src/lib/components/Header/Header.svelte b/src/lib/components/Header/Header.svelte
@@ -4,16 +4,14 @@
   import classNames from "$lib/util/classNames";
   import Icon from "$lib/components/Icon";
   import Link from "$lib/components/Link";
+  import Logo from "$lib/components/Logo";
   import Search from "$lib/components/Search";
   import { page } from "$app/stores";
-  import Title, { type SiteTitleType } from "./Title";
+  import Title from "./Title";
   import Nav, { type NavItemType, type NavLinkType } from "./Nav";
-  import HeaderBackgroundImage from "./HeaderBackgroundImage.svelte";
-  import Logo from "./Logo";
   import User from "./User";
 
   export let primaryNavItems: NavItemType[] = [];
-  export let siteTitle: SiteTitleType;
   export let secondaryNavItems: NavLinkType[] = [];
 
   // Need to export this as a prop so we can reset it on route change.
@@ -26,9 +24,8 @@
 <!-- TODO: Continue replacing parts of this file with components and content from the CMS. -->
 <!-- TODO: Possibly add support for other header variations, e.g. usa-header--basic -->
 <header class="ldaf-header usa-header usa-header--extended">
-  <HeaderBackgroundImage class="ldaf-header-bg-img" />
   <div class="ldaf-nav usa-navbar">
-    <Title {siteTitle} />
+    <Title />
     <!--TODO: Replace with content from CMS. -->
     <button type="button" class="usa-menu-btn" on:click={() => toggleNavMenu(true)}> Menu </button>
   </div>
@@ -41,12 +38,9 @@
       </button>
 
       <a class="ldaf-logo__compact" href="/">
-        <Logo />
+        <span class="usa-sr-only">Go to home page.</span>
+        <Logo placement="mobile-header-menu" />
       </a>
-      <div class="ldaf-commissioner__compact">
-        <span>{siteTitle.commissionerRow1}</span>
-        <span class="text-italic">{siteTitle.commissionerRow2}</span>
-      </div>
 
       <Nav items={primaryNavItems} />
 

diff --git a/src/lib/components/Header/Header.test.ts b/src/lib/components/Header/Header.test.ts
@@ -6,16 +6,7 @@ import Header from "./Header.svelte";
 
 describe("Header", () => {
   it("renders", () => {
-    render(Header, {
-      siteTitle: {
-        wideTitleRow1: "test",
-        wideTitleRow2: "test",
-        commissionerRow1: "test",
-        commissionerRow2: "test",
-        compactTitleRow1: "test",
-        compactTitleRow2: "test",
-      },
-    });
+    render(Header);
     // Implicit ARIA role for the HTML <header> element
     expect(screen.getByRole("banner")).toBeVisible();
   });
@@ -24,14 +15,6 @@ describe("Header", () => {
       props: {
         primaryNavItems: [{ id: "1", link: "/", name: "test" }],
         secondaryNavItems: [{ id: "1", link: "/", name: "test" }],
-        siteTitle: {
-          wideTitleRow1: "test",
-          wideTitleRow2: "test",
-          commissionerRow1: "test",
-          commissionerRow2: "test",
-          compactTitleRow1: "test",
-          compactTitleRow2: "test",
-        },
       },
     });
     const navContainer = screen.getByLabelText("Primary navigation");

diff --git a/src/lib/components/Header/HeaderBackgroundImage.svelte b/src/lib/components/Header/HeaderBackgroundImage.svelte
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,4 @@ vi.mock("$app/stores", (): typeof stores => { @@
       };
     });
-    vi.mock("$lib/components/Header/HeaderBackgroundImage.svelte");
     vi.mock("$lib/services/server/kv");