Basic horizontal nav

.stylelintrc

@@ -1,8 +1,10 @@
 {
-  "plugins": ["stylelint-prettier"],
+  "plugins": ["stylelint-scss", "stylelint-prettier"],
   "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
     "prettier/prettier": true,
     "selector-class-pattern": ""
   },
-  "extends": ["stylelint-config-recommended", "stylelint-prettier/recommended", "stylelint-config-sass-guidelines"],
+  "extends": ["stylelint-config-recommended", "stylelint-prettier/recommended", "stylelint-config-sass-guidelines", "stylelint-config-css-modules"],
 }

package.json

@@ -97,10 +97,12 @@
     "sass-resources-loader": "^2.0.1",
     "source-map-loader": "^0.2.4",
     "stylelint": "^13.3.0",
+    "stylelint-config-css-modules": "^2.2.0",
     "stylelint-config-prettier": "^8.0.1",
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-sass-guidelines": "^7.0.0",
     "stylelint-prettier": "^1.1.1",
+    "stylelint-scss": "^3.17.1",
     "ts-jest": "^25.2.1",
     "typescript": "^3.6.3",
     "url-loader": "^4.0.0",

src/components/HorizontalNav/HorizontalNav.module.scss

@@ -0,0 +1,31 @@
+/* stylelint-disable max-nesting-depth, selector-max-compound-selectors */
+
+.HorizontalNav {
+  > ul {
+    display: flex;
+    margin: 0;
+    padding: 0;
+
+    > li {
+      @include u-font-size('body', '2xs');
+
+      list-style: none;
+
+      > a {
+        @include u-text('bold');
+        @include u-text('base');
+
+        display: block;
+        line-height: 0.9;
+        padding: 1.5rem 2.5rem;
+        text-decoration: none;
+
+        &:global(.usa-current),
+        &:hover {
+          @include u-border('primary');
+          border-width: 0 0 3px;
+        }
+      }
+    }
+  }
+}

src/components/HorizontalNav/HorizontalNav.module.scss.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  HorizontalNav: string
+}
+export const cssExports: CssExports
+export default cssExports

src/components/HorizontalNav/HorizontalNav.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { HorizontalNav } from './HorizontalNav'
+
+export default {
+  title: 'HorizontalNav',
+}
+
+const testItems = [
+  <a href="#one" className="usa-current" key="one">
+    Current page
+  </a>,
+  <a href="#two" key="two">
+    Link one
+  </a>,
+  <a href="#three" key="three">
+    Link two
+  </a>,
+]
+
+export const flat = (): React.ReactElement => (
+  <HorizontalNav items={testItems} />
+)

src/components/HorizontalNav/HorizontalNav.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { HorizontalNav } from './HorizontalNav'
+
+const testItems = [
+  <a href="#one" className="usa-current" key="one">
+    Current page
+  </a>,
+  <a href="#two" key="two">
+    Link one
+  </a>,
+  <a href="#three" key="three">
+    Link two
+  </a>,
+]
+
+describe('HorizontalNav component', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(<HorizontalNav items={testItems} />)
+    expect(queryByTestId('horizontalnav')).toBeInTheDocument()
+  })
+
+  it('renders each item', () => {
+    const { queryByText } = render(<HorizontalNav items={testItems} />)
+    expect(queryByText('Current page')).toBeInTheDocument()
+    expect(queryByText('Link one')).toBeInTheDocument()
+    expect(queryByText('Link two')).toBeInTheDocument()
+  })
+
+  describe('with a subnav', () => {
+    /* TODO */
+  })
+})

src/components/HorizontalNav/HorizontalNav.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import styles from './HorizontalNav.module.scss'
+
+type HorizontalNavProps = {
+  items: React.ReactNode[]
+}
+
+export const HorizontalNav = ({
+  items,
+}: HorizontalNavProps): React.ReactElement => {
+  return (
+    <nav className={styles.HorizontalNav} data-testid="horizontalnav">
+      <ul>
+        {items.map((item, i) => (
+          <li key={`horizontalnav_item_${i}`}>{item}</li>
+        ))}
+      </ul>
+    </nav>
+  )
+}

yarn.lock

@@ -11624,6 +11624,11 @@ style-search@^0.1.0:
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
   integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=
 
+stylelint-config-css-modules@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-css-modules/-/stylelint-config-css-modules-2.2.0.tgz#8ed2a54b1bdf637219e37cdeea1950405fd022ff"
+  integrity sha512-+zjcDbot+zbuxy1UA31k4G2lUG+nHUwnLyii3uT2F09B8kT2YrT9LZYNfMtAWlDidrxr7sFd5HX9EqPHGU3WKA==
+
 stylelint-config-prettier@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-8.0.1.tgz#ec7cdd7faabaff52ebfa56c28fed3d995ebb8cab"
@@ -11658,6 +11663,17 @@ stylelint-prettier@^1.1.1:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
+stylelint-scss@^3.17.1:
+  version "3.17.1"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.17.1.tgz#1dc442cc5167be263d3d2ea37fe177b46b925c5d"
+  integrity sha512-KywqqHfK1otZv1QJA4xJDgcPJp1/cP3jnABpbU9gmXOKqKt8cNt27Imsh9JhY133X8D4zDh/38pNq4WjVfUQWQ==
+  dependencies:
+    lodash "^4.17.15"
+    postcss-media-query-parser "^0.2.3"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.0.3"
+
 stylelint-scss@^3.4.0:
   version "3.16.0"
   resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.16.0.tgz#6928fe57bcfc924110d09847c1f720472a9b7bd6"