docs: additional splitbutton and button storybook options

Some additional args were needed for SplitButton to support the "Button
style" example for Pagination, allowing another icon next to the
SplitButton label. And Button allowing the icon to appear after the
label text.

SplitButton also had a disabled arg control with the "cta" option that
was actually "accent".

Author: jawinn

components/button/stories/template.js

@@ -3,7 +3,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.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";
 
@@ -17,6 +17,7 @@ export const Template = ({
   label,
   hideLabel = false,
   iconName,
+  iconAfterLabel = false,
   variant,
   staticColor,
   treatment,
@@ -52,10 +53,11 @@ export const Template = ({
       aria-expanded=${ifDefined(ariaExpanded?.toString())}
       aria-controls=${ifDefined(ariaControls)}
     >
-      ${when(iconName, () => Icon({ ...globals, iconName, size }))}
+      ${when(iconName && !iconAfterLabel, () => Icon({ ...globals, iconName, size }))}
       ${when(label && !hideLabel,
         () => html`<span class=${`${rootClass}-label`}>${label}</span>`
       )}
+      ${when(iconName && iconAfterLabel, () => Icon({ ...globals, iconName, size }))}
     </button>
   `;
 };

components/splitbutton/stories/splitbutton.stories.js

@@ -18,7 +18,7 @@ export default {
 			name: "Variant",
 			type: { name: "string" },
 			table: { disable: true },
-			options: ["cta", "primary", "secondary"],
+			options: ["accent", "primary", "secondary"],
 			control: "select",
 		},
 		position: {

components/splitbutton/stories/template.js

@@ -8,9 +8,12 @@ import "../index.css";
 export const Template = ({
 	rootClass = "spectrum-SplitButton",
 	customClasses = [],
+	customFirstButtonClasses = [],
+	customLastButtonClasses = [],
 	size = "m",
 	variant = "cta",
 	iconName = "ChevronDown100",
+	labelIconName = undefined,
 	position = "right",
 	label = "Split Button",
 	...globals
@@ -28,25 +31,34 @@ export const Template = ({
 				...globals,
 				variant,
 				size,
-				iconName: position === "right" ? undefined : iconName,
+				iconName: position === "right"
+					? typeof labelIconName != "undefined" ? labelIconName : undefined
+					: iconName,
 				label: position === "right" ? label : undefined,
 				hideLabel: position === "right" ? false : true,
-				customClasses:
+				customClasses: [
 					position === "right"
-						? ["spectrum-SplitButton-action"]
-						: ["spectrum-SplitButton-trigger"],
+						? "spectrum-SplitButton-action"
+						: "spectrum-SplitButton-trigger",
+					...customFirstButtonClasses
+				]
 			})}
 			${Button({
 				...globals,
 				variant,
 				size,
-				iconName: position === "right" ? iconName : undefined,
+				iconName: position === "right"
+					? iconName 
+					: typeof labelIconName != "undefined" ? labelIconName : undefined,
+				iconAfterLabel: true,
 				label: position === "right" ? undefined : label,
 				hideLabel: position === "right" ? true : false,
-				customClasses:
+				customClasses: [
 					position === "right"
-						? ["spectrum-SplitButton-trigger"]
-						: ["spectrum-SplitButton-action"],
+						? "spectrum-SplitButton-trigger"
+						: "spectrum-SplitButton-action",
+					...customLastButtonClasses
+				]
 			})}
 		</div>
 	`;