From 74c14883b3feff824d5636441309edbfa5065bae Mon Sep 17 00:00:00 2001
From: abrande <anbr0622@colorado.edu>
Date: Tue, 12 Jan 2021 13:10:12 -0500
Subject: [PATCH 1/2] added invalid option to Text/TextArea

---
 src/Text/index.js       |  4 +++-
 src/Text/stories.js     |  5 ++++-
 src/TextArea/index.js   | 18 +++++++++++++++---
 src/TextArea/stories.js |  5 ++++-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/Text/index.js b/src/Text/index.js
index f20f7f2..b722ee9 100644
--- a/src/Text/index.js
+++ b/src/Text/index.js
@@ -5,6 +5,7 @@ import classnames from 'classnames';
 const Text = ({
   id,
   label,
+  invalid,
   className,
   required,
   optional,
@@ -15,7 +16,7 @@ const Text = ({
   ...rest
 }) => {
   return (
-    <hx-text-control class={className} style={style}>
+    <hx-text-control class={classnames(className, { hxInvalid: invalid })} style={style}>
       <input {...rest} id={id} required={required} type="text" />
       <label
         className={classnames({
@@ -41,6 +42,7 @@ Text.propTypes = {
   children: PropTypes.node,
   optional: PropTypes.bool,
   disabled: PropTypes.bool,
+  invalid: PropTypes.bool,
   required: PropTypes.bool,
   label: PropTypes.string,
   name: PropTypes.string,
diff --git a/src/Text/stories.js b/src/Text/stories.js
index e93093d..a4f1f67 100644
--- a/src/Text/stories.js
+++ b/src/Text/stories.js
@@ -12,7 +12,9 @@ addParameters({
 storiesOf('Text', module).add('All Knobs', () => {
   let disabled = boolean('disabled', false);
   let required = boolean('required', false);
+  let invalid = boolean('invalid', false);
   let optional = boolean('optional', false);
+  let label = text('label', 'Text Label');
   let prefix = text('prefix', '@');
   let suffix = text('suffix', '.example.com');
 
@@ -21,10 +23,11 @@ storiesOf('Text', module).add('All Knobs', () => {
       <InputContainer>
         <Text
           id="textDemo"
+          {...(label && { label })}
           {...(disabled && { disabled })}
           {...(required && { required })}
+          {...(invalid && { invalid })}
           {...(optional && { optional })}
-          label="Username"
           onChange={callback(action('onChange'))}
         />
 
diff --git a/src/TextArea/index.js b/src/TextArea/index.js
index 291390c..24f8c82 100644
--- a/src/TextArea/index.js
+++ b/src/TextArea/index.js
@@ -2,10 +2,21 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
-const TextArea = ({ id, label, className, required, optional, children, style, ...rest }) => {
+const TextArea = ({
+  id,
+  label,
+  className,
+  required,
+  disabled,
+  optional,
+  invalid,
+  children,
+  style,
+  ...rest
+}) => {
   return (
-    <hx-textarea-control class={className} style={style}>
-      <textarea {...rest} id={id} required={required} />
+    <hx-textarea-control class={classnames(className, { hxInvalid: invalid })} style={style}>
+      <textarea {...rest} id={id} required={required} disabled={disabled} />
       <label
         className={classnames({
           hxOptional: optional,
@@ -28,6 +39,7 @@ TextArea.propTypes = {
   optional: PropTypes.bool,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
+  invalid: PropTypes.bool,
   label: PropTypes.bool,
   name: PropTypes.string,
   onChange: PropTypes.func,
diff --git a/src/TextArea/stories.js b/src/TextArea/stories.js
index 1cfb19f..027cd40 100644
--- a/src/TextArea/stories.js
+++ b/src/TextArea/stories.js
@@ -12,15 +12,18 @@ addParameters({
 storiesOf('TextArea', module).add('All Knobs', () => {
   let disabled = boolean('disabled', false);
   let required = boolean('required', false);
+  let invalid = boolean('invalid', false);
   let optional = boolean('optional', false);
+  let label = text('label', 'TextArea Label');
 
   return (
     <InputContainer>
       <TextArea
         id="textAreaDemo"
-        lable="Comments"
+        {...(label && { label })}
         {...(disabled && { disabled })}
         {...(required && { required })}
+        {...(invalid && { invalid })}
         {...(optional && { optional })}
         onChange={callback(action('onChange'))}
       />

From 64f7f1cb17dc71b527494da415f7e8c2bfdf90ae Mon Sep 17 00:00:00 2001
From: abrande <anbr0622@colorado.edu>
Date: Mon, 18 Jan 2021 12:13:53 -0500
Subject: [PATCH 2/2] added invalid to other text examples

---
 src/Text/index.js   | 1 -
 src/Text/stories.js | 2 ++
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Text/index.js b/src/Text/index.js
index b722ee9..ebf933c 100644
--- a/src/Text/index.js
+++ b/src/Text/index.js
@@ -27,7 +27,6 @@ const Text = ({
       >
         {label}
       </label>
-
       {prefix && <span className="hxPrefix">{prefix}</span>}
       {suffix && <span className="hxSuffix">{suffix}</span>}
       {children}
diff --git a/src/Text/stories.js b/src/Text/stories.js
index a4f1f67..fdd2cc1 100644
--- a/src/Text/stories.js
+++ b/src/Text/stories.js
@@ -38,6 +38,7 @@ storiesOf('Text', module).add('All Knobs', () => {
           {...(disabled && { disabled })}
           {...(required && { required })}
           {...(optional && { optional })}
+          {...(invalid && { invalid })}
           {...(prefix && { prefix })}
           label="twitter handle"
           onChange={callback(action('onChange'))}
@@ -50,6 +51,7 @@ storiesOf('Text', module).add('All Knobs', () => {
           {...(disabled && { disabled })}
           {...(required && { required })}
           {...(optional && { optional })}
+          {...(invalid && { invalid })}
           {...(suffix && { suffix })}
           label="Subdomain"
           onChange={callback(action('onChange'))}