feat(coachmark): update stories

Author: jenndiaz

components/actionmenu/stories/template.js

@@ -11,6 +11,7 @@ export const Template = ({
 	items = [],
 	label,
 	iconName,
+	size = "m",
 	isOpen = true,
 	...globals
 }) => {
@@ -23,7 +24,7 @@ export const Template = ({
 
 	return [
 		ActionButton({
-			size: "m",
+			size,
 			label,
 			iconName,
 			isQuiet: false,

components/coachmark/stories/coachmark.stories.js

@@ -1,6 +1,9 @@
 // Import the component markup template
 import { Template } from "./template";
 
+import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
+import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js";
+
 export default {
 	title: "Components/Coach mark",
 	description:
@@ -34,26 +37,19 @@ export default {
 			},
 			control: "boolean",
 		},
-		isMobile: {
-			name: "Mobile Variant",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "Component",
-			},
-			control: "boolean",
-		},
 	},
 	args: {
 		rootClass: "spectrum-CoachMark",
 		hasActionMenu: true,
 		hasPagination: true,
 		hasImage: false,
-		isMobile: false,
 	},
 	parameters: {
 		actions: {
-			handles: [],
+			handles: [
+				...ActionButton.parameters.actions.handles,
+				...Menu.parameters.actions.handles,
+			],
 		},
 		status: {
 			type: process.env.MIGRATED_PACKAGES.includes("coachmark")
@@ -66,19 +62,7 @@ export default {
 export const Default = Template.bind({});
 Default.args = {};
 
-export const DefaultWithImage = Template.bind({});
-DefaultWithImage.args = {
+export const WithMedia = Template.bind({});
+WithMedia.args = {
 	hasImage: true,
 };
-
-export const Mobile = Template.bind({});
-Mobile.args = {
-	isMobile: true,
-};
-
-export const MobileWithImage = Template.bind({});
-MobileWithImage.args = {
-	isMobile: true,
-	hasImage: true,
-};
-

components/coachmark/stories/template.js

@@ -1,6 +1,6 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { useArgs } from "@storybook/client-api";
 
 import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js";
 import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
@@ -18,14 +18,15 @@ export const Template = ({
 	hasActionMenu = false,
 	hasPagination,
 	hasImage,
-	isMobile,
+	isOpen = true,
 	...globals
 }) => {
+	const [, updateArgs] = useArgs();
+
 	return html`
-		<div cdiv
+		<div
 		class=${classMap({
 			[rootClass]: true,
-			[`${rootClass}--mobile`]: isMobile,
 			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 		})}
 	>
@@ -44,7 +45,12 @@ export const Template = ({
 					<div class="spectrum-CoachMark-title">Try playing with a pixel brush</div>
 					<div class="spectrum-CoachMark-action-menu">
 					${hasActionMenu ? ActionMenu({
-							isOpen: false,
+							onclick: function () {
+								updateArgs({ isOpen: !isOpen });
+							},
+							isOpen,
+							iconName: 'More',
+							size: globals.scale === "large" ? "s" : "m",
 							items: [
 								{
 								  label: "Skip tour",
@@ -62,8 +68,8 @@ export const Template = ({
 				<div class="${rootClass}-footer">
 				${hasPagination ? html`<div class="spectrum-CoachMark-step"><bdo dir="ltr">2 of 8</bdo></div>` : ''}
 				${ButtonGroup({
-					size: isMobile ? 's' : 'm',
-					items: isMobile ?
+					size: globals.scale === "large" ? "s" : "m",
+					items: globals.scale === "large" ?
 					[
 						{
 							variant: "secondary",