Allow es-panel and es-sized-panel to target the header area

Previously, the `header` area was considered a special case, as it would always contain the header. This PR allows the area to be targetted by panels and is treated like any other layout area. - Add `header` to `TargetableArea` type. - Handle header positioning in `es-panel` and `es-sized-panel`. - Update demos to include `header` area, and remove conflicting headers, where needed. - Clean up demo titles and groups. - Fix demo page styles by removing page index styles when leaving the index.
EventStore · Nov 5, 2024 · a7cf0cd · a7cf0cd
1 parent f44dcd1
commit a7cf0cd
Show file tree

Hide file tree

Showing 17 changed files with 138 additions and 102 deletions.
diff --git a/.changeset/sixty-seals-eat.md b/.changeset/sixty-seals-eat.md
@@ -0,0 +1,8 @@
+---
+'@eventstore-ui/layout': minor
+---
+
+Allow `es-panel` and `es-sized-panel` to target the header area
+
+Previously, the `header` area was considered a special case, as it would always contain the header.
+We now allow the area to be targetted by panels and is treated like any other layout area.
diff --git a/packages/layout/src/components/panel/demos/layout-button-collapsed.demo.tsx b/packages/layout/src/components/panel/demos/layout-button-collapsed.demo.tsx
@@ -10,7 +10,8 @@ import {
 import type { TargetableArea } from '../types';
 
 /**
- * es-layout-button and es-layout-link collapsed demo
+ * Button and link collapsing
+ * @group Panels
  */
 @Component({
     tag: 'es-layout-button-collapsed-demo',

diff --git a/packages/layout/src/components/panel/demos/panel-all.demo.tsx b/packages/layout/src/components/panel/demos/panel-all.demo.tsx
@@ -10,7 +10,8 @@ import { router } from '@eventstore-ui/router';
 import { Page, ES_LAYOUT_ICON_NAMESPACE } from '../../../../';
 
 /**
- * es-panel-placement
+ * All panel placements
+ * @group Panels
  */
 @Component({
     tag: 'es-panel-all-demo',
@@ -25,11 +26,11 @@ export class PanelPlacementDemo {
     render() {
         return (
             <Host>
-                <es-header>
-                    <es-theme-dropdown slot={'right'} />
-                </es-header>
                 <Page pageTitle={'All Panels'}>
                     {'hello'}
+                    <es-panel area={'header'}>
+                        <Inner>{'Header Panel'}</Inner>
+                    </es-panel>
                     <es-panel area={'cookie'}>
                         <Inner>{'Cookie Panel'}</Inner>
                     </es-panel>

diff --git a/packages/layout/src/components/panel/demos/panel-close.demo.tsx b/packages/layout/src/components/panel/demos/panel-close.demo.tsx
@@ -6,7 +6,8 @@ import { areas } from './validPositions';
 import type { PanelMode } from '../types';
 
 /**
- * es-panel close demo
+ * Panel closing
+ * @group Panels
  */
 @Component({
     tag: 'es-panel-close-demo',
@@ -33,7 +34,6 @@ export class PanelPlacementDemo {
 
         return (
             <Host>
-                <div class={'area header'}>{'header'}</div>
                 <Page pageTitle={'body'}>
                     <label>
                         {'Area: '}

diff --git a/packages/layout/src/components/panel/demos/panel-placement.demo.tsx b/packages/layout/src/components/panel/demos/panel-placement.demo.tsx
@@ -3,6 +3,7 @@ import { router } from '@eventstore-ui/router';
 
 import {
     Page,
+    headerHeight,
     bannerHeight,
     cookieHeight,
     panelHeight,
@@ -13,7 +14,8 @@ import {
 import { areas } from './validPositions';
 
 /**
- * es-panel-placement
+ * Panel placement
+ * @group Panels
  */
 @Component({
     tag: 'es-panel-placement-demo',
@@ -29,11 +31,12 @@ export class PanelPlacementDemo {
 
     componentWillLoad() {
         router.init({ root: '/es-panel-placement-demo/' });
-        bannerHeight.set(200);
-        cookieHeight.set(200);
-        panelHeight.set(200);
-        sidebarWidth.set(200);
-        toolbarWidth.set(200);
+        headerHeight.set(140);
+        bannerHeight.set(140);
+        cookieHeight.set(140);
+        panelHeight.set(140);
+        sidebarWidth.set(140);
+        toolbarWidth.set(140);
     }
 
     disconnectedCallback() {
@@ -103,7 +106,9 @@ export class PanelPlacementDemo {
                     </label>
 
                     <es-panel
-                        defaultSize={200}
+                        defaultSize={140}
+                        maximumSize={140}
+                        minimumSize={140}
                         area={area}
                         start={start}
                         end={end}

diff --git a/packages/layout/src/components/panel/demos/sized-panel-placement.demo.tsx b/packages/layout/src/components/panel/demos/sized-panel-placement.demo.tsx
@@ -6,7 +6,8 @@ import { Page } from '../../../../';
 import { areas } from './validPositions';
 
 /**
- * es-sized-panel placemen demo
+ * Sized panel placement
+ * @group Sized panels
  */
 @Component({
     tag: 'es-sized-panel-placement-demo',

diff --git a/packages/layout/src/components/panel/demos/sized-panel.demo.tsx b/packages/layout/src/components/panel/demos/sized-panel.demo.tsx
@@ -5,7 +5,8 @@ import { Page } from '../../../../';
 import { areas } from './validPositions';
 
 /**
- * es-sized-panel example
+ * All sized panel placements
+ * @group Sized Panels
  */
 @Component({
     tag: 'es-sized-panel-demo',
@@ -20,9 +21,6 @@ export class PanelPlacementDemo {
     render() {
         return (
             <Host>
-                <es-header>
-                    <es-theme-dropdown slot={'right'} />
-                </es-header>
                 <Page pageTitle={'Sized Panels'}>
                     {'hello'}
 

diff --git a/packages/layout/src/components/panel/demos/validPositions.ts b/packages/layout/src/components/panel/demos/validPositions.ts
@@ -2,8 +2,8 @@ import type { TargetableArea, TargetableEdge } from '../types';
 
 type Edges = TargetableEdge[];
 
-const verticalStarts: Edges = ['banner', 'body', 'panel', 'cookie'];
-const verticalEnds: Edges = ['banner', 'body', 'panel', 'cookie'];
+const verticalStarts: Edges = ['header', 'banner', 'body', 'panel', 'cookie'];
+const verticalEnds: Edges = ['header', 'banner', 'body', 'panel', 'cookie'];
 const horizontalStarts: Edges = ['edge', 'sidebar', 'body', 'toolbar'];
 const horizontalEnds: Edges = ['sidebar', 'body', 'toolbar', 'edge'];
 
@@ -12,6 +12,7 @@ export const areas: Array<[area: TargetableArea, starts: Edges, ends: Edges]> =
         ['panel', horizontalStarts, horizontalEnds],
         ['toolbar', verticalStarts, verticalEnds],
         ['banner', horizontalStarts, horizontalEnds],
+        ['header', horizontalStarts, horizontalEnds],
         ['sidebar', verticalStarts, verticalEnds],
         ['cookie', horizontalStarts, horizontalEnds],
     ];
diff --git a/packages/layout/src/components/panel/es-panel/es-panel.css b/packages/layout/src/components/panel/es-panel/es-panel.css
@@ -23,6 +23,9 @@
 :host([area='cookie']) {
     height: var(--layout-cookie-height);
 }
+:host([area='header']) {
+    height: var(--layout-header-height);
+}
 :host([area='banner']) {
     height: var(--layout-banner-height);
 }
@@ -57,6 +60,7 @@
 /* Horizontal */
 :host([area='panel']),
 :host([area='cookie']),
+:host([area='header']),
 :host([area='banner']) {
     & .handle {
         left: 0;
@@ -81,6 +85,7 @@
 }
 
 /* Bottom */
+:host([area='header']),
 :host([area='banner']) {
     & .handle {
         bottom: 0;

diff --git a/packages/layout/src/components/panel/es-panel/es-panel.tsx b/packages/layout/src/components/panel/es-panel/es-panel.tsx
@@ -210,6 +210,7 @@ export class Panel {
         }
 
         switch (this.area) {
+            case 'header':
             case 'banner':
             case 'panel':
             case 'cookie': {
@@ -251,6 +252,8 @@ export class Panel {
 
     private getCssVar = (area: TargetableArea) => {
         switch (area) {
+            case 'header':
+                return headerHeight;
             case 'panel':
                 return panelHeight;
             case 'cookie':
@@ -294,6 +297,7 @@ export class Panel {
     private calcSize = (x: number, y: number) => {
         const { top, right, bottom, left } = this.host.getBoundingClientRect();
         switch (this.area) {
+            case 'header':
             case 'banner':
                 return y - top;
             case 'panel':

diff --git a/packages/layout/src/components/panel/es-panel/readme.md b/packages/layout/src/components/panel/es-panel/readme.md
@@ -24,19 +24,19 @@ export default () => (
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                 | Type                                                                                         | Default     |
-| -------------- | --------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ----------- |
-| `area`         | `area`          | Where to place the panel.                                                   | `"banner" \| "cookie" \| "panel" \| "sidebar" \| "toolbar"`                                  | `'panel'`   |
-| `closeAt`      | `close-at`      | When to snap the panel closed (if a closed mode is set).                    | `number`                                                                                     | `100`       |
-| `closedMode`   | `closed-mode`   | How the panel should respond to being closed.                               | `"collapsed" \| "none"`                                                                      | `'none'`    |
-| `closedSize`   | `closed-size`   | How large the panel should be when closed.                                  | `number`                                                                                     | `34`        |
-| `defaultSize`  | `default-size`  | What size to default to.                                                    | `number`                                                                                     | `200`       |
-| `end`          | `end`           | Where to end the panel, inclusive. Must be the opposite axis to the area.   | `"banner" \| "body" \| "cookie" \| "edge" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` |
-| `maximumSize`  | `maximum-size`  | The maximum possible size to resize to.                                     | `number`                                                                                     | `Infinity`  |
-| `minimumSize`  | `minimum-size`  | The minimum possible size to resize to.                                     | `number`                                                                                     | `100`       |
-| `rememberMode` | `remember-mode` | If the last mode of the panel should be kept in local storage.              | `boolean \| string \| undefined`                                                             | `undefined` |
-| `rememberSize` | `remember-size` | If the size of the panel should be kept in local storage.                   | `boolean \| string \| undefined`                                                             | `undefined` |
-| `start`        | `start`         | Where to start the panel, inclusive. Must be the opposite axis to the area. | `"banner" \| "body" \| "cookie" \| "edge" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` |
+| Property       | Attribute       | Description                                                                 | Type                                                                                                     | Default     |
+| -------------- | --------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ----------- |
+| `area`         | `area`          | Where to place the panel.                                                   | `"banner" \| "cookie" \| "header" \| "panel" \| "sidebar" \| "toolbar"`                                  | `'panel'`   |
+| `closeAt`      | `close-at`      | When to snap the panel closed (if a closed mode is set).                    | `number`                                                                                                 | `100`       |
+| `closedMode`   | `closed-mode`   | How the panel should respond to being closed.                               | `"collapsed" \| "none"`                                                                                  | `'none'`    |
+| `closedSize`   | `closed-size`   | How large the panel should be when closed.                                  | `number`                                                                                                 | `34`        |
+| `defaultSize`  | `default-size`  | What size to default to.                                                    | `number`                                                                                                 | `200`       |
+| `end`          | `end`           | Where to end the panel, inclusive. Must be the opposite axis to the area.   | `"banner" \| "body" \| "cookie" \| "edge" \| "header" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` |
+| `maximumSize`  | `maximum-size`  | The maximum possible size to resize to.                                     | `number`                                                                                                 | `Infinity`  |
+| `minimumSize`  | `minimum-size`  | The minimum possible size to resize to.                                     | `number`                                                                                                 | `100`       |
+| `rememberMode` | `remember-mode` | If the last mode of the panel should be kept in local storage.              | `boolean \| string \| undefined`                                                                         | `undefined` |
+| `rememberSize` | `remember-size` | If the size of the panel should be kept in local storage.                   | `boolean \| string \| undefined`                                                                         | `undefined` |
+| `start`        | `start`         | Where to start the panel, inclusive. Must be the opposite axis to the area. | `"banner" \| "body" \| "cookie" \| "edge" \| "header" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` |
 
 
 ## Events

diff --git a/packages/layout/src/components/panel/es-sized-panel/es-sized-panel.tsx b/packages/layout/src/components/panel/es-sized-panel/es-sized-panel.tsx
@@ -3,6 +3,7 @@ import { Component, h, Host, Watch, Element, Prop } from '@stencil/core';
 import {
     bannerHeight,
     cookieHeight,
+    headerHeight,
     panelHeight,
     sidebarWidth,
     toolbarWidth,
@@ -66,6 +67,7 @@ export class SizedPanel {
 
     private setSize = ({ inlineSize, blockSize }: ResizeObserverSize) => {
         switch (this.area) {
+            case 'header':
             case 'panel':
             case 'cookie':
             case 'banner': {
@@ -90,6 +92,8 @@ export class SizedPanel {
                 return panelHeight;
             case 'cookie':
                 return cookieHeight;
+            case 'header':
+                return headerHeight;
             case 'banner':
                 return bannerHeight;
             case 'sidebar':

diff --git a/packages/layout/src/components/panel/es-sized-panel/readme.md b/packages/layout/src/components/panel/es-sized-panel/readme.md
@@ -24,11 +24,11 @@ export default () => (
 
 ## Properties
 
-| Property | Attribute | Description                                                                 | Type                                                                                         | Default     |
-| -------- | --------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ----------- |
-| `area`   | `area`    | Where to place the panel.                                                   | `"banner" \| "cookie" \| "panel" \| "sidebar" \| "toolbar"`                                  | `'panel'`   |
-| `end`    | `end`     | Where to end the panel, inclusive. Must be the opposite axis to the area.   | `"banner" \| "body" \| "cookie" \| "edge" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` |
-| `start`  | `start`   | Where to start the panel, inclusive. Must be the opposite axis to the area. | `"banner" \| "body" \| "cookie" \| "edge" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` |
+| Property | Attribute | Description                                                                 | Type                                                                                                     | Default     |
+| -------- | --------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ----------- |
+| `area`   | `area`    | Where to place the panel.                                                   | `"banner" \| "cookie" \| "header" \| "panel" \| "sidebar" \| "toolbar"`                                  | `'panel'`   |
+| `end`    | `end`     | Where to end the panel, inclusive. Must be the opposite axis to the area.   | `"banner" \| "body" \| "cookie" \| "edge" \| "header" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` |
+| `start`  | `start`   | Where to start the panel, inclusive. Must be the opposite axis to the area. | `"banner" \| "body" \| "cookie" \| "edge" \| "header" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` |
 
 
 ----------------------------------------------

diff --git a/packages/layout/src/components/panel/placement.css b/packages/layout/src/components/panel/placement.css
@@ -10,6 +10,12 @@
     left: 0;
 }
 
+:host([area='header']) {
+    top: 0;
+    right: 0;
+    left: 0;
+}
+
 :host([area='banner']) {
     top: var(--layout-header-height);
     right: 0;
@@ -32,6 +38,10 @@
     Horizontal starts 
     Top to Bottom 
 */
+:host([area='sidebar'][start='header']),
+:host([area='toolbar'][start='header']) {
+    top: 0;
+}
 :host([area='sidebar'][start='banner']),
 :host([area='toolbar'][start='banner']) {
     top: var(--layout-header-height);
@@ -53,6 +63,10 @@
     Horizontal ends 
     Top to Bottom 
 */
+:host([area='sidebar'][end='header']),
+:host([area='toolbar'][end='header']) {
+    bottom: calc(100vh - var(--layout-header-height));
+}
 :host([area='sidebar'][end='banner']),
 :host([area='toolbar'][end='banner']) {
     bottom: calc(
@@ -76,24 +90,25 @@
     Vertical starts 
     Left to right  
 */
+:host([area='header'][start='edge']),
 :host([area='banner'][start='edge']),
 :host([area='panel'][start='edge']),
 :host([area='cookie'][start='edge']) {
     left: 0;
 }
-
+:host([area='header'][start='sidebar']),
 :host([area='banner'][start='sidebar']),
 :host([area='panel'][start='sidebar']),
 :host([area='cookie'][start='sidebar']) {
     left: var(--layout-current-edge);
 }
-
+:host([area='header'][start='body']),
 :host([area='banner'][start='body']),
 :host([area='panel'][start='body']),
 :host([area='cookie'][start='body']) {
     left: calc(var(--layout-current-edge) + var(--layout-sidebar-width));
 }
-
+:host([area='header'][start='toolbar']),
 :host([area='banner'][start='toolbar']),
 :host([area='panel'][start='toolbar']),
 :host([area='cookie'][start='toolbar']) {
@@ -106,23 +121,27 @@
     Vertical ends 
     Left to right  
 */
+:host([area='header'][end='sidebar']),
 :host([area='banner'][end='sidebar']),
 :host([area='panel'][end='sidebar']),
 :host([area='cookie'][end='sidebar']) {
     right: calc(
         100vw - var(--layout-current-edge) - var(--layout-sidebar-width)
     );
 }
+:host([area='header'][end='body']),
 :host([area='banner'][end='body']),
 :host([area='panel'][end='body']),
 :host([area='cookie'][end='body']) {
     right: calc(var(--layout-current-edge) + var(--layout-toolbar-width));
 }
+:host([area='header'][end='toolbar']),
 :host([area='banner'][end='toolbar']),
 :host([area='panel'][end='toolbar']),
 :host([area='cookie'][end='toolbar']) {
     right: var(--layout-current-edge);
 }
+:host([area='header'][end='edge']),
 :host([area='banner'][end='edge']),
 :host([area='panel'][end='edge']),
 :host([area='cookie'][end='edge']) {

diff --git a/packages/layout/src/components/panel/types.ts b/packages/layout/src/components/panel/types.ts
@@ -1,4 +1,5 @@
 export type TargetableArea =
+    | 'header'
     | 'banner'
     | 'sidebar'
     | 'panel'