Merge branch 'main' into ak-new-component-site-alert-981

trussworks · Apr 20, 2021 · 8aab95c · 8aab95c
2 parents c164a87 + c9f71d7
commit 8aab95c
Show file tree

Hide file tree

Showing 22 changed files with 434 additions and 177 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,9 @@
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![npm version](https://img.shields.io/npm/v/@trussworks/react-uswds)](https://www.npmjs.com/package/@trussworks/react-uswds)
-[![CircleCI](https://img.shields.io/circleci/build/github/trussworks/react-uswds/develop)](https://circleci.com/gh/trussworks/react-uswds)
+[![uswds version](https://img.shields.io/github/package-json/dependency-version/trussworks/react-uswds/dev/uswds)](https://www.npmjs.com/package/uswds)
+
+[![CircleCI](https://img.shields.io/circleci/build/github/trussworks/react-uswds/main)](https://circleci.com/gh/trussworks/react-uswds)
 [![npm downloads](https://img.shields.io/npm/dm/@trussworks/react-uswds)](https://www.npmjs.com/package/@trussworks/react-uswds)
 
 **ReactUSWDS Component Library**
@@ -20,25 +22,14 @@ An example application, built with React-USWDS, can be found in the `/example` f
 
 **Table of Contents**
 
-- [@trussworks/react-uswds](#trussworksreact-uswds)
-  - [Background](#background)
-    - [Non-Goals](#non-goals)
-  - [Install](#install)
-    - [Pre-Release](#pre-release)
-  - [Usage](#usage)
-  - [Maintainers](#maintainers)
-  - [Contributing](#contributing)
-  - [License](#license)
-
-## Background
-
-The primary deliverable is a published npm package that can be included as a dependency in other projects that use USWDS with React. In order for these components to be useful, they should follow best practices for accessible, semantic, markup; be well-tested across browsers and devices; and allow for an appropriate level of customization. We adhere to a set of [development guidelines](./docs/contributing.md#guidelines) as much as possible and use automation to enforce tests, linting, and other standards.
-
-### Non-Goals
-
-This is not meant to be a one-size-fits-all front end solution, We are starting off with the opinionated decision to cater towards projects that use the U.S. Design System 2.0, and encapsulate these specific styles and markup in React components.
-
-In the process, we expect to gain learnings around how to best abstract out UI code from implementation; how to better standardize and document front end code practices; and how to develop, maintain, and distribute a shared JS library in alignment with our [company values at Truss](https://truss.works/values).
+- [Install](#install)
+  - [Pre-Release](#pre-release)
+- [Usage](#usage)
+- [Background](#background)
+  - [Non-Goals](#non-goals)
+- [Maintainers](#maintainers)
+- [Contributing](#contributing)
+- [License](#license)
 
 ## Install
 
@@ -56,7 +47,7 @@ npm i @trussworks/react-uswds
 
 ### Pre-Release
 
-Pre-release packages are published to GitHub Packages. To use, you
+Pre-release packages are published to GitHub Packages every time code is pushed to the `main` branch. To use, you
 will need a [GitHub access
 token](https://docs.github.com/en/packages/publishing-and-managing-packages/about-github-packages#about-tokens)
 with the `read:packages` scope.
@@ -84,13 +75,15 @@ for more detailed information.
 
 ## Usage
 
+It is strongly suggested applications use the same version of USWDS that was used to build the version of ReactUSWDS they're using. A version mismatch may result in unexpected markup & CSS combinations.
+
 You can import ReactUSWDS components using ES6 syntax:
 
 ```
 import { Alert } from '@trussworks/react-uswds'
 ```
 
-> **Warning:** Do _not_ include the full USWDS JS in your project alongside this library, as that will result in some components that use JS (such as the ComboBox) to initialize twice.
+> **Warning:** Do _not_ include USWDS JS in your project alongside this library (i.e., using `import 'uswds'`), as that will result in some components that use JS (such as the ComboBox) to initialize twice.
 
 Also make sure to include the following in order to import the compiled CSS from this project:
 
@@ -102,6 +95,16 @@ If you aren't already using USWDS as a dependency, you also need to import USWDS
 
 Having issues? See [FAQs](./docs/faqs.md).
 
+## Background
+
+The primary deliverable is a published npm package that can be included as a dependency in other projects that use USWDS with React. In order for these components to be useful, they should follow best practices for accessible, semantic, markup; be well-tested across browsers and devices; and allow for an appropriate level of customization. We adhere to a set of [development guidelines](./docs/contributing.md#guidelines) as much as possible and use automation to enforce tests, linting, and other standards.
+
+### Non-Goals
+
+This is not meant to be a one-size-fits-all front end solution, We are starting off with the opinionated decision to cater towards projects that use the U.S. Design System 2.0, and encapsulate these specific styles and markup in React components.
+
+In the process, we expect to gain learnings around how to best abstract out UI code from implementation; how to better standardize and document front end code practices; and how to develop, maintain, and distribute a shared JS library in alignment with our [company values at Truss](https://truss.works/values).
+
 ## Maintainers
 
 - [@suzubara](https://github.com/suzubara)

diff --git a/package.json b/package.json
@@ -62,7 +62,9 @@
   "peerDependencies": {
     "react": "^16.x || ^17.x",
     "react-dom": "^16.x || ^17.x",
-    "uswds": "2.10.0"
+
+    "uswds": "2.10.3"
+
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",
@@ -126,7 +128,8 @@
     "ts-jest": "^26.1.2",
     "typescript": "^3.8.0",
     "url-loader": "^4.0.0",
-    "uswds": "2.10.0",
+    "uswds": "2.10.3",
+
     "webpack": "^4.41.0",
     "webpack-cli": "^4.0.0"
   },

diff --git a/src/components/Footer/Footer/Footer.stories.tsx b/src/components/Footer/Footer/Footer.stories.tsx
@@ -96,7 +96,7 @@ export const SlimFooter = (): React.ReactElement => (
             src={logoImg}
           />
         }
-        heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+        heading={<p className="usa-footer__logo-heading">Name of Agency</p>}
       />
     }
   />
@@ -127,7 +127,7 @@ export const MediumFooter = (): React.ReactElement => (
               src={logoImg}
             />
           }
-          heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+          heading={<p className="usa-footer__logo-heading">Name of Agency</p>}
         />
         <div className="usa-footer__contact-links mobile-lg:grid-col-6">
           <SocialLinks
@@ -150,6 +150,12 @@ export const MediumFooter = (): React.ReactElement => (
                 href="#">
                 <span>YouTube</span>
               </a>,
+              <a
+                key="instagram"
+                className="usa-social-link usa-social-link--instagram"
+                href="#">
+                <span>Instagram</span>
+              </a>,
               <a
                 key="rss"
                 className="usa-social-link usa-social-link--rss"
@@ -240,7 +246,7 @@ export const BigFooter = (): React.ReactElement => (
               src={logoImg}
             />
           }
-          heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+          heading={<p className="usa-footer__logo-heading">Name of Agency</p>}
         />
         <div className="usa-footer__contact-links mobile-lg:grid-col-6">
           <SocialLinks
@@ -263,6 +269,12 @@ export const BigFooter = (): React.ReactElement => (
                 href="#">
                 <span>YouTube</span>
               </a>,
+              <a
+                key="instagram"
+                className="usa-social-link usa-social-link--instagram"
+                href="#">
+                <span>Instagram</span>
+              </a>,
               <a
                 key="rss"
                 className="usa-social-link usa-social-link--rss"

diff --git a/src/components/Footer/Logo/Logo.stories.tsx b/src/components/Footer/Logo/Logo.stories.tsx
@@ -28,7 +28,7 @@ export const Slim = (): React.ReactElement => (
       image={
         <img className="usa-footer__logo-img" src={logoImg} alt="Mock logo" />
       }
-      heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+      heading={<p className="usa-footer__logo-heading">Name of Agency</p>}
     />
   </div>
 )

diff --git a/src/components/Footer/Logo/Logo.test.tsx b/src/components/Footer/Logo/Logo.test.tsx
@@ -5,7 +5,7 @@ jest.mock('../../../deprecation')
 import { deprecationWarning } from '../../../deprecation'
 import { Logo } from './Logo'
 
-const heading = <h3 className="usa-footer__logo-heading">Swoosh Branding</h3>
+const heading = <p className="usa-footer__logo-heading">Swoosh Branding</p>
 const logoImage = (
   <img
     className="usa-footer__logo-img"

diff --git a/src/components/Footer/SocialLinks/SocialLinks.stories.tsx b/src/components/Footer/SocialLinks/SocialLinks.stories.tsx
@@ -37,6 +37,12 @@ const links = [
     href="#">
     <span>YouTube</span>
   </a>,
+  <a
+    key="instagram"
+    className="usa-social-link usa-social-link--instagram"
+    href="#">
+    <span>Instagram</span>
+  </a>,
   <a key="rss" className="usa-social-link usa-social-link--rss" href="#">
     <span>RSS</span>
   </a>,

diff --git a/src/components/GovBanner/GovBanner.tsx b/src/components/GovBanner/GovBanner.tsx
@@ -23,7 +23,14 @@ interface GovBannerCopy {
 const getCopy = (language: Language, tld: TLD): GovBannerCopy => {
   const lock = (
     <span className="icon-lock">
-      <img src={lockIcon} className="usa-banner__lock-image" alt="lock" />
+      {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
+      <img
+        src={lockIcon}
+        className="usa-banner__lock-image"
+        alt="lock"
+        title="Lock"
+        role="img"
+      />
     </span>
   )
 
@@ -154,7 +161,9 @@ export const GovBanner = ({
               <img
                 className="usa-banner__icon usa-media-block__img"
                 src={dotGovIcon}
-                alt="Dot gov"
+                role="img"
+                alt=""
+                aria-hidden="true"
               />
               <div className="usa-media-block__body">
                 <p>
@@ -168,7 +177,9 @@ export const GovBanner = ({
               <img
                 className="usa-banner__icon usa-media-block__img"
                 src={httpsIcon}
-                alt="Https"
+                role="img"
+                alt=""
+                aria-hidden="true"
               />
               <div className="usa-media-block__body">
                 <p>