feat(checkbox): adding focused and hovered states in test env

Author: aramos-adobe

components/checkbox/stories/checkbox.test.js

@@ -13,6 +13,14 @@ export const CheckboxGroup = Variants({
 			testHeading: "Emphasized",
 			isEmphasized: true,
 		},
+		{
+			testHeading: "Focused",
+			isFocused: true,
+		},
+		{
+			testHeading: "Hovered",
+			isHovered: true,
+		},
 		{
 			testHeading: "Truncation",
 			withStates: false,
@@ -78,5 +86,5 @@ export const CheckboxGroup = Variants({
 			isReadOnly: true,
 			isChecked: true,
 		},
-	]
+	],
 });

components/checkbox/stories/template.js

@@ -18,6 +18,8 @@ export const Template = ({
 	isDisabled = false,
 	isInvalid = false,
 	isReadOnly = false,
+	isFocused = false,
+	isHovered,
 	title,
 	value,
 	id = getRandomId("checkbox"),
@@ -53,18 +55,25 @@ export const Template = ({
 				["is-disabled"]: isDisabled,
 				["is-invalid"]: isInvalid,
 				["is-readOnly"]: isReadOnly,
+				"is-hover": isHovered,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			id=${ifDefined(id)}
 			style=${styleMap(customStyles)}
 		>
 			<input
 				type="checkbox"
-				class="${rootClass}-input"
+				class=${classMap({["is-focus-visible"]: isFocused, [`${rootClass}-input`]: true })}
 				aria-labelledby=${ifDefined(ariaLabelledby)}
 				aria-disabled=${ifDefined(isReadOnly ? "true" : undefined)}
 				?checked=${isChecked}
 				?disabled=${isDisabled}
+				@focusin=${function() {
+					updateArgs({ isFocused: true });
+				}}
+				@focusout=${function() {
+					updateArgs({ isFocused: false });
+				}}
 				title=${ifDefined(title)}
 				value=${ifDefined(value)}
 				@change=${(e) => {