@invisibleloop/pulse 0.12.2 → 0.14.1

package/src/ui/top-strip.js

@@ -0,0 +1,47 @@
+/**
+ * Pulse UI — TopStrip
+ *
+ * A slim utility bar that sits above the nav — phone numbers, trading hours,
+ * social links, or any short announcements. Distinct from banner() which is
+ * for promotional/dismissible messages.
+ *
+ * Two layout modes:
+ *   - left + right slots: `topStrip({ left: '...', right: '...' })`
+ *   - single content: `topStrip({ content: '...' })`
+ *
+ * @param {object}  opts
+ * @param {string}  opts.content    - Single centred content (overrides left/right)
+ * @param {string}  opts.left       - Left-aligned slot
+ * @param {string}  opts.right      - Right-aligned slot
+ * @param {string}  opts.background - CSS background value
+ * @param {string}  opts.color      - Foreground/text colour
+ * @param {string}  opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+export function topStrip({
+  content    = '',
+  left       = '',
+  right      = '',
+  background = '',
+  color      = '',
+  class: cls = '',
+} = {}) {
+  const classes = ['ui-top-strip', cls].filter(Boolean).join(' ')
+
+  const styles = [
+    background && `background:${background.replace(/"/g, "'")}`,
+    color      && `color:${color.replace(/"/g, "'")}`,
+  ].filter(Boolean).join(';')
+  const styleAttr = styles ? ` style="${styles}"` : ''
+
+  if (content) {
+    return `<div class="${e(classes)}"${styleAttr}><div class="ui-top-strip-content">${content}</div></div>`
+  }
+
+  return `<div class="${e(classes)}"${styleAttr}>
+  ${left  ? `<div class="ui-top-strip-left">${left}</div>` : ''}
+  ${right ? `<div class="ui-top-strip-right">${right}</div>` : ''}
+</div>`
+}

package/src/ui/trust-list.js

@@ -0,0 +1,46 @@
+/**
+ * Pulse UI — TrustList
+ *
+ * A compact row of trust/compliance badges — "Part P registered · NICEIC · £10m insured".
+ * Each item gets a leading icon (default: check mark). Common on trades, services,
+ * and professional-services sites.
+ *
+ * @param {object}   opts
+ * @param {string[]} opts.items       - List of labels
+ * @param {string}   opts.icon        - Raw HTML slot — icon shown before each item (default: ✓ check SVG)
+ * @param {string}   opts.color       - Icon colour CSS value (default: inherits --ui-accent)
+ * @param {'sm'|'md'} opts.size
+ * @param {string}   opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+import { iconCheck } from './icons.js'
+
+const SIZES = new Set(['sm', 'md'])
+
+export function trustList({
+  items      = [],
+  icon       = iconCheck({ size: 14 }),
+  color      = '',
+  size       = 'sm',
+  class: cls = '',
+} = {}) {
+  if (!SIZES.has(size)) size = 'sm'
+
+  const classes = [
+    'ui-trust-list',
+    size !== 'sm' && `ui-trust-list--${size}`,
+    cls,
+  ].filter(Boolean).join(' ')
+
+  const iconStyle = color ? ` style="color:${color.replace(/"/g, "'")}"` : ''
+
+  const itemsHtml = items.map(label =>
+    `<li class="ui-trust-list-item">
+  <span class="ui-trust-list-icon" aria-hidden="true"${iconStyle}>${icon}</span>
+  <span>${e(label)}</span>
+</li>`
+  ).join('')
+
+  return `<ul class="${e(classes)}">${itemsHtml}</ul>`
+}

package/src/ui/ui.test.js

@@ -113,6 +113,17 @@ test('button: renders icon HTML inside element', () => {
   assert.match(html, /<svg\/>/)
 })
 
+test('button: attrs with undefined values are omitted', () => {
+  const html = button({ label: 'Minus', attrs: { disabled: undefined, 'data-count': '3' } })
+  assert.doesNotMatch(html, /disabled="undefined"/)
+  assert.match(html, /data-count="3"/)
+})
+
+test('button: attrs with defined values are rendered', () => {
+  const html = button({ label: 'Add', attrs: { 'data-action': 'add' } })
+  assert.match(html, /data-action="add"/)
+})
+
 // ─── badge ──────────────────────────────────────────────────────────────────
 
 test('badge: renders with default variant', () => {
@@ -656,6 +667,30 @@ test('nav: escapes link labels and hrefs', () => {
   assert.doesNotMatch(html, /<b>X<\/b>/)
 })
 
+test('nav: aria-current="page" on current link', () => {
+  const html = nav({ logo: 'x', links: [
+    { label: 'Home', href: '/', current: true },
+    { label: 'About', href: '/about' },
+  ] })
+  assert.match(html, /aria-current="page"/)
+  // Appears in both desktop and mobile nav — once per nav, so 2 total
+  const matches = html.match(/aria-current="page"/g)
+  assert.ok(matches && matches.length >= 1, 'At least one link should have aria-current')
+  assert.doesNotMatch(html, /href="\/about"[^>]*aria-current/)
+})
+
+test('nav: no aria-current when current not set', () => {
+  const html = nav({ logo: 'x', links: [{ label: 'Home', href: '/' }] })
+  assert.doesNotMatch(html, /aria-current/)
+})
+
+test('nav: aria-current on utility link', () => {
+  const html = nav({ logo: 'x', links: [], utilityLinks: [
+    { label: 'Sign in', href: '/login', current: true },
+  ] })
+  assert.match(html, /aria-current="page"/)
+})
+
 // ─── appBadge ────────────────────────────────────────────────────────────────
 
 test('appBadge: renders apple badge by default', () => {