Merge in develop

trussworks · Apr 30, 2020 · 86b0413 · 86b0413
2 parents caccb16 + e5b3917
commit 86b0413
Show file tree

Hide file tree

Showing 19 changed files with 1,401 additions and 397 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -18,6 +18,6 @@ jobs:
             - node_modules
           key: v1.0.0-dependencies-{{ checksum "package.json" }}
 
-      - run: yarn test
+      - run: yarn test -w 1
       - run: yarn lint
       - run: yarn danger ci --failOnErrors
diff --git a/.github/workflows/auto-approve.yml b/.github/workflows/auto-approve.yml
@@ -0,0 +1,12 @@
+name: Auto approve
+
+on: pull_request
+
+jobs:
+  auto-approve:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: hmarr/auto-approve-action@v2.0.0
+        if: github.actor == 'dependabot[bot]' || github.actor == 'dependabot-preview[bot]'
+        with:
+          github-token: '${{ secrets.GITHUB_TOKEN }}'
diff --git a/.github/workflows/deploy-storybook.yml b/.github/workflows/deploy-storybook.yml
@@ -0,0 +1,40 @@
+name: Deploy Storybook
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  deploy-storybook:
+    runs-on: ubuntu-latest
+    name: Deploy Storybook
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v2
+
+      - name: Set up node
+        uses: actions/setup-node@v1
+        with:
+          node-version: '10.x'
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v1
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: yarn install
+
+      - name: Deploy Storybook to Github page
+        run: yarn storybook:deploy --ci
+        env:
+          GH_TOKEN: trussworks:${{ secrets.GITHUB_TOKEN }}
diff --git a/.storybook/config.ts b/.storybook/config.ts
@@ -2,6 +2,7 @@ import { configure, addDecorator } from '@storybook/react'
 import { withInfo } from '@storybook/addon-info'
 
 import 'uswds/dist/css/uswds.css'
+import '../src/styles/index.scss'
 import './custom-story.css'
 
 configure(require.context('../src', true, /\.stories\.tsx?$/), module)

