chore(stepper): update vrt snpashots (#3123)

adobe · Sep 18, 2024 · 2e467a1 · 2e467a1
1 parent 0061fba
commit 2e467a1
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 24 deletions.
diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js
@@ -1,9 +1,9 @@
-import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isQuiet, size } from "@spectrum-css/preview/types";
 import { Sizes } from "@spectrum-css/preview/decorators";
+import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import { isDisabled, isFocused, isHovered, isInvalid, isKeyboardFocused, isQuiet, size } from "@spectrum-css/preview/types";
 import pkgJson from "../package.json";
 import { StepperGroup } from "./stepper.test.js";
-import { Template, DisabledVariantsGroup, AllDefaultVariantsGroup } from "./template";
+import { AllDefaultVariantsGroup, DisabledVariantsGroup, Template } from "./template";
 
 /**
  * A stepper can be used to increment or decrement a value by a specified amount via an up/down button. An input field displays the current value.
@@ -26,13 +26,15 @@ export default {
 		isDisabled,
 		isInvalid,
 		isFocused,
+		isHovered,
 		isKeyboardFocused,
 	},
 	args: {
 		rootClass: "spectrum-Stepper",
 		size: "m",
 		isQuiet: false,
 		isFocused: false,
+		isHovered: false,
 		isKeyboardFocused: false,
 		isInvalid: false,
 		isDisabled: false,

diff --git a/components/stepper/stories/stepper.test.js b/components/stepper/stories/stepper.test.js
@@ -12,15 +12,28 @@ export const StepperGroup = Variants({
 			isQuiet: true,
 		},
 		{
-			testHeading: "Hide stepper",
-			hideStepper: true,
+			testHeading: "Invalid",
+			isInvalid: true,
+		},
+		{
+			testHeading: "Quiet + invalid",
+			isQuiet: true,
+			isInvalid: true,
 		},
 	],
 	stateData: [
+		{
+			testHeading: "Hide stepper",
+			hideStepper: true,
+		},
 		{
 			testHeading: "Disabled",
 			isDisabled: true,
 		},
+		{
+			testHeading: "Hovered",
+			isHovered: true,
+		},
 		{
 			testHeading: "Focused",
 			isFocused: true,
@@ -30,28 +43,17 @@ export const StepperGroup = Variants({
 			isKeyboardFocused: true,
 		},
 		{
-			testHeading: "Invalid",
-			isInvalid: true,
-		},
-		{
-			testHeading: "Invalid + focused",
-			isInvalid: true,
-			isFocused: true,
-		},
-		{
-			testHeading: "Invalid + keyboard-focused",
-			isInvalid: true,
-			isKeyboardFocused: true,
+			testHeading: "Disabled + hovered",
+			isDisabled: true,
+			isHovered: true,
 		},
 		{
-			testHeading: "Invalid + disabled + focused",
-			isInvalid: true,
+			testHeading: "Disabled + focused",
 			isDisabled: true,
 			isFocused: true,
 		},
 		{
-			testHeading: "Invalid + disabled + keyboard-focused",
-			isInvalid: true,
+			testHeading: "Disabled + keyboard-focused",
 			isDisabled: true,
 			isKeyboardFocused: true,
 		},

diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js
@@ -1,5 +1,5 @@
 import { Template as InfieldButton } from "@spectrum-css/infieldbutton/stories/template.js";
-import { getRandomId, Container } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
@@ -14,6 +14,7 @@ export const Template = ({
 	size = "m",
 	isQuiet = false,
 	isFocused = false,
+	isHovered = false,
 	isKeyboardFocused = false,
 	isInvalid = false,
 	isDisabled = false,
@@ -44,6 +45,7 @@ export const Template = ({
 				[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
 				[`${rootClass}--quiet`]: isQuiet,
 				"is-focused": isFocused,
+				"is-hover": isHovered,
 				"is-keyboardFocused": isKeyboardFocused,
 				"is-invalid": isInvalid,
 				"is-disabled": isDisabled,
@@ -115,6 +117,14 @@ export const AllDefaultVariantsGroup = (args, context) => Container({
 			heading: "Invalid",
 			content: Template({...args, isInvalid: true}, context)
 		})}
+		${Container({
+			withBorder: false,
+			containerStyles: {
+				"gap": "8px",
+			},
+			heading: "Hovered",
+			content: Template({...args, isHovered: true}, context)
+		})}
 		${Container({
 			withBorder: false,
 			containerStyles: {
@@ -136,15 +146,15 @@ export const AllDefaultVariantsGroup = (args, context) => Container({
 			containerStyles: {
 				"gap": "8px",
 			},
-			heading: "Keyboard focused",
+			heading: "Keyboard-focused",
 			content: Template({...args, isKeyboardFocused: true}, context)
 		})}
 		${Container({
 			withBorder: false,
 			containerStyles: {
 				"gap": "8px",
 			},
-			heading: "Invalid, keyboard focused",
+			heading: "Invalid, keyboard-focused",
 			content: Template({...args, isInvalid: true, isKeyboardFocused: true}, context)
 		})}
 	`