chore(release): 1.6.1

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.6.1](https://github.com/trussworks/react-uswds/compare/1.6.0...1.6.1) (2020-07-13)
+
+
+### Bug Fixes
+
+* **standard-version:** use -t flag correctly, autocommit changelog and release bump ([#310](https://github.com/trussworks/react-uswds/issues/310)) ([a96591e](https://github.com/trussworks/react-uswds/commit/a96591e71a7ac226b7d397c3714fed25d78c1ab9))
+* Use JSX.ImplicitElements to derive valid property names ([#267](https://github.com/trussworks/react-uswds/issues/267)) ([2eba792](https://github.com/trussworks/react-uswds/commit/2eba7922ea2c6a4f4a710f989da41e7b847d4398))
+
+
+### Documentation & Examples
+
+* Update releasing instructions with current flow ([#297](https://github.com/trussworks/react-uswds/issues/297)) ([87515bc](https://github.com/trussworks/react-uswds/commit/87515bc8577af1630833d0e374c29d08a34cae54))
+
 ## 1.6.0 (2020-06-29)
 
 ### Features

docs/adding_new_components.md

@@ -39,7 +39,7 @@ Pay special attention to:
   }
 
   export const Form = (
-    props: FormProps & React.FormHTMLAttributes<HTMLFormElement>
+    props: FormProps & JSX.IntrinsicElements['form']
   ): React.ReactElement =>
   ```
 

docs/contributing.md

@@ -90,17 +90,26 @@ Steps for a new release (these are in the process of being automated):
    - Commit all of the above changes
    - Note: Creating a new tag is **skipped** (this will happen as part of the publish flow)
 
-1. Push changes to a new branch following the naming pattern: `release-<version>`
+1. Commit changes with message `chore(release): <version>`. Push changes to a new branch following the naming pattern: `release-<version>`
 
    - For example: `git checkout -b release-1.1.0`
 
-1. Open a PR for the release branch against **`master`** (not `develop`, which is the default branch), with the new set of changes generated by the previous step included in the PR description. Ask for approvals from stakeholders, perform testing on applications, etc. Any hot fixes from testing or PR feedback can be made to the release branch directly if appropriate.
+1. Open a PR for the release branch against **`master`** (not `develop`, which is the default branch), with the new set of changes generated by the previous step included in the PR description. Resolve any conflicts.
+
+   - Ask for approvals from stakeholders, perform testing on applications, etc.
+   - Any hot fixes from testing or PR feedback can be made to the release branch directly if appropriate (use conventional commits syntax).
 
    ![image](./release_PR.png)
 
 1. Once the release PR is approved, complete the release and publish the new version (this should be automated by GH - TODO):
-   - Merge the PR into master
-   - Create a release tag on Github (https://github.com/trussworks/react-uswds/releases)
-   - Merge master into develop so that develop is up to date with the new version.
-   - Finally, publish the new package to npm: `npm publish`
+   - Merge the PR into master.
+     - Use **Rebase and Merge** option
+   - Create a new [**release tag**](https://github.com/trussworks/react-uswds/releases) pointed at `master` on Github.
+     - Use the same notes as release PR.
+   - Publish the new package to npm: `npm publish`
+     - Pull down latest `master` locally before publishing
      - Publishing access is limited to package owners. If you need access and don't have it, please contact `@npm-admins` on Truss Slack.
+     - You may need to `npm login` first.
+
+- Finish process by bringing develop branch back up to date.
+  - Create a second PR from release branch back into develop. PR title should be`chore(release): <version>` **Squash and Merge.**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trussworks/react-uswds",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "React USWDS 2.0 component library",
   "keywords": [
     "react",
@@ -29,7 +29,7 @@
     "build": "webpack -p",
     "build:watch": "webpack --watch",
     "lint": "tsc --noEmit && eslint --ext js,jsx,ts,tsx src && stylelint \"src/**/*.{css,scss}\"",
-    "release": "standard-version -t",
+    "release": "standard-version -t ''",
     "prepublishOnly": "yarn build",
     "happo": "happo",
     "happo-ci": "happo-ci-circleci",
@@ -109,7 +109,7 @@
     "react-docgen-typescript-loader": "^3.3.0",
     "react-test-renderer": "^16.12.0",
     "sass": "^1.26.0",
-    "sass-loader": "^8.0.2",
+    "sass-loader": "^9.0.2",
     "sass-resources-loader": "^2.0.1",
     "source-map-loader": "^1.0.0",
     "standard-version": "^8.0.0",
@@ -153,8 +153,7 @@
   },
   "standard-version": {
     "skip": {
-      "tag": true,
-      "commit": true
+      "tag": true
     },
     "types": [
       {

src/components/Button/Button.stories.tsx

@@ -75,3 +75,9 @@ export const customClass = (): React.ReactElement => (
     Click Me
   </Button>
 )
+
+export const disabled = (): React.ReactElement => (
+  <Button type="button" disabled>
+    Click Me
+  </Button>
+)

src/components/Button/Button.test.tsx

@@ -99,7 +99,6 @@ describe('Button component', () => {
     )
 
     fireEvent.click(getByText('Click Me'))
-
     expect(onClickFn).toHaveBeenCalledTimes(1)
   })
 

src/components/Button/Button.tsx

@@ -4,7 +4,6 @@ import { deprecationWarning } from '../../deprecation'
 
 interface ButtonProps {
   type: 'button' | 'submit' | 'reset'
-  disabled?: boolean
   children: React.ReactNode
   secondary?: boolean
   base?: boolean
@@ -25,11 +24,10 @@ interface ButtonProps {
 }
 
 export const Button = (
-  props: ButtonProps & React.HTMLAttributes<HTMLButtonElement>
+  props: ButtonProps & JSX.IntrinsicElements['button']
 ): React.ReactElement => {
   const {
     type,
-    disabled,
     children,
     secondary,
     base,
@@ -43,6 +41,7 @@ export const Button = (
     unstyled,
     onClick,
     className,
+    ...defaultProps
   } = props
 
   if (big) {
@@ -75,9 +74,9 @@ export const Button = (
     <button
       type={type}
       className={classes}
-      disabled={disabled}
       onClick={onClick}
-      data-testid="button">
+      data-testid="button"
+      {...defaultProps}>
       {children}
     </button>
   )

src/components/Footer/SocialLinks/SocialLinks.tsx

@@ -5,9 +5,7 @@ type SocialLinksProps = {
   links: React.ReactNode[]
 }
 
-export const SocialLinks = (
-  props: SocialLinksProps & React.HTMLAttributes<HTMLElement>
-): React.ReactElement => {
+export const SocialLinks = (props: SocialLinksProps): React.ReactElement => {
   const { links } = props
 
   return (

src/components/GovBanner/GovBanner.tsx

@@ -7,7 +7,7 @@ import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
 import httpsIcon from 'uswds/src/img/icon-https.svg'
 
 export const GovBanner = (
-  props: React.HTMLAttributes<HTMLElement>
+  props: JSX.IntrinsicElements['section']
 ): React.ReactElement => {
   const { className, ...sectionProps } = props
   const [isOpen, setOpenState] = useState(false)

src/components/Search/Search.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { deprecationWarning } from '../../deprecation'
 
 import { Button } from '../Button/Button'
-import { Form } from '../forms/Form/Form'
+import { Form, OptionalFormProps } from '../forms/Form/Form'
 import { Label } from '../forms/Label/Label'
 import { TextInput } from '../forms/TextInput/TextInput'
 
@@ -25,7 +25,7 @@ interface SearchInputProps {
 }
 
 export const Search = (
-  props: SearchInputProps & React.FormHTMLAttributes<HTMLFormElement>
+  props: SearchInputProps & OptionalFormProps
 ): React.ReactElement => {
   const {
     onSubmit,

src/components/Tag/Tag.tsx

@@ -7,9 +7,9 @@ interface TagProps {
 }
 
 export const Tag = (
-  props: TagProps & React.HTMLAttributes<HTMLSpanElement>
+  props: TagProps & JSX.IntrinsicElements['span']
 ): React.ReactElement => {
-  const { children, background, className } = props
+  const { children, background, className, ...spanProps } = props
 
   const style: React.CSSProperties = {}
   if (background) {
@@ -19,7 +19,11 @@ export const Tag = (
   const tagClasses = classnames('usa-tag', className)
 
   return (
-    <span data-testid="tag" className={tagClasses} style={{ ...style }}>
+    <span
+      data-testid="tag"
+      className={tagClasses}
+      style={{ ...style }}
+      {...spanProps}>
       {children}
     </span>
   )

src/components/card/Card/Card.tsx

@@ -10,7 +10,7 @@ interface CardProps {
 }
 
 export const Card = (
-  props: CardProps & React.HTMLAttributes<HTMLLIElement> & GridLayoutProp
+  props: CardProps & JSX.IntrinsicElements['li'] & GridLayoutProp
 ): React.ReactElement => {
   const {
     layout = 'standardDefault',

src/components/card/CardBody/CardBody.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 export const CardBody = (
-  props: { exdent?: boolean } & React.HTMLAttributes<HTMLDivElement>
+  props: { exdent?: boolean } & JSX.IntrinsicElements['div']
 ): React.ReactElement => {
   const { exdent, children, className, ...bodyProps } = props
 

src/components/card/CardFooter/CardFooter.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 export const CardFooter = (
-  props: { exdent?: boolean } & React.HTMLAttributes<HTMLDivElement>
+  props: { exdent?: boolean } & JSX.IntrinsicElements['div']
 ): React.ReactElement => {
   const { exdent, children, className, ...footerProps } = props
 

src/components/card/CardGroup/CardGroup.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 export const CardGroup = (
-  props: React.HTMLAttributes<HTMLUListElement>
+  props: JSX.IntrinsicElements['ul']
 ): React.ReactElement => {
   const { children, className, ...ulProps } = props
 

src/components/card/CardHeader/CardHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 export const CardHeader = (
-  props: { exdent?: boolean } & React.HTMLAttributes<HTMLElement>
+  props: { exdent?: boolean } & JSX.IntrinsicElements['header']
 ): React.ReactElement => {
   const { exdent, children, className, ...headerProps } = props
 

src/components/card/CardMedia/CardMedia.tsx

@@ -9,7 +9,7 @@ interface CardMediaProps {
 }
 
 export const CardMedia = (
-  props: CardMediaProps & React.HTMLAttributes<HTMLDivElement>
+  props: CardMediaProps & JSX.IntrinsicElements['div']
 ): React.ReactElement => {
   const {
     exdent,

src/components/forms/Checkbox/Checkbox.tsx

@@ -15,7 +15,7 @@ interface CheckboxProps {
 }
 
 export const Checkbox = (
-  props: CheckboxProps & React.InputHTMLAttributes<HTMLInputElement>
+  props: CheckboxProps & JSX.IntrinsicElements['input']
 ): React.ReactElement => {
   const { id, name, className, label, inputRef, ...inputProps } = props
 

src/components/forms/DateInput/DateInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { TextInput } from '../TextInput/TextInput'
+import { TextInput, OptionalTextInputProps } from '../TextInput/TextInput'
 import { Label } from '../Label/Label'
 import { FormGroup } from '../FormGroup/FormGroup'
 
@@ -15,7 +15,7 @@ interface DateInputElementProps {
 }
 
 export const DateInput = (
-  props: DateInputElementProps & React.InputHTMLAttributes<HTMLInputElement>
+  props: DateInputElementProps & OptionalTextInputProps
 ): React.ReactElement => {
   const {
     id,

src/components/forms/DateInputGroup/DateInputGroup.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 export const DateInputGroup = (
-  props: React.HTMLAttributes<HTMLElement>
+  props: JSX.IntrinsicElements['div']
 ): React.ReactElement => {
   const { children, className, ...divAttributes } = props
 

src/components/forms/Dropdown/Dropdown.tsx

@@ -15,7 +15,7 @@ interface DropdownProps {
 }
 
 export const Dropdown = (
-  props: DropdownProps & React.SelectHTMLAttributes<HTMLSelectElement>
+  props: DropdownProps & JSX.IntrinsicElements['select']
 ): React.ReactElement => {
   const { id, name, className, inputRef, children, ...inputProps } = props
 

src/components/forms/Form/Form.tsx

@@ -1,17 +1,22 @@
 import React from 'react'
 import classnames from 'classnames'
 
-interface FormProps {
+interface RequiredFormProps {
   children: React.ReactNode
   onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+}
+
+interface CustomFormProps {
   className?: string
   large?: boolean
   search?: boolean
 }
 
-export const Form = (
-  props: FormProps & React.FormHTMLAttributes<HTMLFormElement>
-): React.ReactElement => {
+export type OptionalFormProps = CustomFormProps & JSX.IntrinsicElements['form']
+
+type FormProps = RequiredFormProps & OptionalFormProps
+
+export const Form = (props: FormProps): React.ReactElement => {
   const { onSubmit, children, className, large, search, ...formProps } = props
 
   const classes = classnames(

src/components/forms/Radio/Radio.tsx

@@ -15,7 +15,7 @@ interface RadioProps {
 }
 
 export const Radio = (
-  props: RadioProps & React.InputHTMLAttributes<HTMLInputElement>
+  props: RadioProps & JSX.IntrinsicElements['input']
 ): React.ReactElement => {
   const { id, name, className, label, inputRef, ...inputProps } = props
 

src/components/forms/RangeInput/RangeInput.tsx

@@ -13,7 +13,7 @@ interface RangeInputProps {
 }
 
 export const RangeInput = (
-  props: RangeInputProps & React.InputHTMLAttributes<HTMLInputElement>
+  props: RangeInputProps & JSX.IntrinsicElements['input']
 ): React.ReactElement => {
   // Range defaults to min = 0, max = 100, step = 1, and value = (max/2) if not specified.
   const { className, inputRef, ...inputProps } = props

src/components/forms/TextInput/TextInput.tsx

@@ -2,10 +2,13 @@ import React from 'react'
 import classnames from 'classnames'
 import { deprecationWarning } from '../../../deprecation'
 
-interface TextInputProps {
+interface RequiredTextInputProps {
   id: string
   name: string
   type: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url'
+}
+
+interface CustomTextInputProps {
   className?: string
   validationStatus?: 'error' | 'success'
   /**
@@ -33,9 +36,12 @@ interface TextInputProps {
     | undefined
 }
 
-export const TextInput = (
-  props: TextInputProps & React.InputHTMLAttributes<HTMLInputElement>
-): React.ReactElement => {
+export type OptionalTextInputProps = CustomTextInputProps &
+  JSX.IntrinsicElements['input']
+
+type TextInputProps = RequiredTextInputProps & OptionalTextInputProps
+
+export const TextInput = (props: TextInputProps): React.ReactElement => {
   const {
     id,
     name,