[UI-260] Add <l2-tab-bar /> to display a list of links as tabs.

.changeset/smart-cycles-return.md

@@ -0,0 +1,6 @@
+---
+'@kurrent-ui/layout': minor
+---
+
+New Component: `<l2-tab-bar />`
+Displays a set of links as tabs, matching the style of `<c2-tabs />`

packages/layout/src/components.d.ts

@@ -13,6 +13,7 @@ import { PanelMode } from "./components/panel";
 import { LoadingBarStatus } from "./components/loading-bar/types";
 import { NavNode, NavTree } from "./components/nav/types";
 import { ClosedMode, PanelDetailsListener, PanelMode as PanelMode1, TargetableArea, TargetableEdge } from "./components/panel/types";
+import { RouteTab } from "./components/tab-bar/types";
 export { Crumb } from "./components/breadcrumb/types";
 export { DisplayErrorVariant } from "./components/display-error/types";
 export { EmptyStateLayout } from "./components/empty-state/types";
@@ -21,6 +22,7 @@ export { PanelMode } from "./components/panel";
 export { LoadingBarStatus } from "./components/loading-bar/types";
 export { NavNode, NavTree } from "./components/nav/types";
 export { ClosedMode, PanelDetailsListener, PanelMode as PanelMode1, TargetableArea, TargetableEdge } from "./components/panel/types";
+export { RouteTab } from "./components/tab-bar/types";
 export namespace Components {
     /**
      * A list of breadcrumbs to the current page
@@ -397,6 +399,23 @@ export namespace Components {
          */
         "start"?: TargetableEdge;
     }
+    /**
+     * A navigating tab bar.
+     */
+    interface L2TabBar {
+        /**
+          * Icon to be rendered between each tab.
+         */
+        "interTabIcon"?: IconDescription;
+        /**
+          * thu size of the icon to be rendered between each tab.
+         */
+        "interTabIconSize": number;
+        /**
+          * A list of tabs.
+         */
+        "tabs": RouteTab[];
+    }
     /**
      * A theme picker dropdown for the header
      */
@@ -418,6 +437,10 @@ export interface L2PanelCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLL2PanelElement;
 }
