chore(colorwheel): add color loupe to default story

adobe · Jan 31, 2025 · ec856d2 · ec856d2
1 parent c8b03d9
commit ec856d2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js
@@ -31,6 +31,15 @@ export default {
 			},
 			control: "boolean",
 		},
+		isWithColorLoupe: {
+			name: "With color loupe",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
 		selectedColor: {
 			name: "Selected color",
 			description: "The color of the handle.",
@@ -57,7 +66,9 @@ export default {
 };
 
 export const Default = ColorWheelGroup.bind({});
-Default.args = {};
+Default.args = {
+	isWithColorLoupe: true,
+};
 
 // ********* DOCS ONLY ********* //
 export const Disabled = Template.bind({});

diff --git a/components/colorwheel/stories/template.js b/components/colorwheel/stories/template.js
@@ -12,6 +12,7 @@ export const Template = ({
 	isDisabled = false,
 	isFocused = false,
 	isWithColorArea = false,
+	isWithColorLoupe = true,
 	colorHandleStyle = {},
 	selectedColor = "rgba(255, 0, 0, 50%)",
 } = {}, context = {}) => {
@@ -46,6 +47,7 @@ export const Template = ({
 				customClasses: [`${rootClass}-handle`],
 				selectedColor,
 				customStyles: colorHandleStyle,
+				isWithColorLoupe,
 			}, context)}
 			<input type="range" class="${rootClass}-slider" aria-label="hue" min="0" max="360" step="">
 		</div>