@usace/groundwork 1.0.2 → 1.0.4

package/lib/components/layout/container.jsx

@@ -1,13 +0,0 @@
-import clsx from "clsx";
-
-function Container({ className, children, fluid }) {
-  const containerClass = clsx(
-    "w-full mx-auto px-4 box-border",
-    fluid ? "max-w-full" : "max-w-[1140px]",
-    className
-  );
-  return <div className={containerClass}>{children}</div>;
-}
-
-export default Container;
-export { Container };

package/lib/components/layout/usace-box.jsx

@@ -1,26 +0,0 @@
-import clsx from "clsx";
-
-function UsaceBox({ children, className, title, customTitle }) {
-  const CustomTitle = customTitle;
-  const boxClass = "mb-10  relative";
-  const beforeClass =
-    "before:block before:bg-usace-box-light-gray before:h-8 before:mb-[-12px] before:w-full";
-  const afterClass =
-    "after:block after:absolute after:top-0 after:left-0 after:bg-usace-box-red after:h-[5px] after:w-[50px] after:z-[2]";
-
-  return (
-    <div className={clsx(className, boxClass, beforeClass, afterClass)}>
-      <h2
-        style={{ fontSize: "1.3rem", lineHeight: "1.4rem" }}
-        className="font-bold mb-6"
-      >
-        {title}
-        {CustomTitle && <CustomTitle />}
-      </h2>
-      {children}
-    </div>
-  );
-}
-
-export default UsaceBox;
-export { UsaceBox };

package/lib/components/link.jsx

@@ -1,18 +0,0 @@
-/*
-TODO: Update this component to use your client-side framework's link
-component. We've provided examples of how to do this for Next.js,
-Remix, and Inertia.js in the Catalyst documentation:
-
-https://catalyst.tailwindui.com/docs#client-side-router-integration
-*/
-
-import { DataInteractive as HeadlessDataInteractive } from '@headlessui/react'
-import React from 'react'
-
-export const Link = React.forwardRef(function Link(props, ref) {
-  return (
-    <HeadlessDataInteractive>
-      <a {...props} ref={ref} />
-    </HeadlessDataInteractive>
-  )
-})

package/lib/components/table.jsx

@@ -1,146 +0,0 @@
-"use client";
-
-import { clsx } from "clsx";
-import { createContext, useContext, useState } from "react";
-import { Link } from "./link";
-
-const TableContext = createContext({
-  bleed: false,
-  dense: false,
-  grid: false,
-  striped: false,
-});
-
-export function Table({
-  bleed = false,
-  dense = false,
-  grid = false,
-  striped = false,
-  className,
-  children,
-  ...props
-}) {
-  return (
-    <TableContext.Provider value={{ bleed, dense, grid, striped }}>
-      <div className="flow-root">
-        <div
-          {...props}
-          className={clsx(
-            className,
-            "-mx-[--gutter] overflow-x-auto whitespace-nowrap"
-          )}
-        >
-          <div
-            className={clsx(
-              "inline-block min-w-full align-middle",
-              !bleed && "sm:px-[--gutter]"
-            )}
-          >
-            <table className="min-w-full text-left text-sm/6">{children}</table>
-          </div>
-        </div>
-      </div>
-    </TableContext.Provider>
-  );
-}
-
-export function TableHead({ className, ...props }) {
-  return (
-    <thead
-      className={clsx(className, "text-zinc-500 dark:text-zinc-400")}
-      {...props}
-    />
-  );
-}
-
-export function TableBody(props) {
-  return <tbody {...props} />;
-}
-
-const TableRowContext = createContext({
-  href: undefined,
-  target: undefined,
-  title: undefined,
-});
-
-export function TableRow({
-  href,
-  target,
-  title,
-  className,
-  children,
-  ...props
-}) {
-  let { striped } = useContext(TableContext);
-
-  return (
-    <TableRowContext.Provider value={{ href, target, title }}>
-      <tr
-        {...props}
-        className={clsx(
-          className,
-          href &&
-            "has-[[data-row-link][data-focus]]:outline has-[[data-row-link][data-focus]]:outline-2 has-[[data-row-link][data-focus]]:-outline-offset-2 has-[[data-row-link][data-focus]]:outline-blue-500 dark:focus-within:bg-white/[2.5%]",
-          striped && "even:bg-zinc-950/[2.5%] dark:even:bg-white/[2.5%]",
-          href && striped && "hover:bg-zinc-950/5 dark:hover:bg-white/5",
-          href &&
-            !striped &&
-            "hover:bg-zinc-950/[2.5%] dark:hover:bg-white/[2.5%]"
-        )}
-      >
-        {children}
-      </tr>
-    </TableRowContext.Provider>
-  );
-}
-
-export function TableHeader({ className, ...props }) {
-  let { bleed, grid } = useContext(TableContext);
-
-  return (
-    <th
-      {...props}
-      className={clsx(
-        className,
-        "border-b border-b-zinc-950/10 px-4 py-2 font-medium first:pl-[var(--gutter,theme(spacing.2))] last:pr-[var(--gutter,theme(spacing.2))] dark:border-b-white/10",
-        grid &&
-          "border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5",
-        !bleed && "sm:first:pl-2 sm:last:pr-2"
-      )}
-    />
-  );
-}
-
-export function TableCell({ className, children, ...props }) {
-  let { bleed, dense, grid, striped } = useContext(TableContext);
-  let { href, target, title } = useContext(TableRowContext);
-  let [cellRef, setCellRef] = useState(null);
-
-  return (
-    <td
-      ref={href ? setCellRef : undefined}
-      {...props}
-      className={clsx(
-        className,
-        "relative px-4 first:pl-[var(--gutter,theme(spacing.2))] last:pr-[var(--gutter,theme(spacing.2))]",
-        !striped && "border-b border-zinc-950/5 dark:border-white/5",
-        grid &&
-          "border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5",
-        dense ? "py-2.5" : "py-4",
-        !bleed && "sm:first:pl-2 sm:last:pr-2"
-      )}
-    >
-      {href && (
-        <Link
-          data-row-link
-          href={href}
-          target={target}
-          aria-label={title}
-          tabIndex={cellRef?.previousElementSibling === null ? 0 : -1}
-          className="absolute inset-0 focus:outline-none"
-        />
-      )}
-      {children}
-    </td>
-  );
-}

package/lib/composite/footer/essayons.jsx

@@ -1,12 +0,0 @@
-const base = import.meta.env.BASE_URL;
-
-function Essayons() {
-  return (
-    <div
-      className={`absolute bottom-[56px] left-[50%] h-[125px] w-[112px] ml-[-56px] bg-[url(${base}essayonscrest.png)]`}
-    />
-  );
-}
-
-export default Essayons;
-export { Essayons };

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

@@ -1,33 +0,0 @@
-function FooterLinks({ links = [], columnCount = 2 }) {
-  return (
-    <ul
-      className="list-none"
-      style={{
-        columnCount: columnCount,
-        columnGap: "40px",
-        margin: 0,
-        padding: "0 0 0 2px",
-      }}
-    >
-      {links.map((link, i) => {
-        const target = link.href.startsWith("http") ? "_blank" : "";
-        const rel = link.href.startsWith("http") ? "noopener noreferrer" : "";
-        return (
-          <li key={link.text + i} className="mb-2">
-            <a
-              href={link.href}
-              target={target}
-              rel={rel}
-              className="hover:underline"
-            >
-              {link.text}
-            </a>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-export default FooterLinks;
-export { FooterLinks };

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 };