@umituz/web-dashboard 4.6.4 → 4.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "4.6.4",
+  "version": "4.6.5",
   "description": "Installable app skeleton for the fleet — layouts, auth, onboarding, analytics (dependency-free SVG charts), calendar, i18n injection, permissions/session/module registry; ships its own udb-* stylesheet and --u-* tokens",
   "type": "module",
   "main": "./src/index.ts",

package/src/domains/layouts/components/PageHeader.test.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { renderToString } from 'react-dom/server';
+import { PageHeader } from './PageHeader';
+
+describe('PageHeader markup smoke', () => {
+  it('renders kicker before title and omits it when undefined', () => {
+    const html = renderToString(
+      <PageHeader kicker="Customer area" title="Policies" subtitle="Your coverage at a glance" />,
+    );
+    const kickerAt = html.indexOf('udb-pageheader__kicker');
+    const titleAt = html.indexOf('udb-pageheader__title');
+    expect(kickerAt).toBeGreaterThan(-1);
+    expect(kickerAt).toBeLessThan(titleAt);
+    expect(html).toContain('Customer area');
+
+    const bare = renderToString(<PageHeader title="Policies" />);
+    expect(bare).not.toContain('udb-pageheader__kicker');
+  });
+
+  it('renders actions and breadcrumb nodes in their slots', () => {
+    const html = renderToString(
+      <PageHeader
+        title="Claims"
+        breadcrumbs={<a href="/policies">Policies</a>}
+        actions={<button type="button">New claim</button>}
+      />,
+    );
+    expect(html).toContain('udb-pageheader__breadcrumbs');
+    expect(html).toContain('udb-pageheader__actions');
+    expect(html).toContain('New claim');
+  });
+});

package/src/domains/layouts/components/PageHeader.tsx

@@ -6,6 +6,7 @@ export interface PageHeaderCrumb {
 }
 
 export interface PageHeaderProps {
+  kicker?: ReactNode;
   title?: ReactNode;
   subtitle?: ReactNode;
   description?: ReactNode;
@@ -17,7 +18,7 @@ export interface PageHeaderProps {
 const isCrumbList = (value: ReactNode | readonly PageHeaderCrumb[]): value is readonly PageHeaderCrumb[] =>
   Array.isArray(value) && value.every((item) => typeof item === "object" && item !== null && "label" in item);
 
-export const PageHeader = ({ title, subtitle, description, breadcrumbs, actions, className }: PageHeaderProps) => {
+export const PageHeader = ({ kicker, title, subtitle, description, breadcrumbs, actions, className }: PageHeaderProps) => {
   const crumbNode =
     breadcrumbs === undefined
       ? undefined
@@ -32,6 +33,7 @@ export const PageHeader = ({ title, subtitle, description, breadcrumbs, actions,
     <div className={`udb-pageheader${className ? ` ${className}` : ""}`}>
       {crumbNode !== undefined && <div className="udb-pageheader__breadcrumbs">{crumbNode}</div>}
       <div className="udb-pageheader__main">
+        {kicker !== undefined && <p className="udb-pageheader__kicker">{kicker}</p>}
         {title !== undefined && <h1 className="udb-pageheader__title">{title}</h1>}
         {(subtitle ?? description) !== undefined && (
           <p className="udb-pageheader__subtitle">{subtitle ?? description}</p>

package/src/styles/dashboard.css

@@ -3196,6 +3196,15 @@
   min-width: 0;
 }
 
+.udb-pageheader__kicker {
+  margin: 0 0 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-muted-foreground);
+}
+
 .udb-pageheader__title {
   margin: 0;
   font-size: 1.375rem;