@usace/groundwork 1.0.1 → 1.0.3

package/lib/composite/footer/index.jsx

@@ -1,148 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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 };