From ef33a36b35b9474222a576922cf1fcb13d5ca744 Mon Sep 17 00:00:00 2001
From: Santeri Hurnanen <santeri@oikeuttaelaimille.fi>
Date: Sat, 30 Nov 2019 05:58:16 +0200
Subject: [PATCH] feat: add is-invalid class to WebformElementWrapper has error

---
 src/components/WebformCheckbox.tsx       | 8 +-------
 src/components/WebformElementWrapper.tsx | 4 +++-
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/WebformCheckbox.tsx b/src/components/WebformCheckbox.tsx
index e75194b..b07898b 100644
--- a/src/components/WebformCheckbox.tsx
+++ b/src/components/WebformCheckbox.tsx
@@ -22,13 +22,7 @@ export const WebformCheckbox: WebformCustomComponent = ({ element, error }) => {
 	settings.attributes.title_display = 'after'
 
 	return (
-		<WebformElementWrapper
-			settings={settings}
-			error={error}
-			className="form-group form-check"
-			labelClassName="form-check-label"
-			labelFor={id}
-		>
+		<WebformElementWrapper settings={settings} error={error} className="form-check" labelClassName="form-check-label" labelFor={id}>
 			<input defaultChecked={!!defaultValue} {...inputProps} />
 		</WebformElementWrapper>
 	)
diff --git a/src/components/WebformElementWrapper.tsx b/src/components/WebformElementWrapper.tsx
index 61b988c..c92beae 100644
--- a/src/components/WebformElementWrapper.tsx
+++ b/src/components/WebformElementWrapper.tsx
@@ -52,8 +52,10 @@ const ElementWrapper: React.FC<Props> = ({ children, settings, error, labelFor,
 		</label>
 	)
 
+	const classNames = ['form-group', error != null && 'is-invalid', props.className].filter(item => typeof item === 'string').join(' ')
+
 	return (
-		<div className="form-group" {...props}>
+		<div {...props} className={classNames}>
 			{getTitleDisplay(attributes) === 'before' && label}
 
 			{children}