fix(tray): storybook heading text control and unused import

The Storybook "heading" control was previously not usable, due to how
the arg was being passed through to the Dialog. This text string control
will now change the heading.

Replaces an "unused" import for Modal whose CSS is still necessary for
the Tray to render correctly. The unused import would be deleted on
save/fix, resulting in the wrong styles. Replaced the template import
with an import of just the CSS for Modal.

Author: jawinn

components/tray/stories/template.js

@@ -3,8 +3,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 
-import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
-
+import "@spectrum-css/modal/index.css";
 import "../index.css";
 
 export const Template = ({

components/tray/stories/tray.stories.js

@@ -29,6 +29,7 @@ export default {
 		rootClass: "spectrum-Tray",
 		customClasses: ["spectrum-Modal"],
 		isOpen: true,
+		heading: "New Messages",
 	},
 	parameters: {
 		actions: {
@@ -43,15 +44,16 @@ export default {
 };
 
 export const Default = ({
+	heading,
 	...args
 }) => {
 	return html`
 		<div>
 			${Template({
-				heading: "Tray Dialog",
+				...args,
 				content: [
 					() => Dialog({
-							heading: "New Messages",
+							heading,
 							content: ["You have 5 new messages!"],
 							isDismissable: false,
 						})
@@ -62,7 +64,6 @@ export const Default = ({
 				window.isChromatic() ?
 				Template({
 					...args,
-					heading: "Tray Dialog",
 					content: [
 						() => Dialog({
 								heading: "You have new messages waiting in your inbox",
@@ -79,4 +80,3 @@ export const Default = ({
 		</div>
 	`;
 };
-Default.args = {};