From 28be940ca29e8c15faa98244879e76a625043e1c Mon Sep 17 00:00:00 2001 From: eamahanna Date: Wed, 6 May 2020 17:40:14 -0800 Subject: [PATCH 01/12] Add dateinput component --- .../forms/DateInput/DateInput.stories.tsx | 32 +++++++ .../forms/DateInput/DateInput.test.tsx | 11 +++ src/components/forms/DateInput/DateInput.tsx | 90 +++++++++++++++++++ yarn.lock | 23 ----- 4 files changed, 133 insertions(+), 23 deletions(-) create mode 100644 src/components/forms/DateInput/DateInput.stories.tsx create mode 100644 src/components/forms/DateInput/DateInput.test.tsx create mode 100644 src/components/forms/DateInput/DateInput.tsx diff --git a/src/components/forms/DateInput/DateInput.stories.tsx b/src/components/forms/DateInput/DateInput.stories.tsx new file mode 100644 index 0000000000..9606be8f9a --- /dev/null +++ b/src/components/forms/DateInput/DateInput.stories.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import { DateInput } from './DateInput' +import { Form } from '../Form/Form' + +export default { + title: 'DateInput', + parameters: { + info: ` +USWDS 2.0 DateInput component + +Source: https://designsystem.digital.gov/components/form-controls/#text-input +`, + }, +} + +const mockSubmit = (): void => { + /* mock submit fn */ +} + +export const defaultDateInput = (): React.ReactElement => ( +
+ + +) diff --git a/src/components/forms/DateInput/DateInput.test.tsx b/src/components/forms/DateInput/DateInput.test.tsx new file mode 100644 index 0000000000..5b765fd2a7 --- /dev/null +++ b/src/components/forms/DateInput/DateInput.test.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import { render } from '@testing-library/react' + +import { DateInput } from './DateInput' + +describe('DateInput component', () => { + it('renders without errors', () => { + const { queryByTestId } = render() + expect(queryByTestId('textInput')).toBeInTheDocument() + }) +}) diff --git a/src/components/forms/DateInput/DateInput.tsx b/src/components/forms/DateInput/DateInput.tsx new file mode 100644 index 0000000000..1329f6de09 --- /dev/null +++ b/src/components/forms/DateInput/DateInput.tsx @@ -0,0 +1,90 @@ +import React from 'react' +import classnames from 'classnames' + +import { TextInput } from '../TextInput/TextInput' +import { Label } from '../Label/Label' +import { Fieldset } from '../Fieldset/Fieldset' + +interface DateInputProps { + id: string + name: string + legend: React.ReactNode + month?: boolean + day?: boolean + year?: boolean + hint?: string + className?: string +} + +export const DateInput = ( + props: DateInputProps & React.HTMLAttributes +): React.ReactElement => { + const { + id, + name, + legend, + month, + day, + year, + hint, + className, + ...divAttributes + } = props + + const classes = classnames('usa-memorable-date', className) + + return ( +
+
+ + {hint} + + {month && ( +
+ + +
+ )} + {day && ( +
+ + +
+ )} + {year && ( +
+ + +
+ )} +
+
+ ) +} + +export default DateInput diff --git a/yarn.lock b/yarn.lock index d95fd80abc..bda7caa285 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2266,16 +2266,6 @@ regexpp "^3.0.0" tsutils "^3.17.1" -"@typescript-eslint/experimental-utils@2.30.0": - version "2.30.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.30.0.tgz#9845e868c01f3aed66472c561d4b6bac44809dd0" - integrity sha512-L3/tS9t+hAHksy8xuorhOzhdefN0ERPDWmR9CclsIGOUqGKy6tqc/P+SoXeJRye5gazkuPO0cK9MQRnolykzkA== - dependencies: - "@types/json-schema" "^7.0.3" - "@typescript-eslint/typescript-estree" "2.30.0" - eslint-scope "^5.0.0" - eslint-utils "^2.0.0" - "@typescript-eslint/experimental-utils@2.31.0": version "2.31.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.31.0.tgz#a9ec514bf7fd5e5e82bc10dcb6a86d58baae9508" @@ -2296,19 +2286,6 @@ "@typescript-eslint/typescript-estree" "2.31.0" eslint-visitor-keys "^1.1.0" -"@typescript-eslint/typescript-estree@2.30.0": - version "2.30.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.30.0.tgz#1b8e848b55144270255ffbfe4c63291f8f766615" - integrity sha512-nI5WOechrA0qAhnr+DzqwmqHsx7Ulr/+0H7bWCcClDhhWkSyZR5BmTvnBEyONwJCTWHfc5PAQExX24VD26IAVw== - dependencies: - debug "^4.1.1" - eslint-visitor-keys "^1.1.0" - glob "^7.1.6" - is-glob "^4.0.1" - lodash "^4.17.15" - semver "^6.3.0" - tsutils "^3.17.1" - "@typescript-eslint/typescript-estree@2.31.0": version "2.31.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.31.0.tgz#ac536c2d46672aa1f27ba0ec2140d53670635cfd" From 5c118d13b055d084af70afebbdecd45aa85b3702 Mon Sep 17 00:00:00 2001 From: eamahanna Date: Wed, 6 May 2020 17:43:46 -0800 Subject: [PATCH 02/12] Fix element --- src/components/forms/DateInput/DateInput.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/forms/DateInput/DateInput.tsx b/src/components/forms/DateInput/DateInput.tsx index 1329f6de09..e40f4893c0 100644 --- a/src/components/forms/DateInput/DateInput.tsx +++ b/src/components/forms/DateInput/DateInput.tsx @@ -35,10 +35,10 @@ export const DateInput = ( return (
+ + {hint} +
- - {hint} - {month && (
From ca1eb09aed7254de52d239eb1deedb69a76e70b6 Mon Sep 17 00:00:00 2001 From: eamahanna Date: Thu, 7 May 2020 11:17:50 -0800 Subject: [PATCH 03/12] Refactor component --- .../forms/DateInput/DateInput.stories.tsx | 15 +++- src/components/forms/DateInput/DateInput.tsx | 82 ++++++++++--------- 2 files changed, 54 insertions(+), 43 deletions(-) diff --git a/src/components/forms/DateInput/DateInput.stories.tsx b/src/components/forms/DateInput/DateInput.stories.tsx index 9606be8f9a..4e32b77dff 100644 --- a/src/components/forms/DateInput/DateInput.stories.tsx +++ b/src/components/forms/DateInput/DateInput.stories.tsx @@ -22,11 +22,20 @@ export const defaultDateInput = (): React.ReactElement => ( ) + +export const partialDateInput = (): React.ReactElement => ( +
+ + +) diff --git a/src/components/forms/DateInput/DateInput.tsx b/src/components/forms/DateInput/DateInput.tsx index e40f4893c0..dced6b4019 100644 --- a/src/components/forms/DateInput/DateInput.tsx +++ b/src/components/forms/DateInput/DateInput.tsx @@ -5,6 +5,14 @@ import { TextInput } from '../TextInput/TextInput' import { Label } from '../Label/Label' import { Fieldset } from '../Fieldset/Fieldset' +interface DateInputElementProps { + id: string + name: string + label: string + maxLength: number + minLength?: number +} + interface DateInputProps { id: string name: string @@ -16,6 +24,28 @@ interface DateInputProps { className?: string } +const DateInputElement = ( + props: DateInputElementProps & React.HTMLAttributes +): React.ReactElement => { + const { id, name, label, maxLength, minLength } = props + + return ( +
+ + +
+ ) +} + export const DateInput = ( props: DateInputProps & React.HTMLAttributes ): React.ReactElement => { @@ -23,9 +53,9 @@ export const DateInput = ( id, name, legend, - month, - day, - year, + month = true, + day = true, + year = true, hint, className, ...divAttributes @@ -40,47 +70,19 @@ export const DateInput = (
{month && ( -
- - -
+ )} {day && ( -
- - -
+ )} {year && ( -
- - -
+ )}
From a409d655da0f19cedb540cd6fa10dac0f60e33d2 Mon Sep 17 00:00:00 2001 From: eamahanna Date: Thu, 7 May 2020 13:58:20 -0800 Subject: [PATCH 04/12] Add tests and stories --- .../forms/DateInput/DateInput.stories.tsx | 34 +++++++---------- .../forms/DateInput/DateInput.test.tsx | 38 ++++++++++++++++++- src/components/forms/DateInput/DateInput.tsx | 24 ++++++++---- 3 files changed, 66 insertions(+), 30 deletions(-) diff --git a/src/components/forms/DateInput/DateInput.stories.tsx b/src/components/forms/DateInput/DateInput.stories.tsx index 4e32b77dff..bff1a5079a 100644 --- a/src/components/forms/DateInput/DateInput.stories.tsx +++ b/src/components/forms/DateInput/DateInput.stories.tsx @@ -13,29 +13,21 @@ Source: https://designsystem.digital.gov/components/form-controls/#text-input }, } -const mockSubmit = (): void => { - /* mock submit fn */ -} - export const defaultDateInput = (): React.ReactElement => ( -
- - + ) export const partialDateInput = (): React.ReactElement => ( -
- - + ) diff --git a/src/components/forms/DateInput/DateInput.test.tsx b/src/components/forms/DateInput/DateInput.test.tsx index 5b765fd2a7..fd35375314 100644 --- a/src/components/forms/DateInput/DateInput.test.tsx +++ b/src/components/forms/DateInput/DateInput.test.tsx @@ -5,7 +5,41 @@ import { DateInput } from './DateInput' describe('DateInput component', () => { it('renders without errors', () => { - const { queryByTestId } = render() - expect(queryByTestId('textInput')).toBeInTheDocument() + const { getByText } = render( + + ) + expect(getByText('Date of Birth')).toBeInTheDocument() + }) + + it('renders the month, day and year inputs', () => { + const { getByText } = render( + + ) + expect(getByText('Month')).toBeInTheDocument() + expect(getByText('Day')).toBeInTheDocument() + expect(getByText('Year')).toBeInTheDocument() + }) + + it('renders does not render a dataInputElement when false', () => { + const { queryByText } = render( + + ) + expect(queryByText('Month')).toEqual(null) }) }) diff --git a/src/components/forms/DateInput/DateInput.tsx b/src/components/forms/DateInput/DateInput.tsx index dced6b4019..3af4928ccd 100644 --- a/src/components/forms/DateInput/DateInput.tsx +++ b/src/components/forms/DateInput/DateInput.tsx @@ -31,11 +31,11 @@ const DateInputElement = ( return (
- +
{month && ( - + )} {day && ( - + )} {year && ( Date: Thu, 7 May 2020 14:07:58 -0800 Subject: [PATCH 05/12] Update changelog --- CHANGELOG.md | 1 + src/components/forms/DateInput/DateInput.stories.tsx | 5 ++--- src/components/forms/DateInput/DateInput.test.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 26497d047a..8fff2ee6e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## UNRELEASED +- Added form dateInput component - Added yarn audit check to dangerfile (on package change) - Added search component diff --git a/src/components/forms/DateInput/DateInput.stories.tsx b/src/components/forms/DateInput/DateInput.stories.tsx index bff1a5079a..bd1503ee1f 100644 --- a/src/components/forms/DateInput/DateInput.stories.tsx +++ b/src/components/forms/DateInput/DateInput.stories.tsx @@ -1,14 +1,13 @@ import React from 'react' import { DateInput } from './DateInput' -import { Form } from '../Form/Form' export default { - title: 'DateInput', + title: 'Form/DateInput', parameters: { info: ` USWDS 2.0 DateInput component -Source: https://designsystem.digital.gov/components/form-controls/#text-input +Source: https://designsystem.digital.gov/components/form-controls/#date-input `, }, } diff --git a/src/components/forms/DateInput/DateInput.test.tsx b/src/components/forms/DateInput/DateInput.test.tsx index fd35375314..1ca978b408 100644 --- a/src/components/forms/DateInput/DateInput.test.tsx +++ b/src/components/forms/DateInput/DateInput.test.tsx @@ -30,7 +30,7 @@ describe('DateInput component', () => { expect(getByText('Year')).toBeInTheDocument() }) - it('renders does not render a dataInputElement when false', () => { + it('does not render a dataInputElement when false', () => { const { queryByText } = render( Date: Wed, 13 May 2020 15:52:15 -0800 Subject: [PATCH 06/12] Merge in develop From deddb920a8e5a6a301b0a3412c41d2a2ea1d1a60 Mon Sep 17 00:00:00 2001 From: eamahanna Date: Thu, 14 May 2020 08:24:40 -0800 Subject: [PATCH 07/12] Split into two components --- .../forms/DateInput/DateInput.stories.tsx | 48 ++++++++-- .../forms/DateInput/DateInput.test.tsx | 53 ++++++++--- src/components/forms/DateInput/DateInput.tsx | 93 +++++-------------- .../DateInputGroup/DateInputGroup.stories.tsx | 18 ++++ .../DateInputGroup/DateInputGroup.test.tsx | 17 ++++ .../forms/DateInputGroup/DateInputGroup.tsx | 18 ++++ src/index.ts | 1 + 7 files changed, 154 insertions(+), 94 deletions(-) create mode 100644 src/components/forms/DateInputGroup/DateInputGroup.stories.tsx create mode 100644 src/components/forms/DateInputGroup/DateInputGroup.test.tsx create mode 100644 src/components/forms/DateInputGroup/DateInputGroup.tsx diff --git a/src/components/forms/DateInput/DateInput.stories.tsx b/src/components/forms/DateInput/DateInput.stories.tsx index bd1503ee1f..1d7dfae9e7 100644 --- a/src/components/forms/DateInput/DateInput.stories.tsx +++ b/src/components/forms/DateInput/DateInput.stories.tsx @@ -1,5 +1,7 @@ import React from 'react' import { DateInput } from './DateInput' +import { DateInputGroup } from '../DateInputGroup/DateInputGroup' +import { Fieldset } from '../Fieldset/Fieldset' export default { title: 'Form/DateInput', @@ -16,17 +18,43 @@ export const defaultDateInput = (): React.ReactElement => ( ) -export const partialDateInput = (): React.ReactElement => ( - +export const dateOfBirthExample = (): React.ReactElement => ( +
+ + For example: 4 28 1986 + + + + + + +
) diff --git a/src/components/forms/DateInput/DateInput.test.tsx b/src/components/forms/DateInput/DateInput.test.tsx index 1ca978b408..cc707fa896 100644 --- a/src/components/forms/DateInput/DateInput.test.tsx +++ b/src/components/forms/DateInput/DateInput.test.tsx @@ -9,37 +9,60 @@ describe('DateInput component', () => { ) - expect(getByText('Date of Birth')).toBeInTheDocument() + expect(getByText('Day')).toBeInTheDocument() }) it('renders the month, day and year inputs', () => { const { getByText } = render( - + <> + + + + ) expect(getByText('Month')).toBeInTheDocument() expect(getByText('Day')).toBeInTheDocument() expect(getByText('Year')).toBeInTheDocument() }) - it('does not render a dataInputElement when false', () => { - const { queryByText } = render( + it('renders the correct class based on unit', () => { + const { getByTestId } = render( ) - expect(queryByText('Month')).toEqual(null) + expect(getByTestId('formGroup')).toHaveClass('usa-form-group--day') }) }) diff --git a/src/components/forms/DateInput/DateInput.tsx b/src/components/forms/DateInput/DateInput.tsx index 3af4928ccd..990aeebe2e 100644 --- a/src/components/forms/DateInput/DateInput.tsx +++ b/src/components/forms/DateInput/DateInput.tsx @@ -3,34 +3,42 @@ import classnames from 'classnames' import { TextInput } from '../TextInput/TextInput' import { Label } from '../Label/Label' -import { Fieldset } from '../Fieldset/Fieldset' +import { FormGroup } from '../FormGroup/FormGroup' interface DateInputElementProps { id: string name: string label: string + unit: 'month' | 'day' | 'year' maxLength: number minLength?: number } -interface DateInputProps { - id: string - name: string - legend: React.ReactNode - month?: boolean - day?: boolean - year?: boolean - hint?: string - className?: string -} - -const DateInputElement = ( +export const DateInput = ( props: DateInputElementProps & React.HTMLAttributes ): React.ReactElement => { - const { id, name, label, maxLength, minLength } = props + const { + id, + name, + label, + unit, + maxLength, + minLength, + className, + ...divProps + } = props + + const classes = classnames( + { + 'usa-form-group--month': unit == 'month', + 'usa-form-group--day': unit == 'day', + 'usa-form-group--year': unit == 'year', + }, + className + ) return ( -
+ -
- ) -} - -export const DateInput = ( - props: DateInputProps & React.HTMLAttributes -): React.ReactElement => { - const { - id, - name, - legend, - month = true, - day = true, - year = true, - hint, - className, - ...divAttributes - } = props - - const classes = classnames('usa-memorable-date', className) - - return ( -
- - {hint} - -
- {month && ( - - )} - {day && ( - - )} - {year && ( - - )} -
-
+ ) } diff --git a/src/components/forms/DateInputGroup/DateInputGroup.stories.tsx b/src/components/forms/DateInputGroup/DateInputGroup.stories.tsx new file mode 100644 index 0000000000..e6a5547686 --- /dev/null +++ b/src/components/forms/DateInputGroup/DateInputGroup.stories.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { DateInputGroup } from './DateInputGroup' + +export default { + title: 'Form/DateInputGroup', + parameters: { + info: ` +USWDS 2.0 DateInput component + +Source: https://designsystem.digital.gov/components/form-controls/#date-input +`, + }, +} + +// TODO Determine if this is the way to display this component +export const defaultDateInputGroup = (): React.ReactElement => ( + Test Date: 12-31-1999 +) diff --git a/src/components/forms/DateInputGroup/DateInputGroup.test.tsx b/src/components/forms/DateInputGroup/DateInputGroup.test.tsx new file mode 100644 index 0000000000..0ab32d0084 --- /dev/null +++ b/src/components/forms/DateInputGroup/DateInputGroup.test.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import { render } from '@testing-library/react' + +import { DateInputGroup } from './DateInputGroup' + +describe('DateInputGroup component', () => { + it('renders without errors', () => { + const { getByTestId } = render() + expect(getByTestId('dateInputGroup')).toBeInTheDocument() + }) + + it('renders children', () => { + const { getByText } = render(DATES) + + expect(getByText('DATES')).toBeInTheDocument() + }) +}) diff --git a/src/components/forms/DateInputGroup/DateInputGroup.tsx b/src/components/forms/DateInputGroup/DateInputGroup.tsx new file mode 100644 index 0000000000..a5d62bea9a --- /dev/null +++ b/src/components/forms/DateInputGroup/DateInputGroup.tsx @@ -0,0 +1,18 @@ +import React from 'react' + +export const DateInputGroup = ( + props: React.HTMLAttributes +): React.ReactElement => { + const { children, ...divAttributes } = props + + return ( +
+ {children} +
+ ) +} + +export default DateInputGroup diff --git a/src/index.ts b/src/index.ts index c995e7efc1..d954b48bdb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -16,6 +16,7 @@ export { Grid } from './components/grid/Grid/Grid' /** Form components */ export { Checkbox } from './components/forms/Checkbox/Checkbox' +export { DateInput } from './components/forms/DateInput/DateInput' export { Dropdown } from './components/forms/Dropdown/Dropdown' export { ErrorMessage } from './components/forms/ErrorMessage/ErrorMessage' export { Fieldset } from './components/forms/Fieldset/Fieldset' From b123bd60e6a3158dc7d6d7411e41b1cd2eeed9f9 Mon Sep 17 00:00:00 2001 From: eamahanna Date: Thu, 14 May 2020 08:26:07 -0800 Subject: [PATCH 08/12] Update changelog --- CHANGELOG.md | 2 +- src/index.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 093b383954..1c8da1f15d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## UNRELEASED -- Added form dateInput component +- Added form dateInput and dateInputGroup components - Added yarn audit check to dangerfile (on package change) - Added search component - Added Grid, GridContainer components diff --git a/src/index.ts b/src/index.ts index d954b48bdb..cd24071dd4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -17,6 +17,7 @@ export { Grid } from './components/grid/Grid/Grid' /** Form components */ export { Checkbox } from './components/forms/Checkbox/Checkbox' export { DateInput } from './components/forms/DateInput/DateInput' +export { DateInputGroup } from './components/forms/DateInputGroup/DateInputGroup' export { Dropdown } from './components/forms/Dropdown/Dropdown' export { ErrorMessage } from './components/forms/ErrorMessage/ErrorMessage' export { Fieldset } from './components/forms/Fieldset/Fieldset' From dbb1e15bb5bfa3d1f20668687201623d6f8629c9 Mon Sep 17 00:00:00 2001 From: eamahanna Date: Mon, 18 May 2020 13:06:37 -0800 Subject: [PATCH 09/12] PR review updates --- src/components/forms/DateInput/DateInput.tsx | 24 +++++++++---------- .../DateInputGroup/DateInputGroup.stories.tsx | 18 -------------- .../forms/DateInputGroup/DateInputGroup.tsx | 10 ++++---- 3 files changed, 17 insertions(+), 35 deletions(-) delete mode 100644 src/components/forms/DateInputGroup/DateInputGroup.stories.tsx diff --git a/src/components/forms/DateInput/DateInput.tsx b/src/components/forms/DateInput/DateInput.tsx index 990aeebe2e..b173637e43 100644 --- a/src/components/forms/DateInput/DateInput.tsx +++ b/src/components/forms/DateInput/DateInput.tsx @@ -15,7 +15,7 @@ interface DateInputElementProps { } export const DateInput = ( - props: DateInputElementProps & React.HTMLAttributes + props: DateInputElementProps & React.InputHTMLAttributes ): React.ReactElement => { const { id, @@ -25,23 +25,23 @@ export const DateInput = ( maxLength, minLength, className, - ...divProps + ...inputProps } = props - const classes = classnames( - { - 'usa-form-group--month': unit == 'month', - 'usa-form-group--day': unit == 'day', - 'usa-form-group--year': unit == 'year', - }, - className - ) + const formClasses = classnames({ + 'usa-form-group--month': unit == 'month', + 'usa-form-group--day': unit == 'day', + 'usa-form-group--year': unit == 'year', + }) + + const inputClasses = classnames('usa-input--inline', className) return ( - + ( - Test Date: 12-31-1999 -) diff --git a/src/components/forms/DateInputGroup/DateInputGroup.tsx b/src/components/forms/DateInputGroup/DateInputGroup.tsx index a5d62bea9a..d133cc1433 100644 --- a/src/components/forms/DateInputGroup/DateInputGroup.tsx +++ b/src/components/forms/DateInputGroup/DateInputGroup.tsx @@ -1,15 +1,15 @@ import React from 'react' +import classnames from 'classnames' export const DateInputGroup = ( props: React.HTMLAttributes ): React.ReactElement => { - const { children, ...divAttributes } = props + const { children, className, ...divAttributes } = props + + const classes = classnames('usa-memorable-date', className) return ( -
+
{children}
) From 3489d514248bd5506d8c551807c3399965002292 Mon Sep 17 00:00:00 2001 From: eamahanna Date: Mon, 18 May 2020 13:07:44 -0800 Subject: [PATCH 10/12] Fix class name --- src/components/forms/DateInput/DateInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/forms/DateInput/DateInput.tsx b/src/components/forms/DateInput/DateInput.tsx index b173637e43..18df6ad43d 100644 --- a/src/components/forms/DateInput/DateInput.tsx +++ b/src/components/forms/DateInput/DateInput.tsx @@ -28,7 +28,7 @@ export const DateInput = ( ...inputProps } = props - const formClasses = classnames({ + const formGroupClasses = classnames({ 'usa-form-group--month': unit == 'month', 'usa-form-group--day': unit == 'day', 'usa-form-group--year': unit == 'year', @@ -37,7 +37,7 @@ export const DateInput = ( const inputClasses = classnames('usa-input--inline', className) return ( - + Date: Wed, 20 May 2020 07:56:04 -0800 Subject: [PATCH 11/12] feat: change legend --- src/components/forms/DateInput/DateInput.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/forms/DateInput/DateInput.stories.tsx b/src/components/forms/DateInput/DateInput.stories.tsx index 1d7dfae9e7..92b013f0dc 100644 --- a/src/components/forms/DateInput/DateInput.stories.tsx +++ b/src/components/forms/DateInput/DateInput.stories.tsx @@ -26,7 +26,7 @@ export const defaultDateInput = (): React.ReactElement => ( ) export const dateOfBirthExample = (): React.ReactElement => ( -
+
For example: 4 28 1986 From b468eafd164e13d6434fa76f132aeeac11b25ecc Mon Sep 17 00:00:00 2001 From: eamahanna Date: Wed, 20 May 2020 08:16:18 -0800 Subject: [PATCH 12/12] feat: add additional stories --- .../forms/DateInput/DateInput.stories.tsx | 26 +++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/src/components/forms/DateInput/DateInput.stories.tsx b/src/components/forms/DateInput/DateInput.stories.tsx index 92b013f0dc..75d3de68e3 100644 --- a/src/components/forms/DateInput/DateInput.stories.tsx +++ b/src/components/forms/DateInput/DateInput.stories.tsx @@ -4,7 +4,7 @@ import { DateInputGroup } from '../DateInputGroup/DateInputGroup' import { Fieldset } from '../Fieldset/Fieldset' export default { - title: 'Form/DateInput', + title: 'Forms/DateInput', parameters: { info: ` USWDS 2.0 DateInput component @@ -14,7 +14,7 @@ Source: https://designsystem.digital.gov/components/form-controls/#date-input }, } -export const defaultDateInput = (): React.ReactElement => ( +export const monthDateInput = (): React.ReactElement => ( ( /> ) +export const dayDateInput = (): React.ReactElement => ( + +) + +export const yearDateInput = (): React.ReactElement => ( + +) + export const dateOfBirthExample = (): React.ReactElement => (