feat(coachmarkindicator): add quiet to storybook

Author: jenndiaz

components/coachindicator/stories/coachindicator.stories.js

@@ -23,14 +23,15 @@ export default {
 				type: { summary: "string" },
 				category: "Component",
 			},
-			options: ["dark", "light"],
+			options: ["default", "dark", "light"],
 			control: "inline-radio",
 		},
 	},
 	args: {
 		rootClass: "spectrum-CoachMark",
 		isQuiet: false,
 		withPopover: false,
+		variant: "default",
 	},
 	parameters: {
 		actions: {
@@ -46,3 +47,9 @@ export default {
 
 export const Default = Template.bind({});
 Default.args = {};
+
+export const Quiet = Template.bind({});
+Quiet.args = {
+	isQuiet: true
+};
+

components/coachindicator/stories/template.js

@@ -1,8 +1,5 @@
 import { html } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
-// import { ifDefined } from 'lit-html/directives/if-defined.js';
-
-import { Template as Button } from "@spectrum-css/button/stories/template.js";
 
 import "../index.css";
 
@@ -18,14 +15,13 @@ export const Template = ({
 			class=${classMap({
 				[`${rootClass}Indicator`]: true,
 				[`${rootClass}Indicator--quiet`]: isQuiet,
-				[`${rootClass}Indicator--${variant}`]: typeof variant !== "undefined",
+				[`${rootClass}Indicator--${variant}`]: variant !== "default",
 			})}
 			style="display: inline-block;vertical-align: top;"
 		>
 			<div class="${rootClass}Indicator-ring"></div>
 			<div class="${rootClass}Indicator-ring"></div>
 			<div class="${rootClass}Indicator-ring"></div>
 		</div>
-
 	`;
 };