Infinite select component

src/ui/atoms/SelectField.tsx

@@ -67,7 +67,7 @@ const SelectField = ({
         />
     );
     return (
-        <div className={`select-field${className ? ' ' + className : ''}`}>
+        <div id={id} className={`select-field${className ? ' ' + className : ''}`}>
             <label id={`${id}-label`} className="typography__label typography__label--primary">
                 {labelText}
             </label>

src/ui/molecules/ToggleComponent.test.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { cleanup, render, RenderResult } from '@testing-library/react';
+import ToggleComponent from './ToggleComponent';
+
+describe('ToggleComponent', (): void => {
+    afterEach(cleanup);
+
+    it('should render correctly', (): void => {
+        expect(
+            (): RenderResult =>
+                render(
+                    <ToggleComponent
+                        id=""
+                        selectId=""
+                        openText=""
+                        collapsedText=""
+                        labelText=""
+                        questionTitle=""
+                    ></ToggleComponent>,
+                ),
+        ).not.toThrow();
+    });
+
+    it('should render correctly with all props', (): void => {
+        expect(
+            (): RenderResult =>
+                render(
+                    <ToggleComponent
+                        id="Test"
+                        selectId=""
+                        openText="This is some open text"
+                        collapsedText="This is some collapsed Text"
+                        labelText="Label Text"
+                        questionTitle="question title"
+                    ></ToggleComponent>,
+                ),
+        ).not.toThrow();
+    });
+
+    it('should render question title correctly', (): void => {
+        const questionTitle = 'Question title';
+        const { getByText } = render(
+            <ToggleComponent
+                id=""
+                selectId=""
+                openText=""
+                collapsedText=""
+                labelText=""
+                questionTitle={questionTitle}
+            ></ToggleComponent>,
+        );
+        expect(getByText(questionTitle)).toBeInTheDocument();
+    });
+
+    it('should be empty in the primary select field', (): void => {
+        const { container } = render(
+            <ToggleComponent
+                id="SelectField"
+                selectId=""
+                openText=""
+                collapsedText=""
+                labelText=""
+                questionTitle=""
+            ></ToggleComponent>,
+        );
+
+        expect(container.querySelector('.select-field__placeholder')).toBeInTheDocument();
+    });
+
+    it('should be empty in the secondary select field', (): void => {
+        const { container } = render(
+            <ToggleComponent
+                id="SelectFieldTwo"
+                selectId=""
+                openText=""
+                collapsedText=""
+                labelText=""
+                questionTitle=""
+            ></ToggleComponent>,
+        );
+
+        expect(container.querySelector('.select-field__placeholder')).toBeInTheDocument();
+    });
+
+    it('should have a value in the primary select dropdown field', (): void => {
+        const { container } = render(
+            <ToggleComponent
+                id="selectField"
+                selectId=""
+                openText=""
+                collapsedText=""
+                labelText=""
+                questionTitle=""
+                values={[{ label: 'test-option', value: 'test' }]}
+                defaultValue={{ label: 'Argentina', value: 'Argentina' }}
+            ></ToggleComponent>,
+        );
+
+        expect(container.querySelector('#selectField').textContent).toContain('Argentina');
+    });
+
+    it('should have a value in the secondary select dropdown field', (): void => {
+        const { container } = render(
+            <ToggleComponent
+                id="selectFieldTwo"
+                selectId=""
+                openText=""
+                collapsedText=""
+                labelText=""
+                questionTitle=""
+                values={[{ label: 'test-option', value: 'test' }]}
+                defaultValue={{ label: 'Canada', value: 'Canada' }}
+            ></ToggleComponent>,
+        );
+
+        expect(container.querySelector('#selectFieldTwo').textContent).toContain('Canada');
+    });
+});

src/ui/molecules/ToggleComponent.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode } from 'react';
+import { ContentToggle, SelectField } from '../atoms';
+
+export interface Value {
+    label: string;
+    value: string;
+}
+
+interface Props {
+    id: string;
+    selectId: string;
+    children?: ReactNode;
+    labelText: string;
+    openText: string;
+    collapsedText: string;
+    questionTitle: string;
+    defaultValue?: Value;
+    values?: Value[];
+}
+
+const ToggleComponent = ({
+    id,
+    selectId,
+    collapsedText,
+    openText,
+    questionTitle,
+    labelText,
+    defaultValue,
+    values,
+}: Props): JSX.Element => {
+    return (
+        <div className="toggle-component" id={id}>
+            <h3>{questionTitle}</h3>
+            <SelectField id={selectId} labelText={labelText} defaultValue={defaultValue} values={values}></SelectField>
+            <ContentToggle id={id} collapsedText={collapsedText} openText={openText}></ContentToggle>
+        </div>
+    );
+};
+
+export default ToggleComponent;

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';

src/ui/stories/molecules/ToggleComponent.stories.tsx

@@ -0,0 +1,36 @@
+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 { ContentToggle, SelectField } from '../../atoms';
+
+storiesOf('ui | molecules/Toggle', module)
+    .addDecorator(withKnobs)
+    .addDecorator(centered)
+    .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 (
+                <div className="toggle-component">
+                    <h3 className="typography__heading typography__heading--h3">{title}</h3>
+                    <SelectField id="selectField" labelText="" values={options}></SelectField>
+                    <ContentToggle id="ContentToggle" collapsedText={collapsedText} openText={openText}>
+                        <SelectField id="SelectFieldTwo" labelText={labelText} values={options}></SelectField>
+                    </ContentToggle>
+                </div>
+            );
+        },
+    );

src/ui/styles/ToggleComponent.scss

@@ -0,0 +1,3 @@
+.select-field {
+  margin-bottom: 1.5rem;
+}

src/ui/styles/index.scss

@@ -34,6 +34,7 @@
 @import './SelectedPeopleList';
 @import './ContentToggle';
 @import './Toggle';
+@import './ToggleComponent';
 @import './UploadProgress';
 @import './RichTextEditor';