109 component for terms of serviceuser agreements modal (#112)

* update @headlessui/react to latest version, we were on an alpha so needed to get off of that.

* Create new DoD warning banner modal component.

* Add DoD warning banner to the SiteWrapper

* Add the warning props to the SiteWrapper docs

* Show the warning in our docs site

* Update dod-warning.jsx

People didn't like my key naming...

quiet-the-noise -> gw-dod-warn-accept

---------

Co-authored-by: Adam Scarberry <46494851+adamscarberry@users.noreply.github.com>

lib/composite/site-wrapper/dod-warning.jsx

@@ -0,0 +1,111 @@
+import {
+  Description,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  DialogBackdrop,
+} from "@headlessui/react";
+import { useEffect, useState } from "react";
+import { Button } from "../../components/button";
+
+function checkAcceptance(warningTimeout = 1000 * 60 * 60 * 24 * 30) {
+  let hasAccepted = false;
+  hasAccepted = window.localStorage.getItem("gw-dod-warn-accept") || false;
+  // if we get a value, check to see how long ago it was
+  // default timeout is 30 days, but consumers can pass in
+  // a different value as a prop
+  if (hasAccepted) {
+    try {
+      const now = new Date();
+      const wasAcceptedOn = new Date(hasAccepted);
+      if (now - wasAcceptedOn > warningTimeout) {
+        window.localStorage.removeItem("gw-dod-warn-accept");
+        hasAccepted = false;
+      } else {
+        hasAccepted = true;
+      }
+    } catch (e) {
+      // just return false on any error
+      return false;
+    }
+  }
+  return hasAccepted;
+}
+
+function acknowledge() {
+  window.localStorage.setItem("gw-dod-warn-accept", new Date().getTime());
+}
+
+function DoDWarning({ warningTimeout }) {
+  let [isOpen, setIsOpen] = useState(!checkAcceptance(warningTimeout));
+
+  useEffect(() => {
+    if (!isOpen) {
+      acknowledge();
+    }
+  }, [isOpen]);
+
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={() => setIsOpen(false)}
+      className="gw-relative gw-z-50"
+    >
+      <DialogBackdrop className="gw-fixed gw-inset-0 gw-bg-black/30" />
+      <div className="gw-fixed gw-inset-0 gw-w-screen gw-overflow-auto gw-p-4">
+        <div className="gw-flex gw-min-h-full gw-items-center gw-justify-center">
+          <DialogPanel className="gw-max-w-2xl gw-space-y-4 gw-border gw-rounded-lg gw-shadow-lg gw-bg-white gw-p-12">
+            <DialogTitle className="gw-font-bold gw-text-center">
+              US Department of Defense Warning Statement
+            </DialogTitle>
+            <Description>
+              You are accessing a U.S. Government (USG) website that is provided
+              for USG-authorized use only. By visiting this website, you consent
+              to the following conditions:
+            </Description>
+            <ul className="gw-list-disc gw-p-3">
+              <li>
+                The USG routinely intercepts and monitors communications on this
+                website for purposes including, but not limited to, penetration
+                testing, COMSEC, monitoring, network operations and defense,
+                personnel misconduct (PM), law enforcement (LE), and
+                counterintelligence (CI) investigations.
+              </li>
+              <li>
+                At any time, the USG may inspect and seize data stored on this
+                website.
+              </li>
+              <li>
+                Communications using, or data stored on, this website are not
+                private, are subject to routine monitoring, interception, and
+                search, and may be disclosed or used for any USG-authorized
+                purpose.
+              </li>
+              <li>
+                This website includes security measures (e.g., authentication
+                and access controls) to protect USG interests — not for your
+                personal benefit or privacy.
+              </li>
+              <li>
+                Notwithstanding the above, using this website does not
+                constitute consent to PM, LE or CI investigative searching or
+                monitoring of the content of privileged communications, or work
+                product, related to personal representation or services by
+                attorneys, psychotherapists, or clergy, and their assistants.
+                Such communications and work product are private and
+                confidential.
+              </li>
+            </ul>
+            <div className="gw-flex gw-gap-4">
+              <Button className="gw-w-full" onClick={() => setIsOpen(false)}>
+                I Agree
+              </Button>
+            </div>
+          </DialogPanel>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+export default DoDWarning;

lib/composite/site-wrapper/index.jsx

@@ -1,6 +1,7 @@
 import USABanner from "../header/usa-banner/USABanner";
 import Header from "../header";
 import Footer from "../footer";
+import DoDWarning from "./dod-warning";
 
 function SiteWrapper({
   children,
@@ -24,6 +25,8 @@ function SiteWrapper({
   usaceLogo = true,
   rsgisLogo = false,
   cwbiLogo = false,
+  showWarning = false,
+  warningTimeout = undefined,
 }) {
   return (
     <div className="gw-grid gw-min-h-[100vh] gw-grid-rows-1fr-auto">
@@ -56,6 +59,7 @@ function SiteWrapper({
           cwbiLogo={cwbiLogo}
         />
       )}
+      {showWarning && <DoDWarning warningTimeout={warningTimeout} />}
     </div>
   );
 }