feat(textfield): add id prop to text field

src/components/TextField/TextField.tsx

@@ -4,6 +4,10 @@ import Form from 'react-bootstrap/Form'
 import { getControlSize } from '../../helpers/controlSize'
 
 interface Props {
+  /** A unique identifier for the componentchrome
+   *
+   */
+  id?: string
   /** Determines whether the TextField should be disabled or not. By default, it is false. */
   disabled?: boolean
   /** Determines whether the TextField should be rendered as invalid or not. By default, it is false. */
@@ -39,6 +43,7 @@ interface Props {
  */
 const TextField = (props: Props) => {
   const {
+    id,
     disabled,
     isValid,
     isInvalid,
@@ -56,6 +61,7 @@ const TextField = (props: Props) => {
   return (
     <Form.Group>
       <Form.Control
+        id={id}
         as="textarea"
         disabled={disabled}
         isInvalid={isInvalid}

test/textfield.test.tsx

@@ -16,9 +16,13 @@ describe('TextField', () => {
   it('renders a TextField with attributes', () => {
     const name = 'example_field'
     const value = 'this is teh text field text'
+    const id = 'someId'
     const rows = 5
-    const wrapper = mount(<TextField name={name} value={value} onChange={onChange} rows={rows} />)
+    const wrapper = mount(
+      <TextField id={id} name={name} value={value} onChange={onChange} rows={rows} />,
+    )
 
+    expect(wrapper.find(HTMLTextAreaElement).prop('id')).toEqual(id)
     expect(wrapper.find(HTMLTextAreaElement)).toHaveLength(1)
     expect(
       wrapper.find(HTMLTextAreaElement).filterWhere((item) => item.prop('name') === name),