@countermeasure-platform/web-components 1.3.5 → 1.3.6-dev.37.1

package/src/react/layout/core-app-library-dashboard.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+
+import {
+  mountCoreAppLibraryDashboard,
+  type CoreAppLibraryDashboardData,
+  type CoreAppLibraryDashboardMount,
+  type CoreAppLibraryDashboardMountOptions,
+} from '../../layout/core-app-library-dashboard'
+import { cn } from '../primitives/utils'
+
+export interface CoreAppLibraryDashboardProps {
+  data?: CoreAppLibraryDashboardData
+  className?: string
+  dashboardClassName?: string
+}
+
+export type { CoreAppLibraryDashboardData, CoreAppLibraryDashboardMount }
+
+function CoreAppLibraryDashboard({
+  data,
+  className,
+  dashboardClassName,
+}: CoreAppLibraryDashboardProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const mountRef = React.useRef<CoreAppLibraryDashboardMount | null>(null)
+  const latestDataRef = React.useRef<CoreAppLibraryDashboardData | undefined>(data)
+  latestDataRef.current = data
+
+  React.useEffect(() => {
+    const container = containerRef.current
+    if (container === null) {
+      return
+    }
+
+    const mountOptions: CoreAppLibraryDashboardMountOptions = { container }
+    if (latestDataRef.current !== undefined) mountOptions.data = latestDataRef.current
+    if (dashboardClassName !== undefined) mountOptions.className = dashboardClassName
+
+    mountRef.current = mountCoreAppLibraryDashboard(mountOptions)
+
+    return () => {
+      mountRef.current?.destroy()
+      mountRef.current = null
+    }
+  }, [dashboardClassName])
+
+  React.useEffect(() => {
+    mountRef.current?.update(data ?? {})
+  }, [data])
+
+  return <div ref={containerRef} data-slot="core-app-library-dashboard" className={cn(className)} />
+}
+
+CoreAppLibraryDashboard.displayName = 'CoreAppLibraryDashboard'
+
+export { CoreAppLibraryDashboard }

package/src/react/layout/index.ts

@@ -7,6 +7,12 @@ export {
   type CoreAppSidebarPresetOptions,
   type CoreAppTopbarPresetOptions,
 } from './core-app-chrome'
+export {
+  CoreAppLibraryDashboard,
+  type CoreAppLibraryDashboardData,
+  type CoreAppLibraryDashboardMount,
+  type CoreAppLibraryDashboardProps,
+} from './core-app-library-dashboard'
 export { DetailHeader, type DetailHeaderProps } from './detail-header'
 export { PageHeader, type PageHeaderProps } from './page-header'
 export { SubNav, type SubNavItem, type SubNavProps } from './sub-nav'

package/src/sidebar/component.test.ts

@@ -1,7 +1,10 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { readFileSync } from 'node:fs'
 
 import { SidebarComponent } from './component'
 
