fix(coachmark): title control

adobe · Jan 15, 2025 · 034245f · 034245f
1 parent 20fff6d
commit 034245f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/components/coachmark/index.css b/components/coachmark/index.css
@@ -47,7 +47,7 @@
 	--spectrum-coachmark-step-text-line-height: var(--spectrum-line-height-200);
 	--spectrum-coachmark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge);
 
-	--spectrun-coachmark-keyboard-shortcut-font-family: var(--spectrum-code-font-family);
+	--spectrum-coachmark-keyboard-shortcut-font-family: var(--spectrum-code-font-family);
 
 	/* @passthrough start */
 	--mod-buttongroup-justify-content: flex-end;
@@ -130,7 +130,7 @@
 }
 
 .spectrum-CoachMark-shortcut {
-	font-family: var(--mod-coachmark-keyboard-shortcut-font-family, var(--spectrun-coachmark-keyboard-shortcut-font-family));
+	font-family: var(--mod-coachmark-keyboard-shortcut-font-family, var(--spectrum-coachmark-keyboard-shortcut-font-family));
 	white-space: nowrap;
 }
 

diff --git a/components/coachmark/metadata/metadata.json b/components/coachmark/metadata/metadata.json
@@ -74,6 +74,7 @@
     "--spectrum-coachmark-content-font-weight",
     "--spectrum-coachmark-header-to-body",
     "--spectrum-coachmark-heading-to-action-button",
+    "--spectrum-coachmark-keyboard-shortcut-font-family",
     "--spectrum-coachmark-max-width",
     "--spectrum-coachmark-media-fixed-height",
     "--spectrum-coachmark-media-min-height",

diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js
@@ -112,6 +112,7 @@ export default {
 export const Default = CoachMarkGroup.bind({});
 Default.tags = ["!autodocs"];
 Default.args = {
+	title: "Coach mark title",
 	image: "example-card-landscape.png",
 	hasKeyboardShortcut: false,
 };
@@ -159,7 +160,7 @@ MediaStates.parameters = {
 };
 
 /** Keyboard shortcuts may be shown in place of or below the action menu. */
-export const ShortCutStories = CoachmarkShortcutStatesTemplate.bind({})
+export const ShortCutStories = CoachmarkShortcutStatesTemplate.bind({});
 ShortCutStories.tags = ["!dev"];
 ShortCutStories.parameters = {
 	chromatic: {