@linzjs/windows 1.3.0 → 1.4.0

package/package.json

@@ -12,7 +12,7 @@
     "panel",
     "popout"
   ],
-  "version": "1.3.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,40 +1,118 @@
+@use "node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars.scss" as colours;
+
 .panelDock > .panelDock-content:not(:empty) + .panelDock-empty {
   display: none;
 }
 
-.LuiFloatingWindow-children {
+.WindowPanel-children {
   display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
 }
 
-.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 {
   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;
 }
 
+.WindowPanel-header-title-icon {
+  fill: colours.$fuscous !important;
+  margin-right: 8px;
+}
+
 .WindowPanel-content {
   flex: 1;
   overflow: auto;

package/src/panel/Panel.tsx

@@ -1,25 +1,31 @@
 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 { PropsWithChildren, ReactElement, ReactNode, useContext, useEffect, useState } from "react";
+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 => {
+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);
@@ -54,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}
@@ -96,69 +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;
-  dockTo?: string;
-}
-
-export const PanelHeader = ({ extraButtons, dockTo, children }: PropsWithChildren<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"}>{title}</div>
-      <div className={"LuiFloatingWindow-children"}>{children}</div>
-      <div className={"LuiFloatingWindow-buttons"}>{extraButtons}</div>
-      <div className={"LuiFloatingWindow-extra-buttons-divider"}>|</div>
-      <div className={"LuiFloatingWindow-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>
-  );
-};
-
-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/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/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>

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

@@ -1,9 +1,10 @@
-import "./showPanel.scss";
+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 { PanelDock } from "../../../panel/PanelDock";
+import { PanelHeader } from "../../../panel/PanelHeader";
 
 // #Example: Panel Component
 export interface ShowPanelComponentProps {

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;
+  }
+}

package/src/stories/panel/ShowPanelDocking/showPanel.scss

@@ -1,9 +0,0 @@
-#story--components-panel--show-panel-docking-inner {
-  .panelDock {
-    margin-top: 16px;
-    border: 2px solid black;
-    .panelDock-empty {
-      padding: 16px;
-    }
-  }
-}