Merge pull request #98 from grucloud/tabs

better tabs
grucloud · Dec 3, 2023 · 3a1cf57 · 3a1cf57
2 parents 8e61f7e + 1254a56
commit 3a1cf57
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,17 +50,13 @@ 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;
           transform: translateY(100%);
           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
@@ -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
@@ -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`,
   },
 };