+const sidebarCss = readFileSync('src/styles/sidebar.css', 'utf8')
+
 function createContainer(): HTMLElement {
   const container = document.createElement('div')
   container.style.height = '320px'
@@ -20,7 +23,7 @@ describe('SidebarComponent', () => {
     const sidebar = new SidebarComponent({
       container,
       variant: 'product',
-      brand: { label: 'CounterMeasure' },
+      brand: { label: 'CounterMeasure', subtitle: 'Platform', wordmarkCase: 'title' },
       collapsible: true,
       collapseButtonVisible: true,
       sections: [
@@ -44,6 +47,12 @@ describe('SidebarComponent', () => {
     expect(container.querySelector('.sidebar')?.getAttribute('data-sidebar')).toBe('product')
     expect(container.querySelector('.sidebar')?.getAttribute('data-open')).toBe('false')
     expect(container.querySelector('.sidebar__header .cmm-brand-lockup')).toBeTruthy()
+    expect(
+      container.querySelector('.sidebar__header .cmm-brand-lockup__counter')?.textContent
+    ).toBe('Counter')
+    expect(
+      container.querySelector('.sidebar__header .cmm-brand-lockup__subtitle')?.textContent
+    ).toBe('Platform')
     expect(container.querySelector('.sidebar__body .sidebar__section')).toBeTruthy()
     expect(container.querySelector('.sidebar__badge--amber')?.textContent).toBe('3')
     expect(container.querySelector('.sidebar__item')?.getAttribute('data-badge-visible')).toBe(
@@ -97,6 +106,17 @@ describe('SidebarComponent', () => {
     container.remove()
   })
 
+  it('keeps collapsed brand lockups mark-only while restoring full copy on mobile', () => {
+    expect(sidebarCss).toContain('.sidebar--collapsed .cmm-brand-lockup__copy')
+    expect(sidebarCss).toContain('.sidebar--collapsed .cmm-brand-lockup__wordmark')
+    expect(sidebarCss).toMatch(
+      /\.sidebar--collapsed \.cmm-brand-lockup__copy,\s*\.sidebar--collapsed \.cmm-brand-lockup__wordmark\s*{\s*display: none;/s
+    )
+    expect(sidebarCss).toMatch(
+      /\.sidebar--collapsed \.cmm-brand-lockup__copy,\s*\.sidebar--collapsed \.cmm-brand-lockup__wordmark\s*{\s*display: inline-flex;/s
+    )
+  })
+
   it('reflects controlled mobile open state without changing desktop collapse state', () => {
     const container = createContainer()
     const sidebar = new SidebarComponent({

package/src/sidebar/component.ts

@@ -389,14 +389,20 @@ export class SidebarComponent {
       brandEl.addEventListener('click', brand.onClick)
     }
 
-    brandEl.appendChild(
-      createBrandLockupElement({
-        label: brand.label ?? 'CounterMeasure',
-        markSize: brand.markSize ?? 22,
-        showWordmark: brand.showWordmark ?? true,
-        decorative: brand.decorative ?? false,
-      })
-    )
+    const lockupConfig = {
+      label: brand.label ?? 'CounterMeasure',
+      markSize: brand.markSize ?? 22,
+      showWordmark: brand.showWordmark ?? true,
+      decorative: brand.decorative ?? false,
+    }
+    if (brand.subtitle !== undefined) {
+      Object.assign(lockupConfig, { subtitle: brand.subtitle })
+    }
+    if (brand.wordmarkCase !== undefined) {
+      Object.assign(lockupConfig, { wordmarkCase: brand.wordmarkCase })
+    }
+
+    brandEl.appendChild(createBrandLockupElement(lockupConfig))
 
     row.appendChild(brandEl)
     header.appendChild(row)

package/src/sidebar/types.ts

@@ -145,6 +145,13 @@ export interface SidebarFooterAction {
 export interface SidebarBrandConfig {
   /** Accessible brand label. */
   label?: string
+  /** Optional short subtitle rendered beneath the wordmark. */
+  subtitle?: string
+  /**
+   * Wordmark text treatment.
+   * @default 'uppercase'
+   */
+  wordmarkCase?: 'uppercase' | 'title'
   /** Brand mark size. */
   markSize?: BrandSize | number
   /**

package/src/styles/components/brand.css

@@ -104,6 +104,13 @@
   vertical-align: middle;
 }
 
+.cmm-brand-lockup__copy {
+  display: inline-flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.1875rem;
+}
+
 .cmm-brand-lockup__wordmark {
   display: inline-flex;
   align-items: baseline;
@@ -117,6 +124,11 @@
   letter-spacing: 0.08em;
 }
 
+.cmm-brand-lockup--title .cmm-brand-lockup__wordmark {
+  font-size: 0.875rem;
+  letter-spacing: 0;
+}
+
 .cmm-brand-lockup__counter {
   color: currentColor;
 }
@@ -125,6 +137,16 @@
   color: var(--color-orange-500, hsl(var(--primary)));
 }
 
+.cmm-brand-lockup__subtitle {
+  overflow: hidden;
+  color: var(--color-text-dim, hsl(var(--muted-foreground)));
+  font: var(--type-caption, 600 0.625rem/1 var(--font-sans, sans-serif));
+  letter-spacing: 0.16em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
 .cmm-connector-logo {
   --cmm-connector-logo-bg: #475569;