From 0ec354e927a1859231f3f3a19c74063eacd7a33a Mon Sep 17 00:00:00 2001 From: Dave Price Date: Mon, 7 Jun 2021 12:18:01 +0100 Subject: [PATCH 1/3] Initial setup of ToggleComponent --- src/ui/molecules/ToggleComponent.test.tsx | 22 +++++++++++++++++++ src/ui/molecules/ToggleComponent.tsx | 21 ++++++++++++++++++ src/ui/molecules/index.ts | 1 + .../molecules/ToggleComponent.stories.tsx | 21 ++++++++++++++++++ src/ui/styles/ToggleComponent.scss | 0 src/ui/styles/index.scss | 1 + 6 files changed, 66 insertions(+) create mode 100644 src/ui/molecules/ToggleComponent.test.tsx create mode 100644 src/ui/molecules/ToggleComponent.tsx create mode 100644 src/ui/stories/molecules/ToggleComponent.stories.tsx create mode 100644 src/ui/styles/ToggleComponent.scss diff --git a/src/ui/molecules/ToggleComponent.test.tsx b/src/ui/molecules/ToggleComponent.test.tsx new file mode 100644 index 00000000..f3fa765b --- /dev/null +++ b/src/ui/molecules/ToggleComponent.test.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { cleanup, render, RenderResult } from '@testing-library/react'; +import Toggle from './Toggle'; + +describe('ToggleComponent', (): void => { + afterEach(cleanup); + + it('should render correctly', (): void => { + expect((): RenderResult => render()).not.toThrow(); + }); + + it('should render correctly with all props', (): void => { + expect( + (): RenderResult => + render( + + test + , + ), + ).not.toThrow(); + }); +}); diff --git a/src/ui/molecules/ToggleComponent.tsx b/src/ui/molecules/ToggleComponent.tsx new file mode 100644 index 00000000..9995e769 --- /dev/null +++ b/src/ui/molecules/ToggleComponent.tsx @@ -0,0 +1,21 @@ +import React, { ReactNode } from 'react'; +import { SelectField } from '../atoms'; + +interface Props { + id: string; + children?: ReactNode; + toggleLabel: string; + open?: boolean; + onToggle?: Function; +} + +const ToggleComponent = ({ open = false }: Props): JSX.Element => { + return ( +
+ Test + +
+ ); +}; + +export default ToggleComponent; diff --git a/src/ui/molecules/index.ts b/src/ui/molecules/index.ts index 29cc4231..9c31468f 100644 --- a/src/ui/molecules/index.ts +++ b/src/ui/molecules/index.ts @@ -15,4 +15,5 @@ export { default as SearchField } from './SearchField'; export { default as SelectedPeopleList } from './SelectedPeopleList'; export { default as SelectedOption } from './SelectedOption'; export { default as Toggle } from './Toggle'; +export { default as ToggleComponent } from './ToggleComponent'; export { default as UploadProgress } from './UploadProgress'; diff --git a/src/ui/stories/molecules/ToggleComponent.stories.tsx b/src/ui/stories/molecules/ToggleComponent.stories.tsx new file mode 100644 index 00000000..a02a4766 --- /dev/null +++ b/src/ui/stories/molecules/ToggleComponent.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { withKnobs } from '@storybook/addon-knobs'; +import '../../../core/styles/index.scss'; +import centered from '@storybook/addon-centered/react'; +import { SelectField } from '../../atoms'; + +storiesOf('ui | molecules/Toggle', module) + .addDecorator(withKnobs) + .addDecorator(centered) + .add( + 'ToggleComponent', + (): JSX.Element => { + return ( +
+ Test + +
+ ); + }, + ); diff --git a/src/ui/styles/ToggleComponent.scss b/src/ui/styles/ToggleComponent.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/ui/styles/index.scss b/src/ui/styles/index.scss index 0f875bcb..b65a5e16 100644 --- a/src/ui/styles/index.scss +++ b/src/ui/styles/index.scss @@ -33,6 +33,7 @@ @import './SelectedOption'; @import './SelectedPeopleList'; @import './Toggle'; +@import './ToggleComponent'; @import './UploadProgress'; @import './RichTextEditor'; From c34d387d15c30b84f5c7270ae1fee5d220b75290 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Mon, 7 Jun 2021 12:19:39 +0100 Subject: [PATCH 2/3] remove open value --- src/ui/molecules/ToggleComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/molecules/ToggleComponent.tsx b/src/ui/molecules/ToggleComponent.tsx index 9995e769..ec752c98 100644 --- a/src/ui/molecules/ToggleComponent.tsx +++ b/src/ui/molecules/ToggleComponent.tsx @@ -9,7 +9,7 @@ interface Props { onToggle?: Function; } -const ToggleComponent = ({ open = false }: Props): JSX.Element => { +const ToggleComponent = (): JSX.Element => { return (
Test From 982817efe37ed704c107aedd25ca30ddc565a679 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Tue, 15 Jun 2021 08:26:34 +0100 Subject: [PATCH 3/3] linting correction --- src/ui/atoms/SelectField.tsx | 2 +- src/ui/molecules/ToggleComponent.test.tsx | 106 +++++++++++++++++- src/ui/molecules/ToggleComponent.tsx | 35 ++++-- .../molecules/ToggleComponent.stories.tsx | 23 +++- src/ui/styles/ToggleComponent.scss | 3 + 5 files changed, 151 insertions(+), 18 deletions(-) diff --git a/src/ui/atoms/SelectField.tsx b/src/ui/atoms/SelectField.tsx index e3fd5089..7458ec4d 100644 --- a/src/ui/atoms/SelectField.tsx +++ b/src/ui/atoms/SelectField.tsx @@ -67,7 +67,7 @@ const SelectField = ({ /> ); return ( -
+
diff --git a/src/ui/molecules/ToggleComponent.test.tsx b/src/ui/molecules/ToggleComponent.test.tsx index f3fa765b..8821afe1 100644 --- a/src/ui/molecules/ToggleComponent.test.tsx +++ b/src/ui/molecules/ToggleComponent.test.tsx @@ -1,22 +1,118 @@ import React from 'react'; import { cleanup, render, RenderResult } from '@testing-library/react'; -import Toggle from './Toggle'; +import ToggleComponent from './ToggleComponent'; describe('ToggleComponent', (): void => { afterEach(cleanup); it('should render correctly', (): void => { - expect((): RenderResult => render()).not.toThrow(); + expect( + (): RenderResult => + render( + , + ), + ).not.toThrow(); }); it('should render correctly with all props', (): void => { expect( (): RenderResult => render( - - test - , + , ), ).not.toThrow(); }); + + it('should render question title correctly', (): void => { + const questionTitle = 'Question title'; + const { getByText } = render( + , + ); + expect(getByText(questionTitle)).toBeInTheDocument(); + }); + + it('should be empty in the primary select field', (): void => { + const { container } = render( + , + ); + + expect(container.querySelector('.select-field__placeholder')).toBeInTheDocument(); + }); + + it('should be empty in the secondary select field', (): void => { + const { container } = render( + , + ); + + expect(container.querySelector('.select-field__placeholder')).toBeInTheDocument(); + }); + + it('should have a value in the primary select dropdown field', (): void => { + const { container } = render( + , + ); + + expect(container.querySelector('#selectField').textContent).toContain('Argentina'); + }); + + it('should have a value in the secondary select dropdown field', (): void => { + const { container } = render( + , + ); + + expect(container.querySelector('#selectFieldTwo').textContent).toContain('Canada'); + }); }); diff --git a/src/ui/molecules/ToggleComponent.tsx b/src/ui/molecules/ToggleComponent.tsx index ec752c98..88dbe8f3 100644 --- a/src/ui/molecules/ToggleComponent.tsx +++ b/src/ui/molecules/ToggleComponent.tsx @@ -1,19 +1,38 @@ import React, { ReactNode } from 'react'; -import { SelectField } from '../atoms'; +import { ContentToggle, SelectField } from '../atoms'; + +export interface Value { + label: string; + value: string; +} interface Props { id: string; + selectId: string; children?: ReactNode; - toggleLabel: string; - open?: boolean; - onToggle?: Function; + labelText: string; + openText: string; + collapsedText: string; + questionTitle: string; + defaultValue?: Value; + values?: Value[]; } -const ToggleComponent = (): JSX.Element => { +const ToggleComponent = ({ + id, + selectId, + collapsedText, + openText, + questionTitle, + labelText, + defaultValue, + values, +}: Props): JSX.Element => { return ( -
- Test - +
+

{questionTitle}

+ +
); }; diff --git a/src/ui/stories/molecules/ToggleComponent.stories.tsx b/src/ui/stories/molecules/ToggleComponent.stories.tsx index a02a4766..88d79515 100644 --- a/src/ui/stories/molecules/ToggleComponent.stories.tsx +++ b/src/ui/stories/molecules/ToggleComponent.stories.tsx @@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react'; import { withKnobs } from '@storybook/addon-knobs'; import '../../../core/styles/index.scss'; import centered from '@storybook/addon-centered/react'; -import { SelectField } from '../../atoms'; +import { ContentToggle, SelectField } from '../../atoms'; storiesOf('ui | molecules/Toggle', module) .addDecorator(withKnobs) @@ -11,10 +11,25 @@ storiesOf('ui | molecules/Toggle', module) .add( 'ToggleComponent', (): JSX.Element => { + const collapsedText = '+ Add a second country of residence/affiliation'; + const openText = '- Remove a second country of residence/affiliation'; + const title = 'Your country of residence or professional affiliation'; + const labelText = 'Secondary country of residence/affiliation'; + const options = [ + { label: 'Argentina', value: 'argentina' }, + { label: 'Canada', value: 'canada' }, + { label: 'Denmark', value: 'denmark' }, + { label: 'France', value: 'france' }, + { label: 'Hungary', value: 'hungary' }, + { label: 'Peru', value: 'peru' }, + ]; return ( -
- Test - +
+

{title}

+ + + +
); }, diff --git a/src/ui/styles/ToggleComponent.scss b/src/ui/styles/ToggleComponent.scss index e69de29b..8237fd6c 100644 --- a/src/ui/styles/ToggleComponent.scss +++ b/src/ui/styles/ToggleComponent.scss @@ -0,0 +1,3 @@ +.select-field { + margin-bottom: 1.5rem; +} \ No newline at end of file