calendar, switch examples

bau-ui/examples/bau-storybook/src/pages/calendar/calendar-controlled.ts

@@ -0,0 +1,42 @@
+import { Context } from "@grucloud/bau-ui/context";
+import button from "@grucloud/bau-ui/button";
+import calendar from "@grucloud/bau-ui/calendar";
+
+export default (context: Context) => {
+  const { bau } = context;
+  const { form, footer, article, label } = bau.tags;
+
+  const Calendar = calendar(context);
+  const ButtonSubmit = button(context, {
+    variant: "outline",
+    color: "primary",
+  });
+
+  return () => {
+    const calendarState = bau.state("2023-08-08");
+
+    const onsubmit = (event: any) => {
+      event.preventDefault();
+      const payload = Object.fromEntries(new FormData(event.currentTarget));
+      alert(JSON.stringify(payload));
+    };
+
+    return form(
+      { onsubmit },
+      article(
+        label(
+          "Start date:",
+          Calendar({
+            name: "start",
+            min: "2023-01-01",
+            max: "2024-12-31",
+            oninput: (event: any) => {
+              calendarState.val = event.target.value;
+            },
+          })
+        )
+      ),
+      footer(ButtonSubmit({ type: "submit" }, "Submit"))
+    );
+  };
+};

bau-ui/examples/bau-storybook/src/pages/calendar/calendar-uncontrolled.ts

@@ -0,0 +1,38 @@
+import { Context } from "@grucloud/bau-ui/context";
+import button from "@grucloud/bau-ui/button";
+import calendar from "@grucloud/bau-ui/calendar";
+
+export default (context: Context) => {
+  const { bau } = context;
+  const { form, footer, article, label } = bau.tags;
+
+  const Calendar = calendar(context);
+  const ButtonSubmit = button(context, {
+    variant: "outline",
+    color: "primary",
+  });
+
+  return () => {
+    const onsubmit = (event: any) => {
+      event.preventDefault();
+      const payload = Object.fromEntries(new FormData(event.currentTarget));
+      alert(JSON.stringify(payload));
+    };
+
+    return form(
+      { onsubmit },
+      article(
+        label(
+          "Start date:",
+          Calendar({
+            name: "start",
+            min: "2023-01-01",
+            max: "2024-12-31",
+            required: true,
+          })
+        )
+      ),
+      footer(ButtonSubmit({ type: "submit" }, "Submit"))
+    );
+  };
+};

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

@@ -4,9 +4,13 @@ import pageExample from "../pageExample.ts";
 
 import calendarGridItem from "./calendar-grid-item.ts";
 
-import calendarDefault from "./calendar-example-default.ts";
+import calendarUncontrolled from "./calendar-uncontrolled.ts";
 // @ts-ignore
