TextArea complete

src/components/FormFieldWrapper/FormFieldWrapper.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const FieldWrapper = (props) => {
   const { children, description, disabled, error, fieldSet, id, title } = props;
-  console.log(error);
+
   return (
     <div className="q field">
       {children}

src/components/Input/Input.jsx

@@ -39,12 +39,12 @@ const Input = React.forwardRef((props, ref) => {
         minLength={minLength || null}
         maxLength={maxLength || null}
         placeholder={placeholder || ' '}
-        onClick={() => onClick()}
         onChange={({ target }) =>
           readOnly
             ? undefined
             : onChange(id, target.value === '' ? undefined : target.value)
         }
+        onClick={() => onClick()}
         readOnly={readOnly}
         ref={inputRef}
         required={required}

src/components/TextArea/TextArea.jsx

@@ -2,9 +2,31 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper';
 import cx from 'classnames';
+import { isNil } from 'lodash';
+import { useForwardedRef } from '../../helpers';
 
-const TextArea = (props) => {
-  const { error, id, placeholder } = props;
+const TextArea = React.forwardRef((props, ref) => {
+  const {
+    disabled,
+    error,
+    id,
+    minLength,
+    maxLength,
+    onChange,
+    onClick,
+    placeholder,
+    readOnly,
+    required,
+    tabIndex,
+    value,
+  } = props;
+
+  const TextAreaRef = useForwardedRef(ref);
+
+  const computeTabIndex = () => {
+    if (!isNil(tabIndex)) return tabIndex;
+    if (disabled) return -1;
+  };
 
   return (
     <FormFieldWrapper {...props} className="text">
@@ -13,12 +35,23 @@ const TextArea = (props) => {
         aria-describedby={`field-hint-${id}`}
         className={cx('q input textarea', { error: error })}
         id={`field-${id}`}
+        disabled={disabled}
         placeholder={placeholder || ' '}
-        // {...props}
+        onChange={({ target }) =>
+          readOnly
+            ? undefined
+            : onChange(id, target.value === '' ? undefined : target.value)
+        }
+        onClick={() => onClick()}
+        readOnly={readOnly}
+        ref={TextAreaRef}
+        required={required}
+        tabIndex={computeTabIndex()}
+        value={value || ''}
       />
     </FormFieldWrapper>
   );
-};
+});
 
 TextArea.propTypes = {
   id: PropTypes.string.isRequired,

src/components/TextArea/TextArea.stories.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import TextAreaComponent from './TextArea';
+
+const TextArea = (args) => {
+  const [value, setValue] = React.useState(args.value ?? '');
+  const onChange = (block, value) => {
+    args.onChange({ value });
+    setValue(value);
+  };
+
+  return <TextAreaComponent {...args} onChange={onChange} value={value} />;
+};
+
+export const Default = TextArea.bind({});
+Default.args = {
+  id: 'field-empty',
+  title: 'field 1 title',
+  description: 'Optional help text',
+  placeholder: 'Type something…',
+};
+
+export const Required = TextArea.bind({});
+Required.args = {
+  id: 'field-empty',
+  title: 'field 1 title',
+  description: 'Optional help text',
+  placeholder: 'Type something…',
+  required: true,
+};
+
+export const Filled = TextArea.bind({});
+Filled.args = {
+  id: 'field-filled',
+  title: 'Filled field title',
+  description: 'Optional help text',
+  value: 'Filled with value A',
+  placeholder: 'Type something…',
+  required: true,
+};
+
+export const Errored = TextArea.bind({});
+Errored.args = {
+  id: 'field-errored',
+  title: 'Errored field title',
+  description: 'Optional help text',
+  placeholder: 'Type something…',
+  value: 'Filled with value A',
+  error: ['This is the error'],
+  required: true,
+};
+
+export const Disabled = TextArea.bind({});
+Disabled.args = {
+  id: 'field-disabled',
+  title: 'Disabled field title',
+  description: 'Optional help text',
+  placeholder: 'Type something…',
+  disabled: true,
+};
+
+export default {
+  title: 'TextArea',
+  component: TextAreaComponent,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    // controlled value prop
+    value: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+  // excludeStories: ['searchResults'],
+  // subcomponents: { ArgsTable },
+};