feat: forms using state proptype migrated to updated options (#968)

SAP · Apr 21, 2020 · 0aea9bd · 0aea9bd
1 parent 1a7afd2
commit 0aea9bd
Show file tree

Hide file tree

Showing 32 changed files with 487 additions and 49 deletions.
diff --git a/src/Forms/Checkbox.js b/src/Forms/Checkbox.js
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { FORM_STATES } from '../utils/constants';
+import { FORM_MESSAGE_TYPES } from '../utils/constants';
 import FormItem from './FormItem';
 import FormLabel from './FormLabel';
 import PropTypes from 'prop-types';
@@ -40,7 +40,7 @@ const Checkbox = React.forwardRef(({
     const inputEl = useRef();
 
     useEffect(() => {
-        inputEl && (inputEl.current.indeterminate = indeterminate);
+        inputEl && inputEl.current && (inputEl.current.indeterminate = indeterminate);
     });
 
     useEffect(() => {
@@ -115,7 +115,7 @@ Checkbox.propTypes = {
     labelClassName: PropTypes.string,
     labelProps: PropTypes.object,
     name: PropTypes.string,
-    state: PropTypes.oneOf(FORM_STATES),
+    state: PropTypes.oneOf(FORM_MESSAGE_TYPES),
     value: PropTypes.string,
     onChange: PropTypes.func
 };

diff --git a/src/Forms/Checkbox.test.js b/src/Forms/Checkbox.test.js
@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
 
 describe('<Checkbox />', () => {
     const checkbox = (
-        <Checkbox id='foo' value='Option 1' />
+        <Checkbox id='foo' value='Option 1'>Label</Checkbox>
     );
 
     test('create checkbox', () => {
@@ -17,7 +17,7 @@ describe('<Checkbox />', () => {
 
     describe('Checkbox Tests', () => {
         let setup = (props) => {
-            return mount(<Checkbox value='Label 1' {...props} />);
+            return mount(<Checkbox value='Label 1' {...props}>Label</Checkbox>);
         };
         test('should add checked attribute when checked is passed', () => {
             let element = setup({
@@ -83,37 +83,73 @@ describe('<Checkbox />', () => {
         });
 
         test('should allow props to be spread to the Checkbox component', () => {
-            const element = mount(<Checkbox data-sample='Sample' />);
+            const element = mount(<Checkbox data-sample='Sample'>Label</Checkbox>);
 
             expect(
                 element.find('.fd-form-item').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
         test('should allow props to be spread to the Checkbox component input', () => {
-            const element = mount(<Checkbox inputProps={{ 'data-sample': 'Sample' }} />);
+            const element = mount(<Checkbox inputProps={{ 'data-sample': 'Sample' }}>Label</Checkbox>);
 
             expect(
                 element.find('.fd-checkbox').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
         test('should allow props to be spread to the Checkbox component label', () => {
-            const element = mount(<Checkbox labelProps={{ 'data-sample': 'Sample' }} />);
+            const element = mount(<Checkbox labelProps={{ 'data-sample': 'Sample' }}>Label</Checkbox>);
 
             expect(
                 element.find('.fd-form-label').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
     });
+    describe('Validation states', () => {
+        test('should render the correct snapshots', () => {
+            const checkboxWarning = (
+                <Checkbox id='foo' state='warning'>Label</Checkbox>
+            );
+
+            let component = renderer.create(checkboxWarning);
+            let tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+
+            const checkboxError = (
+                <Checkbox id='foo' state='error'>Label</Checkbox>
+            );
+
+            component = renderer.create(checkboxError);
+            tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+
+            const checkboxSuccess = (
+                <Checkbox id='foo' state='success'>Label</Checkbox>
+            );
+
+            component = renderer.create(checkboxSuccess);
+            tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+
+            const checkboxInformation = (
+                <Checkbox id='foo' state='information'>Label</Checkbox>
+            );
+
+            component = renderer.create(checkboxInformation);
+            tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+        });
+    });
+
     test('forwards the ref', () => {
         let ref;
         class Test extends React.Component {
             constructor(props) {
                 super(props);
                 ref = React.createRef();
             }
-            render = () => <Checkbox ref={ref} />;
+            render = () => <Checkbox ref={ref}>Label</Checkbox>;
         }
         mount(<Test />);
 

diff --git a/src/Forms/FormRadioItem.js b/src/Forms/FormRadioItem.js
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { FORM_STATES } from '../utils/constants';
+import { FORM_MESSAGE_TYPES } from '../utils/constants';
 import FormItem from './FormItem';
 import FormLabel from './FormLabel';
 import PropTypes from 'prop-types';
@@ -83,7 +83,7 @@ FormRadioItem.propTypes = {
     inputProps: PropTypes.object,
     labelProps: PropTypes.object,
     name: PropTypes.string,
-    state: PropTypes.oneOf(FORM_STATES),
+    state: PropTypes.oneOf(FORM_MESSAGE_TYPES),
     value: PropTypes.string
 };
 

diff --git a/src/Forms/FormRadioItem.test.js b/src/Forms/FormRadioItem.test.js
@@ -96,6 +96,49 @@ describe('<FormRadioItem />', () => {
             ).toBe('Sample');
         });
     });
+    describe('Validation states', () => {
+        test('should render the correct snapshots', () => {
+            const formRadioItemWarning = (
+                <FormRadioItem id='foo' state='warning'>
+                    Option 1
+                </FormRadioItem>
+            );
+
+            let component = renderer.create(formRadioItemWarning);
+            let tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+
+            const formRadioItemError = (
+                <FormRadioItem id='foo' state='error'>
+                    Option 1
+                </FormRadioItem>
+            );
+
+            component = renderer.create(formRadioItemError);
+            tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+
+            const formRadioItemSuccess = (
+                <FormRadioItem id='foo' state='success'>
+                    Option 1
+                </FormRadioItem>
+            );
+
+            component = renderer.create(formRadioItemSuccess);
+            tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+
+            const formRadioItemInformation = (
+                <FormRadioItem id='foo' state='information'>
+                    Option 1
+                </FormRadioItem>
+            );
+
+            component = renderer.create(formRadioItemInformation);
+            tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+        });
+    });
     test('forwards the ref', () => {
         let ref;
         class Test extends React.Component {

diff --git a/src/Forms/FormSelect.js b/src/Forms/FormSelect.js
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { FORM_STATES } from '../utils/constants';
+import { FORM_MESSAGE_TYPES } from '../utils/constants';
 import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
 
@@ -37,7 +37,7 @@ FormSelect.propTypes = {
     compact: PropTypes.bool,
     disabled: PropTypes.bool,
     disableStyles: PropTypes.bool,
-    state: PropTypes.oneOf(FORM_STATES)
+    state: PropTypes.oneOf(FORM_MESSAGE_TYPES)
 };
 
 export default FormSelect;
diff --git a/src/Forms/FormSelect.test.js b/src/Forms/FormSelect.test.js
@@ -28,6 +28,44 @@ describe('<FormSelect />', () => {
         });
     });
 
+    describe('Validation states', () => {
+        test('should render the correct snapshots', () => {
+            const formSelectWarning = (
+                <FormSelect
+                    placeholder='Field placeholder text'
+                    state='warning' />
+            );
+
+            let component = renderer.create(formSelectWarning);
+            let tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+
+            const formSelectError = (
+                <FormSelect state='error' />
+            );
+
+            component = renderer.create(formSelectError);
+            tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+
+            const formSelectSuccess = (
+                <FormSelect state='success' />
+            );
+
+            component = renderer.create(formSelectSuccess);
+            tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+
+            const formSelectInformation = (
+                <FormSelect state='information' />
+            );
+
+            component = renderer.create(formSelectInformation);
+            tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+        });
+    });
+
     test('forwards the ref', () => {
         let ref;
         class Test extends React.Component {

diff --git a/src/Forms/FormTextArea.test.js b/src/Forms/FormTextArea.test.js
@@ -5,9 +5,7 @@ import renderer from 'react-test-renderer';
 
 describe('<FormTextArea />', () => {
     const formTextArea = (
-        <FormTextarea id='textarea-2'>
-            Pellentesque metus lacus commodo eget justo ut rutrum varius nunc.
-        </FormTextarea>
+        <FormTextarea id='textarea-2' value='Pellentesque metus lacus commodo eget justo ut rutrum varius nunc.' />
     );
     const formTextareaCounter = (
         <FormTextarea id='textarea-3' maxLength={ 150 } />
@@ -50,6 +48,50 @@ describe('<FormTextArea />', () => {
         expect(ref.current.className).toEqual('fd-textarea');
     });
 
+    describe('Validation states', () => {
+        test('should render the correct snapshots', () => {
+            const formTextAreaWarning = (
+                <FormTextarea
+                    placeholder='Field placeholder text'
+                    state='warning' />
+            );
+
+            let component = renderer.create(formTextAreaWarning);
+            let tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+
+            const formTextAreaError = (
+                <FormTextarea
+                    placeholder='Field placeholder text'
+                    state='error' />
+            );
+
+            component = renderer.create(formTextAreaError);
+            tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+
+            const formTextAreaSuccess = (
+                <FormTextarea
+                    placeholder='Field placeholder text'
+                    state='success' />
+            );
+
+            component = renderer.create(formTextAreaSuccess);
+            tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+
+            const formTextAreaInformation = (
+                <FormTextarea
+                    placeholder='Field placeholder text'
+                    state='information' />
+            );
+
+            component = renderer.create(formTextAreaInformation);
+            tree = component.toJSON();
+            expect(tree).toMatchSnapshot();
+        });
+    });
+
     describe('FormTextArea counter', () => {
         const setup = props => {
             return mount(<FormTextarea {...props} />);

diff --git a/src/Forms/FormTextarea.js b/src/Forms/FormTextarea.js
@@ -1,11 +1,10 @@
 import classnames from 'classnames';
 import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
-import { FORM_STATES } from '../utils/constants';
+import { FORM_MESSAGE_TYPES } from '../utils/constants';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 
 const FormTextarea = React.forwardRef(({
-    children,
     className,
     compact,
     counterProps,
@@ -30,9 +29,6 @@ const FormTextarea = React.forwardRef(({
         if (typeof value === 'boolean' || value) {
             return Math.min(value.toString().length, maxLength);
         }
-        if (typeof children === 'string') {
-            return Math.min(children.length, maxLength);
-        }
         if (defaultValue) {
             return Math.min(defaultValue.toString().length, maxLength);
         }
@@ -61,7 +57,8 @@ const FormTextarea = React.forwardRef(({
 
     const formTextAreaClasses = classnames(
         'fd-textarea',
-        { 'fd-textarea--compact': compact,
+        {
+            'fd-textarea--compact': compact,
             [`is-${state}`]: state
         },
         className
@@ -73,10 +70,9 @@ const FormTextarea = React.forwardRef(({
     );
 
     return (
-        <React.Fragment>
+        <>
             <textarea
                 {...props}
-                children={children}
                 className={formTextAreaClasses}
                 defaultValue={defaultValue}
                 disabled={disabled}
@@ -92,14 +88,13 @@ const FormTextarea = React.forwardRef(({
                     {getMaxLengthText()}
                 </div>
             }
-        </React.Fragment>
+        </>
     );
 });
 
 FormTextarea.displayName = 'FormTextarea';
 
 FormTextarea.propTypes = {
-    children: PropTypes.node,
     className: PropTypes.string,
     compact: PropTypes.bool,
     counterProps: PropTypes.object,
@@ -112,7 +107,7 @@ FormTextarea.propTypes = {
     }),
     maxLength: PropTypes.number,
     readOnly: PropTypes.bool,
-    state: PropTypes.oneOf(FORM_STATES),
+    state: PropTypes.oneOf(FORM_MESSAGE_TYPES),
     value: PropTypes.string,
     onChange: PropTypes.func
 };