DEV-138: Added error/success states to input and text field (#96)

src/components/Input/Input.stories.tsx

@@ -46,7 +46,12 @@ Disabled.args = {
 
 export const WithError = Template.bind({})
 WithError.args = {
-  error: true,
+  state: "error",
+}
+
+export const WithSuccess = Template.bind({})
+WithSuccess.args = {
+  state: "success",
 }
 
 export const Required = Template.bind({})

src/components/Input/Input.tsx

@@ -20,8 +20,8 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   /** Placeholder text content */
   placeholder?: string
 
-  /** If `true`, the `input` will be displayed in an error state */
-  error?: boolean
+  /** Controls which state the input will be displayed in */
+  state?: "default" | "error" | "success"
   /** If `true`, the `input` element will be disabled */
   disabled?: boolean
   /** If `true`, the `input` is required */
@@ -43,7 +43,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     onChange,
     placeholder,
     disabled = false,
-    error = false, //TODO: error state, needs design
+    state = "default",
     required = false,
     iconName,
     unit,
@@ -69,15 +69,36 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 
         paddingY: "6px", // the 2px border counts towards height, so we need 6px instead of 8px for the correct height
         paddingX: 3,
-        backgroundColor: value ? "secondary.alpha.90" : "text.alpha.95",
+        ...{
+          default: {
+            backgroundColor: value ? "secondary.alpha.90" : "text.alpha.95",
+          },
+          success: {
+            backgroundColor: "success.alpha.95",
+          },
+          error: {
+            backgroundColor: "primary.alpha.95",
+          },
+        }[state],
         outline: 0,
         borderRadius: 2,
         border: "2px solid transparent",
 
         transition: "all 0.2s",
         "&:hover": {
-          backgroundColor: value ? "secondary.alpha.85" : "text.alpha.90",
+          ...(state === "default" && {
+            backgroundColor: value ? "secondary.alpha.85" : "text.alpha.90",
+          }),
         },
+        ...{
+          default: {},
+          success: {
+            borderColor: "success.0",
+          },
+          error: {
+            borderColor: "primary.0",
+          },
+        }[state],
         "&:focus-within": {
           borderColor: "secondary.0",
           boxShadow: (theme: HerzUITheme) =>
@@ -95,7 +116,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         value={value}
         disabled={disabled}
         onChange={onChange}
-        aria-invalid={error}
+        aria-invalid={state === "error"}
         size={1} // Input has a default size property of 20, which limits it's minimum width. Setting it to 1 and handling width through the parent so that we can control the input width better.
         {...htmlProps}
         sx={{

src/components/TextField/TextField.stories.tsx

@@ -85,3 +85,19 @@ Select.args = {
     ],
   },
 }
+
+export const Error = Template.bind({})
+Error.args = {
+  ...Example.args,
+  value: "Filled input",
+  state: "error",
+  helperText: "Text to explain the input error",
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  ...Example.args,
+  value: "Filled input",
+  state: "success",
+  helperText: "Text to explain the success",
+}

src/components/TextField/TextField.tsx

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic /
 /** @jsx jsx */
-import { jsx, Flex } from "theme-ui"
+import { jsx } from "theme-ui"
 import { ChangeEvent, forwardRef } from "react"
 import Input, { InputProps } from "../Input/Input"
 import Selector, { SelectorProps } from "../Selector/Selector"
@@ -19,8 +19,8 @@ export interface TextFieldProps {
 
   /** The helper text content */
   helperText?: string
-  /** If `true`, the `input` will be displayed in an error state */
-  error?: boolean
+  /** Controls which state the `input` will be displayed in */
+  state?: "default" | "error" | "success"
   /** If `true`, the `input` element will be disabled */
   disabled?: boolean
   /** If `true`, the `input` is required */
@@ -54,7 +54,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       label,
       placeholder,
       disabled = false,
-      error = false, //TODO: error state, needs design
+      state = "default",
       helperText,
       required = false,
       requiredText = "required",
@@ -70,9 +70,9 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
     const inputLabelId = label && id ? `${id}-label` : undefined
 
     return (
-      <Flex sx={{ flexDirection: "column", gap: 2 }}>
+      <div sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
         {label && (
-          <Flex sx={{ gap: 1 }}>
+          <div sx={{ display: "flex", gap: 1 }}>
             <label
               htmlFor={id}
               id={inputLabelId}
@@ -91,46 +91,80 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             >
               ({required ? requiredText : optionalText})
             </span>
-          </Flex>
+          </div>
         )}
 
-        {select ? (
-          <Selector
-            id={id}
-            placeholder={placeholder}
-            {...selectProps}
-            options={selectProps?.options ?? []}
-            fullWidth={true}
-            hightlightFilled={false}
-          />
-        ) : (
-          <Input
-            id={id}
-            type={type}
-            ref={ref}
-            placeholder={placeholder}
-            iconName={iconName}
-            value={value}
-            disabled={disabled}
-            onChange={onChange}
-            error={error}
-            unit={unit}
-            aria-describedby={helperTextId}
-          />
-        )}
+        <div
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            borderRadius: 2,
 
-        {helperText && (
-          <span
-            id={helperTextId}
-            sx={{
-              color: "text.40",
-              variant: "text.body2",
-            }}
-          >
-            {helperText}
-          </span>
-        )}
-      </Flex>
+            ...{
+              default: {},
+              success: {
+                backgroundColor: "success.alpha.95",
+              },
+              error: {
+                backgroundColor: "primary.alpha.95",
+              },
+            }[state],
+          }}
+        >
+          {select ? (
+            <Selector
+              id={id}
+              placeholder={placeholder}
+              {...selectProps}
+              options={selectProps?.options ?? []}
+              fullWidth={true}
+              hightlightFilled={false}
+            />
+          ) : (
+            <Input
+              id={id}
+              type={type}
+              ref={ref}
+              placeholder={placeholder}
+              iconName={iconName}
+              value={value}
+              disabled={disabled}
+              onChange={onChange}
+              state={state}
+              unit={unit}
+              aria-describedby={helperTextId}
+            />
+          )}
+          {helperText && (
+            <span
+              id={helperTextId}
+              sx={{
+                ...{
+                  default: {
+                    color: "text.40",
+                    variant: "text.body2",
+                  },
+                  success: {
+                    px: 3,
+                    pb: 2,
+                    color: "success.0",
+                    variant: "text.body1",
+                  },
+                  error: {
+                    px: 3,
+                    pb: 2,
+                    color: "primary.0",
+                    variant: "text.body1",
+                  },
+                }[state],
+              }}
+            >
+              {helperText}
+            </span>
+          )}
+        </div>
+      </div>
     )
   }
 )