Add readonly prop to Input (#833)

* Add readonly prop to Input

* Clarify plaintext prop in docstring

* Add regression test for readonly prop of Input

Author: tcbegley

src/components/input/Input.js

@@ -43,6 +43,7 @@ const Input = props => {
     maxlength,
     minLength,
     minlength,
+    readonly,
     tabIndex,
     tabindex,
     ...otherProps
@@ -163,6 +164,7 @@ const Input = props => {
       inputMode={inputmode || inputMode}
       maxLength={maxlength || maxLength}
       minLength={minlength || minLength}
+      readOnly={readonly}
       tabIndex={tabindex || tabIndex}
       size={html_size}
     />
@@ -525,11 +527,20 @@ Input.propTypes = {
   ]),
 
   /**
-   * Set to true for a readonly input styled as plain text with the default
-   * form field styling removed and the correct margins and padding preserved.
+   * Set to true for an input styled as plain text with the default form field
+   * styling removed and the correct margins and padding preserved. Typically
+   * you will want to use this in conjunction with readonly=True.
    */
   plaintext: PropTypes.bool,
 
+  /**
+   * Indicates whether the element can be edited.
+   */
+  readonly: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf(['readOnly', 'readonly', 'READONLY'])
+  ]),
+
   /**
    * A hint to the user of what can be entered in the control . The placeholder
    * text must not contain carriage returns or line-feeds. Note: Do not use the

src/components/input/__tests__/Input.test.js

@@ -49,6 +49,7 @@ describe('Input', () => {
         pattern="test-pattern"
         placeholder="test-placeholder"
         html_size="42"
+        readonly
         step={2}
         tabindex="3"
         type="text"
@@ -66,6 +67,7 @@ describe('Input', () => {
     expect(input).toHaveAttribute('name', 'test-name');
     expect(input).toHaveAttribute('pattern', 'test-pattern');
     expect(input).toHaveAttribute('placeholder', 'test-placeholder');
+    expect(input).toHaveAttribute('readonly');
     expect(input).toHaveAttribute('size', '42');
     expect(input).toHaveAttribute('step', '2');
     expect(input).toHaveAttribute('tabindex', '3');