From ddec94305a5c1da78053a826c749e9f40d081428 Mon Sep 17 00:00:00 2001
From: Santeri Hurnanen <santeri@oikeuttaelaimille.fi>
Date: Sat, 30 Nov 2019 02:23:47 +0200
Subject: [PATCH] fix: invalid checkbox markup again :(

---
 src/__tests__/__snapshots__/form-elements.test.jsx.snap | 1 +
 src/components/WebformCheckbox.tsx                      | 8 +++++++-
 src/components/WebformElementWrapper.tsx                | 5 +++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/__tests__/__snapshots__/form-elements.test.jsx.snap b/src/__tests__/__snapshots__/form-elements.test.jsx.snap
index d75b5ad..8fa5ca2 100644
--- a/src/__tests__/__snapshots__/form-elements.test.jsx.snap
+++ b/src/__tests__/__snapshots__/form-elements.test.jsx.snap
@@ -22,6 +22,7 @@ exports[`Webform checkboxes 1`] = `
       type="checkbox"
     />
     <label
+      className="form-check-label"
       htmlFor="form-tos"
     >
       Agree terms of service
diff --git a/src/components/WebformCheckbox.tsx b/src/components/WebformCheckbox.tsx
index b62de4a..e75194b 100644
--- a/src/components/WebformCheckbox.tsx
+++ b/src/components/WebformCheckbox.tsx
@@ -22,7 +22,13 @@ export const WebformCheckbox: WebformCustomComponent = ({ element, error }) => {
 	settings.attributes.title_display = 'after'
 
 	return (
-		<WebformElementWrapper className="form-group form-check" settings={settings} error={error} labelFor={id}>
+		<WebformElementWrapper
+			settings={settings}
+			error={error}
+			className="form-group 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 68847a1..61b988c 100644
--- a/src/components/WebformElementWrapper.tsx
+++ b/src/components/WebformElementWrapper.tsx
@@ -5,6 +5,7 @@ import { WebformSettings } from '../Webform'
 interface Props extends React.HTMLProps<HTMLDivElement> {
 	settings: WebformSettings
 	labelFor?: string
+	labelClassName?: string
 	error?: string
 }
 
@@ -38,7 +39,7 @@ export function isElementHidden(states: WebformSettings['states']): boolean {
 	return states.hidden === true || states.visible === false
 }
 
-const ElementWrapper: React.FC<Props> = ({ children, settings, error, labelFor, ...props }) => {
+const ElementWrapper: React.FC<Props> = ({ children, settings, error, labelFor, labelClassName, ...props }) => {
 	const { states, attributes } = settings
 
 	if (states && isElementHidden(states)) {
@@ -46,7 +47,7 @@ const ElementWrapper: React.FC<Props> = ({ children, settings, error, labelFor,
 	}
 
 	const label = (
-		<label style={getTileStyle(attributes)} htmlFor={labelFor}>
+		<label style={getTileStyle(attributes)} className={labelClassName} htmlFor={labelFor}>
 			{attributes.title}
 		</label>
 	)