@moving-walls/design-system 1.0.11 → 1.0.12

package/dist/components/ui/PageHeader.d.ts

@@ -1,10 +1,20 @@
 import React from 'react';
 export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
+    /** Description shown below the title */
+    description?: string;
+    /** Alias for description (backward compat) */
     subtitle?: string;
+    /** i18n key for the title (consumer passes pre-translated string as title) */
+    titleKey?: string;
+    /** i18n key for the description */
+    descriptionKey?: string;
+    /** Element rendered to the left of the title (e.g. a back button) */
+    leftAction?: React.ReactNode;
+    /** Action buttons rendered on the right side */
     actions?: React.ReactNode;
 }
-export declare function PageHeader({ title, subtitle, actions, className, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageHeader({ title, description, subtitle, titleKey: _titleKey, descriptionKey: _descriptionKey, leftAction, actions, className, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace PageHeader {
     var displayName: string;
 }

package/dist/index.esm.js

@@ -49183,28 +49183,52 @@ var AgGridTable = AgGridTableInner;
 
 function PageHeader(_a) {
   var title = _a.title,
-    subtitle = _a.subtitle,
+    description = _a.description,
+    subtitle = _a.subtitle;
+    _a.titleKey;
+    _a.descriptionKey;
+    var leftAction = _a.leftAction,
     actions = _a.actions,
     className = _a.className,
-    props = __rest$1(_a, ["title", "subtitle", "actions", "className"]);
+    props = __rest$1(_a, ["title", "description", "subtitle", "titleKey", "descriptionKey", "leftAction", "actions", "className"]);
+  var desc = description !== null && description !== void 0 ? description : subtitle;
+  var headerId = "page-header-".concat(title.toLowerCase().trim().split(/\s+/).join('-'));
+  var baseClass = 'bg-white flex flex-col justify-start items-start gap-4 border-b border-container-border pt-4 pb-3 dark:bg-mw-neutral-900 dark:border-mw-neutral-800';
+  var combinedClass = className ? "".concat(baseClass, " ").concat(className) : baseClass;
   return jsx("div", Object.assign({
-    className: clsx('pb-4 mb-6 border-b border-mw-neutral-200 dark:border-mw-neutral-700', className)
+    id: headerId,
+    className: combinedClass
   }, props, {
     children: jsxs("div", {
-      className: "flex flex-row items-center justify-between px-6",
+      className: "self-stretch px-4 inline-flex justify-start items-start",
       children: [jsxs("div", {
-        className: "space-y-1",
-        children: [jsx("h1", {
-          className: "text-xl font-semibold leading-[2rem] tracking-tight text-mw-neutral-900 dark:text-white",
-          children: title
-        }), subtitle && (/* Figma: 14px font, 400 weight, 18px line-height, #717171 */
-        jsx("p", {
-          className: "text-sm leading-[1.125rem] text-mw-neutral-500 dark:text-mw-neutral-400",
-          children: subtitle
-        }))]
-      }), actions && jsx("div", {
-        className: "flex flex-wrap items-center gap-2",
-        children: actions
+        className: "pt-2 flex justify-start items-start gap-2",
+        children: [leftAction && jsx("div", {
+          id: "".concat(headerId, "-left-action"),
+          className: "p-2 flex justify-center items-center gap-1",
+          children: jsx("div", {
+            className: "relative overflow-hidden",
+            children: leftAction
+          })
+        }), jsxs("div", {
+          className: "self-stretch inline-flex flex-col justify-start items-start gap-1",
+          children: [jsx("div", {
+            id: "".concat(headerId, "-title"),
+            className: "self-stretch justify-start text-xl font-semibold leading-loose text-mw-neutral-900 dark:text-white",
+            children: title
+          }), desc && jsx("div", {
+            id: "".concat(headerId, "-description"),
+            className: "self-stretch justify-start text-neutral-500 text-sm font-normal leading-none dark:text-mw-neutral-400",
+            children: desc
+          })]
+        })]
+      }), jsx("div", {
+        id: "".concat(headerId, "-actions"),
+        className: "flex-1 self-stretch flex justify-end items-end gap-2",
+        children: actions && jsx("div", {
+          className: "flex items-center gap-4",
+          children: actions
+        })
       })]
     })
   }));