chore(clearbutton): update storybook to include over background story

Author: mlogsdon18

components/clearbutton/metadata/mods.md

@@ -1,9 +1,13 @@
-| Modifiable Custom Properties              |
-| ----------------------------------------- |
-| `--mod-clear-button-height`               |
-| `--mod-clear-button-icon-color`           |
-| `--mod-clear-button-icon-color-down`      |
-| `--mod-clear-button-icon-color-hover`     |
-| `--mod-clear-button-icon-color-key-focus` |
-| `--mod-clear-button-padding`              |
-| `--mod-clear-button-width`                |
+| Modifiable Custom Properties                    |
+| ----------------------------------------------- |
+| `--mod-clear-button-background-color`           |
+| `--mod-clear-button-background-color-down`      |
+| `--mod-clear-button-background-color-hover`     |
+| `--mod-clear-button-background-color-key-focus` |
+| `--mod-clear-button-height`                     |
+| `--mod-clear-button-icon-color`                 |
+| `--mod-clear-button-icon-color-down`            |
+| `--mod-clear-button-icon-color-hover`           |
+| `--mod-clear-button-icon-color-key-focus`       |
+| `--mod-clear-button-padding`                    |
+| `--mod-clear-button-width`                      |

components/clearbutton/stories/clearbutton.stories.js

@@ -25,16 +25,7 @@ export default {
 			},
 			control: "boolean",
 		},
-		variant: {
-			name: "Variant",
-			type: { name: "string" },
-			table: {
-				type: { summary: "string" },
-				category: "Component",
-			},
-			options: ["overBackground"],
-			control: "select",
-		},
+		variant: { table: { disable: true }},
 	},
 	args: {
 		rootClass: "spectrum-ClearButton",
@@ -55,3 +46,13 @@ export default {
 
 export const Default = Template.bind({});
 Default.args = {};
+
+export const OverBackground = Template.bind({});
+OverBackground.args = {
+	variant: "overBackground",
+	styles: {
+		"background-color": "rgb(15, 121, 125);", 
+		"color": "rgb(15, 121, 125);",
+		"padding": "15px 20px;"
+	}
+};

components/clearbutton/stories/template.js

@@ -1,21 +1,23 @@
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-// import { ifDefined } from 'lit/directives/if-defined.js';
+import { html } from "lit-html";
+import { classMap } from "lit-html/directives/class-map.js";
+import { styleMap } from "lit-html/directives/style-map.js";
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 
 import "../index.css";
 
-export const Template = ({
+export const ClearButton = ({
 	rootClass = "spectrum-ClearButton",
 	customClasses = [],
 	isDisabled = false,
 	size = "m",
 	variant,
+	styles = {},
 	...globals
 }) => {
 	return html`
-		<button
+	<button
 			type="reset"
 			class=${classMap({
 				[rootClass]: true,
@@ -25,6 +27,7 @@ export const Template = ({
 				"is-disabled": isDisabled,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
+			style=${ifDefined(styleMap(styles))}
 			?disabled=${isDisabled}
 		>
 			<div class="${rootClass}-fill">
@@ -36,4 +39,48 @@ export const Template = ({
 			</div>
 		</button>
 	`;
+}
+
+export const Template = ({
+	rootClass = "spectrum-ClearButton",
+	customClasses = [],
+	isDisabled = false,
+	size = "m",
+	variant,
+	styles = {},
+	...globals
+}) => {
+	const { express } = globals;
+
+	try {
+		if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
+		else import(/* webpackPrefetch: true */ "../themes/express.css");
+	} catch (e) {
+		console.warn(e);
+	}
+	
+	if (typeof variant !== "undefined") {
+		return html`
+			<div style=${ifDefined(styleMap(styles))}>
+				${ClearButton({
+					rootClass,
+					customClasses,
+					isDisabled,
+					size,
+					variant,
+					globals
+				})}
+			</div>
+		`;
+	}
+
+	return ClearButton({
+		rootClass,
+		customClasses,
+		isDisabled,
+		size,
+		variant,
+		styles,
+		globals
+	})
 };