@linzjs/windows 1.2.0 → 1.4.0

package/package.json

@@ -12,7 +12,7 @@
     "panel",
     "popout"
   ],
-  "version": "1.2.0",
+  "version": "1.4.0",
   "peerDependencies": {
     "@linzjs/lui": "^17",
     "lodash-es": ">=4",
@@ -40,7 +40,7 @@
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-    "@linzjs/step-ag-grid": "^14.9.3",
+    "@linzjs/step-ag-grid": "^14.10.0",
     "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
@@ -62,7 +62,7 @@
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/jest": "^29.5.2",
     "@types/lodash-es": "^4.17.7",
-    "@types/node": "^20.3.3",
+    "@types/node": "^20.4.2",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/uuid": "^9.0.2",
@@ -82,14 +82,14 @@
     "eslint-plugin-testing-library": "^5.11.0",
     "jest": "^29.5.0",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest-environment-jsdom": "^29.6.1",
     "jest-expect-message": "^1.1.3",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "prop-types": "^15.8.1",
     "react-scripts": "5.0.1",
-    "rollup": "^3.23.0",
+    "rollup": "^3.26.2",
     "rollup-plugin-copy": "^3.4.0",
     "sass": "^1.63.6",
     "sass-loader": "^13.3.2",
@@ -103,7 +103,7 @@
     "stylelint-prettier": "3.0.0",
     "stylelint-scss": "5.0.1",
     "typescript": "^4.9.5",
-    "vite": "^4.3.9"
+    "vite": "^4.4.4"
   },
   "scripts": {
     "build": "run-s clean stylelint lint lint-circular-deps bundle",

package/src/panel/Panel.scss

@@ -1,30 +1,116 @@
-.WindowPanel {
-  box-shadow: 0 1px 6px 0 #00000026, 0 6px 10px 0 #00000040;
-  background-color: #fff;
+@use "node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars.scss" as colours;
+
+.panelDock > .panelDock-content:not(:empty) + .panelDock-empty {
+  display: none;
+}
+
+.WindowPanel-children {
   display: flex;
-  flex-direction: column;
-  border-radius: 9px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
 }
 
 .WindowPanel-header {
   height: 48px;
   line-height: 48px;
-  color: #2a292c;
-  padding: 0 8px;
+  color: colours.$charcoal;
+  padding: 0 16px;
   display: flex;
   overflow: hidden;
   justify-content: space-between;
-  border-bottom: 2px #eaeaea solid;
+  border-bottom: 2px colours.$lily solid;
   font-size: 1em;
   font-weight: 600;
   flex-direction: row;
+  align-items: center;
+
+  .LuiTabsGroup {
+    margin-top: 4px;
+    line-height: 16px;
+
+    .LuiTab {
+      min-width: 0;
+      padding-left: 8px;
+      padding-right: 8px;
+      padding-bottom: 11px;
+    }
+
+    .LuiTab:not(.LuiTab--active):focus {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    .LuiTab--active {
+      padding-left: 7px;
+      padding-right: 7px;
+    }
+
+    .LuiTab--active::after, .LuiTab--active:focus::after {
+      padding: 0;
+    }
+  }
+
+  .lui-button + .lui-button, a.lui-button + .lui-button {
+    margin-left: 0 !important;
+  }
+}
+
+.WindowPanel {
+  box-shadow: 0 1px 6px 0 #00000026, 0 6px 10px 0 #00000040;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  border-radius: 9px;
+
+  .WindowPanel-header {
+    border-radius: 9px 9px 0 0;
+  }
+}
+
+%WindowPanel-divider {
+  border-left: 2px solid colours.$lily;
+  background-color: colours.$lily;
+  width: 0;
+  height: 19px;
+}
+
+.WindowPanel-divider-left {
+  @extend %WindowPanel-divider;
+  margin-right: 15px;
+  margin-left: 19px;
+}
+
+.WindowPanel-divider-right {
+  @extend %WindowPanel-divider;
+  margin-right: 8px;
+  margin-left: 8px;
+}
+
+.WindowPanel-buttons {
+  display: flex;
+  align-items: center;
+
+  button.lui-button {
+    display: flex;
+    align-items: center;
+
+    span.LuiIcon {
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
 }
 
 .WindowPanel-header-title {
+  display: flex;
+  align-items: center;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
+}
+
+.WindowPanel-header-title-icon {
+  fill: colours.$fuscous !important;
+  margin-right: 8px;
 }
 
 .WindowPanel-content {

package/src/panel/Panel.tsx

@@ -1,26 +1,34 @@
 import "./Panel.scss";
+import "./PanelBlue.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
 import { PanelContext } from "./PanelContext";
 import { PanelInstanceContext, PanelSize } from "./PanelInstanceContext";
 import { PanelPosition, PanelsContext } from "./PanelsContext";
 import { PopoutWindow } from "./PopoutWindow";
+import clsx from "clsx";
 import { ReactElement, ReactNode, useContext, useEffect, useState } from "react";
+import ReactDOM from "react-dom";
 import { Rnd } from "react-rnd";
 
-import { LuiButton, LuiIcon } from "@linzjs/lui";
-import { LuiIconName } from "@linzjs/lui/dist/assets/svg-content";
-
 export interface PanelProps {
   title: string;
   position?: PanelPosition;
   size?: PanelSize;
+  className?: string;
   children: ReactNode;
 }
 
-export const Panel = ({ title, position, size = { width: 320, height: 200 }, children }: PanelProps): ReactElement => {
-  const { nextStackPosition } = useContext(PanelsContext);
-  const { panelPoppedOut, bounds, zIndex, bringPanelToFront, uniqueId, setTitle } = useContext(PanelInstanceContext);
+export const Panel = ({
+  title,
+  position,
+  size = { width: 320, height: 200 },
+  className,
+  children,
+}: PanelProps): ReactElement => {
+  const { nextStackPosition, dockElements } = useContext(PanelsContext);
+  const { panelPoppedOut, bounds, zIndex, bringPanelToFront, uniqueId, setTitle, dockId, docked } =
+    useContext(PanelInstanceContext);
 
   const [panelPosition, setPanelPosition] = useState(() => position ?? nextStackPosition());
   const [panelSize, setPanelSize] = useState(size ?? { width: 320, height: 200 });
@@ -37,10 +45,13 @@ export const Panel = ({ title, position, size = { width: 320, height: 200 }, chi
     setTitle(title);
   }, [setTitle, title]);
 
-  //panelClose
+  const dockElement = docked && dockId && dockElements[dockId];
+
   return (
     <PanelContext.Provider value={{ resizePanel }}>
-      {panelPoppedOut ? (
+      {dockElement && dockElement.isConnected ? (
+        ReactDOM.createPortal(children, dockElement)
+      ) : panelPoppedOut ? (
         <PopoutWindow name={uniqueId} title={title} size={panelSize}>
           <div
             style={{
@@ -49,13 +60,14 @@ export const Panel = ({ title, position, size = { width: 320, height: 200 }, chi
               width: "100%",
               height: "100%",
             }}
+            className={className}
           >
             {children}
           </div>
         </PopoutWindow>
       ) : (
         <Rnd
-          className={"WindowPanel"}
+          className={clsx("WindowPanel", className)}
           dragHandleClassName={"draggable-handle"}
           minWidth={100}
           minHeight={100}
@@ -91,60 +103,6 @@ export const Panel = ({ title, position, size = { width: 320, height: 200 }, chi
   );
 };
 
-export interface PanelHeaderButtonProps {
-  "aria-label": string;
-  icon: LuiIconName;
-  onClick: () => void;
-}
-
-export const PanelHeaderButton = ({ "aria-label": ariaLabel, icon, onClick }: PanelHeaderButtonProps) => (
-  <LuiButton
-    level={"plain-text"}
-    className={"lui-button-icon-only"}
-    size={"sm"}
-    onClick={onClick}
-    buttonProps={{
-      onTouchStart: onClick,
-    }}
-  >
-    <LuiIcon name={icon} alt={ariaLabel} />
-  </LuiButton>
+export const PanelContent = ({ children }: { children: ReactNode }) => (
+  <div className={"WindowPanel-content"}>{children}</div>
 );
-
-export interface PanelHeaderProps {
-  extraButtons?: ReactNode;
-}
-
-export const PanelHeader = ({ extraButtons }: PanelHeaderProps) => {
-  const { panelClose, panelTogglePopout, panelPoppedOut, title } = useContext(PanelInstanceContext);
-  const [cursor, setCursor] = useState<"grab" | "grabbing">("grab");
-
-  const headerMouseDown = () => {
-    !panelPoppedOut && setCursor("grabbing");
-  };
-
-  return (
-    <div
-      className={"WindowPanel-header draggable-handle"}
-      onMouseDown={headerMouseDown}
-      onMouseUp={() => !panelPoppedOut && setCursor("grab")}
-      style={{ cursor }}
-    >
-      <div className={"WindowPanel-header-title"}>{title}</div>
-      <div className={"LuiFloatingWindow-buttons"}>{extraButtons}</div>
-      <div className={"LuiFloatingWindow-extra-buttons-divider"}>|</div>
-      <div className={"LuiFloatingWindow-buttons"}>
-        <PanelHeaderButton
-          aria-label={panelPoppedOut ? "Pop-in" : "Pop-out"}
-          onClick={panelTogglePopout}
-          icon={panelPoppedOut ? "ic_pop_back" : "ic_launch_new window_open"}
-        />
-        <PanelHeaderButton aria-label={"Close"} onClick={panelClose} icon={"ic_clear"} />
-      </div>
-    </div>
-  );
-};
-
-export const PanelContent = ({ children }: { children: ReactNode }) => {
-  return <div className={"WindowPanel-content"}>{children}</div>;
-};

package/src/panel/PanelBlue.scss

@@ -0,0 +1,18 @@
+@use "node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars.scss" as colours;
+
+.WindowPanel-blue.WindowPanel-header, .WindowPanel-blue .WindowPanel-header {
+  background: linear-gradient(270deg,#007198,#00425b 100%);
+  color: #fff;
+
+  svg * {
+    fill: #fff;
+  }
+}
+
+.WindowPanel-blue .LuiTab {
+  color: colours.$iceberg
+}
+
+.WindowPanel-blue .LuiTab.LuiTab--active {
+  color: colours.$downy
+}

package/src/panel/PanelDock.tsx

@@ -0,0 +1,19 @@
+import { PanelsContext } from "./PanelsContext";
+import { PropsWithChildren, ReactElement, useContext } from "react";
+
+export interface PanelDockProps {
+  id: string;
+}
+
+export const PanelDock = ({ id, children }: PropsWithChildren<PanelDockProps>): ReactElement => {
+  const { setDockElement } = useContext(PanelsContext);
+
+  const setElement = (element: HTMLDivElement) => setDockElement(id, element);
+
+  return (
+    <div className={"panelDock"}>
+      <div ref={setElement} className={"panelDock-content"} />
+      <div className={"panelDock-empty"}>{children}</div>
+    </div>
+  );
+};

package/src/panel/PanelHeader.tsx

@@ -0,0 +1,59 @@
+import { PanelHeaderButton } from "./PanelHeaderButton";
+import { PanelInstanceContext } from "./PanelInstanceContext";
+import { ReactNode, useContext, useState } from "react";
+
+import { LuiIcon } from "@linzjs/lui";
+import { LuiIconName } from "@linzjs/lui/dist/assets/svg-content";
+
+export interface PanelHeaderProps {
+  icon?: LuiIconName;
+  extraLeft?: ReactNode;
+  extraRight?: ReactNode;
+  onHelpClick?: () => void;
+  dockTo?: string;
+}
+
+export const PanelHeader = ({ icon, extraLeft, extraRight, onHelpClick, dockTo }: PanelHeaderProps) => {
+  const { panelClose, panelTogglePopout, panelPoppedOut, title, dock, undock, docked } =
+    useContext(PanelInstanceContext);
+  const [cursor, setCursor] = useState<"grab" | "grabbing">("grab");
+
+  const headerMouseDown = () => {
+    !panelPoppedOut && setCursor("grabbing");
+  };
+
+  return (
+    <div
+      className={"WindowPanel-header draggable-handle"}
+      onMouseDown={headerMouseDown}
+      onMouseUp={() => !panelPoppedOut && setCursor("grab")}
+      style={{ cursor }}
+    >
+      <div className={"WindowPanel-header-title"}>
+        {icon && <LuiIcon name={icon} alt={"icon"} size={"md"} className={"WindowPanel-header-title-icon"} />}
+        {title}
+      </div>
+      {extraLeft && <div className={"WindowPanel-divider-left"} />}
+      <div className={"WindowPanel-children"}>{extraLeft}</div>
+      <div className={"WindowPanel-buttons"}>
+        {extraRight}
+        {onHelpClick && <PanelHeaderButton aria-label={"Help"} onClick={onHelpClick} icon={"ic_help_outline"} />}
+      </div>
+      <div className={"WindowPanel-divider-right"} />
+      <div className={"WindowPanel-buttons"}>
+        {dockTo &&
+          (docked ? (
+            <PanelHeaderButton aria-label={"Undock"} onClick={undock} icon={"ic_close_list"} />
+          ) : (
+            <PanelHeaderButton aria-label={"Undock"} onClick={() => dock(dockTo)} icon={"ic_left_col"} />
+          ))}
+        <PanelHeaderButton
+          aria-label={panelPoppedOut ? "Pop-in" : "Pop-out"}
+          onClick={panelTogglePopout}
+          icon={panelPoppedOut ? "ic_pop_back" : "ic_launch_new window_open"}
+        />
+        <PanelHeaderButton aria-label={"Close"} onClick={panelClose} icon={"ic_clear"} />
+      </div>
+    </div>
+  );
+};

package/src/panel/PanelHeaderButton.tsx

@@ -0,0 +1,22 @@
+import { LuiButton, LuiIcon } from "@linzjs/lui";
+import { LuiIconName } from "@linzjs/lui/dist/assets/svg-content";
+
+export interface PanelHeaderButtonProps {
+  "aria-label": string;
+  icon: LuiIconName;
+  onClick: () => void;
+}
+
+export const PanelHeaderButton = ({ "aria-label": ariaLabel, icon, onClick }: PanelHeaderButtonProps) => (
+  <LuiButton
+    level={"plain-text"}
+    className={"lui-button-icon-only"}
+    size={"sm"}
+    onClick={onClick}
+    buttonProps={{
+      onTouchStart: onClick,
+    }}
+  >
+    <LuiIcon name={icon} alt={ariaLabel} size={"md"} />
+  </LuiButton>
+);

package/src/panel/PanelInstanceContext.ts

@@ -17,6 +17,10 @@ export interface PanelInstanceContextType {
   bringPanelToFront: () => void;
   panelPoppedOut: boolean;
   zIndex: number;
+  dockId: string | undefined;
+  docked: boolean;
+  dock: (id: string) => void;
+  undock: () => void;
 }
 
 const NoContextError = () => {
@@ -36,6 +40,10 @@ export const PanelInstanceContext = createContext<PanelInstanceContextType>({
   panelClose: NoContextError,
   setPanelWindow: NoContextError,
   bringPanelToFront: NoContextError,
+  dock: NoContextError,
+  undock: NoContextError,
+  docked: false,
+  dockId: undefined,
   panelPoppedOut: false,
   zIndex: 0,
 });

package/src/panel/PanelInstanceContextProvider.tsx

@@ -1,6 +1,6 @@
 import { PanelInstanceContext } from "./PanelInstanceContext";
 import { PanelInstance, PanelsContext } from "./PanelsContext";
-import { ReactElement, ReactNode, useContext, useState } from "react";
+import { ReactElement, ReactNode, useCallback, useContext, useState } from "react";
 
 /**
  * Provides access to closing/popping panels
@@ -14,8 +14,25 @@ export const PanelInstanceContextProvider = ({
   panelInstance: PanelInstance;
   children: ReactNode;
 }): ReactElement => {
-  const { closePanel, togglePopOut, bringPanelToFront } = useContext(PanelsContext);
+  const { closePanel, bringPanelToFront } = useContext(PanelsContext);
   const [title, setTitle] = useState("");
+  const [dockId, setDockId] = useState<string>();
+  const [poppedOut, setPoppedOut] = useState(false);
+
+  const togglePopOut = useCallback(() => {
+    panelInstance.window = null;
+    setPoppedOut(!poppedOut);
+  }, [panelInstance, poppedOut]);
+
+  const dock = useCallback(
+    (id: string) => {
+      if (poppedOut) togglePopOut();
+      setDockId(id);
+    },
+    [poppedOut, togglePopOut],
+  );
+
+  const undock = useCallback(() => setDockId(undefined), []);
 
   return (
     <PanelInstanceContext.Provider
@@ -30,15 +47,17 @@ export const PanelInstanceContextProvider = ({
           panelInstance.window = null;
           closePanel(panelInstance);
         },
-        panelTogglePopout: () => {
-          togglePopOut(panelInstance);
-        },
-        panelPoppedOut: panelInstance.poppedOut,
+        panelTogglePopout: togglePopOut,
+        panelPoppedOut: poppedOut,
         setPanelWindow: (w: Window) => {
           panelInstance.window = w;
         },
         bringPanelToFront: () => bringPanelToFront(panelInstance),
         zIndex: panelInstance.zIndex,
+        docked: !poppedOut && !!dockId,
+        dockId,
+        dock,
+        undock,
       }}
     >
       {children}

package/src/panel/PanelsContext.tsx

@@ -17,9 +17,10 @@ export interface PanelsContextType {
   openPanels: Set<string>;
   openPanel: (uniqueId: string, component: () => ReactElement) => void;
   closePanel: (panelInstance: PanelInstance) => void;
-  togglePopOut: (panelInstance: PanelInstance) => void;
   bringPanelToFront: (panelInstance: PanelInstance) => void;
   nextStackPosition: () => PanelPosition;
+  dockElements: Record<string, HTMLDivElement>;
+  setDockElement: (id: string, element: HTMLDivElement) => void;
 }
 
 const NoContext = () => {
@@ -30,7 +31,8 @@ export const PanelsContext = createContext<PanelsContextType>({
   openPanels: new Set(),
   openPanel: NoContext,
   closePanel: NoContext,
-  togglePopOut: NoContext,
   bringPanelToFront: NoContext,
+  dockElements: {},
+  setDockElement: NoContext,
   nextStackPosition: () => ({ x: 0, y: 0 }),
 });

package/src/panel/PanelsContextProvider.tsx

@@ -25,6 +25,17 @@ export const PanelsContextProvider = ({
   // Can't use a map here as we need to retain render order for performance
   const [panelInstances, setPanelInstances] = useState<PanelInstance[]>([]);
 
+  const [dockElements, setDockElements] = useState<Record<string, HTMLDivElement>>({});
+
+  const setDockElement = useCallback(
+    (id: string, element: HTMLDivElement) => {
+      if (dockElements[id] !== element) {
+        setDockElements({ ...dockElements, [id]: element });
+      }
+    },
+    [dockElements],
+  );
+
   const bringPanelToFront = useCallback(
     (panelInstance: PanelInstance) => {
       if (panelInstance.window) {
@@ -82,17 +93,6 @@ export const PanelsContextProvider = ({
     [panelInstances],
   );
 
-  const togglePopOut = useCallback(
-    (panelInstance: PanelInstance) => {
-      panelInstance.poppedOut = !panelInstance.poppedOut;
-      if (!panelInstance.poppedOut) {
-        panelInstance.window = null;
-      }
-      setPanelInstances([...panelInstances]);
-    },
-    [panelInstances],
-  );
-
   /**
    * It's not easy to tell the difference between a window closing and a window popping in via events,
    * so we're periodically checking instead.
@@ -122,9 +122,10 @@ export const PanelsContextProvider = ({
         openPanels,
         openPanel,
         closePanel,
-        togglePopOut,
         bringPanelToFront,
         nextStackPosition,
+        dockElements,
+        setDockElement,
       }}
     >
       <Fragment key={"panels"}>

package/src/panel/generateId.test.ts

@@ -0,0 +1,9 @@
+import { makePopoutId } from "./generateId";
+
+/**
+ * The only valid characters for an @emotion key are lower case chars or '-'.
+ * We need to replace any char that is not valid with a substitute.
+ */
+test("makePopoutId", () => {
+  expect(makePopoutId("Hello-59.!---&$*(--")).toBe("hello-five-nine-");
+});

package/src/panel/generateId.ts

@@ -2,22 +2,21 @@
  * The only valid characters for an @emotion key are lower case chars or '-'.
  * We need to replace any char that is not valid with a substitute.
  */
-export function makePopoutId(str: string): string {
-  return str
-    .replace(/[/\s_]*/g, "-")
-    .replaceAll("0", "zero")
-    .replaceAll("1", "one")
-    .replaceAll("2", "two")
-    .replaceAll("3", "three")
-    .replaceAll("4", "four")
-    .replaceAll("5", "five")
-    .replaceAll("6", "six")
-    .replaceAll("7", "seven")
-    .replaceAll("8", "eight")
-    .replaceAll("9", "nine")
+export const makePopoutId = (str: string): string =>
+  str
+    .toLowerCase()
+    .replaceAll(/[^a-z0-9-]/g, "-")
+    .replaceAll("0", "-zero-")
+    .replaceAll("1", "-one-")
+    .replaceAll("2", "-two-")
+    .replaceAll("3", "-three-")
+    .replaceAll("4", "-four-")
+    .replaceAll("5", "-five-")
+    .replaceAll("6", "-six-")
+    .replaceAll("7", "-seven-")
+    .replaceAll("8", "-eight-")
+    .replaceAll("9", "-nine-")
+    .replaceAll(/-+/g, "-")
     .toLowerCase();
-}
 
-export function popoutWindowDivId(windowTitle: string): string {
-  return `popoutWindow-${makePopoutId(windowTitle)}`;
-}
+export const popoutWindowDivId = (windowTitle: string): string => `popoutWindow-${makePopoutId(windowTitle)}`;

package/src/stories/panel/PanelButtons/ShowPanel.tsx

@@ -1,3 +1,4 @@
+import "../story.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
 import { OpenPanelButton } from "../../../panel/OpenPanelButton";
@@ -7,7 +8,8 @@ import {
   ButtonIconVerticalGroup,
   OpenPanelIcon,
 } from "../../../panel/OpenPanelIcon";
-import { Panel, PanelContent, PanelHeader } from "../../../panel/Panel";
+import { Panel, PanelContent } from "../../../panel/Panel";
+import { PanelHeader } from "../../../panel/PanelHeader";
 
 /* exclude */
 export interface ShowPanelProps {

package/src/stories/panel/ShowPanel/ShowPanel.tsx

@@ -1,7 +1,9 @@
+import "../story.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
 import { OpenPanelButton } from "../../../panel/OpenPanelButton";
-import { Panel, PanelContent, PanelHeader } from "../../../panel/Panel";
+import { Panel, PanelContent } from "../../../panel/Panel";
+import { PanelHeader } from "../../../panel/PanelHeader";
 import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
 
 // #Example: Panel Context Provider
@@ -19,7 +21,7 @@ export interface ShowPanelComponentProps {
 
 export const ShowPanelComponent = ({ data }: ShowPanelComponentProps) => (
   <Panel title={`Panel demo ${data}`} size={{ width: 640, height: 400 }}>
-    <PanelHeader />
+    <PanelHeader icon={"ic_add_adopt"} />
     <PanelContent>
       <PanelContents />
     </PanelContent>
@@ -27,36 +29,35 @@ export const ShowPanelComponent = ({ data }: ShowPanelComponentProps) => (
 );
 
 /* exclude */
-export const PanelContents = () => {
-  return (
-    <table>
-      <thead>
-        <tr>
-          <th>Owner</th>
-          <th>Title</th>
-          <th>Address</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Roy</td>
-          <td>OT10A/1011</td>
-          <td>5 Grange St, Auckland</td>
-        </tr>
-        <tr>
-          <td>Ryan</td>
-          <td>OT10A/154</td>
-          <td>145 Garry St, Wellington</td>
-        </tr>
-        <tr>
-          <td>Suzy</td>
-          <td>OT10A/155</td>
-          <td>15 Aix St, Auckland</td>
-        </tr>
-      </tbody>
-    </table>
-  );
-};
+export const PanelContents = () => (
+  <table>
+    <thead>
+      <tr>
+        <th>Owner</th>
+        <th>Title</th>
+        <th>Address</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Roy</td>
+        <td>OT10A/1011</td>
+        <td>5 Grange St, Auckland</td>
+      </tr>
+      <tr>
+        <td>Ryan</td>
+        <td>OT10A/154</td>
+        <td>145 Garry St, Wellington</td>
+      </tr>
+      <tr>
+        <td>Suzy</td>
+        <td>OT10A/155</td>
+        <td>15 Aix St, Auckland</td>
+      </tr>
+    </tbody>
+  </table>
+);
+
 /* exclude */
 
 // #Example: Panel Invocation

package/src/stories/panel/ShowPanelDocking/ShowPanel.mdx

@@ -0,0 +1,20 @@
+import {getBlocks, blockToString} from "../../support.js";
+import {Meta, Source, Story} from "@storybook/blocks";
+import * as ShowPanelStories from "./ShowPanel.stories.tsx"
+
+import myModule from './ShowPanel.tsx?raw';
+
+<Meta name="Docking Panel" of={ShowPanelStories}/>
+# Panel Docking
+## Example
+Click to show the panel:
+<Story of={ShowPanelStories.ShowPanelDocking}/>
+
+## Code
+<br/>
+{getBlocks(myModule).map(block => (
+<>
+    <h3>{block.split("\n")[0]}</h3>
+    <Source code={blockToString(block)} language='typescript'/>
+</>
+))}

package/src/stories/panel/ShowPanelDocking/ShowPanel.stories.tsx

@@ -0,0 +1,27 @@
+import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
+import { TestShowPanel } from "./ShowPanel";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof TestShowPanel> = {
+  title: "Components/Panel",
+  component: TestShowPanel,
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+  decorators: [
+    (Story: any) => (
+      <div>
+        <PanelsContextProvider baseZIndex={500}>
+          <Story />
+        </PanelsContextProvider>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ShowPanelDocking: Story = {
+  args: {},
+};

package/src/stories/panel/ShowPanelDocking/ShowPanel.tsx

@@ -0,0 +1,64 @@
+import "../story.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { OpenPanelButton } from "../../../panel/OpenPanelButton";
+import { Panel, PanelContent } from "../../../panel/Panel";
+import { PanelDock } from "../../../panel/PanelDock";
+import { PanelHeader } from "../../../panel/PanelHeader";
+
+// #Example: Panel Component
+export interface ShowPanelComponentProps {
+  data: number;
+}
+
+export const ShowPanelComponent = ({ data }: ShowPanelComponentProps) => (
+  <Panel title={`Panel demo ${data}`} size={{ width: 640, height: 400 }}>
+    <PanelHeader dockTo={"leftSide"} />
+    <PanelContent>
+      <PanelContents />
+    </PanelContent>
+  </Panel>
+);
+
+/* exclude */
+export const PanelContents = () => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Owner</th>
+          <th>Title</th>
+          <th>Address</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Roy</td>
+          <td>OT10A/1011</td>
+          <td>5 Grange St, Auckland</td>
+        </tr>
+        <tr>
+          <td>Ryan</td>
+          <td>OT10A/154</td>
+          <td>145 Garry St, Wellington</td>
+        </tr>
+        <tr>
+          <td>Suzy</td>
+          <td>OT10A/155</td>
+          <td>15 Aix St, Auckland</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+/* exclude */
+
+// #Example: Panel Invocation
+export const TestShowPanel = () => {
+  return (
+    <>
+      <OpenPanelButton buttonText={"TestPanel"} component={() => <ShowPanelComponent data={1} />} />
+      <PanelDock id={"leftSide"}>The Panel will dock in here</PanelDock>
+    </>
+  );
+};

package/src/stories/panel/ShowPanelResizingAgGrid/ShowPanelResizingAgGrid.mdx

@@ -4,7 +4,7 @@ import * as PanelStories from "./ShowPanelResizingAgGrid.stories.tsx"
 
 import myModule from './ShowPanelResizingStepAgGrid.tsx?raw';
 
-<Meta name="Show Resizing step-ag-grid" of={PanelStories}/>
+<Meta name="Resizing Panel step-ag-grid" of={PanelStories}/>
 # Show Panel
 ## Example
 Click to show the panel:

package/src/stories/panel/ShowPanelResizingAgGrid/ShowPanelResizingStepAgGrid.tsx

@@ -1,10 +1,12 @@
+import "../story.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/step-ag-grid/dist/GridTheme.scss";
 import "@linzjs/step-ag-grid/dist/index.css";
 
 import { OpenPanelButton } from "../../../panel/OpenPanelButton";
-import { Panel, PanelContent, PanelHeader } from "../../../panel/Panel";
+import { Panel, PanelContent } from "../../../panel/Panel";
 import { PanelContext } from "../../../panel/PanelContext";
+import { PanelHeader } from "../../../panel/PanelHeader";
 import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
 import { useContext, useMemo, useState } from "react";
 
@@ -35,7 +37,7 @@ export interface TestPanelProps {
 
 export const TestPanelResizing = ({ data }: TestPanelProps) => {
   return (
-    <Panel title={`Panel resizing demo ${data}`} size={{ width: 320, height: 400 }}>
+    <Panel title={`Panel resizing demo ${data}`} size={{ width: 320, height: 400 }} className={"WindowPanel-blue"}>
       <PanelHeader />
       <PanelContent>
         <PanelContentsWithResize />

package/src/stories/panel/ShowTabbedPanel/ShowPanel.mdx

@@ -0,0 +1,20 @@
+import {getBlocks, blockToString} from "../../support.js";
+import {Meta, Source, Story} from "@storybook/blocks";
+import * as ShowPanelStories from "./ShowPanel.stories.tsx"
+
+import myModule from './ShowPanel.tsx?raw';
+
+<Meta name="Tabbed Panel" of={ShowPanelStories}/>
+# Show Tabbed Panel
+## Example
+Click to show the tabbed panel:
+<Story of={ShowPanelStories.ShowTabbedPanel}/>
+
+## Code
+<br/>
+{getBlocks(myModule).map(block => (
+<>
+    <h3>{block.split("\n")[0]}</h3>
+    <Source code={blockToString(block)} language='typescript'/>
+</>
+))}

package/src/stories/panel/ShowTabbedPanel/ShowPanel.stories.tsx

@@ -0,0 +1,27 @@
+import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
+import { TestShowTabbedPanel } from "./ShowPanel";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof TestShowTabbedPanel> = {
+  title: "Components/Panel",
+  component: TestShowTabbedPanel,
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+  decorators: [
+    (Story: any) => (
+      <div>
+        <PanelsContextProvider baseZIndex={500}>
+          <Story />
+        </PanelsContextProvider>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ShowTabbedPanel: Story = {
+  args: {},
+};

package/src/stories/panel/ShowTabbedPanel/ShowPanel.tsx

@@ -0,0 +1,76 @@
+import "../story.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { OpenPanelButton } from "../../../panel/OpenPanelButton";
+import { Panel, PanelContent } from "../../../panel/Panel";
+import { PanelHeader } from "../../../panel/PanelHeader";
+import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
+
+import { LuiTabs, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch } from "@linzjs/lui";
+
+// #Example: Panel Context Provider
+// Don't forget to add a PanelContextProvider at the root of your project
+export const App = () => (
+  <PanelsContextProvider baseZIndex={500}>
+    <div>...the rest of your app...</div>
+  </PanelsContextProvider>
+);
+
+// #Example: Panel Component
+export interface ShowPanelComponentProps {
+  data: number;
+}
+
+export const ShowPanelComponent = ({ data }: ShowPanelComponentProps) => (
+  <LuiTabs defaultPanel="africa">
+    <Panel title={`Panel demo ${data}`} size={{ width: 640, height: 400 }} className={"WindowPanel-blue"}>
+      <PanelHeader
+        icon={"ic_send"}
+        onHelpClick={() => alert("Help!!!")}
+        extraLeft={
+          <LuiTabsGroup ariaLabel="Animals">
+            <LuiTabsPanelSwitch targetPanel="africa">Africa</LuiTabsPanelSwitch>
+            <LuiTabsPanelSwitch targetPanel="asia">Asia</LuiTabsPanelSwitch>
+          </LuiTabsGroup>
+        }
+      />
+      <PanelContent>
+        <PanelContents />
+      </PanelContent>
+    </Panel>
+  </LuiTabs>
+);
+
+/* exclude */
+export const PanelContents = () => (
+  <div style={{ margin: "10px 16px" }}>
+    <LuiTabsPanel panel="africa">
+      <h2>African Countries</h2>
+      <ul className={"lui-list-bullet"}>
+        <li>Gabon</li>
+        <li>Malawi</li>
+        <li>Mozambique</li>
+      </ul>
+    </LuiTabsPanel>
+    <LuiTabsPanel panel="asia">
+      <h2>Asian Countries</h2>
+      <ul className={"lui-list-bullet"}>
+        <li>Laos</li>
+        <li>Nepal</li>
+        <li>Philippines</li>
+      </ul>
+    </LuiTabsPanel>
+  </div>
+);
+
+/* exclude */
+
+// #Example: Panel Invocation
+export const TestShowTabbedPanel = () => {
+  return (
+    <>
+      <OpenPanelButton buttonText={"TestPanel 1"} component={() => <ShowPanelComponent data={1} />} />{" "}
+      <OpenPanelButton buttonText={"TestPanel 2"} component={() => <ShowPanelComponent data={2} />} />
+    </>
+  );
+};

package/src/stories/panel/story.scss

@@ -0,0 +1,13 @@
+.WindowPanel, .PopoutWindowContainer {
+  h1, h2, h3, h4, h5, h6, table {
+    margin-top: 0;
+  }
+}
+
+.panelDock {
+  margin-top: 16px;
+  border: 2px solid black;
+  .panelDock-empty {
+    padding: 16px;
+  }
+}