web/elements: P5 Drawer component with all capabilities

web/package.json

@@ -12,8 +12,11 @@
         "extract-locales": "lit-localize extract",
         "format": "wireit",
         "lint": "eslint --fix .",
+        "lint:css": "stylelint ./src/**/*.css",
+        "lint:css-in-js": "stylelint --custom-syntax postcss-lit ./src/**/*.styles.ts",
         "lint:imports": "knip --config scripts/knip.config.ts",
         "lint:lockfile": "wireit",
+        "lint:styles": "run-p lint:css lint:css-in-js",
         "lint:types": "wireit",
         "lint-check": "eslint --max-warnings 0 .",
         "lit-analyse": "wireit",
@@ -167,6 +170,7 @@
         "pino": "^10.3.1",
         "pino-pretty": "^13.1.2",
         "playwright": "^1.58.2",
+        "postcss-lit": "^1.4.1",
         "prettier": "^3.8.2",
         "prettier-plugin-packagejson": "^3.0.2",
         "pseudolocale": "^2.2.0",
@@ -183,6 +187,8 @@
         "remark-mdx-frontmatter": "^5.2.0",
         "storybook": "^10.2.1",
         "style-mod": "^4.1.3",
+        "stylelint": "^17.6.0",
+        "stylelint-config-standard": "^40.0.0",
         "trusted-types": "^2.0.0",
         "ts-pattern": "^5.9.0",
         "turnstile-types": "^1.2.3",

web/src/elements/ak-drawer/ak-drawer.component.ts

@@ -1,37 +1,100 @@
-import Style from "./ak-drawer.css";
+import AKDrawer from "./ak-drawer.styles";
+import { DrawerResizeController } from "./drawerResizeController";
 
-import { AKElement } from "#elements/Base";
-import { classList } from "#elements/directives/class-list";
-
-import { html } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { property } from "lit/decorators.js";
 
-import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
+export class DrawerExpandRequest extends Event {
+    static readonly eventName = "ak-drawer-expand-request";
+    expanded: boolean | null = null;
+
+    constructor(expanded: boolean | null = null) {
+        super(DrawerExpandRequest.eventName, { bubbles: true, composed: true });
+        this.expanded = expanded;
+    }
+}
+
+export class AkDrawer extends LitElement {
+    static readonly styles = [AKDrawer];
 
-export class Drawer extends AKElement {
-    static readonly styles = [PFDrawer, Style];
+    @property({ type: Boolean })
+    public resizable = false;
 
     @property({ type: Boolean, reflect: true })
-    public open = false;
+    public expanded = false;
+
+    @property({ type: Boolean, reflect: true })
+    public resizing = false;
+
+    @property({ type: String, reflect: true })
+    public width = "33";
+
+    private resize = new DrawerResizeController(this);
 
-    render() {
-        const open = [(this.open && "pf-m-expanded") || "pf-m-collapsed"];
+    onDrawerRequest = (ev: DrawerExpandRequest) => {
+        ev.stopPropagation();
+        this.expanded = ev.expanded === null ? !this.expanded : ev.expanded;
+    };
 
+    constructor() {
+        super();
+        this.addEventListener(DrawerExpandRequest.eventName, this.onDrawerRequest);
+    }
+
+    public override render() {
         return html`
-            <div class="pf-c-page__drawer">
-                <div class="pf-c-drawer ${classList(open)}" id="flow-drawer">
-                    <div class="pf-c-drawer__main">
-                        <div class="pf-c-drawer__content">
-                            <div class="pf-c-drawer__body">
-                                <slot></slot>
-                            </div>
+            <div class="ak-v2-c-drawer" part="drawer">
+                <div class="ak-v2-c-drawer__main" part="drawer-main">
+                    <div class="ak-v2-c-drawer__content" part="drawer-content">
+                        <div class="ak-v2-c-drawer__body" part="drawer-body">
+                            <slot></slot>
                         </div>
-                        <div class="pf-c-drawer__panel pf-m-width-33">
+                    </div>
+                    <div class="ak-v2-c-drawer__panel" part="drawer-panel">
+                        ${this.resizable
+                            ? html` <div
+                                  class="ak-v2-c-drawer__splitter"
+                                  part="drawer-splitter"
+                                  @mousedown=${this.resize.handleMouseDown}
+                                  @keydown=${this.resize.handleKeyDown}
+                                  @touchstart=${this.resize.handleTouchStart}
+                                  role="separator"
+                                  tabindex="0"
+                              >
+                                  <div
+                                      class="ak-v2-c-drawer__splitter-handle"
+                                      aria-hidden="true"
+                                  ></div>
+                              </div>`
+                            : nothing}
+                        <div class="ak-v2-c-drawer__panel-main" part="drawer-panel-main">
                             <slot name="panel"></slot>
                         </div>
                     </div>
                 </div>
             </div>
         `;
     }
+
+    public override updated(changed: PropertyValues<this>) {
+        super.updated(changed);
+
+        // Simulate the behavior of summary/details, another disclosure pattern.
+        const expanded = changed.get("expanded");
+        if (expanded !== undefined) {
+            const expandedMsg = (i: boolean) => (i ? "open" : "closed");
+            this.dispatchEvent(
+                new ToggleEvent("toggle", {
+                    newState: expandedMsg(this.expanded),
+                    oldState: expandedMsg(expanded),
+                }),
+            );
+        }
+    }
+}
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        [DrawerExpandRequest.eventName]: DrawerExpandRequest;
+    }
 }

