From 1254a564787f750c0c5cb13a0d50aaa9a29f6d66 Mon Sep 17 00:00:00 2001 From: Frederic Heem Date: Sun, 3 Dec 2023 20:06:56 -0300 Subject: [PATCH] better tabs --- .../src/pages/tabs/tabs-definitions.ts | 4 +-- .../pages/tabs/tabs-example-bottom-header.ts | 16 +++++------ .../src/pages/tabs/tabs-example-centered.ts | 20 ++++++------- .../src/pages/tabs/tabs-example-default.ts | 4 +-- .../src/pages/tabs/tabs-example-extended.ts | 4 +-- .../src/pages/tabs/tabs-example-full-width.ts | 24 ++++++++-------- .../tabs/tabs-example-vertical-header.ts | 28 +++++++++---------- .../src/pages/tabs/tabs.examples.ts | 4 +-- bau-ui/tabs/index.d.ts | 2 +- bau-ui/tabs/tabs.js | 25 +++++++++-------- examples/gccd/Dockerfile | 2 +- examples/gccd/src/config.ts | 4 +-- 12 files changed, 67 insertions(+), 70 deletions(-) diff --git a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-definitions.ts b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-definitions.ts index fe48ae6b..0f29b47c 100644 --- a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-definitions.ts +++ b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-definitions.ts @@ -8,12 +8,12 @@ export default (context: Context): Tabs => { return [ { name: "Tab1", - Header: () => div("TAB"), + Header: () => "TAB", Content: () => div(p("My Tab 1 Content")), }, { name: "Tab2", - Header: () => div("TAB 2"), + Header: () => "TAB 2", Content: () => div(p("My tab 2 Content")), }, ]; diff --git a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-bottom-header.ts b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-bottom-header.ts index d09d345a..a5bcf56d 100644 --- a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-bottom-header.ts +++ b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-bottom-header.ts @@ -5,14 +5,12 @@ import createTabDefs from "./tabs-definitions"; export default (context: Context) => { const { css } = context; - const Tabs = tabs(context, { tabDefs: createTabDefs(context) }); + const Tabs = tabs(context, { + tabDefs: createTabDefs(context), + class: css` + flex-direction: column-reverse; + `, + }); - return () => - Tabs({ - variant: "outline", - color: "neutral", - class: css` - flex-direction: column-reverse; - `, - }); + return () => Tabs({}); }; diff --git a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-centered.ts b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-centered.ts index a39e9ef6..1a5d6940 100644 --- a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-centered.ts +++ b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-centered.ts @@ -8,16 +8,14 @@ export default (context: Context) => { const tabDefs = createTabDefs(context); - const Tabs = tabs(context, { tabDefs }); + const Tabs = tabs(context, { + tabDefs, + class: css` + & ul { + justify-content: center; + } + `, + }); - return () => - Tabs({ - variant: "outline", - color: "neutral", - class: css` - & ul { - justify-content: center; - } - `, - }); + return () => Tabs({}); }; diff --git a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-default.ts index 7caf966f..010233c7 100644 --- a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-default.ts +++ b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-default.ts @@ -20,9 +20,7 @@ export default (context: Context) => { const Tabs = tabs(context, { tabDefs, - variant: "outline", - color: "neutral", }); - return () => Tabs({ tabsName: "my-tab" }); + return () => Tabs({}); }; diff --git a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-extended.ts b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-extended.ts index e792f4bb..86f98369 100644 --- a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-extended.ts +++ b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-extended.ts @@ -28,7 +28,7 @@ export default (context: Context) => { }, ]; - const Tabs = tabs(context, { tabDefs }); + const Tabs = tabs(context, { tabDefs, variant: "plain", color: "neutral" }); - return () => Tabs({ variant: "outline", color: "success" }); + return () => Tabs({ tabsKey: "my-tab" }); }; diff --git a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-full-width.ts b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-full-width.ts index 996fb455..e0eb2b3c 100644 --- a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-full-width.ts +++ b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-full-width.ts @@ -8,17 +8,17 @@ export default (context: Context) => { const tabDefs = createTabDefs(context); - const Tabs = tabs(context, { tabDefs }); - - return () => - Tabs({ - class: css` - & ul { - justify-content: center; - & li { - flex-grow: 1; - } + const Tabs = tabs(context, { + tabDefs, + class: css` + & ul { + justify-content: center; + & li { + flex-grow: 1; } - `, - }); + } + `, + }); + + return () => Tabs({}); }; diff --git a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-vertical-header.ts b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-vertical-header.ts index 9d4f1f89..368d8cab 100644 --- a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-vertical-header.ts +++ b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs-example-vertical-header.ts @@ -8,19 +8,19 @@ export default (context: Context) => { const tabDefs = createTabDefs(context); - const Tabs = tabs(context, { tabDefs }); + const Tabs = tabs(context, { + tabDefs, + class: css` + flex-direction: row; + & ul { + border-right: 2px solid var(--color-primary); + border-bottom: none; + margin-right: 1rem; + flex-direction: column; + align-items: flex-start; + } + `, + }); - return () => - Tabs({ - class: css` - flex-direction: row; - & ul { - border-right: 2px solid var(--color-primary); - border-bottom: none; - margin-right: 1rem; - flex-direction: column; - align-items: flex-start; - } - `, - }); + return () => Tabs({}); }; diff --git a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs.examples.ts b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs.examples.ts index ed4b27bf..1a6dec7d 100644 --- a/bau-ui/examples/bau-storybook/src/pages/tabs/tabs.examples.ts +++ b/bau-ui/examples/bau-storybook/src/pages/tabs/tabs.examples.ts @@ -2,7 +2,7 @@ import { Context } from "@grucloud/bau-ui/context"; import pageExample from "../pageExample.ts"; -import tabsGridItem from "./tabs-grid-item.ts"; +//import tabsGridItem from "./tabs-grid-item.ts"; import tabsDefault from "./tabs-example-default.ts"; // @ts-ignore @@ -54,7 +54,7 @@ export const tabsSpec = { createComponent: tabsCentered, }, ], - gridItem: tabsGridItem, + // gridItem: tabsGridItem, }; export default (context: Context) => { diff --git a/bau-ui/tabs/index.d.ts b/bau-ui/tabs/index.d.ts index f98cf15f..d5d74b1b 100644 --- a/bau-ui/tabs/index.d.ts +++ b/bau-ui/tabs/index.d.ts @@ -23,7 +23,7 @@ declare module "@grucloud/bau-ui/tabs" { type Option = { tabDefs: Tab[]; - tabsName?: string; + tabsKey?: string; } & ComponentOption; export default function (context: any, option: Option): Component; diff --git a/bau-ui/tabs/tabs.js b/bau-ui/tabs/tabs.js index 205488df..71a9e3d9 100644 --- a/bau-ui/tabs/tabs.js +++ b/bau-ui/tabs/tabs.js @@ -27,12 +27,19 @@ export default function (context, options = {}) { align-items: flex-start; padding: 0; margin: 0; + border-bottom: 1px solid var(--color-emphasis-100); list-style: none; + & li:not(:last-child) { + border-right: 1px solid var(--color-emphasis-100); + } & li { + display: flex; + flex-direction: column; + & > a { + padding: 0.6rem 1rem 0.6rem 1rem; color: inherit; text-decoration: none; - padding: 0.5rem 1rem 0 1rem; } text-align: center; color: inherit; @@ -43,9 +50,6 @@ export default function (context, options = {}) { &:hover { color: var(--color-primary-light); background-color: var(--color-emphasis-200); - &::after { - transform: translateY(0%); - } } &::after { transition: var(--transition-fast) ease-in-out; @@ -53,7 +57,6 @@ export default function (context, options = {}) { background: var(--color-primary-light); opacity: 1; content: ""; - margin-top: 0.3rem; height: 2px; width: 100%; display: block; @@ -82,9 +85,9 @@ export default function (context, options = {}) { let [ { size = options.size ?? "md", - variant = options.variant ?? "outline", + variant = options.variant ?? "plain", color = options.color ?? "neutral", - tabsName = "tabs", + tabsKey = "tabs", ...props }, ...children @@ -97,12 +100,12 @@ export default function (context, options = {}) { const hashchange = () => { //console.log("tabs hashchange"); const search = new URLSearchParams(window.location.search); - const tabName = search.get(tabsName) ?? tabDefs[0].name; + const tabName = search.get(tabsKey) ?? tabDefs[0].name; const nextTab = tabByName(tabName); tabCurrentState.val.exit?.call(); tabCurrentState.val = nextTab; - nextTab.enter?.call(); + nextTab?.enter?.call(); }; hashchange(); @@ -120,8 +123,8 @@ export default function (context, options = {}) { const buildHref = (nextTab) => { const search = new URLSearchParams(window.location.search); - search.delete(tabsName); - search.append(tabsName, nextTab); + search.delete(tabsKey); + search.append(tabsKey, nextTab); return `?${search.toString()}`; }; diff --git a/examples/gccd/Dockerfile b/examples/gccd/Dockerfile index 4168c87a..31aa3ef7 100644 --- a/examples/gccd/Dockerfile +++ b/examples/gccd/Dockerfile @@ -5,7 +5,7 @@ ENV BUILD_VERSION $BUILD_VERSION ENV PUPPETEER_SKIP_DOWNLOAD true RUN apk update && apk upgrade && \ - apk add --no-cache bash git openssh + apk add --no-cache bash openssh WORKDIR /app diff --git a/examples/gccd/src/config.ts b/examples/gccd/src/config.ts index f313ca4d..3d49604b 100644 --- a/examples/gccd/src/config.ts +++ b/examples/gccd/src/config.ts @@ -8,17 +8,17 @@ const config = { apiUrl: "/api/v1/", socialAuth: ["github", "gitlab", "google", "facebook"], // socialAuth: ["github", "facebook", "google", "gitlab"], - engine: "docker", wsUrl: (window: Window) => `ws://${window.location.hostname}:9000/ws`, }, development: { env: "development", disableUsernamePasswordAuth: true, + engine: "docker", }, production: { env: "production", disableUsernamePasswordAuth: true, - engine: "ecs", + engine: "lambda", wsUrl: (window: Window) => `wss://${window.location.host}/ws`, }, };