From dd0ce21cc06f2f6605ab98c412c94add76439e87 Mon Sep 17 00:00:00 2001
From: Jack Meyer <jackcmeyer@gmail.com>
Date: Thu, 17 Dec 2020 20:23:18 -0600
Subject: [PATCH] feat(textfield): add id prop to text field

---
 src/components/TextField/TextField.tsx | 6 ++++++
 test/textfield.test.tsx                | 6 +++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index d5ea5840..58384d3d 100644
--- a/src/components/TextField/TextField.tsx
+++ b/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}
diff --git a/test/textfield.test.tsx b/test/textfield.test.tsx
index fb282b77..64741ded 100644
--- a/test/textfield.test.tsx
+++ b/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),