mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-05 02:44:02 +00:00
refactor(ui): remove the action button and status badge builders
The Vue views apply the gev-action-button and gev-status-badge classes themselves, so the DOM builders have no users left. The docs describe the views instead.
This commit is contained in:
1 parent
9d9eb267c5
commit
2ffd7a4afd
7 files changed
+19
-199
No files matched your search
@@ -1,41 +0,0 @@
|
||||
/**
|
||||
* Create an ordinary native action button. Static templates use the same CSS
|
||||
* classes. Labels are already translated; feature owners retain callbacks,
|
||||
* disabled-state updates and listener cleanup. Construction binds no listeners.
|
||||
* @param {object} options
|
||||
* @param {Document} [options.documentRef] Document that owns the button.
|
||||
* @param {string} options.label Visible text, never interpreted as markup.
|
||||
* @param {string} [options.className] Additional feature/layout hooks.
|
||||
* @param {'default'|'danger'} [options.variant]
|
||||
* @param {'default'|'compact'} [options.size]
|
||||
* @param {boolean} [options.disabled]
|
||||
* @param {string} [options.ariaLabel] Accessible name when visible text needs context.
|
||||
* @param {string} [options.title]
|
||||
* @returns {HTMLButtonElement}
|
||||
*/
|
||||
export function createActionButton({
|
||||
documentRef = globalThis.document,
|
||||
label,
|
||||
className = '',
|
||||
variant = 'default',
|
||||
size = 'default',
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
title,
|
||||
}) {
|
||||
const button = documentRef.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = [
|
||||
'gev-action-button',
|
||||
variant === 'danger' && 'gev-action-button--danger',
|
||||
size === 'compact' && 'gev-action-button--compact',
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
button.textContent = label;
|
||||
button.disabled = disabled;
|
||||
if (ariaLabel !== undefined) button.setAttribute('aria-label', ariaLabel);
|
||||
if (title !== undefined) button.title = title;
|
||||
return button;
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
/**
|
||||
* Ordinary read-only badge view. Labels are already translated. Feature owners
|
||||
* retain status derivation, machine-state attributes and announcement policy.
|
||||
* No listeners, timers, state inference or automatic live regions are installed.
|
||||
* Vue can replace this DOM adapter while retaining the label/hidden contract
|
||||
* and the gev-status-badge CSS surface.
|
||||
* @param {object} options
|
||||
* @param {Document} [options.documentRef]
|
||||
* @param {string} [options.label]
|
||||
* @param {'pill'|'box'|'plain'} [options.appearance]
|
||||
* @param {string} [options.className] Feature/layout hooks.
|
||||
* @param {boolean} [options.hidden]
|
||||
* @returns {HTMLSpanElement}
|
||||
*/
|
||||
export function createStatusBadge({
|
||||
documentRef = globalThis.document,
|
||||
label = '',
|
||||
appearance = 'pill',
|
||||
className = '',
|
||||
hidden = false,
|
||||
} = {}) {
|
||||
const badge = documentRef.createElement('span');
|
||||
badge.className = [
|
||||
'gev-status-badge',
|
||||
appearance === 'box' && 'gev-status-badge--box',
|
||||
appearance === 'plain' && 'gev-status-badge--plain',
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
updateStatusBadge(badge, { label, hidden });
|
||||
return badge;
|
||||
}
|
||||
|
||||
/** Paint controlled text/visibility without replacing nodes or redundant writes. */
|
||||
export function updateStatusBadge(badge, { label, hidden = false }) {
|
||||
if (badge.textContent !== label) badge.textContent = label;
|
||||
if (badge.hidden !== hidden) badge.hidden = hidden;
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
import '../testSupport/registerDom.mjs';
|
||||
import test from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { assertSameNode } from '../testSupport/domAssert.mjs';
|
||||
import { createStatusBadge, updateStatusBadge } from './statusBadge.js';
|
||||
import { createRailCards } from './railCards.js';
|
||||
import { railDocumentFixture as railFixture } from './railTestFixture.mjs';
|
||||
|
||||
test('badges paint literal translated text without installing announcement or interaction semantics', () => {
|
||||
const { document } = railFixture();
|
||||
for (const appearance of ['pill', 'box', 'plain']) {
|
||||
const badge = createStatusBadge({
|
||||
documentRef: document,
|
||||
appearance,
|
||||
className: 'feature-hook',
|
||||
label: '<img src=x onerror=alert(1)> · НЕИЗВЕСТНО',
|
||||
});
|
||||
assert.equal(badge.tagName, 'SPAN');
|
||||
assert.equal(
|
||||
badge.textContent,
|
||||
'<img src=x onerror=alert(1)> · НЕИЗВЕСТНО',
|
||||
);
|
||||
assert.equal(badge.children.length, 0);
|
||||
assert.equal(badge.classList.contains('gev-status-badge'), true);
|
||||
assert.equal(badge.classList.contains('feature-hook'), true);
|
||||
assert.equal(badge.getAttribute('role'), null);
|
||||
assert.equal(badge.getAttribute('aria-live'), null);
|
||||
assert.equal(badge.getAttribute('tabindex'), null);
|
||||
assert.equal(
|
||||
badge.classList.contains(`gev-status-badge--${appearance}`),
|
||||
appearance !== 'pill',
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
test('painting preserves feature state, live regions and focus with zero identical writes', () => {
|
||||
const f = railFixture();
|
||||
const { document } = f;
|
||||
const badge = createStatusBadge({ documentRef: document, hidden: true });
|
||||
f.container.appendChild(badge);
|
||||
badge.setAttribute('role', 'status');
|
||||
badge.setAttribute('aria-live', 'polite');
|
||||
badge.dataset.frameState = 'ready';
|
||||
const focusOwner = document.createElement('button');
|
||||
document.body.appendChild(focusOwner);
|
||||
focusOwner.focus();
|
||||
updateStatusBadge(badge, { label: 'SNAPSHOT · DEGRADED' });
|
||||
assert.equal(badge.hidden, false);
|
||||
f.writes();
|
||||
updateStatusBadge(badge, { label: 'SNAPSHOT · DEGRADED' });
|
||||
assert.equal(f.writes(), 0);
|
||||
assert.equal(badge.getAttribute('role'), 'status');
|
||||
assert.equal(badge.getAttribute('aria-live'), 'polite');
|
||||
assert.equal(badge.dataset.frameState, 'ready');
|
||||
assertSameNode(document.activeElement, focusOwner);
|
||||
});
|
||||
|
||||
test('coverage badges keep keyed identity, hide empty coverage and never claim feed health', () => {
|
||||
const f = railFixture();
|
||||
const view = createRailCards({ ...f, badgeClassName: 'weather-coverage' });
|
||||
const card = { id: 'radar', title: 'Rain radar', badge: 'CONUS', blocks: [] };
|
||||
view.update([card]);
|
||||
const badge = f.find((node) => node.classList.contains('gev-status-badge'));
|
||||
const header = f.container.children[0].children[0];
|
||||
header.focus();
|
||||
assert.equal(badge.classList.contains('gev-status-badge--plain'), true);
|
||||
assert.equal(badge.classList.contains('weather-coverage'), true);
|
||||
view.update([{ ...card, badge: '' }]);
|
||||
assert.equal(badge.hidden, true);
|
||||
view.update([{ ...card, badge: 'Global · 1° grid' }]);
|
||||
assert.equal(badge.hidden, false);
|
||||
assert.equal(badge.textContent, 'Global · 1° grid');
|
||||
assert.equal(
|
||||
f.find((node) => node.classList.contains('gev-status-badge')),
|
||||
badge,
|
||||
);
|
||||
assert.deepEqual({ ...badge.dataset }, {});
|
||||
assertSameNode(f.document.activeElement, header);
|
||||
view.destroy();
|
||||
view.update([card]);
|
||||
assert.equal(f.container.children.length, 0);
|
||||
});
|
||||
Reference in new issue
Block a user