Merge branch 'develop' into sr-fix-node-version

.circleci/config.yml

@@ -19,5 +19,6 @@ jobs:
           key: v1.0.0-dependencies-{{ checksum "package.json" }}
 
       - run: yarn test -w 1
+      - run: yarn happo-ci
       - run: yarn lint
       - run: yarn danger ci --failOnErrors

.gitignore

@@ -68,3 +68,6 @@ lib/
 
 # editor config
 .vscode
+
+# happo output directory
+.out

.happo.js

@@ -0,0 +1,33 @@
+const { RemoteBrowserTarget } = require('happo.io')
+const happoPluginStorybook = require('happo-plugin-storybook')
+
+require('dotenv').config()
+
+module.exports = {
+  apiKey: process.env.HAPPO_API_KEY,
+  apiSecret: process.env.HAPPO_API_SECRET,
+  targets: {
+    chrome: new RemoteBrowserTarget('chrome', {
+      viewport: '1024x768',
+    }),
+    firefox: new RemoteBrowserTarget('firefox', {
+      viewport: '1024x768',
+    }),
+    edge: new RemoteBrowserTarget('edge', {
+      viewport: '1024x768',
+    }),
+    'internet explorer': new RemoteBrowserTarget('internet explorer', {
+      viewport: '1024x768',
+    }),
+    safari: new RemoteBrowserTarget('safari', {
+      viewport: '1024x768',
+    }),
+    'ios-safari': new RemoteBrowserTarget('ios-safari', {
+      viewport: '375x667',
+    }),
+  },
+  plugins: [
+    // see https://github.com/happo/happo-plugin-storybook for a list of options you can pass to the plugin
+   happoPluginStorybook(),
+  ],
+}

.storybook/config.ts

@@ -1,6 +1,7 @@
 import { configure, addDecorator } from '@storybook/react'
 import { withInfo } from '@storybook/addon-info'
 
+import 'happo-plugin-storybook/register'
 import 'uswds/dist/css/uswds.css'
 import '../src/styles/index.scss'
 import './custom-story.css'

docs/contributing.md

