From ec856d2c4235d61a4a1b406701002a9428df4ba4 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 30 Jan 2025 09:53:22 -0800
Subject: [PATCH] chore(colorwheel): add color loupe to default story

---
 components/colorwheel/stories/colorwheel.stories.js | 13 ++++++++++++-
 components/colorwheel/stories/template.js           |  2 ++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js
index 15bba48a20..019cb3b2fa 100644
--- 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
index 16cb472a04..91831c0af3 100644
--- 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>