✨ feat: add textareaRef prop (#123)

Author: fboldo

src/components/textarea/Textarea.tsx

@@ -1,15 +1,17 @@
-import React, { HTMLProps } from 'react';
+import React, { HTMLProps, MutableRefObject } from 'react';
 import classNames from 'classnames';
 import { FormElementProps } from '../../util/types/FormTypes';
 import FormGroup from '../../util/FormGroup';
 
-type TextareaProps = HTMLProps<HTMLTextAreaElement> & FormElementProps;
+type TextareaProps = HTMLProps<HTMLTextAreaElement> &
+  FormElementProps & { textareaRef?: MutableRefObject<HTMLTextAreaElement | null> };
 
 const Textarea: React.FC<TextareaProps> = (props) => (
   <FormGroup<TextareaProps> inputType="textarea" {...props}>
-    {({ className, error, ...rest }) => (
+    {({ className, error, textareaRef, ...rest }) => (
       <textarea
         className={classNames('nhsuk-textarea', { 'nhsuk-textarea--error': error }, className)}
+        ref={textareaRef}
         {...rest}
       />
     )}

src/components/textarea/__tests__/Textarea.test.tsx

@@ -0,0 +1,12 @@
+import React, { createRef } from 'react';
+import { mount } from 'enzyme';
+import Textarea from '..';
+
+describe('Textarea', () => {
+  it('render with a given ref', () => {
+    const ref = createRef<HTMLTextAreaElement>();
+    const wrapper = mount(<Textarea textareaRef={ref} />);
+    expect(wrapper.find('.nhsuk-textarea')).toHaveLength(1);
+    expect(ref.current?.className).toContain('nhsuk-textarea');
+  });
+});