cloud-gov · echappen · Mar 22, 2024 · Mar 21, 2024 · Mar 21, 2024
@@ -90,6 +90,52 @@ Prettier configurations are found in [.prettierrc.json](./.prettierrc.json).
 
 By default, NextJS [runs linting](https://nextjs.org/docs/app/building-your-application/configuring/eslint#linting-custom-directories-and-files) on the `pages/`, `app/`, `components/`, `lib/`, and `src/` directories. To change which directories are included in linting, go to [next.config.js](./next.config.js).
 
-## Assessment
+## Working with USWDS
 
-Our assessment of this prototype can be found in [./docs/assessment.md](./docs/assessment.md).
+In order to control when we upgrade USWDS, the `@uswds/uswds` npm package has been installed using the `--save-exact` flag.
+
+### SASS
+
+By default, NextJS has a way of compiling SASS, as well as Autoprefixer. This eliminates the need to use tools like uswds-compile or Gulp.
+
+SASS compilation configs can be found in [next.config.js](./next.config.js)
+
+USWDS theme settings can be configured in [assets/stylesheets/uswds-settings.scss](./assets/stylesheets/uswds-settings.scss).
+
+The global SASS entrypoint is [assets/stylesheets/styles.scss](./assets/stylesheets/styles.scss)
+
+Our aim is to import only what we need from USWDS. Individual USWDS packages will be listed in `styles.scss` after the `uswds-core` import.
+
+### Javascript and Images
+
+Nextjs has a top-level [public folder](https://nextjs.org/docs/app/building-your-application/optimizing/static-assets) where static assets can be stored. Assets stored here can be used as `src` urls by removing the `/public` prefix.
+
+#### Examples:
+```
+// Folder: /public/img/uswds/icon.png
+
+<img src="/img/uswds/icon.png" />
+
+// Folder: /public/js/uswds/uswds.min.js
+
+<Script src="/js/uswds/uswds.min.js" />
+```
+
+After a USWDS npm package update, copy the following files from `node_modules/@uswds/uswds/dist/` to `/public`:
+
+```
+/public
+  /js
+    /uswds
+      - uswds-init.js
+      - uswds-init.min.js
+      - uswds-init.min.js.map
+      - uswds.js
+      - uswds.min.js
+      - uswds.min.js.map
+  /img
+    /uswds
+      - [any images from uswds that you need]
+```
+
+For ease of updating, use the same file names. (This process could be converted to a script down the road.)
@@ -0,0 +1,10 @@
+import { Banner } from '../../components/banner';
+
+export default function DesignGuidePage() {
+    return(
+        <>
+            <Banner />
+            <div> hello world</div>
+        </>
+    );
+};
@@ -1,3 +1,6 @@
+import Script from 'next/script';
+import '../assets/stylesheets/styles.scss';
+
 export const metadata = {
   title: 'Next.js',
   description: 'Generated by Next.js',
@@ -6,7 +9,9 @@ export const metadata = {
 export default function RootLayout({ children }) {
  return (
     <html lang="en">
+      <Script src="/js/uswds/uswds-init.min.js" />
       <body>{children}</body>
+      <Script src="/js/uswds/uswds.min.js" />
     </html>
   )
 }
@@ -9,6 +9,7 @@ export default function Home() {
             <li><Link href="/serverside">Example of serverside rendering</Link></li>
             <li><Link href="/users">Example of dynamic rendering (server-side)</Link></li>
             <li><Link href="/cloudfoundry">Cloudfoundry home</Link></li>
+            <li><Link href="/design-guide">Design guide</Link></li>
         </ul>
         </div>
     );

@@ -0,0 +1,12 @@
+// 1. Load your project's USWDS settings configuration
+@forward "uswds-settings.scss";
+
+// 2. Load USWDS source code
+@forward "uswds-core"; // core must come first
+@forward "uswds-global";
+
+// USWDS components
+@forward "usa-banner";
+
+// 3. Load any custom SASS
+// none yet
@@ -0,0 +1,5 @@
+// https://designsystem.digital.gov/documentation/settings/
+@use "uswds-core" with (
+  $theme-font-path: "../../../../../../dist/fonts",
+  $theme-image-path: "../../../../../../dist/img",
+);
@@ -0,0 +1,99 @@
+export function Banner() {
+    return(
+        <>
+            <section
+              className="usa-banner"
+              aria-label="Official website of the United States government"
+            >
+              <div className="usa-accordion">
+                <header className="usa-banner__header">
+                  <div className="usa-banner__inner">
+                    <div className="grid-col-auto">
+                      <img
+                        aria-hidden="true"
+                        className="usa-banner__header-flag"
+                        src="/img/uswds/us_flag_small.png"
+                        alt=""
+                      />
+                    </div>
+                    <div className="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
+                      <p className="usa-banner__header-text">
+                        An official website of the United States government
+                      </p>
+                      <p className="usa-banner__header-action">Here’s how you know</p>
+                    </div>
+                    <button
+                      type="button"
+                      className="usa-accordion__button usa-banner__button"
+                      aria-expanded="false"
+                      aria-controls="gov-banner-default"
+                    >
+                      <span className="usa-banner__button-text">Here’s how you know</span>
+                    </button>
+                  </div>
+                </header>
+                <div
+                  className="usa-banner__content usa-accordion__content"
+                  id="gov-banner-default"
+                >
+                  <div className="grid-row grid-gap-lg">
+                    <div className="usa-banner__guidance tablet:grid-col-6">
+                      <img
+                        className="usa-banner__icon usa-media-block__img"
+                        src="/img/uswds/icon-dot-gov.svg"
+                        role="img"
+                        alt=""
+                        aria-hidden="true"
+                      />
+                      <div className="usa-media-block__body">
+                        <p>
+                          <strong>Official websites use .gov</strong><br />A
+                          <strong>.gov</strong> website belongs to an official government
+                          organization in the United States.
+                        </p>
+                      </div>
+                    </div>
+                    <div className="usa-banner__guidance tablet:grid-col-6">
+                      <img
+                        className="usa-banner__icon usa-media-block__img"
+                        src="/img/uswds/icon-https.svg"
+                        role="img"
+                        alt=""
+                        aria-hidden="true"
+                      />
+                      <div className="usa-media-block__body">
+                        <p>
+                          <strong>Secure .gov websites use HTTPS</strong><br />A
+                          <strong>lock</strong> (
+                          <span className="icon-lock"
+                            ><svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="52"
+                              height="64"
+                              viewBox="0 0 52 64"
+                              className="usa-banner__lock-image"
+                              role="img"
+                              aria-labelledby="banner-lock-description-default"
+                              focusable="false"
+                            >
+                              <title id="banner-lock-title-default">Lock</title>
+                              <desc id="banner-lock-description-default">Locked padlock icon</desc>
+                              <path
+                                fill="#000000"
+                                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"
+                              />
+                            </svg> </span
+                          >) or <strong>https://</strong> means you’ve safely connected to
+                          the .gov website. Share sensitive information only on official,
+                          secure websites.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+        </>
+    );
+};
@@ -1,3 +1,5 @@
+const path = require("path");
+
 module.exports = {
   eslint: {
     // directories that eslint will run on
@@ -7,5 +9,10 @@ module.exports = {
   generateBuildId: async () => {
     // placeholder build id for development
     return "0.0.1";
-  }
+  },
+  sassOptions: {
+    includePaths: [
+      path.join(__dirname, "node_modules", "@uswds", "uswds", "packages"),
+    ],
+  },
 }