chore: load typography template in stories (#2253)

Storybook needs to load all assets for a component and cannot reference classes from other packages without first importing them.

Author: castastrophe

components/actionbar/stories/template.js

@@ -1,11 +1,10 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-// import { ifDefined } from 'lit/directives/if-defined.js';
 
-import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
+import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/template.js";
 import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
 import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
-import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/template.js";
+import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
 
 import "../index.css";
 

components/actionbutton/stories/actionbutton-staticblack.stories.js

@@ -1,4 +1,4 @@
-import { argTypes, ActionButtons } from "./index";
+import { ActionButtons, argTypes } from "./index";
 
 export default {
 	title: "Components/Action button/Static Black",
@@ -13,8 +13,7 @@ export default {
 		isQuiet: false,
 		isEmphasized: false,
 		hasPopup: false,
-    backgroundColor: "rgb(181, 209, 211)",
-    staticColor: "black",
+		staticColor: "black",
 	},
 	parameters: {
 		actions: {

components/actionbutton/stories/actionbutton-staticwhite.stories.js

@@ -1,4 +1,4 @@
-import { argTypes, ActionButtons } from "./index";
+import { ActionButtons, argTypes } from "./index";
 
 export default {
 	title: "Components/Action button/Static White",
@@ -13,8 +13,7 @@ export default {
 		isQuiet: false,
 		isEmphasized: false,
 		hasPopup: false,
-    backgroundColor: "rgb(15, 121, 125)",
-    staticColor: "white",
+		staticColor: "white",
 	},
 	parameters: {
 		actions: {

components/actionbutton/stories/index.js

@@ -1,6 +1,7 @@
 import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 
-// Import the component markup template
 import { Template } from "./template";
 
 import { default as IconStories } from "@spectrum-css/icon";
@@ -96,27 +97,35 @@ export const argTypes = {
 	},
 };
 
-export const ActionButtons = (args) => {
+export const ActionButtons = ({
+	staticColor,
+	...args
+}) => {
 	return html`
 		<div
-			style="padding: 1rem; ${args.staticColor && args.backgroundColor
-				? `background-color: ${args.backgroundColor}`
-				: ""}"
+      		style=${ifDefined(styleMap({
+				padding: "1rem",
+				backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
+			}))}
 		>
 			${Template({
 				...args,
+				staticColor,
 				label: "More",
 				iconName: undefined,
 			})}
 			${Template({
 				...args,
+				staticColor,
 				label: "More",
 			})}
 			${Template({
 				...args,
+				staticColor,
 			})}
 			${Template({
 				...args,
+				staticColor,
 				hasPopup: true,
 			})}
 		</div>

components/actionbutton/stories/template.js

@@ -1,9 +1,10 @@
 import { html } from "lit";
 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 { when } from "lit/directives/when.js";
 
-import { lowerCase, capitalize } from "lodash-es";
+import { capitalize, lowerCase } from "lodash-es";
 
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 
@@ -22,6 +23,7 @@ export const Template = ({
 	hideLabel = false,
 	staticColor,
 	customClasses = [],
+	customStyles = {},
 	customIconClasses = [],
 	onclick,
 	id,
@@ -56,6 +58,7 @@ export const Template = ({
 			})}
 			id=${ifDefined(id)}
 			role=${ifDefined(role)}
+			style=${ifDefined(styleMap(customStyles))}
 			?disabled=${isDisabled}
 			@click=${onclick}
 		>

components/alertdialog/stories/alertdialog.stories.js

@@ -1,6 +1,3 @@
-import { html } from "lit-html";
-
-// Import the component markup template
 import { Template } from "./template";
 
 export default {
@@ -144,4 +141,3 @@ Destructive.args = {
   }],
   content: 'Are you sure you want to delete the 3 selected documents?',
 };
-

components/alertdialog/stories/template.js

@@ -1,15 +1,15 @@
-import { html } from "lit-html";
-import { classMap } from "lit-html/directives/class-map.js";
-import { ifDefined } from "lit-html/directives/if-defined.js";
-import { when } from 'lit-html/directives/when.js';
 import { useArgs } from "@storybook/client-api";
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from 'lit/directives/when.js';
 
-import { Template as Underlay } from '@spectrum-css/underlay/stories/template.js';
-import { Template as Modal } from '@spectrum-css/modal/stories/template.js';
-import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
-import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js";
 import { Template as Button } from '@spectrum-css/button/stories/template.js';
+import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js";
+import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
+import { Template as Modal } from '@spectrum-css/modal/stories/template.js';
+import { Template as Underlay } from '@spectrum-css/underlay/stories/template.js';
 
 import '../index.css';
 
@@ -80,7 +80,13 @@ export const Template = ({
       variant: "secondary",
       label: "Click to open Alert Dialog",
       treatment: "outline",
-      customClasses: ['spectrum-CSSExample-overlayShowButton'],
+      customClasses: [],
+      customStyles: {
+        position: "absolute",
+        insetInlineStart: "50%",
+        insetBlockStart: "50%",
+        transform: "translate(-50%, -50%)",
+      },
       onclick: () => {
         updateArgs({ isOpen: !isOpen });
       },
@@ -91,4 +97,4 @@ export const Template = ({
       content: Dialog,
     })}
       `
-  }
+  }

components/button/stories/button.stories.js

@@ -1,6 +1,7 @@
 import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 
-// Import the component markup template
 import { Template } from "./template";
 
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
@@ -69,7 +70,7 @@ export default {
 			control: "boolean",
 		},
 		staticColor: {
-			name: "StaticColor",
+			name: "Static color",
 			type: { name: "string" },
 			table: {
 				type: { summary: "string" },
@@ -99,30 +100,41 @@ export default {
 	},
 };
 
-const CustomButton = (args) => {
+const CustomButton = ({
+	iconName,
+	staticColor,
+	customStyles = {},
+	...args
+}) => {
 	return html`
 		<div
-			style="padding: 1rem; ${args.staticColor && args.backgroundColor
-				? `background-color: ${args.backgroundColor}`
-				: ""}"
+      		style=${ifDefined(styleMap({
+				padding: "1rem",
+				backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
+				...customStyles
+			}))}
 		>
 			${Template({
 				...args,
+				staticColor,
 				iconName: undefined,
 			})}
 			${Template({
 				...args,
+				staticColor,
 				iconName: undefined,
 				treatment: "outline",
 			})}
 			${Template({
 				...args,
-				iconName: args.iconName ?? "Edit",
+				staticColor,
+				iconName: iconName ?? "Edit",
 			})}
 			${Template({
 				...args,
+				staticColor,
 				hideLabel: true,
-				iconName: args.iconName ?? "Edit",
+				iconName: iconName ?? "Edit",
 			})}
 		</div>
 	`;
@@ -151,13 +163,11 @@ Secondary.args = {
 
 export const StaticColorWhite = CustomButton.bind({});
 StaticColorWhite.args = {
-	backgroundColor: "rgb(15, 121, 125)",
 	staticColor: "white",
 };
 
 export const StaticColorBlack = CustomButton.bind({});
 StaticColorBlack.args = {
-	backgroundColor: "rgb(181, 209, 211)",
 	staticColor: "black",
 };
 

components/button/stories/template.js

@@ -1,6 +1,7 @@
 import { html } from "lit";
 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 { when } from "lit/directives/when.js";
 
 import { capitalize, lowerCase } from "lodash-es";
@@ -13,6 +14,7 @@ export const Template = ({
   rootClass = "spectrum-Button",
   id,
   customClasses = [],
+  customStyles = {},
   size = "m",
   label,
   hideLabel = false,
@@ -47,6 +49,7 @@ export const Template = ({
         ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
       })}
       id=${ifDefined(id)}
+      style=${ifDefined(styleMap(customStyles))}
       ?disabled=${isDisabled}
       @click=${onclick}
       aria-label=${ifDefined(hideLabel ? iconName : undefined)}

components/buttongroup/stories/template.js

@@ -1,6 +1,5 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-// import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { Template as Button } from "@spectrum-css/button/stories/template.js";