Form validation styles (#223)

* [ui] TextArea, -Row. add invalid state

* [ui] Switch: add invalid state/styles

* [ui] SwitchRow: add invalid prop, styles

* [ui] Select: add invalid prop, styles, icon

* [ui] SelectRow: add invalid prop, state, and styles

* [ui] Radio, RadioRow: add invalid and errortext props, invalid state

* [ui] Checkbox: add invalid prop, state, styles

* [ui] CheckboxRow: add invalid prop and state, errorstate prop, error styles

* [ui] Checkbox: add `valid` prop, state, styles

* [ui] add `checkCircle` icon

* [ui] CheckboxRow: add `valid` prop, state, styles, successtext prop

* [ui] Checkbox: separate `useEffect` statements

* [ui] Checkbox: rename const for consistency

* [ui] Radio: add `valid` prop, state, styles

* [ui] RadioRow: add `valid` prop, state, styles, add `successtext` prop

* [ui] Select, SelectRow: add `valid` prop, state, styles, `successtext` prop

* [ui] Switch: add `valid` prop, state, styles

* [ui] SwitchRow: add `valid` prop, state, styles, `successtext` prop

* [ui] Textarea: add `valid` prop, state, styles

* [ui] Textinput: add `valid` prop, state, styles

* [ui] TextareaRow: add `valid` prop, state, styles; add `successtext` prop

* [ui] TextInputRow: add `valid` prop, state, styles; add `successtext` prop

* [ui] CheckboxGroup: add `valid`, `invalid` props, state, styles; `errortext`, `successtext` props

* [ui] formatting, typos

* [ui] RadioGroup: add `valid`, `invalid` props, state, styles; add `errortext`, `successtext` props

* [ui] bump version to 0.8.4

* [ui] useMemo for (in-)validated constants

* [ui] export Box component

Co-authored-by: D038721 <[email protected]>

libs/juno-ui-components/package.json

@@ -5,7 +5,7 @@
   "module": "lib/index.js",
   "source": "src/index.js",
   "style": "lib/esm/styles.css",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "files": [
     "src",
     "lib",

libs/juno-ui-components/src/components/Checkbox/Checkbox.component.js

@@ -50,6 +50,18 @@ const mockdisabledstyles = `
 	jn-pointer-events-none
 	jn-opacity-50
 `
+
+const errorstyles = `
+	jn-border
+	jn-border-theme-error
+`
+
+const successstyles = `
+	jn-border
+	jn-border-theme-success
+`
+
+
 /** 
 A controlled Checkbox component.
 */
@@ -61,18 +73,32 @@ export const Checkbox = ({
 	indeterminate,
 	className,
 	disabled,
+	invalid,
+	valid,
 	onChange,
 	...props
 }) => {
 	const [isChecked, setIsChecked] = useState(false)
 	const [isIndeterminate, setIndeterminate] = useState("")
 	const [hasFocus, setFocus] = useState(false)
+	const [isInvalid, setIsInvalid] = useState(false)
+	const [isValid, setIsValid] = useState(false)
 
 	useEffect( () => {
 		setIsChecked(checked)
+	}, [checked])
+
+	useEffect( () => {
 		setIndeterminate(indeterminate)
-	}, [checked, indeterminate])
+	}, [indeterminate])
 
+	useEffect( () => {
+		setIsInvalid(invalid)
+	}, [invalid])
+
+	useEffect( () => {
+		setIsValid(valid)
+	}, [valid])
 
 	const handleChange = (event) => {
 		setIsChecked(!isChecked)
@@ -89,7 +115,7 @@ export const Checkbox = ({
 
 	return (
 		<div 
-			className={`juno-checkbox ${mockcheckboxstyles} ${ hasFocus ? mockfocusstyles : "" } ${ disabled ? mockdisabledstyles : "" } ${className}`}
+			className={`juno-checkbox ${mockcheckboxstyles} ${ hasFocus ? mockfocusstyles : "" } ${ disabled ? mockdisabledstyles : "" } ${ isInvalid ? errorstyles : "" } ${ isValid ? successstyles : "" } ${className}`}
 			{...props}
 		>
 			{ isChecked ? 	<svg 
@@ -108,7 +134,7 @@ export const Checkbox = ({
 				value={value}
 				id={id}
 				checked={isChecked}
-				className={`${inputstyles}`}
+				className={`${inputstyles} ${ isInvalid ? "juno-checkbox-invalid" : ""} ${ isValid ? "juno-checkbox-valid" : ""} `}
 				disabled={disabled}
 				onChange={handleChange}
 				onFocus={handleFocus}
@@ -132,10 +158,14 @@ Checkbox.propTypes = {
 	checked: PropTypes.bool,
 	/** Whether the checkbox is indeterminate ( parent of multiple checkboxes with differing checked states) */
 	indeterminate: PropTypes.bool,
-	/** Pass a className */
-	className: PropTypes.string,
 	/** Whether the checkbox is disabled */
 	disabled: PropTypes.bool,
+	/** Whether the checkbox is invalid */
+	invalid: PropTypes.bool,
+	/** Whether the Checkbox is valid */
+	valid: PropTypes.bool,
+	/** Pass a className */
+	className: PropTypes.string,
 	/** Pass a handler */
 	onChange: PropTypes.func,
 }
@@ -146,5 +176,7 @@ Checkbox.defaultProps = {
 	id: "",
 	className: "",
 	disabled: false,
+	invalid: false,
+	valid: false,
 	onChange: undefined,
-}
+}

libs/juno-ui-components/src/components/Checkbox/Checkbox.stories.js

@@ -26,3 +26,13 @@ export const Indeterminate = Template.bind({})
 Indeterminate.args = {
   indeterminate: true,
 }
+
+export const Invalid = Template.bind({})
+Invalid.args = {
+  invalid: true,
+}
+
+export const Valid = Template.bind({})
+Valid.args = {
+  valid: true,
+}

libs/juno-ui-components/src/components/Checkbox/Checkbox.test.js

@@ -62,6 +62,18 @@ describe("Checkbox", () => {
 		expect(checkbox).toBeDisabled()
 	})
 
+	test("renders an invalid Checkbox as passed", async () => {
+		render(<Checkbox invalid />)
+		expect(screen.getByRole("checkbox")).toBeInTheDocument()
+		expect(screen.getByRole("checkbox")).toHaveClass("juno-checkbox-invalid")
+	})
+
+	test("renders a valid Checkbox as passed", async () => {
+		render(<Checkbox valid />)
+		expect(screen.getByRole("checkbox")).toBeInTheDocument()
+		expect(screen.getByRole("checkbox")).toHaveClass("juno-checkbox-valid")
+	})
+
 	test("fires handler on change as passed", async () => {	
 		const onChangeSpy = jest.fn();
 		render(<Checkbox onChange={onChangeSpy} />);