+export interface L2TabBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLL2TabBarElement;
+}
 declare global {
     /**
      * A list of breadcrumbs to the current page
@@ -631,6 +654,26 @@ declare global {
         prototype: HTMLL2SizedPanelElement;
         new (): HTMLL2SizedPanelElement;
     };
+    interface HTMLL2TabBarElementEventMap {
+        "tabChange": string;
+    }
+    /**
+     * A navigating tab bar.
+     */
+    interface HTMLL2TabBarElement extends Components.L2TabBar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLL2TabBarElementEventMap>(type: K, listener: (this: HTMLL2TabBarElement, ev: L2TabBarCustomEvent<HTMLL2TabBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLL2TabBarElementEventMap>(type: K, listener: (this: HTMLL2TabBarElement, ev: L2TabBarCustomEvent<HTMLL2TabBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLL2TabBarElement: {
+        prototype: HTMLL2TabBarElement;
+        new (): HTMLL2TabBarElement;
+    };
     /**
      * A theme picker dropdown for the header
      */
@@ -678,6 +721,7 @@ declare global {
         "l2-sidebar": HTMLL2SidebarElement;
         "l2-sidebar-dropdown": HTMLL2SidebarDropdownElement;
         "l2-sized-panel": HTMLL2SizedPanelElement;
+        "l2-tab-bar": HTMLL2TabBarElement;
         "l2-theme-dropdown": HTMLL2ThemeDropdownElement;
         "l2-theme-picker": HTMLL2ThemePickerElement;
         "l2-toolbar": HTMLL2ToolbarElement;
@@ -1053,6 +1097,27 @@ declare namespace LocalJSX {
          */
         "start"?: TargetableEdge;
     }
+    /**
+     * A navigating tab bar.
+     */
+    interface L2TabBar {
+        /**
+          * Icon to be rendered between each tab.
+         */
+        "interTabIcon"?: IconDescription;
+        /**
+          * thu size of the icon to be rendered between each tab.
+         */
+        "interTabIconSize"?: number;
+        /**
+          * Triggered when the active tab is changed. `detail` is the newly active tab.
+         */
+        "onTabChange"?: (event: L2TabBarCustomEvent<string>) => void;
+        /**
+          * A list of tabs.
+         */
+        "tabs": RouteTab[];
+    }
     /**
      * A theme picker dropdown for the header
      */
@@ -1088,6 +1153,7 @@ declare namespace LocalJSX {
         "l2-sidebar": L2Sidebar;
         "l2-sidebar-dropdown": L2SidebarDropdown;
         "l2-sized-panel": L2SizedPanel;
+        "l2-tab-bar": L2TabBar;
         "l2-theme-dropdown": L2ThemeDropdown;
         "l2-theme-picker": L2ThemePicker;
         "l2-toolbar": L2Toolbar;
@@ -1177,6 +1243,10 @@ declare module "@stencil/core" {
              * Automatically sets the relevant layout var based on it's size.
              */
             "l2-sized-panel": LocalJSX.L2SizedPanel & JSXBase.HTMLAttributes<HTMLL2SizedPanelElement>;
+            /**
+             * A navigating tab bar.
+             */
+            "l2-tab-bar": LocalJSX.L2TabBar & JSXBase.HTMLAttributes<HTMLL2TabBarElement>;
             /**
              * A theme picker dropdown for the header
              */

packages/layout/src/components/tab-bar/demos/tab-bar.demo.tsx

@@ -0,0 +1,74 @@
+import { Component, Host, h } from '@stencil/core';
+import type { RouteTab } from '../types';
+import { Link, Route, Switch, router } from '@kurrent-ui/router';
+
+/** Tab bar  */
+@Component({
+    tag: 'tab-bar-demo',
+    styleUrl: './tabs-demo.css',
+    shadow: true,
+})
+export class Demo {
+    componentWillLoad() {
+        router.init({
+            root: '/tab-bar-demo/',
+        });
+    }
+
+    render() {
+        return (
+            <Host>
+                <l2-tab-bar tabs={this.tabs} />
+                <Switch>
+                    <Route
+                        url={'/tab-1'}
+                        routeRender={() => <p>{'I am in tab 1'}</p>}
+                    />
+                    <Route
+                        url={'/tab-2'}
+                        routeRender={() => <p>{'Welcome to tab 2!'}</p>}
+                    />
+                    <Route
+                        url={'/tab-three'}
+                        routeRender={() => (
+                            <p>{'Hello 👋. You have reached tab 3.'}</p>
+                        )}
+                    />
+                    <Route
+                        url={'/tab-4'}
+                        routeRender={() => (
+                            <div>
+                                <p>{'Tab 4 now'}</p>
+                                <br />
+                                <Link url={'/tab-1'}>{'go to one'}</Link>
+                                <br />
+                                <Link url={'/tab-20'}>{'go nowhere'}</Link>
+                            </div>
+                        )}
+                    />
+                </Switch>
+            </Host>
+        );
+    }
+
+    private tabs: RouteTab[] = [
+        {
+            id: 'tab-1',
+            title: 'One',
+        },
+        {
+            id: 'tab-2',
+            title: 'Two',
+            badge: () => true,
+        },
+        {
+            id: 'tab-3',
+            title: 'Three',
+            url: '/tab-three',
+        },
+        {
+            id: 'tab-4',
+            title: 'Four',
+        },
+    ];
+}

packages/layout/src/components/tab-bar/demos/tabs-demo.css

@@ -0,0 +1,4 @@
+:host {
+    display: block;
+    grid-area: body;
+}

packages/layout/src/components/tab-bar/readme.md

@@ -0,0 +1,132 @@
+# c2-tab-bar
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+A navigating tab bar.
+
+## Usage
+
+### Example
+
+```tsx
+import type { RouteTab } from '@kurrent-ui/layout';
+import { Link, Route, Switch } from '@kurrent-ui/router';
+
+const tabs: RouteTab[] = [
+    {
+        id: 'tab-1',
+        title: 'One',
+    },
+    {
+        id: 'tab-2',
+        title: 'Two',
+        badge: () => true,
+    },
+    {
+        id: 'tab-3',
+        title: 'Three',
+        url: '/tab-three',
+    },
+    {
+        id: 'tab-4',
+        title: 'Four',
+    },
+];
+
+export default () => (
+    <>
+        <l2-tab-bar tabs={tabs} />
+        <Switch>
+            <Route
+                url={'/tab-1'}
+                routeRender={() => <p>{'I am in tab 1'}</p>}
+            />
+            <Route
+                url={'/tab-2'}
+                routeRender={() => <p>{'Welcome to tab 2!'}</p>}
+            />
+            <Route
+                url={'/tab-three'}
+                routeRender={() => <p>{'Hello 👋. You have reached tab 3.'}</p>}
+            />
+            <Route
+                url={'/tab-4'}
+                routeRender={() => (
+                    <div>
+                        <p>{'Tab 4 now'}</p>
+                        <br />
+                        <Link url={'/tab-1'}>{'go to one'}</Link>
+                        <br />
+                        <Link url={'/tab-20'}>{'go nowhere'}</Link>
+                    </div>
+                )}
+            />
+        </Switch>
+    </>
+);
+```
+
+
+
+## Properties
+
+| Property            | Attribute             | Description                                           | Type                                                                 | Default     |
+| ------------------- | --------------------- | ----------------------------------------------------- | -------------------------------------------------------------------- | ----------- |
+| `interTabIcon`      | `inter-tab-icon`      | Icon to be rendered between each tab.                 | `[namespace: string \| symbol, name: string] \| string \| undefined` | `undefined` |
+| `interTabIconSize`  | `inter-tab-icon-size` | thu size of the icon to be rendered between each tab. | `number`                                                             | `20`        |
+| `tabs` _(required)_ | --                    | A list of tabs.                                       | `RouteTab[]`                                                         | `undefined` |
+
+
+## Events
+
+| Event       | Description                                                                 | Type                  |
+| ----------- | --------------------------------------------------------------------------- | --------------------- |
+| `tabChange` | Triggered when the active tab is changed. `detail` is the newly active tab. | `CustomEvent<string>` |
+
+
+## Shadow Parts
+
+| Part               | Description                       |
+| ------------------ | --------------------------------- |
+| `"[tabName]"`      | The tab.                          |
+| `"active"`         | The active tab.                   |
+| `"indicator"`      | The sliding indicatior bar.       |
+| `"inter-tab-icon"` | Icon between tabs (if specified). |
+| `"tab"`            | Tabs.                             |
+
+
+## CSS Custom Properties
+
+| Name                      | Description                                                          |
+| ------------------------- | -------------------------------------------------------------------- |
+| `--active-color`          | The active text color of the tab, and color of the active indicator; |
+| `--border-color`          | The color of border surrounding the tab content;                     |
+| `--focus-color`           | The focused text color of the tab;                                   |
+| `--focus-indicator-color` | The color of the focus indicator;                                    |
+| `--inactive-color`        | The inactive text color of the tab;                                  |
+
+
+## Dependencies
+
+### Depends on
+
+- c2-badge
+- c2-icon
+
+### Graph
+```mermaid
+graph TD;
+  l2-tab-bar --> c2-badge
+  l2-tab-bar --> c2-icon
+  c2-badge --> c2-counter
+  style l2-tab-bar fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+