@countermeasure-platform/web-components 1.2.1 → 1.2.2-dev.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@countermeasure-platform/web-components",
-  "version": "1.2.1",
+  "version": "1.2.2-dev.8.1",
   "description": "Shared web components for CounterMeasure applications - consolidates common frontend functionality across projects.",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/brand/index.ts

@@ -4,6 +4,7 @@
  */
 
 import {
+  type BrandLockupConfig,
   type BrandSize,
   type ConnectorLogoConfig,
   type ConnectorLogoSize,
@@ -14,6 +15,7 @@ import { resolveContainer, uniqueId } from '../../primitives/utils'
 
 export type {
   BrandSize,
+  BrandLockupConfig,
   ConnectorLogoConfig,
   ConnectorLogoSize,
   DiamondConfig,
@@ -132,6 +134,23 @@ export class Wordmark {
   }
 }
 
+export class BrandLockup {
+  public readonly el: HTMLSpanElement
+
+  constructor(config: BrandLockupConfig = {}) {
+    this.el = createBrandLockupElement(config)
+
+    if (config.container !== undefined) {
+      const parent = resolveContainer(config.container)
+      parent.appendChild(this.el)
+    }
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
 export class ConnectorLogo {
   public readonly el: HTMLSpanElement
 
@@ -230,6 +249,40 @@ export function createWordmarkSvg(config: WordmarkConfig = {}): SVGSVGElement {
   return svg
 }
 
+export function createBrandLockupElement(config: BrandLockupConfig = {}): HTMLSpanElement {
+  const el = document.createElement('span')
+  el.id = uniqueId('cmm-brand-lockup')
+  el.className = buildBrandLockupClassName(config)
+
+  if (config.decorative === true) {
+    el.setAttribute('aria-hidden', 'true')
+  } else {
+    el.setAttribute('role', 'img')
+    el.setAttribute('aria-label', config.label ?? 'CounterMeasure')
+  }
+
+  el.appendChild(createDiamondSvg({ size: config.markSize ?? 22, decorative: true }))
+
+  if (config.showWordmark !== false) {
+    const wordmark = document.createElement('span')
+    wordmark.className = 'cmm-brand-lockup__wordmark'
+    wordmark.setAttribute('aria-hidden', 'true')
+
+    const counter = document.createElement('span')
+    counter.className = 'cmm-brand-lockup__counter'
+    counter.textContent = 'COUNTER'
+
+    const measure = document.createElement('span')
+    measure.className = 'cmm-brand-lockup__measure'
+    measure.textContent = 'MEASURE'
+
+    wordmark.append(counter, measure)
+    el.appendChild(wordmark)
+  }
+
+  return el
+}
+
 export function getConnectorLogoColor(name: string): string {
   const paletteKey = getConnectorPaletteKey(name)
   return CONNECTOR_LOGO_PALETTE[paletteKey]
@@ -268,6 +321,16 @@ function buildWordmarkClassName(config: WordmarkConfig): string {
   return classes.join(' ')
 }
 
+function buildBrandLockupClassName(config: BrandLockupConfig): string {
+  const classes = ['cmm-brand-lockup']
+
+  if (config.className) {
+    classes.push(config.className)
+  }
+
+  return classes.join(' ')
+}
+
 function buildConnectorLogoClassName(config: ConnectorLogoConfig): string {
   const classes = [
     'cmm-connector-logo',

package/src/components/brand/types.ts

@@ -25,6 +25,15 @@ export interface WordmarkConfig {
   className?: string
 }
 
+export interface BrandLockupConfig {
+  container?: HTMLElement | string
+  markSize?: BrandSize | number
+  label?: string
+  decorative?: boolean
+  showWordmark?: boolean
+  className?: string
+}
+
 export interface ConnectorLogoConfig {
   container?: HTMLElement | string
   name: string

package/src/components/theme/theme-studio-review.test.ts

@@ -154,6 +154,40 @@ describe('IconGalleryBrowser accessibility', () => {
 
     picker.destroy()
   })
+
+  it.each([
+    { iconSet: 'lucide', strokeWidth: '2', linecap: 'round', linejoin: 'round', heading: /All Icons — Lucide style/ },
+    { iconSet: 'heroicons', strokeWidth: '2.4', linecap: 'round', linejoin: 'round', heading: /All Icons — Heroicons style/ },
+    { iconSet: 'phosphor', strokeWidth: '1.5', linecap: 'round', linejoin: 'round', heading: /All Icons — Phosphor style/ },
+    { iconSet: 'material', strokeWidth: '2', linecap: 'square', linejoin: 'miter', heading: /All Icons — Material style/ },
+    {
+      iconSet: 'countermeasure',
+      strokeWidth: '1.75',
+      linecap: 'round',
+      linejoin: 'round',
+      heading: /CounterMeasure Brand Icons/,
+    },
+  ] as const)(
+    'applies the $iconSet stroke and linecap to gallery cells',
+    ({ iconSet, strokeWidth, linecap, linejoin, heading }) => {
+      const picker = new IconGalleryBrowser()
+      document.body.appendChild(picker.el)
+
+      setThemePartial({ iconSet })
+      requireButton(picker.el, '.theme-studio-icon-gallery__toggle').click()
+
+      const heading_el = requireElement(picker.el, '.theme-studio-icon-gallery__heading')
+      expect(heading_el.textContent ?? '').toMatch(heading)
+
+      const svg = picker.el.querySelector('.theme-studio-icon-gallery__cell svg')
+      expect(svg).toBeTruthy()
+      expect(svg?.getAttribute('stroke-width')).toBe(strokeWidth)
+      expect(svg?.getAttribute('stroke-linecap')).toBe(linecap)
+      expect(svg?.getAttribute('stroke-linejoin')).toBe(linejoin)
+
+      picker.destroy()
+    }
+  )
 })
 
 describe('IconSetPicker event listener cleanup', () => {

package/src/icons/lucide.ts

@@ -1,6 +1,5 @@
 /**
- * Canonical Lucide path data from
- * `CounterMeasure Design System/assets/lucide-icons.json`.
+ * Canonical Lucide path data bundled with the package.
  */
 
 export const LUCIDE_ICON_PATHS = {

package/src/react/brand/index.test.tsx

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+
+import { BrandLockup, CounterMeasureBrandLockup } from './index'
+
+describe('React brand lockup', () => {
+  it('renders the shared CounterMeasure lockup with split brand text', () => {
+    const { container } = render(<BrandLockup />)
+    const lockup = container.querySelector('.cmm-brand-lockup')
+
+    expect(lockup).toBeTruthy()
+    expect(lockup?.getAttribute('role')).toBe('img')
+    expect(lockup?.getAttribute('aria-label')).toBe('CounterMeasure')
+    expect(lockup?.querySelector('.cmm-diamond')).toBeTruthy()
+    expect(lockup?.textContent).toBe('COUNTERMEASURE')
+    expect(lockup?.querySelector('.cmm-brand-lockup__counter')?.textContent).toBe('COUNTER')
+    expect(lockup?.querySelector('.cmm-brand-lockup__measure')?.textContent).toBe('MEASURE')
+  })
+
+  it('can render mark-only for collapsed sidebars', () => {
+    const { container } = render(<CounterMeasureBrandLockup showWordmark={false} decorative />)
+    const lockup = container.querySelector('.cmm-brand-lockup')
+
+    expect(lockup?.getAttribute('aria-hidden')).toBe('true')
+    expect(lockup?.querySelector('.cmm-diamond')).toBeTruthy()
+    expect(lockup?.querySelector('.cmm-brand-lockup__wordmark')).toBeNull()
+  })
+})

package/src/react/brand/index.tsx

@@ -13,6 +13,7 @@ import {
   getConnectorLogoSizeClass,
   getConnectorLogoTone,
   type BrandSize,
+  type BrandLockupConfig,
   type ConnectorLogoSize,
   type WordmarkVariant,
 } from '../../components/brand'
@@ -159,6 +160,38 @@ export function Wordmark({
   )
 }
 
+export interface BrandLockupProps extends React.HTMLAttributes<HTMLSpanElement> {
+  markSize?: BrandSize | number
+  label?: string
+  decorative?: boolean
+  showWordmark?: boolean
+}
+
+export function BrandLockup({
+  className,
+  markSize = 22,
+  label = 'CounterMeasure',
+  decorative = false,
+  showWordmark = true,
+  ...props
+}: BrandLockupProps) {
+  const accessibilityProps = decorative
+    ? { 'aria-hidden': true }
+    : { role: 'img', 'aria-label': label }
+
+  return (
+    <span className={cn('cmm-brand-lockup', className)} {...accessibilityProps} {...props}>
+      <Diamond size={markSize} decorative />
+      {showWordmark ? (
+        <span className="cmm-brand-lockup__wordmark" aria-hidden="true">
+          <span className="cmm-brand-lockup__counter">COUNTER</span>
+          <span className="cmm-brand-lockup__measure">MEASURE</span>
+        </span>
+      ) : null}
+    </span>
+  )
+}
+
 export interface ConnectorLogoProps extends React.HTMLAttributes<HTMLSpanElement> {
   name: string
   src?: string
@@ -211,8 +244,13 @@ export type CountermeasureLogoProps = DiamondProps
 export type CounterMeasureLogoProps = DiamondProps
 export type CountermeasureWordmarkProps = WordmarkProps
 export type CounterMeasureWordmarkProps = WordmarkProps
+export type CountermeasureBrandLockupProps = BrandLockupProps
+export type CounterMeasureBrandLockupProps = BrandLockupProps
+export type { BrandLockupConfig }
 
 export const CountermeasureLogo = Diamond
 export const CounterMeasureLogo = Diamond
 export const CountermeasureWordmark = Wordmark
 export const CounterMeasureWordmark = Wordmark
+export const CountermeasureBrandLockup = BrandLockup
+export const CounterMeasureBrandLockup = BrandLockup

package/src/react/sidebar.test.tsx

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+
+import { SidebarCollapseButton } from './sidebar'
+
+describe('SidebarCollapseButton', () => {
+  it('renders the shared edge-docked collapse control', () => {
+    const { container } = render(<SidebarCollapseButton edge />)
+    const button = container.querySelector('button')
+
+    expect(button).toBeTruthy()
+    expect(button?.getAttribute('aria-label')).toBe('Collapse sidebar')
+    expect(button?.getAttribute('aria-expanded')).toBe('true')
+    expect(button?.getAttribute('title')).toBe('Collapse sidebar')
+    expect(button?.classList.contains('sidebar__collapse-btn')).toBe(true)
+    expect(button?.classList.contains('sidebar__collapse-btn--edge')).toBe(true)
+    expect(button?.querySelector('path')?.getAttribute('d')).toBe('m15 18-6-6 6-6')
+  })
+
+  it('switches affordance metadata for collapsed sidebars', () => {
+    const { container } = render(<SidebarCollapseButton collapsed edge visible />)
+    const button = container.querySelector('button')
+
+    expect(button?.getAttribute('aria-label')).toBe('Expand sidebar')
+    expect(button?.getAttribute('aria-expanded')).toBe('false')
+    expect(button?.getAttribute('data-collapsed')).toBe('true')
+    expect(button?.getAttribute('data-visible')).toBe('true')
+    expect(button?.querySelector('path')?.getAttribute('d')).toBe('m9 18 6-6-6-6')
+  })
+})

package/src/react/sidebar.tsx

@@ -35,6 +35,14 @@ export interface SidebarProps extends Omit<
 
 export type { SidebarNavItem, SidebarSection, SidebarUser, SidebarFooterAction }
 
+export interface SidebarCollapseButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  collapsed?: boolean
+  edge?: boolean
+  visible?: boolean
+  label?: string
+}
+
 function Sidebar({ activeItemId, onNavigate, onCollapse, className, ...config }: SidebarProps) {
   const containerRef = React.useRef<HTMLDivElement>(null)
   const sidebarRef = React.useRef<SidebarComponent | null>(null)
@@ -73,4 +81,47 @@ function Sidebar({ activeItemId, onNavigate, onCollapse, className, ...config }:
 
 Sidebar.displayName = 'Sidebar'
 
-export { Sidebar }
+function SidebarCollapseButton({
+  collapsed = false,
+  edge = false,
+  visible = false,
+  label,
+  className,
+  type = 'button',
+  children,
+  ...props
+}: SidebarCollapseButtonProps) {
+  const resolvedLabel = label ?? (collapsed ? 'Expand sidebar' : 'Collapse sidebar')
+  const path = collapsed ? 'm9 18 6-6-6-6' : 'm15 18-6-6 6-6'
+
+  return (
+    <button
+      type={type}
+      className={cn('sidebar__collapse-btn', edge && 'sidebar__collapse-btn--edge', className)}
+      aria-label={resolvedLabel}
+      aria-expanded={!collapsed}
+      title={resolvedLabel}
+      data-collapsed={collapsed ? 'true' : 'false'}
+      data-visible={visible ? 'true' : undefined}
+      {...props}
+    >
+      {children ?? (
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d={path} />
+        </svg>
+      )}
+    </button>
+  )
+}
+
+SidebarCollapseButton.displayName = 'SidebarCollapseButton'
+
+export { Sidebar, SidebarCollapseButton }

package/src/sidebar/component.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { SidebarComponent } from './component'
+
+function createContainer(): HTMLElement {
+  const container = document.createElement('div')
+  container.style.height = '320px'
+  document.body.appendChild(container)
+  return container
+}
+
+describe('SidebarComponent', () => {
+  it('renders brand header, scroll body, and edge collapse control when configured', () => {
+    const container = createContainer()
+    const sidebar = new SidebarComponent({
+      container,
+      variant: 'product',
+      brand: { label: 'CounterMeasure' },
+      collapsible: true,
+      collapseButtonVisible: true,
+      sections: [
+        {
+          id: 'main',
+          label: 'Main',
+          items: [
+            { id: 'dashboard', label: 'Dashboard', icon: 'dashboard', badge: 3, badgeTone: 'amber' },
+          ],
+        },
+      ],
+    })
+
+    expect(container.querySelector('.sidebar')?.classList.contains('sidebar--product')).toBe(true)
+    expect(container.querySelector('.sidebar')?.getAttribute('data-sidebar')).toBe('product')
+    expect(container.querySelector('.sidebar__header .cmm-brand-lockup')).toBeTruthy()
+    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('true')
+    expect(container.querySelector('.sidebar__item')?.getAttribute('data-badge-tone')).toBe('amber')
+
+    const collapseButton = container.querySelector<HTMLButtonElement>('.sidebar__collapse-btn--edge')
+    expect(collapseButton).toBeTruthy()
+    expect(collapseButton?.getAttribute('aria-label')).toBe('Collapse sidebar')
+    expect(collapseButton?.getAttribute('aria-expanded')).toBe('true')
+    expect(collapseButton?.getAttribute('data-visible')).toBe('true')
+
+    sidebar.destroy()
+    container.remove()
+  })
+
+  it('updates collapse control state and emits collapse callbacks', () => {
+    const container = createContainer()
+    const onCollapse = vi.fn()
+    const sidebar = new SidebarComponent({
+      container,
+      collapsible: true,
+      sections: [
+        {
+          id: 'main',
+          items: [{ id: 'dashboard', label: 'Dashboard' }],
+        },
+      ],
+      onCollapse,
+    })
+
+    const collapseButton = container.querySelector<HTMLButtonElement>('.sidebar__collapse-btn--edge')
+    collapseButton?.click()
+
+    expect(container.querySelector('.sidebar')?.classList.contains('sidebar--collapsed')).toBe(true)
+    expect(collapseButton?.getAttribute('aria-label')).toBe('Expand sidebar')
+    expect(collapseButton?.getAttribute('aria-expanded')).toBe('false')
+    expect(onCollapse).toHaveBeenCalledWith(true)
+
+    sidebar.expand()
+    expect(collapseButton?.getAttribute('aria-label')).toBe('Collapse sidebar')
+    expect(collapseButton?.getAttribute('aria-expanded')).toBe('true')
+    expect(onCollapse).toHaveBeenLastCalledWith(false)
+
+    sidebar.destroy()
+    container.remove()
+  })
+
+  it('updates compact badge-dot visibility state when badge counts change', () => {
+    const container = createContainer()
+    const sidebar = new SidebarComponent({
+      container,
+      sections: [
+        {
+          id: 'main',
+          items: [{ id: 'alerts', label: 'Alerts', badge: 5, badgeTone: 'rose' }],
+        },
+      ],
+    })
+
+    const item = container.querySelector<HTMLElement>('[data-item-id="alerts"]')
+    expect(item?.getAttribute('data-badge-visible')).toBe('true')
+    expect(item?.getAttribute('data-badge-tone')).toBe('rose')
+
+    sidebar.updateBadge('alerts', 0)
+    expect(item?.getAttribute('data-badge-visible')).toBe('false')
+    expect(container.querySelector('[data-badge="alerts"]')?.textContent).toBe('')
+
+    sidebar.updateBadge('alerts', 9)
+    expect(item?.getAttribute('data-badge-visible')).toBe('true')
+    expect(container.querySelector('[data-badge="alerts"]')?.textContent).toBe('9')
+
+    sidebar.destroy()
+    container.remove()
+  })
+})