From ea19914a6681a4236ae357c155d0526016018c98 Mon Sep 17 00:00:00 2001 From: Frederic Heem Date: Tue, 19 Dec 2023 23:34:14 -0300 Subject: [PATCH] color and variant in constructor --- .../src/components/navBarMenu.js | 10 +-- .../accordion/accordion-example-cross-icon.ts | 41 +++++------ .../accordion/accordion-example-default.ts | 11 +-- .../accordion-example-fit-content.ts | 23 ++++--- .../src/pages/alert/alert-example-custom.ts | 4 +- .../src/pages/alert/alert-example-default.ts | 8 +-- .../src/pages/button/button-disabled.ts | 7 +- .../pages/button/button-example-default.ts | 4 +- .../buttonGroup-example-default.ts | 14 ++-- .../src/pages/chip/chip-example-default.ts | 4 +- .../pages/drawer/drawer-example-default.ts | 4 +- .../src/pages/form/form-login.ts | 7 +- .../src/pages/form/form-simple-state.ts | 2 +- .../linearProgress-example-default.ts | 4 +- .../src/pages/list/list-example-default.ts | 7 +- .../loadingButton-example-default.ts | 7 +- .../src/pages/modal/modal-example-default.ts | 68 +++++++++---------- .../src/pages/modal/modal-grid-item.ts | 30 ++++---- .../multiSelect-example-default.ts | 1 + .../multiSelect/multiSelect-grid-item.ts | 1 + .../paginationNavigation-example-default.ts | 7 +- .../src/pages/paper/paper-example-default.ts | 4 +- .../pages/popover/popover-example-default.ts | 4 +- .../select-native-example-default.ts | 26 +++++-- .../pages/switch/switch-example-default.ts | 47 ++++++++----- .../pages/toggle/toggle-example-default.ts | 42 ++++++++---- .../toggleGroup-example-default.ts | 56 +++++++++------ .../toggleGroup/toggleGroup-inclusive.ts | 61 ++++++++++------- bau-ui/multiSelect/multiSelect.js | 1 + bau-ui/spinner/spinner.js | 4 +- bau-ui/switch/switch.js | 1 - .../project/projectCreateContent.ts | 2 +- 32 files changed, 295 insertions(+), 217 deletions(-) diff --git a/bau-ui/examples/bau-storybook/src/components/navBarMenu.js b/bau-ui/examples/bau-storybook/src/components/navBarMenu.js index 2ef6c872..a3a3782e 100644 --- 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,7 +35,7 @@ export default function (context) { searchTerm.val = event.target.value; }; - return div( + return form( { class: css` display: flex; @@ -43,12 +43,12 @@ export default function (context) { `, }, 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 index 340cb53c..3a7e83e0 100644 --- 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 index a364920b..99a81918 100644 --- 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 index 57cbeba0..c07c59db 100644 --- 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 index 32dd42bc..4104237d 100644 --- 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 index e5c2139c..65573b05 100644 --- 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 index 31d9ad72..417b2130 100644 --- 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 index edd2b966..6e4a86b2 100644 --- 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 index 2c64e5ae..a5465b6a 100644 --- 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 index 92f67bc4..c8e6c162 100644 --- 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 index 238869ba..56a231e0 100644 --- 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,7 +10,7 @@ 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 () => @@ -18,8 +18,6 @@ export default (context: Context) => { 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 index 9e3daf36..4cea29bb 100644 --- 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 index 31599b3f..4bf760b2 100644 --- 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 index 79fd150f..21e2d1b6 100644 --- 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 index 966ba3af..36603ddb 100644 --- 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 index 5c9ec368..a12abdb3 100644 --- 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,7 +5,10 @@ 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); @@ -13,8 +16,6 @@ export default (context: Context) => { section( LoadingButton( { - variant: "solid", - color: "primary", loading: loadingState, onclick: () => (loadingState.val = !loadingState.val), }, diff --git a/bau-ui/examples/bau-storybook/src/pages/modal/modal-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/modal/modal-example-default.ts index 9aec13b0..f539e406 100644 --- a/bau-ui/examples/bau-storybook/src/pages/modal/modal-example-default.ts +++ b/bau-ui/examples/bau-storybook/src/pages/modal/modal-example-default.ts @@ -3,12 +3,13 @@ import button from "@grucloud/bau-ui/button"; import { Context } from "@grucloud/bau-ui/context"; export default (context: Context) => { - const { bau } = context; + const { bau, window } = context; + const { document } = window; const { form, section, main, header, footer, p } = bau.tags; const color = "neutral"; - const Button = button(context); + const Button = button(context, { color }); const Modal = modal(context); const Content = () => @@ -18,36 +19,6 @@ export default (context: Context) => { .map((_, k) => p(k + 1, ". Some text here" /*faker.lorem.paragraph()*/)) ); - const modalEl = Modal( - { id: "my-dialog" }, - form( - header("Header"), - Content(), - footer( - Button( - { - variant: "outline", - color, - onclick: () => { - modalEl.close(); - }, - }, - "Cancel" - ), - Button( - { - variant: "solid", - color, - onclick: () => { - modalEl.close(); - }, - }, - "OK" - ) - ) - ) - ); - return () => section( Button( @@ -55,11 +26,40 @@ export default (context: Context) => { variant: "solid", color: "neutral", onclick: () => { - modalEl.showModal(); + const dialogEl = document.getElementById( + "my-dialog" + ) as HTMLDialogElement; + dialogEl.showModal(); }, }, "OPEN MODAL" ), - modalEl + Modal( + { id: "my-dialog" }, + form( + header("Header"), + Content(), + footer( + Button( + { + variant: "outline", + onclick: (event: any) => { + event.target.closest("dialog").close(); + }, + }, + "Cancel" + ), + Button( + { + variant: "solid", + onclick: (event: any) => { + event.target.closest("dialog").close(); + }, + }, + "OK" + ) + ) + ) + ) ); }; diff --git a/bau-ui/examples/bau-storybook/src/pages/modal/modal-grid-item.ts b/bau-ui/examples/bau-storybook/src/pages/modal/modal-grid-item.ts index 121ac1df..b07ec4ca 100644 --- a/bau-ui/examples/bau-storybook/src/pages/modal/modal-grid-item.ts +++ b/bau-ui/examples/bau-storybook/src/pages/modal/modal-grid-item.ts @@ -4,7 +4,8 @@ import button from "@grucloud/bau-ui/button"; import { Context } from "@grucloud/bau-ui/context"; export default (context: Context, options: any = {}) => { - const { bau } = context; + const { bau, window } = context; + const { document } = window; const { form, section, main, header, footer, p, h1 } = bau.tags; const Button = button(context); @@ -16,11 +17,13 @@ export default (context: Context, options: any = {}) => { .fill("") .map((_, k) => p(k + 1, ". Some text here" /*faker.lorem.paragraph()*/)) ); + const getDialogId = (props: any) => + `dialog-${props.color}-${props.variant}-${options.size}`; - const MyModal = (props: any) => { - const modalEl = Modal( + const MyModal = (props: any) => + Modal( { - id: `dialog-${props.color}-${props.variant}-${options.size}`, + id: getDialogId(props), ...props, }, form( @@ -31,9 +34,8 @@ export default (context: Context, options: any = {}) => { { variant: "outline", color: props.color, - - onclick: () => { - modalEl.close(); + onclick: (event: any) => { + event.target.closest("dialog").close(); }, }, "Cancel" @@ -42,8 +44,8 @@ export default (context: Context, options: any = {}) => { { variant: "solid", color: props.color, - onclick: () => { - modalEl.close(); + onclick: (event: any) => { + event.target.closest("dialog").close(); }, }, "OK" @@ -51,22 +53,22 @@ export default (context: Context, options: any = {}) => { ) ) ); - return modalEl; - }; return (props: any) => { - const modalEl = MyModal(props); return section( Button( { ...props, onclick: () => { - modalEl.showModal(); + const dialogEl = document.getElementById( + getDialogId(props) + ) as HTMLDialogElement; + dialogEl.showModal(); }, }, "OPEN MODAL" ), - modalEl + MyModal(props) ); }; }; diff --git a/bau-ui/examples/bau-storybook/src/pages/multiSelect/multiSelect-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/multiSelect/multiSelect-example-default.ts index 94ef8ff2..b2ac93ee 100644 --- a/bau-ui/examples/bau-storybook/src/pages/multiSelect/multiSelect-example-default.ts +++ b/bau-ui/examples/bau-storybook/src/pages/multiSelect/multiSelect-example-default.ts @@ -51,6 +51,7 @@ export default (context: Context) => { { class: css` display: flex; + align-items: center; gap: 0.2rem; `, }, diff --git a/bau-ui/examples/bau-storybook/src/pages/multiSelect/multiSelect-grid-item.ts b/bau-ui/examples/bau-storybook/src/pages/multiSelect/multiSelect-grid-item.ts index 609ce517..0ffb5d11 100644 --- a/bau-ui/examples/bau-storybook/src/pages/multiSelect/multiSelect-grid-item.ts +++ b/bau-ui/examples/bau-storybook/src/pages/multiSelect/multiSelect-grid-item.ts @@ -22,6 +22,7 @@ export default (context: Context, componentOptions?: any) => { class: css` display: flex; justify-content: space-between; + align-items: center; gap: 0.5rem; `, }, diff --git a/bau-ui/examples/bau-storybook/src/pages/paginationNavigation/paginationNavigation-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/paginationNavigation/paginationNavigation-example-default.ts index c08f9ea1..6b7f7471 100644 --- a/bau-ui/examples/bau-storybook/src/pages/paginationNavigation/paginationNavigation-example-default.ts +++ b/bau-ui/examples/bau-storybook/src/pages/paginationNavigation/paginationNavigation-example-default.ts @@ -5,7 +5,10 @@ import { Context } from "@grucloud/bau-ui/context"; export default (context: Context) => { const { bau } = context; const { section } = bau.tags; - const PaginationNavigation = paginationNavigation(context); + const PaginationNavigation = paginationNavigation(context, { + variant: "solid", + color: "primary", + }); const data = { next: { @@ -23,8 +26,6 @@ export default (context: Context) => { return () => section( PaginationNavigation({ - variant: "solid", - color: "primary", data, }) ); diff --git a/bau-ui/examples/bau-storybook/src/pages/paper/paper-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/paper/paper-example-default.ts index 81e8fbf7..9fc30eb5 100644 --- a/bau-ui/examples/bau-storybook/src/pages/paper/paper-example-default.ts +++ b/bau-ui/examples/bau-storybook/src/pages/paper/paper-example-default.ts @@ -5,7 +5,7 @@ export default (context: Context) => { const { bau } = context; const { section, div } = bau.tags; - const Paper = paper(context); + const Paper = paper(context, { size: "md" }); - return () => section(Paper({ size: "md" }, div("My content"))); + return () => section(Paper(div("My content"))); }; diff --git a/bau-ui/examples/bau-storybook/src/pages/popover/popover-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/popover/popover-example-default.ts index 9ba095f5..bc4cc05c 100644 --- a/bau-ui/examples/bau-storybook/src/pages/popover/popover-example-default.ts +++ b/bau-ui/examples/bau-storybook/src/pages/popover/popover-example-default.ts @@ -6,14 +6,12 @@ export default (context: Context) => { const { bau } = context; const { section, div, h1, p } = bau.tags; - const Button = button(context); + const Button = button(context, { variant: "outline", color: "success" }); const Popover = popover(context); const TriggerButton = () => Button( { - variant: "outline", - color: "success", onclick: () => popoverEl.open ? popoverEl.closeDialog() : popoverEl.openDialog(), }, diff --git a/bau-ui/examples/bau-storybook/src/pages/selectNative/select-native-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/selectNative/select-native-example-default.ts index 991a7064..2edf6186 100644 --- a/bau-ui/examples/bau-storybook/src/pages/selectNative/select-native-example-default.ts +++ b/bau-ui/examples/bau-storybook/src/pages/selectNative/select-native-example-default.ts @@ -1,9 +1,15 @@ -import selectNative from "@grucloud/bau-ui/selectNative"; import { Context } from "@grucloud/bau-ui/context"; +import selectNative from "@grucloud/bau-ui/selectNative"; +import button from "@grucloud/bau-ui/button"; export default (context: Context) => { const { bau } = context; - const { section, option } = bau.tags; + const { option, form, footer } = bau.tags; + + const Button = button(context, { + variant: "outline", + color: "primary", + }); const SelectNative = selectNative(context); @@ -17,10 +23,22 @@ export default (context: Context) => { { code: "AF", label: "Afghanistan", phone: "93" }, ]; + const onsubmit = (event: any) => { + event.preventDefault(); + const payload = Object.fromEntries( + new FormData(event.target.closest("form")) + ); + alert(JSON.stringify(payload)); + }; + return () => - section( + form( + { onsubmit }, SelectNative( + { name: "my-select" }, + option({ value: "" }, "--Please choose a phone code--"), phoneOptions.map(({ label, phone }) => option({ value: phone }, label)) - ) + ), + footer(Button({ type: "submit" }, "Submit")) ); }; diff --git a/bau-ui/examples/bau-storybook/src/pages/switch/switch-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/switch/switch-example-default.ts index 712f29d6..8129f931 100644 --- a/bau-ui/examples/bau-storybook/src/pages/switch/switch-example-default.ts +++ b/bau-ui/examples/bau-storybook/src/pages/switch/switch-example-default.ts @@ -1,26 +1,39 @@ -import createSwitch from "@grucloud/bau-ui/switch"; 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 { section, form, label } = bau.tags; + const { footer, form, label } = bau.tags; - const Switch = createSwitch(context); + const Switch = createSwitch(context, { variant: "outline" }); + const Button = button(context, { + variant: "outline", + color: "primary", + }); + + const onsubmit = (event: any) => { + event.preventDefault(); + const payload = Object.fromEntries( + new FormData(event.target.closest("form")) + ); + alert(JSON.stringify(payload)); + }; return () => - section( - form( - label( - { - class: css` - display: flex; - align-items: center; - gap: 0.5rem; - `, - }, - "My shinny switch", - Switch({ variant: "outline", id: "my-shinny-switch" }) - ) - ) + form( + { onsubmit }, + label( + { + class: css` + display: flex; + align-items: center; + gap: 0.5rem; + `, + }, + "My shinny switch", + Switch({ name: "my-shinny-switch" }) + ), + footer(Button({ type: "submit" }, "Submit")) ); }; diff --git a/bau-ui/examples/bau-storybook/src/pages/toggle/toggle-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/toggle/toggle-example-default.ts index dab5aef6..c13663b8 100644 --- a/bau-ui/examples/bau-storybook/src/pages/toggle/toggle-example-default.ts +++ b/bau-ui/examples/bau-storybook/src/pages/toggle/toggle-example-default.ts @@ -1,23 +1,39 @@ -import toggle from "@grucloud/bau-ui/toggle"; - import { Context } from "@grucloud/bau-ui/context"; +import toggle from "@grucloud/bau-ui/toggle"; +import button from "@grucloud/bau-ui/button"; export default (context: Context) => { const { bau } = context; - const { section } = bau.tags; - const Toggle = toggle(context); + const { form, article, footer } = bau.tags; + + const Toggle = toggle(context, { variant: "plain" }); + const Button = button(context, { + variant: "outline", + color: "primary", + }); const selectedState = bau.state(false); + const onsubmit = (event: any) => { + event.preventDefault(); + const formEl = event.target.closest("form"); + const buttonName = formEl.querySelector("button[aria-pressed=true]")?.name; + alert(buttonName); + }; + return () => - section( - Toggle( - { - variant: "plain", - selected: selectedState, - onclick: () => (selectedState.val = !selectedState.val), - }, - "Toggle Me" - ) + form( + { onsubmit }, + article( + Toggle( + { + name: "my-toogle", + selected: selectedState, + onclick: () => (selectedState.val = !selectedState.val), + }, + "Toggle Me" + ) + ), + footer(Button({ type: "submit" }, "Submit")) ); }; diff --git a/bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-example-default.ts index 22d92098..2fb8387e 100644 --- a/bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-example-default.ts +++ b/bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-example-default.ts @@ -1,11 +1,12 @@ 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 { section } = bau.tags; + const { form, footer, article } = bau.tags; const selectedState = bau.state([""]); @@ -15,34 +16,47 @@ export default (context: Context) => { { value: "three", label: "THREE" }, ]; - const Toggle = toggle(context); - const ToggleGroup = toggleGroup(context); - 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", + }); + const onChange = ({ values }: any) => { selectedState.val = values; }; + const onsubmit = (event: any) => { + event.preventDefault(); + const formEl = event.target.closest("form"); + const buttonName = formEl.querySelector("button[aria-pressed=true]")?.name; + alert(buttonName); + }; + return () => - section( - ToggleGroup( - { color, variant, exclusive: true, onChange }, - groups.map( - ({ label, value }) => - () => - Toggle( - { - color, - variant, - value, - selected: selectedState.val.includes(value), - "area-label": label, - }, - label - ) + form( + { onsubmit }, + article( + ToggleGroup( + { exclusive: true, onChange }, + groups.map( + ({ label, value }) => + () => + Toggle( + { + value, + name: label, + selected: selectedState.val.includes(value), + }, + label + ) + ) ) - ) + ), + footer(Button({ type: "submit" }, "Submit")) ); }; diff --git a/bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-inclusive.ts b/bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-inclusive.ts index 88ac7d79..b8b289e2 100644 --- a/bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-inclusive.ts +++ b/bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-inclusive.ts @@ -1,11 +1,11 @@ +import { Context } from "@grucloud/bau-ui/context"; import toggleGroup from "@grucloud/bau-ui/toggleGroup"; import toggle from "@grucloud/bau-ui/toggle"; - -import { Context } from "@grucloud/bau-ui/context"; +import button from "@grucloud/bau-ui/button"; export default (context: Context) => { const { bau } = context; - const { section } = bau.tags; + const { form, article, footer } = bau.tags; const selectedState = bau.state([""]); @@ -15,34 +15,49 @@ export default (context: Context) => { { value: "three", label: "THREE" }, ]; - const Toggle = toggle(context); - const ToggleGroup = toggleGroup(context); - const color = "primary"; const variant = "solid"; + const Toggle = toggle(context, { variant, color }); + const ToggleGroup = toggleGroup(context, { variant, color }); + const Button = button(context, { + variant: "outline", + color: "primary", + }); + const onChange = ({ values }: any) => { selectedState.val = values; }; + const onsubmit = (event: any) => { + event.preventDefault(); + const formEl = event.target.closest("form"); + const buttonNames = [ + ...formEl.querySelectorAll("button[aria-pressed=true]"), + ].map(({ name }: any) => name); + alert(JSON.stringify(buttonNames)); + }; + return () => - section( - ToggleGroup( - { color, variant, onChange }, - groups.map( - ({ label, value }) => - () => - Toggle( - { - color, - variant, - value, - selected: selectedState.val.includes(value), - "area-label": label, - }, - label - ) + form( + { onsubmit }, + article( + ToggleGroup( + { onChange }, + groups.map( + ({ label, value }) => + () => + Toggle( + { + value, + name: label, + selected: selectedState.val.includes(value), + }, + label + ) + ) ) - ) + ), + footer(Button({ type: "submit" }, "Submit")) ); }; diff --git a/bau-ui/multiSelect/multiSelect.js b/bau-ui/multiSelect/multiSelect.js index df40d0ed..88f0001f 100644 --- a/bau-ui/multiSelect/multiSelect.js +++ b/bau-ui/multiSelect/multiSelect.js @@ -45,6 +45,7 @@ export default function (context, componentOptions = {}) { & label { display: flex; gap: 0.5rem; + align-items: center; flex-grow: 1; } ${colorsToCss()} diff --git a/bau-ui/spinner/spinner.js b/bau-ui/spinner/spinner.js index 1f031244..44b6b1d7 100644 --- a/bau-ui/spinner/spinner.js +++ b/bau-ui/spinner/spinner.js @@ -26,9 +26,9 @@ const colorsToCss = () => } } &.solid.${color} { - background-color:transparent; + background-color: transparent; & .path { - stroke: var(--color-${color}); + stroke: var(--font-color-inverse); } } ` diff --git a/bau-ui/switch/switch.js b/bau-ui/switch/switch.js index 18d3c5a7..0246905b 100644 --- a/bau-ui/switch/switch.js +++ b/bau-ui/switch/switch.js @@ -131,7 +131,6 @@ export default function (context, options = {}) { props.class ), type: "checkbox", - required: "required", }, ...children ); diff --git a/examples/gccd/src/components/project/projectCreateContent.ts b/examples/gccd/src/components/project/projectCreateContent.ts index c2fe08a5..552564dc 100644 --- a/examples/gccd/src/components/project/projectCreateContent.ts +++ b/examples/gccd/src/components/project/projectCreateContent.ts @@ -16,7 +16,7 @@ export default function (context: Context) { placeholder: "Project Id", name: "project_id", minLength: 1, - maxLength: 24, + maxLength: 128, required: true, }) )