Use the classnames library in TextWidget

docs/building-a-form/about-the-schema-and-uischema-objects.md

@@ -184,10 +184,14 @@ The us-forms-system code includes additional `uiSchema` functionality not found
       'value': <p>Some text</p>
     },
 
-    // A string of class names that are added to the widget for the current field.
+    // A list of class names that are added to the widget for the current field.
     // `widgetClassNames` is similar to the default `classNames` property, but it puts the
     // class names on the input/select/etc element itself, rather than a surrounding `div`.
-    widgetClassNames: '',
+    // `widgetClassNames` accepts anything that the classnames library accepts.
+    // See https://github.com/JedWatson/classnames#usage for more details.
+    widgetClassNames: 'first-class second-class',
+    widgetClassNames: ['first-class', 'second-class'],
+    widgetClassNames: { 'first-class': true, 'second-class': false },
 
     // For array fields, this component is shown when the item in the array is rendered as
     // read-only on a page that is not a review page.

src/js/widgets/ArrayCountWidget.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 
 export default class ArrayCountWidget extends React.Component {
   constructor(props) {
@@ -69,7 +70,7 @@ export default class ArrayCountWidget extends React.Component {
         name={props.id}
         disabled={props.disabled}
         autoComplete={props.options.autocomplete || false}
-        className={props.options.widgetClassNames}
+        className={classnames(props.options.widgetClassNames)}
         value={typeof this.state.userCount === 'undefined' ? '' : this.state.userCount}
         onBlur={() => props.onBlur(props.id)}
         onChange={this.updateArrayLength}/>

src/js/widgets/CurrencyWidget.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 
 export default class CurrencyWidget extends React.Component {
   constructor(props) {
@@ -47,7 +48,7 @@ export default class CurrencyWidget extends React.Component {
         name={id}
         disabled={disabled}
         autoComplete={options.autocomplete || false}
-        className={options.widgetClassNames}
+        className={classnames(this.props.options.widgetClassNames)}
         value={typeof value === 'undefined' ? '' : value}
         onBlur={this.onBlur}
         onChange={this.handleChange}/>

src/js/widgets/SelectWidget.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 import { asNumber } from '@department-of-veterans-affairs/react-jsonschema-form/lib/utils';
 import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys';
 
@@ -34,7 +35,7 @@ function SelectWidget({
       id={id}
       name={id}
       multiple={multiple}
-      className={options.widgetClassNames}
+      className={classnames(options.widgetClassNames)}
       value={value || ''}
       required={required}
       disabled={disabled}

src/js/widgets/TextWidget.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 
 const numberTypes = new Set(['number', 'integer']);
 
@@ -14,7 +15,7 @@ export default function TextWidget(props) {
       disabled={props.disabled}
       maxLength={props.schema.maxLength}
       autoComplete={props.options.autocomplete || false}
-      className={props.options.widgetClassNames}
+      className={classnames(props.options.widgetClassNames)}
       value={typeof props.value === 'undefined' ? '' : props.value}
       onBlur={() => props.onBlur(props.id)}
       onChange={(event) => props.onChange(event.target.value ? event.target.value : undefined)}/>

test/js/widgets/TextWidget.unit.spec.jsx

@@ -84,4 +84,54 @@ describe('Schemaform <TextWidget>', () => {
     tree.subTree('input').props.onBlur();
     expect(onBlur.calledWith('1')).to.be.true;
   });
+  it('should accept a string widgetClassNames prop', () => {
+    const tree = SkinDeep.shallowRender(
+      <TextWidget
+        id="1"
+        value="testing"
+        schema={{ type: 'string' }}
+        required
+        disabled={false}
+        options={{
+          widgetClassNames: 'first-class second-class'
+        }}/>
+    );
+    expect(SkinDeep.hasClass(tree, 'first-class')).to.be.true;
+    expect(SkinDeep.hasClass(tree, 'second-class')).to.be.true;
+  });
+  it('should accept an array widgetClassNames prop', () => {
+    const tree = SkinDeep.shallowRender(
+      <TextWidget
+        id="1"
+        value="testing"
+        schema={{ type: 'string' }}
+        required
+        disabled={false}
+        options={{
+          widgetClassNames: ['first-class', 'second-class']
+        }}/>
+    );
+    expect(SkinDeep.hasClass(tree, 'first-class')).to.be.true;
+    expect(SkinDeep.hasClass(tree, 'second-class')).to.be.true;
+  });
+  it('should accept an object widgetClassNames prop', () => {
+    const tree = SkinDeep.shallowRender(
+      <TextWidget
+        id="1"
+        value="testing"
+        schema={{ type: 'string' }}
+        required
+        disabled={false}
+        options={{
+          widgetClassNames: {
+            'first-class': true,
+            'second-class': true,
+            'third-class': false
+          }
+        }}/>
+    );
+    expect(SkinDeep.hasClass(tree, 'first-class')).to.be.true;
+    expect(SkinDeep.hasClass(tree, 'second-class')).to.be.true;
+    expect(SkinDeep.hasClass(tree, 'third-class')).to.be.false;
+  });
 });