@@ -41,7 +41,7 @@ Because this project exports a library that will be used by other projects, it i
 - [Prettier](https://prettier.io/), [TypeScript compilation](https://www.typescriptlang.org/), [eslint](https://eslint.org/) and [stylelint](https://stylelint.io/) are run on _staged files_ as a pre-commit hook
   - For an optimal developer experience, it's recommended that you configure your editor to run linting & formatting inline.
   - These checks will also be run on all files in CI, and must pass before the branch can be merged
-- All pull requests opened into `develop` or `master` must have a title that follows the [conventional commits spec](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional). This generates an automated changelog entry and is required to merge. The [WIP] prefix can also be used to indicate a pull request is still work in progress. In this case,  the PR title is not validated and the pull request lint check remains pending. 
+- All pull requests opened into `develop` or `master` must have a title that follows the [conventional commits spec](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional). This generates an automated changelog entry and is required to merge. The [WIP] prefix can also be used to indicate a pull request is still work in progress. In this case,  the PR title is not validated and the pull request lint check remains pending.
 - The project is configured to only allow [squash & merge](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-request-merges#squash-and-merge-your-pull-request-commits) PR commits.
   - We also have set up [`commitizen`](https://commitizen.github.io/cz-cli/) CLI for making it easy to write standard commit messages.
   - You can use `yarn commit` instead of `git commit` to start the commitizen prompt
@@ -50,6 +50,7 @@ Because this project exports a library that will be used by other projects, it i
   - New src/components files should include changes to storybook
   - Package dependency changes should include `yarn.lock` updates and `yarn audit` outputs
 - All [Jest tests](https://jestjs.io/) will be run in CI and must pass before the branch can be merged
+- [Happo.io visual regression tests](https://docs.happo.io/docs/reviewing-diffs) will be run in CI and all diffs must be approved before the branch can be merged. Developers must have access to the Happo.io account to approve/reject diffs. If you work at Truss, log into Happo.io with your gmail and you will be able to approve/reject changes. Navigate to the happo link for instructions on how to review and approve diffs.
 - [`standard-version`](https://github.com/conventional-changelog/standard-version) is used during releases to auto-generate version numbers and changelog based on commit messages
 
 When your branch is ready for review, open a PR into `develop` and request reviews from relevant team members. Reviews from codeowners will automatically be requested. Address any failing tests, lint errors, PR feedback, etc., and once your branch is approved you can squash & merge it into `develop`.

docs/for_trussels.md

@@ -26,6 +26,7 @@ Regardless of whether you are on client work or Reserve, it is _up to each indiv
 - Assist with shepherding library releases forward, and publishing to npm
 - Prevent PRs and issues from becoming stale, and clean up the ones that do
 - Moderate this repo and help keep it aligned with Truss project values
+- Maintain admin responsibilities for the repo's [Happo Account](https://happo.io/)
 
 ### Addressing Security Alerts
 
@@ -39,6 +40,7 @@ First of all, we’re so excited you want to be an active maintainer on this pro
 - [ ] Add yourself to the ReactUSWDS weekly check-in (this can be found on the Truss Events calendar)
 - [ ] If you haven't already, be sure to familiarize yourself with this repo, especially the docs on [contributing](./contributing.md) and [recent releases](https://github.com/trussworks/react-uswds/releases)
 - [ ] Open a new PR that adds yourself to the Active Maintainers list in the [readme](../README.md).
+  - [ ] _Optional:_ Speak with another active maintainer and request admin privlages to the [Happo Account](https://happo.io/)
   - [ ] If you aren't already, you can also add yourself to the `contributors` list in the [package.json](../package.json),
   - [ ] and to [CODEOWNERS](../CODEOWNERS) if you'd like to automatically be requested to review PRs _(this is optional)_.
 - [ ] _Optional:_ If you want access to the npm org so you can publish new releases, ping `@npm-admins` in Slack
@@ -67,5 +69,6 @@ We’re equally excited that you’ll be taking something off your plate and mov
   - You can also remove yourself from [CODEOWNERS](../CODEOWNERS) so you don't get PR requests that you won't have time to review.
   - **_Don't_** remove yourself from `package.json` contributors! You did good work on this project and that should be recognized.
 - [ ] _Optional:_ You don’t need to have npm access revoked, but you can if you want.
+- [ ] _Optional:_ You don’t need to have Happo admin access revoked, but you can if you want.
 - [ ] _Optional:_ Give yourself some time back and remove yourself from the weekly check-in events
 - [ ] _Optional: If you want to,_ feel free to leave the #react-uswds Slack channels

example/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

example/README.md

@@ -0,0 +1,40 @@
+# ReactUSWDS example application
+
+This app is meant to demonstrate some of the features and components that make up the @trussworks/react-uswds library. It is just an example, and is currently not deployed or used anywhere other than for local development and testing.
+
+_Note:_ Currently the `start, test, build` scripts are prepended with `SKIP_PREFLIGHT_CHECK=true` in `package.json`. This is to get around the issue that Create React App requires specific versions of certain libraries to run, and the ReactUSWDS library is using newer versions of those libraries (notably `babel-jest`). This was the fastest/easiest workaround for now. Relevant discussion at https://github.com/facebook/create-react-app/issues/6756.
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

example/config-overrides.js

@@ -0,0 +1,10 @@
+const { override, addWebpackAlias } = require('customize-cra')
+
+const path = require('path')
+
+// This is needed in order to correctly resolve React versions between the library & example app
+module.exports = override(
+  addWebpackAlias({
+    react: path.resolve('./node_modules/react'),
+  })
+)

example/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "example",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@trussworks/react-uswds": "file:./../",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1",
+    "typescript": "~3.7.2"
+  },
+  "scripts": {
+    "start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired start",
+    "build": "SKIP_PREFLIGHT_CHECK=true react-app-rewired build",
+    "test": "SKIP_PREFLIGHT_CHECK=true react-app-rewired test"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "customize-cra": "^0.9.1",
+    "react-app-rewired": "^2.1.6"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "^react$": "<rootDir>/node_modules/react"
+    }
+  }
+}

example/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

example/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

example/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

example/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

example/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  const { getByText } = render(<App />);
+  const linkElement = getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

example/src/App.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import '@trussworks/react-uswds/lib/uswds.css'
+import { GovBanner } from '@trussworks/react-uswds'
+
+import logo from './logo.svg'
+import './App.css'
+
+function App() {
+  return (
+    <div className="App">
+      <GovBanner />
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer">
+          Learn React
+        </a>
+      </header>
+    </div>
+  )
+}
+
+export default App

example/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}