color and variant in constructor

grucloud · Dec 20, 2023 · ea19914 · ea19914
1 parent 47b3c15
commit ea19914
Show file tree

Hide file tree

Showing 32 changed files with 295 additions and 217 deletions.
diff --git a/bau-ui/examples/bau-storybook/src/components/navBarMenu.js b/bau-ui/examples/bau-storybook/src/components/navBarMenu.js
@@ -4,7 +4,7 @@ import inputSearch from "@grucloud/bau-ui/inputSearch";
 
 export default function (context) {
   const { tr, bau, css, config, states, window } = context;
-  const { div, ul, li, nav, a, span } = bau.tags;
+  const { div, ul, li, nav, a, span, form } = bau.tags;
 
   const InputSearch = inputSearch(context, {
     variant: "plain",
@@ -35,20 +35,20 @@ export default function (context) {
       searchTerm.val = event.target.value;
     };
 
-    return div(
+    return form(
       {
         class: css`
           display: flex;
           flex-direction: column;
         `,
       },
       InputSearch({
-        autocomplete: false,
-        name: "search",
+        autocomplete: "off",
+        name: "component-search",
         autofocus: true,
         value: searchTerm,
         placeholder: `Search ${result.val.length} components`,
-        size: 22,
+        size: 32,
         oninput,
       }),
       () =>

diff --git a/bau-ui/examples/bau-storybook/src/pages/accordion/accordion-example-cross-icon.ts b/bau-ui/examples/bau-storybook/src/pages/accordion/accordion-example-cross-icon.ts
@@ -7,30 +7,31 @@ export default (context: Context) => {
   const { css } = context;
 
   const accordionDefs = createAccordionDefs(context);
-  const Accordion = accordion(context);
-
-  return () =>
-    Accordion({
-      color: "success",
-      variant: "outline",
-      data: accordionDefs,
-      class: css`
-        &.accordion {
-          & ul {
-            & li {
-              & h3 {
-                &::after {
-                  content: "\u002B";
-                }
+  const Accordion = accordion(context, {
+    color: "success",
+    variant: "outline",
+    class: css`
+      &.accordion {
+        & ul {
+          & li {
+            & h3 {
+              &::after {
+                content: "\u002B";
               }
-              & h3.active {
-                &::after {
-                  transform: rotate(45deg);
-                }
+            }
+            & h3.active {
+              &::after {
+                transform: rotate(45deg);
               }
             }
           }
         }
-      `,
+      }
+    `,
+  });
+
+  return () =>
+    Accordion({
+      data: accordionDefs,
     });
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/accordion/accordion-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/accordion/accordion-example-default.ts
@@ -17,10 +17,11 @@ export default (context: Context) => {
       Content: () => div(p("Item 2 Content")),
     },
   ];
-  const Accordion = accordion(context);
 
-  return () =>
-    section(
-      Accordion({ data: accordionDefs, color: "neutral", variant: "outline" })
-    );
+  const Accordion = accordion(context, {
+    color: "neutral",
+    variant: "outline",
+  });
+
+  return () => section(Accordion({ data: accordionDefs }));
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/accordion/accordion-example-fit-content.ts b/bau-ui/examples/bau-storybook/src/pages/accordion/accordion-example-fit-content.ts
@@ -7,20 +7,21 @@ export default (context: Context) => {
 
   const accordionDefs = createAccordionDefs(context);
 
-  const Accordion = accordion(context);
+  const Accordion = accordion(context, {
+    color: "warning",
+    class: css`
+      &.accordion {
+        & ul {
+          & li {
+            width: fit-content;
+          }
+        }
+      }
+    `,
+  });
 
   return () =>
     Accordion({
-      color: "warning",
       data: accordionDefs,
-      class: css`
-        &.accordion {
-          & ul {
-            & li {
-              width: fit-content;
-            }
-          }
-        }
-      `,
     });
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/alert/alert-example-custom.ts b/bau-ui/examples/bau-storybook/src/pages/alert/alert-example-custom.ts
@@ -5,6 +5,7 @@ export default (context: Context) => {
   const { css } = context;
 
   const Alert = alert(context, {
+    color: "warning",
     class: css`
       &.alert {
         border: 3px dotted !important;
@@ -13,6 +14,5 @@ export default (context: Context) => {
     `,
   });
 
-  return () =>
-    Alert({ color: "warning" }, "Your coffee supply is getting low.");
+  return () => Alert("Your coffee supply is getting low.");
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/alert/alert-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/alert/alert-example-default.ts
@@ -5,12 +5,12 @@ export default (context: Context) => {
   const { bau } = context;
   const { h4, p } = bau.tags;
 
-  const Alert = alert(context);
+  const Alert = alert(context, {
+    color: "danger",
+  });
+
   return () =>
     Alert(
-      {
-        color: "danger",
-      },
       h4("Something went wrong"),
       p("Error code ", 404),
       p("Status ", "Not Found")

diff --git a/bau-ui/examples/bau-storybook/src/pages/button/button-disabled.ts b/bau-ui/examples/bau-storybook/src/pages/button/button-disabled.ts
@@ -5,16 +5,13 @@ export default (context: Context) => {
   const { bau } = context;
   const { section } = bau.tags;
 
-  const Button = button(context);
+  const Button = button(context, { color: "primary", variant: "outline" });
   const onclick = () => {
     alert("Click");
   };
   return () =>
     section(
       //
-      Button(
-        { disabled: true, color: "primary", variant: "outline", onclick },
-        "Click me"
-      )
+      Button({ disabled: true, onclick }, "Click me")
     );
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/button/button-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/button/button-example-default.ts
@@ -5,13 +5,13 @@ export default (context: Context) => {
   const { bau } = context;
   const { section } = bau.tags;
 
-  const Button = button(context);
+  const Button = button(context, { color: "primary", variant: "outline" });
   const onclick = () => {
     alert("Click");
   };
   return () =>
     section(
       //
-      Button({ color: "primary", variant: "outline", onclick }, "Click me")
+      Button({ onclick }, "Click me")
     );
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/buttonGroup/buttonGroup-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/buttonGroup/buttonGroup-example-default.ts
@@ -9,16 +9,20 @@ export default (context: Context) => {
 
   const groups = ["ONE", "TWO", "THREE"];
 
-  const Button = button(context);
-  const ButtonGroup = buttonGroup(context);
-
   const color = "primary";
   const variant = "solid";
+
+  const Button = button(context, { color, variant });
+  const ButtonGroup = buttonGroup(context, { color, variant });
+
+  const onClick = (group: string) => (_event: any) => {
+    alert(group);
+  };
+
   return () =>
     section(
       ButtonGroup(
-        { color, variant },
-        groups.map((group) => Button({ color, variant }, group))
+        groups.map((group) => Button({ onclick: onClick(group) }, group))
       )
     );
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/chip/chip-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/chip/chip-example-default.ts
@@ -5,11 +5,11 @@ export default (context: Context) => {
   const { bau } = context;
   const { section } = bau.tags;
 
-  const Chip = chip(context);
+  const Chip = chip(context, { variant: "outline", color: "primary" });
 
   return () =>
     section(
       //
-      Chip({ variant: "outline", color: "primary" }, "My Chip")
+      Chip("My Chip")
     );
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/drawer/drawer-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/drawer/drawer-example-default.ts
@@ -10,16 +10,14 @@ export default (context: Context) => {
   const openState = bau.state(false);
 
   const Drawer = drawer(context);
-  const Button = button(context);
+  const Button = button(context, { color: "neutral", variant: "outline" });
   const NavBarMenu = navBarMenu(context);
 
   return () =>
     section(
       p("Click on the button to open and close the drawer."),
       Button(
         {
-          color: "neutral",
-          variant: "outline",
           onclick: () => {
             openState.val = !openState.val;
           },

diff --git a/bau-ui/examples/bau-storybook/src/pages/form/form-login.ts b/bau-ui/examples/bau-storybook/src/pages/form/form-login.ts
@@ -9,7 +9,10 @@ export default (context: Context) => {
   const { bau, css, config } = context;
   const { section, h1, header, label, img, footer } = bau.tags;
 
-  const LoadingButton = loadingButton(context);
+  const LoadingButton = loadingButton(context, {
+    variant: "solid",
+    color: "primary",
+  });
   const Alert = alert(context, { variant: "outline", color: "danger" });
   const Input = input(context);
   const Form = form(context, {
@@ -101,8 +104,6 @@ export default (context: Context) => {
         LoadingButton(
           {
             type: "submit",
-            variant: "solid",
-            color: "primary",
             loading: loadingState,
           },
           "Login"

diff --git a/bau-ui/examples/bau-storybook/src/pages/form/form-simple-state.ts b/bau-ui/examples/bau-storybook/src/pages/form/form-simple-state.ts
@@ -11,7 +11,7 @@ export default (context: Context) => {
   const disabledState = bau.derive(() => inputState.val !== "Delete");
 
   const Form = form(context);
-  const Button = button(context, { variant: "solid", color: "primary" });
+  const Button = button(context, { variant: "solid", color: "danger" });
   const Input = input(context);
 
   return function SimpleForm({ onSubmitted = () => {} }: any) {

diff --git a/bau-ui/examples/bau-storybook/src/pages/linearProgress/linearProgress-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/linearProgress/linearProgress-example-default.ts
@@ -6,7 +6,7 @@ import { Context } from "@grucloud/bau-ui/context";
 export default (context: Context) => {
   const { bau } = context;
   const { section, hr } = bau.tags;
-  const Button = button(context);
+  const Button = button(context, { variant: "solid", color: "primary" });
   const LinearProgress = linearProgress(context);
 
   const runningState = bau.state(false);
@@ -15,8 +15,6 @@ export default (context: Context) => {
     section(
       Button(
         {
-          variant: "solid",
-          color: "primary",
           onclick: () => (runningState.val = !runningState.val),
         },
         () => (runningState.val ? "Stop" : "Start")

diff --git a/bau-ui/examples/bau-storybook/src/pages/list/list-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/list/list-example-default.ts
@@ -10,7 +10,7 @@ export default (context: Context) => {
   const { bau, css } = context;
   const { section, span, li } = bau.tags;
 
-  const List = list(context);
+  const List = list(context, { variant: "outline", color: "primary" });
 
   const ListItem = ({ code, label }: any) =>
     li(
@@ -24,8 +24,5 @@ export default (context: Context) => {
       span(label)
     );
 
-  return () =>
-    section(
-      List({ variant: "outline", color: "primary" }, phoneCodes.map(ListItem))
-    );
+  return () => section(List(phoneCodes.map(ListItem)));
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/loadingButton/loadingButton-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/loadingButton/loadingButton-example-default.ts
@@ -5,16 +5,17 @@ import { Context } from "@grucloud/bau-ui/context";
 export default (context: Context) => {
   const { bau } = context;
   const { section } = bau.tags;
-  const LoadingButton = loadingButton(context);
+  const LoadingButton = loadingButton(context, {
+    variant: "solid",
+    color: "primary",
+  });
 
   const loadingState = bau.state(true);
 
   return () =>
     section(
       LoadingButton(
         {
-          variant: "solid",
-          color: "primary",
           loading: loadingState,
           onclick: () => (loadingState.val = !loadingState.val),
         },