add button groups

src/button-groups.ts

@@ -1,4 +1,5 @@
 import { StacksCommonOptions } from "./index";
+import { Buttons } from "./index";
 
 export type GroupButton = {
     /** Button text (HTML allowed) */
@@ -9,6 +10,8 @@ export type GroupButton = {
     count?: number;
     /** Whether to wrap the button in a `<form>` element */
     form?: boolean;
+    /** The type of the button (outlined and muted by default) */
+    types?: Omit<Buttons.ButtonType, "outlined" | "muted">[];
 };
 
 export type StacksButtonGroupOptions = StacksCommonOptions;
@@ -36,12 +39,14 @@ export const makeStacksButtonGroup = (
             selected = false,
             count,
             form = false,
+            types = []
         } = buttonConfig;
 
-        const button = document.createElement("button");
-        button.classList.add("s-btn", "s-btn__muted", "s-btn__outlined");
-        button.setAttribute("role", "button");
-        button.append(text);
+        const button = Buttons.makeStacksButton(
+            "",
+            text,
+            { type: ["muted", "outlined", ...(types as Buttons.ButtonType[])] }
+        );
 
         if (selected) {
             button.classList.add("is-selected");
@@ -61,7 +66,6 @@ export const makeStacksButtonGroup = (
 
         if (form) {
             const formContainer = document.createElement("form");
-            formContainer.classList.add("s-btn-group--container");
             formContainer.append(button);
 
             container.append(formContainer);

src/buttons/index.ts

@@ -54,7 +54,7 @@ export type StacksIconButtonOptions = StacksCommonOptions & {
  */
 export const makeStacksButton = (
     id: string,
-    text: string,
+    text: string | HTMLElement,
     options: StacksIconButtonOptions = {}
 ): HTMLButtonElement => {
     const {
@@ -72,17 +72,26 @@ export const makeStacksButton = (
     } = options;
 
     const btn = document.createElement("button");
-    btn.id = id;
-    btn.textContent = text;
+    if (id !== "") {
+        btn.id = id;
+    }
+
     btn.classList.add(
         "s-btn",
         ...type.map((name) => `s-btn__${name}`),
         ...classes
     );
+    btn.append(text);
 
     btn.type = "button";
     btn.setAttribute("role", "button");
-    btn.setAttribute("aria-label", title || text);
+
+    const ariaLabel = title || (
+        text instanceof HTMLElement
+            ? text.textContent || ""
+            : text
+    );
+    btn.setAttribute("aria-label", ariaLabel);
 
     if (primary) {
         btn.classList.add("s-btn__filled");

test/button-groups.spec.ts

@@ -0,0 +1,41 @@
+import { expect } from "chai";
+import { appendScript, getSample } from "./index.spec";
+import { makeStacksButtonGroup, GroupButton } from "../src/button-groups";
+import { makeStacksButton } from "../src/buttons";
+import { JSDOM } from "jsdom";
+
+describe("Button groups", function() {
+    const buttonGroups = getSample(this.title.toLowerCase().replace(" ", "-"));
+
+    let window: JSDOM["window"];
+
+    beforeEach(() => {
+        window = new JSDOM("", { runScripts: "dangerously" }).window;
+        appendScript(window, { makeStacksButtonGroup, makeStacksButton, Buttons: "{ makeStacksButton }" });
+    });
+
+    it("should correctly generate button groups", () => {
+        const group = window.makeStacksButtonGroup as typeof makeStacksButtonGroup;
+
+        (
+            [
+                [
+                    { text: "Newest" },
+                    { text: "Frequent" },
+                    { text: "Votes", form: true, selected: true },
+                    { text: "Active" },
+                    { text: "Unanswered", form: true },
+                ],
+                [
+                    { text: "Active", count: 197 },
+                    { text: "Inactive", count: 37, types: [ "dropdown" ], selected: true },
+                    { text: "All", count: 234 }
+                ]
+            ] as GroupButton[][]
+        ).forEach((data, index) => {
+            const el = group(data);
+
+            expect(el.outerHTML).to.equal(buttonGroups[index].outerHTML);
+        });
+    });
+});

test/sample/button-groups.html

@@ -0,0 +1,2 @@
+<div class="s-btn-group"><button class="s-btn s-btn__muted s-btn__outlined" type="button" role="button" aria-label="Newest">Newest</button><button class="s-btn s-btn__muted s-btn__outlined" type="button" role="button" aria-label="Frequent">Frequent</button><form><button class="s-btn s-btn__muted s-btn__outlined is-selected" type="button" role="button" aria-label="Votes">Votes</button></form><button class="s-btn s-btn__muted s-btn__outlined" type="button" role="button" aria-label="Active">Active</button><form><button class="s-btn s-btn__muted s-btn__outlined" type="button" role="button" aria-label="Unanswered">Unanswered</button></form></div>
+<div class="s-btn-group"><button class="s-btn s-btn__muted s-btn__outlined" type="button" role="button" aria-label="Active">Active <span class="s-btn--badge"><span class="s-btn--number">197</span></span></button><button class="s-btn s-btn__muted s-btn__outlined s-btn__dropdown is-selected" type="button" role="button" aria-label="Inactive">Inactive <span class="s-btn--badge"><span class="s-btn--number">37</span></span></button><button class="s-btn s-btn__muted s-btn__outlined" type="button" role="button" aria-label="All">All <span class="s-btn--badge"><span class="s-btn--number">234</span></span></button></div>