test(checkbox): add more coverage for checkbox (#3625)

* chore(checkbox): add isHovered state to checkbox

- adds isHovered shared type and control to checkbox stories
- adds several isHovered test cases
- updates checkbox template to include isHovered arg

* chore(form): fix the fieldgroup component input and labels

Author: marissahuysentruyt

components/checkbox/stories/checkbox.stories.js

@@ -1,6 +1,6 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isChecked, isDisabled, isEmphasized, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types";
+import { isChecked, isDisabled, isEmphasized, isHovered, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { CheckboxGroup } from "./checkbox.test.js";
@@ -30,6 +30,7 @@ export default {
 			control: { type: "text" },
 		},
 		isEmphasized,
+		isHovered,
 		isInvalid,
 		isDisabled,
 		isChecked,
@@ -43,6 +44,7 @@ export default {
 		isChecked: false,
 		isDisabled: false,
 		isEmphasized: false,
+		isHovered: false,
 		isIndeterminate: false,
 		isInvalid: false,
 		isReadOnly: false,

components/checkbox/stories/checkbox.test.js

@@ -27,6 +27,11 @@ export const CheckboxGroup = Variants({
 			testHeading: "Checked",
 			isChecked: true,
 		},
+		{
+			testHeading: "Checked, hovered",
+			isChecked: true,
+			isHovered: true,
+		},
 		{
 			testHeading: "Indeterminate",
 			isIndeterminate: true,
@@ -40,6 +45,12 @@ export const CheckboxGroup = Variants({
 			isInvalid: true,
 			isChecked: true,
 		},
+		{
+			testHeading: "Invalid, checked, hovered",
+			isInvalid: true,
+			isChecked: true,
+			isHovered: true,
+		},
 		{
 			testHeading: "Invalid, indeterminate",
 			isInvalid: true,
@@ -54,6 +65,11 @@ export const CheckboxGroup = Variants({
 			isDisabled: true,
 			isChecked: true,
 		},
+		{
+			testHeading: "Disabled, checked, hovered",
+			isDisabled: true,
+			isChecked: true,
+		},
 		{
 			testHeading: "Disabled, indeterminate",
 			isDisabled: true,
@@ -68,6 +84,12 @@ export const CheckboxGroup = Variants({
 			isReadOnly: true,
 			isChecked: true,
 		},
+		{
+			testHeading: "Read-only, checked, hovered",
+			isReadOnly: true,
+			isChecked: true,
+			isHovered: true,
+		},
 		{
 			testHeading: "Read-only, indeterminate",
 			isReadOnly: true,

components/checkbox/stories/template.js

@@ -17,6 +17,7 @@ export const Template = ({
 	label,
 	isChecked = false,
 	isEmphasized = false,
+	isHovered = false,
 	isIndeterminate = false,
 	isDisabled = false,
 	isInvalid = false,
@@ -55,6 +56,7 @@ export const Template = ({
 				["is-indeterminate"]: isIndeterminate,
 				["is-disabled"]: isDisabled,
 				["is-invalid"]: isInvalid,
+				["is-hover"]: isHovered && !isDisabled,
 				["is-readOnly"]: isReadOnly,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}

components/form/stories/form.stories.js

@@ -1,4 +1,3 @@
-import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
 import { Template as Fieldgroup } from "@spectrum-css/fieldgroup/stories/template.js";
 import { Template as Picker } from "@spectrum-css/picker/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
@@ -80,18 +79,19 @@ export default {
 				content: [
 					(passthroughs, context) => Fieldgroup({
 						layout: "horizontal",
+						inputType: "checkbox",
 						items: [
-							Checkbox({
+							{
 								...passthroughs,
 								label: "Kittens",
 								customClasses: ["spectrum-FieldGroup-item"],
-							}, context),
-							Checkbox({
+							},
+							{
 								...passthroughs,
 								label: "Puppies",
 								customClasses: ["spectrum-FieldGroup-item"],
-							}, context),]
-					}),
+							}]
+					}, context),
 				],
 			},{
 				label: "Age",