fix toggle group

bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-example-default.ts → bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-exclusive.ts

@@ -33,9 +33,7 @@ export default (context: Context) => {
     const onsubmit = (event: any) => {
       event.preventDefault();
       const formEl = event.currentTarget;
-      const buttonName = formEl.querySelector(
-        "button[aria-pressed=true]"
-      )?.name;
+      const buttonName = formEl.querySelector("button[selected=true]")?.name;
       alert(buttonName);
     };
 

bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-inclusive.ts

@@ -34,7 +34,7 @@ export default (context: Context) => {
       event.preventDefault();
       const formEl = event.currentTarget;
       const buttonNames = [
-        ...formEl.querySelectorAll("button[aria-pressed=true]"),
+        ...formEl.querySelectorAll("button[selected=true]"),
       ].map(({ name }: any) => name);
       alert(JSON.stringify(buttonNames));
     };

bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-url.ts

@@ -0,0 +1,72 @@
+import { Context } from "@grucloud/bau-ui/context";
+import toggleGroup from "@grucloud/bau-ui/toggleGroup";
+import toggle from "@grucloud/bau-ui/toggle";
+import button from "@grucloud/bau-ui/button";
+
+export default (context: Context) => {
+  const { bau, window } = context;
+  const { form, footer, article } = bau.tags;
+
+  const toggleGroupName = "my-toggle-group";
+  const groups = [
+    { value: "one", label: "ONE" },
+    { value: "two", label: "TWO" },
+    { value: "three", label: "THREE" },
+  ];
+
+  const color = "primary";
+  const variant = "solid";
+
+  const Toggle = toggle(context, { color, variant });
+  const ToggleGroup = toggleGroup(context, { color, variant });
+  const Button = button(context, {
+    variant: "outline",
+    color: "primary",
+  });
+
+  return () => {
+    const search = new URLSearchParams(window.location.search);
+
+    const selectedState = bau.state([...search.getAll(toggleGroupName)]);
+
+    const onChange = ({ values }: any) => {
+      selectedState.val = values;
+      const search = new URLSearchParams(window.location.search);
+      search.delete(toggleGroupName);
+      values.forEach((value: string) => search.append(toggleGroupName, value));
+      window.history.replaceState(
+        "",
+        "",
+        `?${search.toString()}${window.location.hash}`
+      );
+    };
+
+    const onsubmit = (event: any) => {
+      event.preventDefault();
+      const search = new URLSearchParams(window.location.search);
+      alert(search.getAll(toggleGroupName));
+    };
+
+    return form(
+      { onsubmit },
+      article(
+        ToggleGroup(
+          { name: toggleGroupName, exclusive: true, onChange },
+          groups.map(
+            ({ label, value }) =>
+              () =>
+                Toggle(
+                  {
+                    value,
+                    name: label,
+                    selected: selectedState.val.includes(value),
+                  },
+                  label
+                )
+          )
+        )
+      ),
+      footer(Button({ type: "submit" }, "Submit"))
+    );
+  };
+};

bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup.examples.ts

@@ -4,14 +4,18 @@ import pageExample from "../pageExample.ts";
 
 import toggleGroupGridItem from "./toggleGroup-grid-item.ts";
 
-import toggleGroupDefault from "./toggleGroup-example-default.ts";
+import toggleGroupExclusive from "./toggleGroup-exclusive.ts";
 // @ts-ignore
-import codeExampleDefault from "./toggleGroup-example-default.ts?raw";
+import codeExampleExclusive from "./toggleGroup-exclusive.ts?raw";
 
 import toggleGroupInclusive from "./toggleGroup-inclusive.ts";
 // @ts-ignore
 import codeExampleInclusive from "./toggleGroup-inclusive.ts?raw";
 
+import toggleGroupUrl from "./toggleGroup-url.ts";
+// @ts-ignore
+import codeExampleUrl from "./toggleGroup-url.ts?raw";
+
 export const toggleGroupSpec = {
   title: "Toggle Group",
   package: "toggleGroup",
@@ -23,15 +27,21 @@ export const toggleGroupSpec = {
     {
       title: "Exclusive ToggleGroup",
       description: "A simple exclusive toggleGroup.",
-      code: codeExampleDefault,
-      createComponent: toggleGroupDefault,
+      code: codeExampleExclusive,
+      createComponent: toggleGroupExclusive,
     },
     {
       title: "Inclusive ToggleGroup",
       description: "A simple inclusive toggleGroup.",
       code: codeExampleInclusive,
       createComponent: toggleGroupInclusive,
     },
+    {
+      title: "State in URL",
+      description: "A toggleGroup with state in the URL.",
+      code: codeExampleUrl,
+      createComponent: toggleGroupUrl,
+    },
   ],
   gridItem: toggleGroupGridItem,
 };

bau-ui/input/input.js

@@ -81,7 +81,7 @@ export default function (context, options = {}) {
         color,
         variant,
         className,
-        props.class.join(" "),
+        Array.isArray(props.class) ? props.class?.join(" ") : props.class,
       ],
     });
   };

bau-ui/toggle/toggle.js

@@ -12,6 +12,7 @@ export default function (context, options = {}) {
       --toggle-background-color: rgba(255, 255, 255, 0.4)
     }
   `;
+
   const className = css`
     color: inherit;
     display: inline-flex;
@@ -31,11 +32,11 @@ export default function (context, options = {}) {
     transition: all var(--transition-slow);
     box-sizing: border-box;
     cursor: pointer;
-    &[aria-pressed="true"] {
+    &[selected="true"] {
       background-color: var(--toggle-background-color);
       box-shadow: var(--shadow-lg);
     }
-    &[aria-pressed="true"].solid {
+    &[selected="true"].solid {
       filter: brightness(80%) !important;
     }
     &.outline,
@@ -81,6 +82,7 @@ export default function (context, options = {}) {
         ...props,
         onclick: (event) => {
           const { target } = event;
+          //debugger;
           const pressed = target.getAttribute("aria-pressed");
           target.setAttribute(
             "aria-pressed",