-import codeExampleDefault from "./calendar-example-default.ts?raw";
+import codeUncontrolled from "./calendar-uncontrolled.ts?raw";
+
+import calendarControlled from "./calendar-controlled.ts";
+// @ts-ignore
+import codeControlled from "./calendar-controlled.ts?raw";
 
 export const calendarSpec = {
   title: "Calendar",
@@ -17,10 +21,16 @@ export const calendarSpec = {
   importStatement: `import calendar from "@grucloud/bau-ui/calendar";`,
   examples: [
     {
-      title: "Default",
+      title: "Uncontrolled Calendar",
       description: "A simple calendar.",
-      code: codeExampleDefault,
-      createComponent: calendarDefault,
+      code: codeUncontrolled,
+      createComponent: calendarUncontrolled,
+    },
+    {
+      title: "Controlled Calendar",
+      description: "A controlled calendar.",
+      code: codeControlled,
+      createComponent: calendarControlled,
     },
   ],
   gridItem: calendarGridItem,

bau-ui/examples/bau-storybook/src/pages/radioButton/radioButton-example-default.ts

@@ -1,17 +1,28 @@
-import radioButton from "@grucloud/bau-ui/radioButton";
 import { Context } from "@grucloud/bau-ui/context";
+import radioButton from "@grucloud/bau-ui/radioButton";
+import button from "@grucloud/bau-ui/button";
 
 export default (context: Context) => {
   const { bau, css } = context;
-  const { label, div, form } = bau.tags;
+  const { label, div, form, article, footer, fieldset, legend } = bau.tags;
   const RadioButton = radioButton(context);
+  const ButtonSubmit = button(context, {
+    variant: "outline",
+    color: "primary",
+  });
 
   return () => {
     const checkedState = bau.state("one");
+
     const oninput = ({ target }: { target: HTMLInputElement }) =>
       (checkedState.val = target.id);
 
-    // TODO onsubmit
+    const onsubmit = (event: any) => {
+      event.preventDefault();
+      const payload = Object.fromEntries(new FormData(event.currentTarget));
+      alert(JSON.stringify(payload));
+    };
+
     return form(
       {
         class: css`
@@ -20,28 +31,40 @@ export default (context: Context) => {
             align-items: center;
             gap: 0.5rem;
           }
+          & fieldset {
+            padding: 0.5rem;
+            display: inline-flex;
+            flex-direction: column;
+          }
         `,
+        onsubmit,
       },
-      label(
-        "One",
-        RadioButton({
-          id: "one",
-          name: "radio",
-          checked: true,
-          value: checkedState,
-          oninput,
-        })
-      ),
-      label(
-        "Two",
-        RadioButton({
-          id: "two",
-          name: "radio",
-          value: checkedState,
-          oninput,
-        })
+      article(
+        fieldset(
+          legend("One or two"),
+          label(
+            "One",
+            RadioButton({
+              id: "one",
+              name: "radio",
+              checked: true,
+              value: checkedState,
+              oninput,
+            })
+          ),
+          label(
+            "Two",
+            RadioButton({
+              id: "two",
+              name: "radio",
+              value: checkedState,
+              oninput,
+            })
+          )
+        ),
+        div("Choice: ", checkedState)
       ),
-      div("Choice: ", checkedState)
+      footer(ButtonSubmit({ type: "submit" }, "Submit"))
     );
   };
 };

bau-ui/examples/bau-storybook/src/pages/switch/switch-controlled.ts

@@ -0,0 +1,47 @@
+import { Context } from "@grucloud/bau-ui/context";
+import createSwitch from "@grucloud/bau-ui/switch";
+import button from "@grucloud/bau-ui/button";
+
+export default (context: Context) => {
+  const { bau, css } = context;
+  const { footer, form, label, article } = bau.tags;
+
+  const Switch = createSwitch(context, { variant: "outline" });
+  const Button = button(context, {
+    variant: "outline",
+    color: "primary",
+  });
+
+  const className = css`
+    & label {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+  `;
+
+  return () => {
+    const switchState = bau.state("on");
+
+    const onchange = (event: any) => {
+      switchState.val = event.target.value;
+    };
+
+    const onsubmit = (event: any) => {
+      event.preventDefault();
+      const payload = Object.fromEntries(new FormData(event.currentTarget));
+      alert(JSON.stringify(payload));
+    };
+
+    return form(
+      { onsubmit, class: className },
+      article(
+        label(
+          "My controlled switch",
+          Switch({ name: "my-shinny-switch", onchange, checked: switchState })
+        )
+      ),
+      footer(Button({ type: "submit" }, "Submit"))
+    );
+  };
+};

bau-ui/examples/bau-storybook/src/pages/switch/switch-example-default.ts → bau-ui/examples/bau-storybook/src/pages/switch/switch-uncontrolled.ts

@@ -4,14 +4,22 @@ import button from "@grucloud/bau-ui/button";
 
 export default (context: Context) => {
   const { bau, css } = context;
-  const { footer, form, label } = bau.tags;
+  const { footer, form, label, article } = bau.tags;
 
   const Switch = createSwitch(context, { variant: "outline" });
   const Button = button(context, {
     variant: "outline",
     color: "primary",
   });
 
+  const className = css`
+    & label {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+  `;
+
   return () => {
     const onsubmit = (event: any) => {
       event.preventDefault();
@@ -20,17 +28,13 @@ export default (context: Context) => {
     };
 
     return form(
-      { onsubmit },
-      label(
-        {
-          class: css`
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-          `,
-        },
-        "My shinny switch",
-        Switch({ name: "my-shinny-switch" })
+      { onsubmit, class: className },
+      article(
+        label("My shinny switch", Switch({ name: "my-shinny-switch" })),
+        label(
+          "Switch with default",
+          Switch({ name: "my-switch--default", defaultChecked: "on" })
+        )
       ),
       footer(Button({ type: "submit" }, "Submit"))
     );

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

@@ -4,9 +4,13 @@ import pageExample from "../pageExample.ts";
 
 import switchGridItem from "./switch-grid-item.ts";
 
-import switchDefault from "./switch-example-default.ts";
+import switchUncontrolled from "./switch-uncontrolled.ts";
 // @ts-ignore
-import codeExampleDefault from "./switch-example-default.ts?raw";
+import codeUncontrolled from "./switch-uncontrolled.ts?raw";
+
+import switchControlled from "./switch-controlled.ts";
+// @ts-ignore
+import codeControlled from "./switch-controlled.ts?raw";
 
 export const switchSpec = {
   title: "Switch",
@@ -18,10 +22,16 @@ export const switchSpec = {
   importStatement: `import createSwitch from "@grucloud/bau-ui/switch";`,
   examples: [
     {
-      title: "Default",
-      description: "A simple switch.",
-      code: codeExampleDefault,
-      createComponent: switchDefault,
+      title: "Uncontrolled Switch",
+      description: "A uncontrolled switch.",
+      code: codeUncontrolled,
+      createComponent: switchUncontrolled,
+    },
+    {
+      title: "Controlled Switch",
+      description: "A controlled switch.",
+      code: codeControlled,
+      createComponent: switchControlled,
     },
   ],
   gridItem: switchGridItem,

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

@@ -1,9 +1,8 @@
+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";
 
-import { Context } from "@grucloud/bau-ui/context";
-
 export default (context: Context) => {
   const { bau } = context;
   const { form, footer, article } = bau.tags;

bau-ui/radioButton/index.d.ts

@@ -3,7 +3,7 @@ declare module "@grucloud/bau-ui/radioButton" {
   type ComponentOption = import("../bau-ui").ComponentOption;
 
   export type RadioButtonProps = {
-    value: string | import("@grucloud/bau").State<string>;
+    value?: string | import("@grucloud/bau").State<string>;
   } & DefaultDesignProps;
 
   type Component = import("../bau-ui").Component<