web/src/elements/ak-drawer/ak-drawer.root.css

@@ -0,0 +1,141 @@
+/* ----------- CSS Custom Properties for DRAWER  --------------------------- */
+
+:root {
+    --ak-v2-c-drawer__content--FlexBasis: 100%;
+    --ak-v2-c-drawer__content--BackgroundColor: var(--ak-v2-global--ContentSurface);
+    --ak-v2-c-drawer__content--ZIndex: var(--ak-v2-global--ZIndex--xs, auto);
+    --ak-v2-c-drawer__panel--MinWidth: 50%;
+    --ak-v2-c-drawer__panel--MaxHeight: auto;
+    --ak-v2-c-drawer__panel--ZIndex: var(--ak-v2-global--ZIndex--sm);
+    --ak-v2-c-drawer__panel--BackgroundColor: var(--ak-v2-global--ContentSurface);
+    --ak-v2-c-drawer__panel--TransitionDuration: var(--ak-v2-global--TransitionDuration);
+    --ak-v2-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
+    --ak-v2-c-drawer__panel--FlexBasis: 100%;
+    --ak-v2-c-drawer__panel--md--FlexBasis--min: 1.5rem;
+    --ak-v2-c-drawer__panel--md--FlexBasis: 50%;
+    --ak-v2-c-drawer__panel--md--FlexBasis--max: 100%;
+    --ak-v2-c-drawer__panel--xl--MinWidth: 28.125rem;
+    --ak-v2-c-drawer__panel--xl--FlexBasis: 28.125rem;
+    --ak-v2-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
+    --ak-v2-c-drawer--m-panel-bottom__panel--xl--MinHeight: 18.75rem;
+    --ak-v2-c-drawer--m-panel-bottom__panel--xl--FlexBasis: 18.75rem;
+    --ak-v2-c-drawer__panel--m-resizable--FlexDirection: row;
+    --ak-v2-c-drawer__panel--m-resizable--md--FlexBasis--min: var(
+        --ak-v2-c-drawer__splitter--m-vertical--Width
+    );
+    --ak-v2-c-drawer__panel--m-resizable--MinWidth: 1.5rem;
+    --ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
+    --ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
+    --ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
+    --ak-v2-c-drawer__splitter--Height: 0.5625rem;
+    --ak-v2-c-drawer__splitter--Width: 100%;
+    --ak-v2-c-drawer__splitter--BackgroundColor: var(--ak-v2-global--ContentSurface);
+    --ak-v2-c-drawer__splitter--Cursor: row-resize;
+    --ak-v2-c-drawer__splitter--m-vertical--Height: 100%;
+    --ak-v2-c-drawer__splitter--m-vertical--Width: 0.5625rem;
+    --ak-v2-c-drawer__splitter--m-vertical--Cursor: col-resize;
+    --ak-v2-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
+    --ak-v2-c-drawer__splitter--after--BorderColor: var(--ak-v2-global--BorderColor--100);
+    --ak-v2-c-drawer__splitter--after--border-width--base: var(--ak-v2-global--BorderWidth--sm);
+    --ak-v2-c-drawer__splitter--after--BorderTopWidth: 0;
+    --ak-v2-c-drawer__splitter--after--BorderRightWidth: var(
+        --ak-v2-c-drawer__splitter--after--border-width--base
+    );
+    --ak-v2-c-drawer__splitter--after--BorderBottomWidth: 0;
+    --ak-v2-c-drawer__splitter--after--BorderLeftWidth: 0;
+    --ak-v2-c-drawer--m-panel-left__splitter--after--BorderLeftWidth: var(
+        --ak-v2-c-drawer__splitter--after--border-width--base
+    );
+    --ak-v2-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth: var(
+        --ak-v2-c-drawer__splitter--after--border-width--base
+    );
+    --ak-v2-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
+    --ak-v2-c-drawer--m-inline__splitter-handle--Left: 50%;
+    --ak-v2-c-drawer--m-inline__splitter--after--BorderRightWidth: var(
+        --ak-v2-c-drawer__splitter--after--border-width--base
+    );
+    --ak-v2-c-drawer--m-inline__splitter--after--BorderLeftWidth: var(
+        --ak-v2-c-drawer__splitter--after--border-width--base
+    );
+    --ak-v2-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
+    --ak-v2-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top: 50%;
+    --ak-v2-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth: var(
+        --ak-v2-c-drawer__splitter--after--border-width--base
+    );
+    --ak-v2-c-drawer__splitter-handle--Top: 50%;
+    --ak-v2-c-drawer__splitter-handle--Left: calc(
+        50% - var(--ak-v2-c-drawer__splitter--after--border-width--base)
+    );
+    --ak-v2-c-drawer--m-panel-left__splitter-handle--Left: 50%;
+    --ak-v2-c-drawer--m-panel-bottom__splitter-handle--Top: calc(
+        50% - var(--ak-v2-c-drawer__splitter--after--border-width--base)
+    );
+    --ak-v2-c-drawer__splitter-handle--after--BorderColor: var(--ak-v2-global--Color--200);
+    --ak-v2-c-drawer__splitter-handle--after--BorderTopWidth: var(--ak-v2-global--BorderWidth--sm);
+    --ak-v2-c-drawer__splitter-handle--after--BorderRightWidth: 0;
+    --ak-v2-c-drawer__splitter-handle--after--BorderBottomWidth: var(
+        --ak-v2-global--BorderWidth--sm
+    );
+    --ak-v2-c-drawer__splitter-handle--after--BorderLeftWidth: 0;
+    --ak-v2-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(
+        --ak-v2-global--Color--100
+    );
+    --ak-v2-c-drawer__splitter--focus__splitter-handle--after--BorderColor: var(
+        --ak-v2-global--Color--100
+    );
+    --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth: 0;
+    --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(
+        --ak-v2-global--BorderWidth--sm
+    );
+    --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth: 0;
+    --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(
+        --ak-v2-global--BorderWidth--sm
+    );
+    --ak-v2-c-drawer__splitter-handle--after--Width: 0.75rem;
+    --ak-v2-c-drawer__splitter-handle--after--Height: 0.25rem;
+    --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
+    --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
+}
+
+@media screen and (min-width: 1200px) {
+    :root {
+        --ak-v2-c-drawer__panel--MinWidth: var(--ak-v2-c-drawer__panel--xl--MinWidth);
+    }
+}
+
+:root {
+    --ak-v2-c-drawer__panel--BoxShadow: none;
+    --ak-v2-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(
+        --ak-v2-global--BoxShadow--lg-top
+    );
+    --ak-v2-c-drawer--m-expanded__panel--BoxShadow: var(--ak-v2-global--BoxShadow--lg-left);
+}
+
+:root {
+    --ak-v2-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(
+        --ak-v2-global--BoxShadow--lg-right
+    );
+}
+
+:root {
+    --ak-v2-c-drawer__panel--after--Width: var(--ak-v2-global--BorderWidth--sm);
+    --ak-v2-c-drawer--m-panel-bottom__panel--after--Height: var(--ak-v2-global--BorderWidth--sm);
+    --ak-v2-c-drawer__panel--after--BackgroundColor: transparent;
+    --ak-v2-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(
+        --ak-v2-global--BorderColor--100
+    );
+    --ak-v2-c-drawer--m-inline__panel--PaddingLeft: var(--ak-v2-c-drawer__panel--after--Width);
+    --ak-v2-c-drawer--m-panel-left--m-inline__panel--PaddingRight: var(
+        --ak-v2-c-drawer__panel--after--Width
+    );
+    --ak-v2-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop: var(
+        --ak-v2-c-drawer__panel--after--Width
+    );
+}
+
+html[data-theme="dark"],
+.ak-t-dark,
+.pf-t-dark {
+    --ak-v2-c-drawer__panel--BackgroundColor: var(--ak-v2-global--ContentSurface);
+    --ak-v2-c-drawer__splitter--BackgroundColor: transparent;
+}