Merge branch 'next' into jw/our-products-layout

.eslintrc.json

@@ -9,6 +9,7 @@
   ],
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "react/no-unescaped-entities": "off"
   }
 }

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  "editor.formatOnSave": true,
+  "css.format.enable": true,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

next.config.js

@@ -14,7 +14,9 @@ const nextConfig = {
   basePath: '/dibbs-site',
   assetPrefix: '/dibbs-site',
   sassOptions: {
-    includePaths: [path.join(__dirname, 'styles')],
+    includePaths: [
+      path.join(__dirname, './', 'node_modules', '@uswds', 'uswds', 'packages'),
+    ],
   },
 };
 

src/app/case-studies/page.tsx

@@ -0,0 +1,12 @@
+import Hero from '../components/Hero/Hero';
+
+export default function CaseStudies() {
+  return (
+    <div>
+      <Hero
+        header="See how DIBBs solutions have helped others"
+        subheader="Explore our case studies to see the impact of DIBBs."
+      />
+    </div>
+  );
+}

src/app/components/ContentContainer/ContentContainer.tsx

@@ -0,0 +1,23 @@
+import { GridContainer } from '@trussworks/react-uswds';
+import classNames from 'classnames';
+
+interface ContentContainerProps {
+  children: React.ReactNode;
+  align?: boolean;
+}
+export function ContentContainer({
+  children,
+  align = false,
+}: ContentContainerProps) {
+  return (
+    <section>
+      <GridContainer
+        className={classNames('px-14 py-20', {
+          'px-32': !align,
+        })}
+      >
+        {children}
+      </GridContainer>
+    </section>
+  );
+}

src/app/components/Footer/Footer.module.scss

