@usace/groundwork 1.0.1

package/lib/composite/footer/index.jsx

@@ -0,0 +1,148 @@
+import Container from "../../components/layout/container";
+import { Text } from "../../components/display/text";
+import Essayons from "./essayons";
+import LogoBanner from "./logo-banner";
+import SocialLinks from "./social-links";
+import FooterLinks from "./footer-links";
+
+const defaultLinks = [
+  {
+    href: "https://www.lrd.usace.army.mil/about/connect-with-us/",
+    text: "Contact",
+  },
+  {
+    href: "https://www.lrd.usace.army.mil/Careers/",
+    text: "Join Our Team",
+  },
+  {
+    href: "https://www.lrd.usace.army.mil/Wetlands-Permits/",
+    text: "Request a Permit (Regulatory)",
+  },
+  {
+    href: "https://www.lrd.usace.army.mil/FOIA/",
+    text: "Records Request (FOIA)",
+  },
+  {
+    href: "https://www.usace.army.mil/About/Offices-and-Units/Engineer-Inspector-General/",
+    text: "File a Complaint (IG)",
+  },
+  {
+    href: "https://www.lrd.usace.army.mil/Business-With-Us/",
+    text: "Business With Us",
+  },
+  {
+    href: "https://www.lrd.usace.army.mil/Equal-Employment-Opportunity/",
+    text: "Equal Employment Opportunity (EEO)",
+  },
+  {
+    href: "https://www.usace.army.mil/LinkDisclaimer.aspx",
+    text: "Link Disclaimer",
+  },
+  {
+    href: "https://www.usace.army.mil/PrivacyandSecurity.aspx",
+    text: "Privacy and Security",
+  },
+  {
+    href: "https://www.lrd.usace.army.mil/SiteMap.aspx",
+    text: "Site Map",
+  },
+];
+
+const defaultOffsiteLinks = [
+  {
+    href: "https://dodcio.defense.gov/DoDSection508/Std_Stmt.aspx",
+    text: "Accessibility (Section 508)",
+  },
+  {
+    href: "http://www.esd.whs.mil/DD/plainlanguage",
+    text: "Plain Writing Act",
+  },
+  {
+    href: "https://prhome.defense.gov/nofear",
+    text: "No FEAR Act",
+  },
+  {
+    href: "https://open.defense.gov/",
+    text: "Open Government",
+  },
+  {
+    href: "https://business.defense.gov/",
+    text: "Small Business Act",
+  },
+  {
+    href: "https://www.inscom.army.mil/isalute/",
+    text: "Report Suspicious Activity",
+  },
+  {
+    href: "https://www.usa.gov",
+    text: "Find Government Services (USA.gov)",
+  },
+];
+
+function Footer({
+  missionText,
+  aboutText,
+  facebookUrl,
+  twitterUrl,
+  youtubeUrl,
+  flickrUrl,
+  usaceLinks,
+  externalLinks,
+  armyLogo,
+  usaceLogo,
+  rsgisLogo,
+  cwbiLogo,
+}) {
+  return (
+    <footer className="relative text-footer-light-gray text-sm bg-footer-black border-t-gray-600 border-t-4 pb-[128px]">
+      <Essayons />
+      <div className="bg-footer-gray pt-8 pb-16">
+        <Container fluid>
+          <div className="grid grid-cols-12 gap-2">
+            <div className="col-span-12 lg:col-span-6">
+              <div className="grid grid-cols-12 gap-2">
+                <div className="col-span-6 lg:col-span-12">
+                  {missionText && (
+                    <>
+                      <h2 className="text-lg">Our Mission</h2>
+                      <Text>{missionText}</Text>
+                    </>
+                  )}
+                </div>
+                <div className="col-span-6 lg:col-span-12">
+                  {aboutText && (
+                    <>
+                      <h2 className="text-lg">About this Website</h2>
+                      <Text>{aboutText}</Text>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+            <div className="col-span-8 mt-8 lg:mt-2 lg:col-span-4">
+              <SocialLinks
+                facebook={facebookUrl}
+                twitter={twitterUrl}
+                youtube={youtubeUrl}
+                flickr={flickrUrl}
+              />
+              <FooterLinks links={usaceLinks} />
+            </div>
+            <div className="col-span-4 mt-[66px] lg:mt-2  lg:col-span-2">
+              <FooterLinks links={externalLinks} columnCount={1} />
+            </div>
+          </div>
+        </Container>
+        <LogoBanner
+          army={armyLogo}
+          usace={usaceLogo}
+          rsgis={rsgisLogo}
+          cwbi={cwbiLogo}
+        />
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;
+export { Footer };

package/lib/composite/footer/logo-banner.jsx

@@ -0,0 +1,55 @@
+const base = import.meta.env.BASE_URL;
+
+function LogoBanner({ army, usace, rsgis, cwbi }) {
+  return (
+    <div className="flex flex-row justify-center align-middle gap-6 mb-4">
+      {army && (
+        <a href="https://www.army.mil" target="_blank" rel="noopener">
+          <img
+            src={`${base}armystar-logo-rb.svg`}
+            alt="U.S. Army"
+            className="max-h-[75px]"
+          />
+        </a>
+      )}
+      {usace && (
+        <a href="https://www.usace.army.mil" target="_blank" rel="noopener">
+          <img
+            src={`${base}usace-logo-color.svg`}
+            alt="U.S. Army Corps of Engineers"
+            className="max-h-[75px] h-[75px] w-auto"
+          />
+        </a>
+      )}
+      {rsgis && (
+        <a
+          href="https://www.erdc.usace.army.mil/Media/Fact-Sheets/Fact-Sheet-Article-View/article/476649/remote-sensinggeographic-information-systems-center/"
+          target="_blank"
+          rel="noopener"
+        >
+          <img
+            src={`${base}rsgis-logo.png`}
+            alt="Remote Sensing - GIS Center of Expertise"
+            className="max-h-[75px]"
+          />
+        </a>
+      )}
+      {cwbi && (
+        <a
+          href="https://cwbi.sec.usace.army.mil"
+          target="_blank"
+          rel="noopener"
+        >
+          <img
+            src={`${base}cwbi-logo.png`}
+            alt="Civil Works Business Intelligence"
+            className="max-h-[75px]"
+          />
+        </a>
+      )}
+    </div>
+  );
+}
+
+export default LogoBanner;
+export { LogoBanner };

package/lib/composite/footer/social-links.jsx

@@ -0,0 +1,60 @@
+import { FaFacebook, FaYoutube, FaFlickr } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+
+function SocialLinks({ facebook, twitter, youtube, flickr }) {
+  return (
+    <ul className="text-2xl flex flex-row flex-wrap gap-2 list-none mb-3">
+      {facebook && (
+        <li>
+          <a
+            href={facebook}
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Facebook"
+          >
+            <FaFacebook />
+          </a>
+        </li>
+      )}
+      {twitter && (
+        <li>
+          <a
+            href={twitter}
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Twitter"
+          >
+            <FaXTwitter />
+          </a>
+        </li>
+      )}
+      {youtube && (
+        <li>
+          <a
+            href={youtube}
+            target="_blank"
+            rel="noopener noreferrer"
+            title="YouTube"
+          >
+            <FaYoutube />
+          </a>
+        </li>
+      )}
+      {flickr && (
+        <li>
+          <a
+            href={flickr}
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Flickr"
+          >
+            <FaFlickr />
+          </a>
+        </li>
+      )}
+    </ul>
+  );
+}
+
+export default SocialLinks;
+export { SocialLinks };

package/lib/composite/header/index.jsx

@@ -0,0 +1,83 @@
+import { NavbarLinks } from "./navbar-links";
+
+const base = import.meta.env.BASE_URL;
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+function Title({ title = "Title", subtitle = "Subtitle" }) {
+  return (
+    <div
+      style={{ order: 2 }}
+      className="font-usace w-full pl-[100px] bg-nav-gray"
+    >
+      <span className="text-sm font-bold mr-1">{title}</span>
+      <span className="text-sm">{subtitle}</span>
+    </div>
+  );
+}
+
+function Nav({ children }) {
+  return (
+    <nav
+      style={{ order: 1 }}
+      className="flex flex-row relative justify-between content-center bg-nav-black text-white h-12 pl-[91px] z-80"
+    >
+      {children}
+    </nav>
+  );
+}
+
+function Logo() {
+  return (
+    <div className="absolute left-[15px] bottom-[-15px] w-[82px] z-10">
+      <a href="/">
+        <img className="h-[50px] w-auto" src={`${base}usace-logo-color.svg`} />
+      </a>
+      <div className="absolute left-[65px] bottom-[-9px] text-sm text-black">
+        ®
+      </div>
+    </div>
+  );
+}
+
+function Search() {
+  return (
+    <input
+      style={{
+        order: 2,
+        backgroundImage: `url("${base}Magnifying_glass_icon.svg")`,
+        backgroundSize: "13px",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "10px center",
+      }}
+      className="bg-white border-gray-200 border-2 rounded h-8 m-2 text-sm text-black w-full max-w-[300px] pl-8"
+    />
+  );
+}
+
+function Header({ links, title, subtitle }) {
+  const headerClass = classNames(
+    "flex",
+    "flex-col",
+    "w-full",
+    "sticky",
+    "top-0",
+    "z-20"
+  );
+
+  return (
+    <header className={headerClass}>
+      <Title title={title} subtitle={subtitle} />
+      <Nav>
+        <Logo />
+        <NavbarLinks links={links} />
+        <Search />
+      </Nav>
+    </header>
+  );
+}
+
+export default Header;
+export { Header };

package/lib/composite/header/navbar-links.jsx

@@ -0,0 +1,113 @@
+import { useState } from "react";
+import { Menu } from "@headlessui/react";
+import { Fragment } from "react";
+
+const classNames = (...classes) => {
+  return classes.filter(Boolean).join(" ");
+};
+
+function NavbarLinkItem({ link, ...props }) {
+  const [open, setOpen] = useState(false);
+
+  const menuButtonClass = classNames(
+    "inline-block relative h-12 inline-flex w-auto justify-center items-center px-3 text-sm",
+    open ? "bg-nav-dark-gray text-white" : "text-nav-light-gray",
+    link.children ? "after:content-['▼'] after:text-[10px] after:ml-2" : ""
+  );
+
+  return (
+    <Menu
+      as="li"
+      className="relative"
+      onMouseOver={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+    >
+      <a href={link.link} className={menuButtonClass} {...props}>
+        {link.label}
+      </a>
+      {link.children && open && (
+        <Menu.Items
+          static
+          as="ul"
+          className="absolute left-0 top-13 width-auto bg-nav-dark-gray"
+        >
+          {link.children.map((child) => {
+            return (
+              <Menu.Item key={child.id} as={Fragment}>
+                <a
+                  href={child.link}
+                  className="block text-sm border-b border-nav-black bg-nav-dark-gray hover:bg-nav-translucent-gray text-nav-light-gray hover:text-white text-nowrap font-semibold px-[16px] py-[8px] bg-none"
+                >
+                  {child.label}
+                </a>
+              </Menu.Item>
+            );
+          })}
+        </Menu.Items>
+      )}
+    </Menu>
+  );
+}
+
+// links look like this:
+const linksTemplate = [
+  {
+    id: "layout",
+    label: "Layout",
+    link: "/layout",
+    children: [
+      {
+        id: "layout-1",
+        label: "Layout 1 goes here",
+        link: "/layout-1",
+      },
+      {
+        id: "layout-2",
+        label: "Layout 2",
+        link: "/layout-2",
+      },
+    ],
+  },
+  {
+    id: "another",
+    label: "Another",
+    link: "/another",
+  },
+];
+
+function NavbarLinksList({ links, ...props }) {
+  return (
+    <ul
+      role="list"
+      className="flex flex-row justify-start m-0 pl-0 w-full"
+      {...props}
+    >
+      {links.map((link) => {
+        return <NavbarLinkItem key={link.id} link={link} />;
+      })}
+    </ul>
+  );
+}
+
+const NavbarLinks = ({ links = linksTemplate }) => {
+  // const [openMobileMenu, setOpenMobileMenu] = useState(false);
+  // const mobileMenuClass = classnames({
+  //   "nav-links-list": true,
+  //   "nav-links-list-open": openMobileMenu,
+  // });
+  return (
+    <div className="flex flex-row flex-wrap content-center justify-between w-full pr-3">
+      <NavbarLinksList links={links} />
+    </div>
+  );
+};
+
+export default NavbarLinks;
+export { NavbarLinks };
+
+// display: flex;
+//   flex-direction: row;
+//   align-items: center;
+//   justify-content: space-between;
+//   width: 100%;
+//   padding-right: 8px;

package/lib/composite/header/usa-banner/USABanner.jsx

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import "./usa-banner.css";
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+const USABanner = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div
+      id="dnn_ctl03_header_banner_container"
+      className="header_banner_container"
+    >
+      <span className="header_banner_inner">
+        <div className="header_banner_flag">
+          An official website of the United States government
+          <div className="header_banner_accordion" tabIndex={0}>
+            <u
+              onClick={() => {
+                setOpen(!open);
+              }}
+            >
+              Here's how you know
+              <span
+                className={classNames(
+                  "expand-more-container",
+                  open ? "active" : ""
+                )}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                >
+                  <path d="M0 0h24v24H0z" fill="none"></path>
+                  <path
+                    className="expand-more"
+                    d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  ></path>
+                </svg>
+              </span>
+            </u>
+          </div>
+        </div>
+        {open ? (
+          <div
+            className="header_banner_panel active active"
+            style={{
+              paddingTop: "24px",
+              paddingBottom: "18px",
+              maxHeight: "154px",
+            }}
+          >
+            <div className="header_banner_panel_item">
+              <span className="header_banner_dotgov"></span>
+              <div
+                id="dnn_ctl03_bannerContentLeft"
+                className="header_banner_content"
+              >
+                <p className="banner-contentLeft-text">
+                  <strong> Official websites use .mil </strong>
+                </p>
+                A <strong>.mil</strong> website belongs to an official U.S.
+                Department of Defense organization in the United States.
+              </div>
+            </div>
+            <div className="header_banner_panel_item https">
+              <span className="header_banner_https"></span>
+              <div
+                id="dnn_ctl03_bannerContentRight"
+                className="header_banner_content"
+              >
+                <p className="banner-contentRight-text">
+                  <strong>Secure .mil websites use HTTPS</strong>
+                </p>
+                <div>
+                  {" "}
+                  A{" "}
+                  <strong>
+                    lock (
+                    <span className="header_banner_icon_lock">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="52"
+                        height="64"
+                        viewBox="0 0 52 64"
+                      >
+                        <title>lock </title>
+                        <path
+                          className="icon_lock"
+                          fillRule="evenodd"
+                          d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                        ></path>{" "}
+                      </svg>
+                    </span>
+                    )
+                  </strong>{" "}
+                  or <strong> https://</strong> means you’ve safely connected to
+                  the .mil website. Share sensitive information only on
+                  official, secure websites.
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </span>
+    </div>
+  );
+};
+
+export default USABanner;
+export { USABanner };