diff --git a/.stylelintrc b/.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"],
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,14 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [develop] - 2020-04-24
-
-- Add initial set of USWDS basic header components (Header, PrimaryNav, DropDownLink, SearchInput, Title)
-
-## [develop] - 2020-04-13
-
+## [1.2.0] - 2020-04-30
+
+- Added new Alert styles (slim, no icon) and allow the Alert to accept `div` attributes as props
+- Added additional examples of Form templates (Sign In form, Reset Password form) to Storybook
+- Turn off USWDS SCSS notifications on compile
+- Updated CODEOWNERS and contributors
+- Fixed Jest running in CI
+- Auto-approve Dependabot PRs
+- Deploy Storybook static site on merge to master
 - Run `yarn upgrade` to update all out of date dependencies
 - Add [DangerJS](https://danger.systems/js/) to automate some checks for contribution standards
+- Add additional CSS utility classes for background colors and text colors
 
 ## [1.1.0] - 2020-03-19
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trussworks/react-uswds",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React USWDS 2.0 component library",
   "keywords": [
     "react",
@@ -24,6 +24,7 @@
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "storybook": "start-storybook",
+    "storybook:deploy": "storybook-to-ghpages",
     "build": "webpack",
     "build:watch": "webpack --watch",
     "lint": "tsc --noEmit && eslint --ext js,jsx,ts,tsx src",
@@ -33,11 +34,14 @@
     "type": "git",
     "url": "github:trussworks/react-uswds"
   },
-  "author": "Suzanne Rozier <suz@truss.works>",
   "contributors": [
+    "Suzanne Rozier <suz@truss.works>",
     "John Gedeon <john@truss.works>",
     "Erin Stanfill <erin@truss.works>",
-    "Sara Bocciardi <sara@truss.works>"
+    "Sara Bocciardi <sara@truss.works>",
+    "Jeri Sommers <sojeri@truss.works>",
+    "Emily Mahanna <emahanna@truss.works>",
+    "Hana Worku <hana@truss.works>"
   ],
   "license": "Apache-2.0",
   "bugs": {
@@ -59,6 +63,7 @@
     "@babel/preset-react": "^7.0.0",
     "@storybook/addon-info": "^5.2.3",
     "@storybook/react": "^5.2.1",
+    "@storybook/storybook-deployer": "^2.8.5",
     "@testing-library/jest-dom": "^5.3.0",
     "@testing-library/react": "^10.0.1",
     "@testing-library/react-hooks": "^3.2.1",
@@ -97,10 +102,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",

diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx
@@ -45,6 +45,57 @@ export const info = (): React.ReactElement => (
   </Alert>
 )
 
+export const slim = (): React.ReactElement => (
+  <>
+    <Alert type="success" slim>
+      {testText}
+    </Alert>
+    <Alert type="warning" slim>
+      {testText}
+    </Alert>
+    <Alert type="error" slim>
+      {testText}
+    </Alert>
+    <Alert type="info" slim>
+      {testText}
+    </Alert>
+  </>
+)
+
+export const noIcon = (): React.ReactElement => (
+  <>
+    <Alert type="success" noIcon>
+      {testText}
+    </Alert>
+    <Alert type="warning" noIcon>
+      {testText}
+    </Alert>
+    <Alert type="error" noIcon>
+      {testText}
+    </Alert>
+    <Alert type="info" noIcon>
+      {testText}
+    </Alert>
+  </>
+)
+
+export const slimNoIcon = (): React.ReactElement => (
+  <>
+    <Alert type="success" slim noIcon>
+      {testText}
+    </Alert>
+    <Alert type="warning" slim noIcon>
+      {testText}
+    </Alert>
+    <Alert type="error" slim noIcon>
+      {testText}
+    </Alert>
+    <Alert type="info" slim noIcon>
+      {testText}
+    </Alert>
+  </>
+)
+
 export const withCTA = (): React.ReactElement => (
   <Alert
     type="warning"

diff --git a/src/components/Alert/Alert.test.tsx b/src/components/Alert/Alert.test.tsx
@@ -9,6 +9,13 @@ describe('Alert component', () => {
     expect(queryByTestId('alert')).toBeInTheDocument()
   })
 
+  it('accepts className prop', () => {
+    const { queryByTestId } = render(
+      <Alert type="success" className="myClass" />
+    )
+    expect(queryByTestId('alert')).toHaveClass('myClass')
+  })
+
   describe('with a CTA', () => {
     it('renders the CTA', () => {
       const testCTA = <button type="button">Click Here</button>

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -8,24 +8,36 @@ interface AlertProps {
   heading?: React.ReactNode
   children?: React.ReactNode
   cta?: React.ReactNode
+  slim?: boolean
+  noIcon?: boolean
 }
 
 export const Alert = ({
   type,
   heading,
   cta,
   children,
-}: AlertProps): React.ReactElement => {
-  const classes = classnames('usa-alert', {
-    'usa-alert--success': type === 'success',
-    'usa-alert--warning': type === 'warning',
-    'usa-alert--error': type === 'error',
-    'usa-alert--info': type === 'info',
-    [styles.alertWithCTA]: !!cta,
-  })
+  slim,
+  noIcon,
+  className,
+  ...props
+}: AlertProps & React.HTMLAttributes<HTMLDivElement>): React.ReactElement => {
+  const classes = classnames(
+    'usa-alert',
+    {
+      'usa-alert--success': type === 'success',
+      'usa-alert--warning': type === 'warning',
+      'usa-alert--error': type === 'error',
+      'usa-alert--info': type === 'info',
+      'usa-alert--slim': slim,
+      'usa-alert--no-icon': noIcon,
+      [styles.alertWithCTA]: !!cta,
+    },
+    className
+  )
 
   return (
-    <div className={classes} data-testid="alert">
+    <div className={classes} data-testid="alert" {...props}>
       <div className="usa-alert__body">
         {heading && <h3 className="usa-alert__heading">{heading}</h3>}
         {children && <p className="usa-alert__text">{children}</p>}

diff --git a/src/components/forms/Form/Form.stories.tsx b/src/components/forms/Form/Form.stories.tsx
@@ -1,13 +1,16 @@
+/*  eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
 import { Form } from './Form'
 
+import { Alert } from '../../Alert/Alert'
+import { Button } from '../../Button/Button'
+import { Dropdown } from '../Dropdown/Dropdown'
+import { ErrorMessage } from '../ErrorMessage/ErrorMessage'
+import { Fieldset } from '../Fieldset/Fieldset'
+import { FormGroup } from '../FormGroup/FormGroup'
 import { Label } from '../Label/Label'
 import { TextInput } from '../TextInput/TextInput'
 import { Textarea } from '../Textarea/Textarea'
-import { FormGroup } from '../FormGroup/FormGroup'
-import { ErrorMessage } from '../ErrorMessage/ErrorMessage'
-import { Fieldset } from '../Fieldset/Fieldset'
-import { Dropdown } from '../Dropdown/Dropdown'
 
 export default {
   title: 'Form',
@@ -174,3 +177,94 @@ export const addressForm = (): React.ReactElement => (
     </Fieldset>
   </Form>
 )
+
+export const signInForm = (): React.ReactElement => {
+  const [showPassword, setShowPassword] = React.useState(false)
+
+  return (
+    <Form onSubmit={mockSubmit} large>
+      <Fieldset legend="Sign In">
+        <span>
+          or <a href="javascript:void(0);">create an account</a>
+        </span>
+        <Label htmlFor="username">Username or email address</Label>
+        <TextInput
+          id="username"
+          name="username"
+          type="text"
+          autoCapitalize="off"
+          autoCorrect="off"
+        />
+        <Label htmlFor="password-sign-in">Password</Label>
+        <TextInput
+          id="password-sign-in"
+          name="password-sign-in"
+          type={showPassword ? 'text' : 'password'}
+        />
+        <p className="usa-form__note">
+          <a
+            title="Show password"
+            href="javascript:void(0);"
+            className="usa-show-password"
+            aria-controls="password-sign-in"
+            onClick={(): void => setShowPassword(!showPassword)}>
+            {showPassword ? 'Hide password' : 'Show password'}
+          </a>
+        </p>
+
+        <Button type="submit">Sign in</Button>
+        <p>
+          <a href="javascript:void(0);" title="Forgot username">
+            Forgot username?
+          </a>
+        </p>
+        <p>
+          <a href="javascript:void(0);" title="Forgot password">
+            Forgot password?
+          </a>
+        </p>
+      </Fieldset>
+    </Form>
+  )
+}
+export const passwordResetForm = (): React.ReactElement => {
+  const [showPassword, setShowPassword] = React.useState(false)
+
+  return (
+    <Form onSubmit={mockSubmit} large>
+      <Fieldset legend="Reset password">
+        <span>Please enter your new password</span>
+        <Alert type="info" heading="Password information">
+          Length requirements
+          <br />
+          Character constraints, if any
+        </Alert>
+
+        <Label htmlFor="newPassword">New password</Label>
+        <TextInput
+          id="newPassword"
+          name="newPassword"
+          type={showPassword ? 'text' : 'password'}
+        />
+
+        <Label htmlFor="confirmPassword">Confirm password</Label>
+        <TextInput
+          id="confirmPassword"
+          name="confirmPassword"
+          type={showPassword ? 'text' : 'password'}
+        />
+        <p className="usa-form__note">
+          <a
+            href="javascript:void(0);"
+            className="usa-show-multipassword"
+            aria-controls="newPassword confirmPassword"
+            onClick={(): void => setShowPassword(!showPassword)}>
+            {showPassword ? 'Hide my typing' : 'Show my typing'}
+          </a>
+        </p>
+
+        <Button type="submit">Reset password</Button>
+      </Fieldset>
+    </Form>
+  )
+}