chore(swatch+swatchgroup): add hovered hover + keyboard focus controls for add swatch

Author: cdransf

components/swatch/stories/swatch.stories.js

@@ -1,6 +1,6 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isDisabled, isSelected, size } from "@spectrum-css/preview/types";
+import { isDisabled, isHovered, isKeyboardFocused, isSelected, size } from "@spectrum-css/preview/types";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { SwatchGroup } from "./swatch.test.js";
@@ -43,6 +43,14 @@ export default {
 		},
 		isDisabled,
 		isSelected,
+		isHovered: {
+			...isHovered,
+			if: { arg: "isAddSwatch", truthy: true },
+		},
+		isKeyboardFocused: {
+			...isKeyboardFocused,
+			if: { arg: "isAddSwatch", truthy: true },
+		},
 		borderStyle: {
 			name: "Border style",
 			type: { name: "string" },
@@ -104,6 +112,8 @@ export default {
 		size: "m",
 		isSelected: false,
 		isDisabled: false,
+		isHovered: false,
+		isKeyboardFocused: false,
 		rounding: "regular",
 		swatchColor: "rgb(174, 216, 230)",
 		borderStyle: "default",

components/swatch/stories/template.js

@@ -20,6 +20,7 @@ export const Template = ({
 	isAddSwatch = false,
 	isSelected = false,
 	isDisabled = false,
+	isHovered = false,
 	isKeyboardFocused = false,
 	rounding = "regular",
 	customClasses = [],
@@ -55,6 +56,7 @@ export const Template = ({
 				[`${rootClass}--${borderStyle}`]: typeof borderStyle !== "undefined" && borderStyle !== "default",
 				"is-selected": !isDisabled && isSelected,
 				"is-disabled": isDisabled,
+				"is-hover": isHovered,
 				"is-keyboardFocused": isKeyboardFocused,
 				"is-image": (isMixedValue || isAddSwatch) || typeof imageUrl !== "undefined",
 				"is-mixedValue": !isDisabled && isMixedValue,