@@ -0,0 +1,11 @@
+@media (min-width: 1024px) {
+  .navbarLogoText {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .navbarLogoText {
+    font-size: 13px;
+  }
+}

src/app/components/Footer/Footer.tsx

@@ -0,0 +1,63 @@
+'use client';
+import { PrimaryNav } from '@trussworks/react-uswds';
+import Image from 'next/image';
+import React from 'react';
+import { NavigationLink } from '../NavigationLink/NavigationLink';
+import classNames from 'classnames';
+import { basePath } from '../../utils/constants';
+import styles from './Footer.module.scss';
+
+export default function Footer() {
+  const [expanded, setExpanded] = React.useState(false);
+  const onClick = () => {
+    if (window.innerWidth < 1024) setExpanded((prvExpanded) => !prvExpanded);
+  };
+
+  const testItemsMenu = [
+    <NavigationLink key="one" href="/" onClick={onClick}>
+      Home
+    </NavigationLink>,
+    <NavigationLink key="two" href="/our-products" onClick={onClick}>
+      Our products
+    </NavigationLink>,
+    <NavigationLink key="three" href="/case-studies" onClick={onClick}>
+      Case studies
+    </NavigationLink>,
+    <NavigationLink key="four" href="/engage-with-us" onClick={onClick}>
+      Engage with us
+    </NavigationLink>,
+  ];
+
+  return (
+    <footer className="usa-header--basic bg-background-teal">
+      <div className="usa-nav-container flex-vertical-center">
+        <div className="usa-navbar">
+          <div className="usa-logo">
+            <em className="usa-logo__text">
+              <a href="http://cdc.gov" title="<Project title>">
+                <span className={classNames('sr-only', styles.navbarLogoText)}>
+                  CDC US center for disease control and prevention
+                </span>
+                <Image
+                  width={200}
+                  height={40}
+                  alt=""
+                  className="margin-x-0"
+                  src={`${basePath}/images/CDC.svg`}
+                />
+              </a>
+            </em>
+          </div>
+          <button type="button" className="usa-menu-btn">
+            Menu
+          </button>
+        </div>
+        <PrimaryNav
+          items={testItemsMenu}
+          mobileExpanded={expanded}
+          onToggleMobileNav={onClick}
+        />
+      </div>
+    </footer>
+  );
+}

src/app/components/Header/Header.module.scss

@@ -0,0 +1,11 @@
+@media (min-width: 1024px) {
+  .navbarLogoText {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .navbarLogoText {
+    font-size: 13px;
+  }
+}

src/app/components/Header.tsx → src/app/components/Header/Header.tsx

@@ -2,10 +2,10 @@
 import { Header as USWDSHeader, PrimaryNav } from '@trussworks/react-uswds';
 import Image from 'next/image';
 import React from 'react';
-import styles from '../styles/Home.module.scss';
 import classNames from 'classnames';
-import { basePath } from '../utils/constants';
-import { NavigationLink } from './NavigationLink';
+import { basePath } from '../../utils/constants';
+import { NavigationLink } from '../NavigationLink/NavigationLink';
+import styles from './Header.module.scss';
 
 export default function Header() {
   const [expanded, setExpanded] = React.useState(false);

src/app/components/Hero/Hero.module.scss

@@ -0,0 +1,17 @@
+.content {
+  display: flex;
+  padding: 0px 30px;
+  align-items: center;
+  gap: 60px;
+  max-width: 1200px;
+}
+
+.heading {
+  max-width: 58.75rem;
+  color: #224a58;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin: 0px;
+}

src/app/components/Hero/Hero.tsx

@@ -0,0 +1,24 @@
+import { GridContainer } from '@trussworks/react-uswds';
+import styles from './Hero.module.scss';
+
+interface HeroProps {
+  header: string;
+  subheader: string;
+}
+
+export default function Hero({ header, subheader }: HeroProps) {
+  return (
+    <section className="usa-graphic-list usa-section usa-section--light-blue">
+      <GridContainer>
+        <div className={styles.content}>
+          <div className="flex flex-col items-start gap-3 self-start">
+            <h1 className={styles.heading}>{header}</h1>
+            <p className="m-0 max-w-[53.9rem] text-[1.38rem] font-light leading-[2rem] text-[#224a58]">
+              {subheader}
+            </p>
+          </div>
+        </div>
+      </GridContainer>
+    </section>
+  );
+}

src/app/components/MarkdownComponent.tsx → src/app/components/MarkdownComponent/MarkdownComponent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-import { getMarkdownContent } from '../utils/markdown';
+import { getMarkdownContent } from '../../utils/markdown';
 
 export default async function MarkdownContent(fileName: string) {
   const markdownContent = await getMarkdownContent(fileName);

src/app/components/NavigationLink/NavigationLink.module.scss

@@ -0,0 +1,11 @@
+@media (min-width: 1024px) {
+  .navbarItemText {
+    color: #f0f0f0;
+  }
+}
+
+@media (max-width: 1024px) {
+  .navbarItemText {
+    color: #565c65;
+  }
+}

src/app/components/NavigationLink.tsx → src/app/components/NavigationLink/NavigationLink.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import Link, { LinkProps } from 'next/link';
 import { usePathname } from 'next/navigation';
-import styles from '../styles/Home.module.scss';
+import styles from './NavigationLink.module.scss';
 
 interface NavigationLinkProps extends Pick<LinkProps, 'href' | 'onClick'> {
   children: React.ReactNode;

src/app/components/UsaBanner.tsx → src/app/components/UsaBanner/UsaBanner.tsx

@@ -11,7 +11,7 @@ import {
   MediaBlockBody,
   Icon,
 } from '@trussworks/react-uswds';
-import { basePath } from '../utils/constants';
+import { basePath } from '../../utils/constants';
 
 export default function USABanner() {
   const [isOpen, setIsOpen] = useState(false);

src/app/globals.css → src/app/custom-styles.css

@@ -1,37 +1,25 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import '@trussworks/react-uswds/lib/uswds.css';
-@import '@trussworks/react-uswds/lib/index.css';
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
 
 :root {
   --background: #ffffff;
   --foreground: #171717;
   --header-teal: #224a58;
   --background-light-blue: #dcecf3;
+  font-size: 16px; /* base value for rem */
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
+html,
 body {
-  /* color: var(--foreground);
-  background: var(--background); */
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-h1 {
-  margin: 2rem 0 2rem 0;
-  font-size: larger;
+  background: #e7f2f580;
+  font-family: 'Source Sans Pro', sans-serif;
 }
 
 .usa-logo a {
@@ -69,7 +57,6 @@ h1 {
 }
 
 h1 {
-  font-family: 'Source Sans Pro', sans-serif;
   font-size: 40px;
   font-weight: 700;
   line-height: 50.28px;