feat(timeline): add the "· historisch" descriptor to world bands (REQ-009)
A HISTORICAL band's subtitle now carries the visible "historisch" register
inline as plain text: "{date} · historisch", or — for a RANGE — after the
existing 1914–1918 span pill (whose Zeitraum aria-label is unchanged). The
descriptor is a text node, never a second pill. Every WorldBand is
historical, so the suffix also trails an undated band on its own.
Refs #833
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -21,6 +21,9 @@ const fromYear = $derived(entry.eventDate ? entry.eventDate.slice(0, 4) : null);
|
|||||||
const toYear = $derived(entry.eventDateEnd ? entry.eventDateEnd.slice(0, 4) : null);
|
const toYear = $derived(entry.eventDateEnd ? entry.eventDateEnd.slice(0, 4) : null);
|
||||||
const showSpan = $derived(entry.precision === 'RANGE' && fromYear != null && toYear != null);
|
const showSpan = $derived(entry.precision === 'RANGE' && fromYear != null && toYear != null);
|
||||||
const dateText = $derived(showSpan ? null : entry.precision === 'RANGE' ? fromYear : dateLabel);
|
const dateText = $derived(showSpan ? null : entry.precision === 'RANGE' ? fromYear : dateLabel);
|
||||||
|
// Every WorldBand is a HISTORICAL band, so the visible "historisch" register
|
||||||
|
// always trails the subtitle as plain text — never a second pill (REQ-009).
|
||||||
|
const historical = $derived(m.timeline_layer_historical_suffix());
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="my-3 border-y border-line bg-canvas px-4 py-2 text-center">
|
<div class="my-3 border-y border-line bg-canvas px-4 py-2 text-center">
|
||||||
@@ -37,7 +40,10 @@ const dateText = $derived(showSpan ? null : entry.precision === 'RANGE' ? fromYe
|
|||||||
>
|
>
|
||||||
{fromYear}–{toYear}
|
{fromYear}–{toYear}
|
||||||
</span>
|
</span>
|
||||||
|
<span class="font-sans text-xs text-ink-3"> · {historical}</span>
|
||||||
{:else if dateText}
|
{:else if dateText}
|
||||||
<span class="ml-2 font-sans text-xs text-ink-3">{dateText}</span>
|
<span class="ml-2 font-sans text-xs text-ink-3">{dateText} · {historical}</span>
|
||||||
|
{:else}
|
||||||
|
<span class="ml-2 font-sans text-xs text-ink-3">{historical}</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { describe, it, expect, afterEach } from 'vitest';
|
import { describe, it, expect, afterEach } from 'vitest';
|
||||||
import { cleanup, render } from 'vitest-browser-svelte';
|
import { cleanup, render } from 'vitest-browser-svelte';
|
||||||
|
import * as m from '$lib/paraglide/messages.js';
|
||||||
import WorldBand from './WorldBand.svelte';
|
import WorldBand from './WorldBand.svelte';
|
||||||
import { makeEntry } from './test-factories';
|
import { makeEntry } from './test-factories';
|
||||||
|
|
||||||
@@ -45,4 +46,23 @@ describe('WorldBand', () => {
|
|||||||
expect(document.body.textContent).toContain('Erster Weltkrieg');
|
expect(document.body.textContent).toContain('Erster Weltkrieg');
|
||||||
expect(document.body.textContent).toContain('1914');
|
expect(document.body.textContent).toContain('1914');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('appends the inline "· historisch" descriptor to a non-RANGE band (#833 REQ-009)', () => {
|
||||||
|
render(WorldBand, {
|
||||||
|
entry: historical({ precision: 'APPROX', eventDate: '1923-01-01', eventDateEnd: undefined })
|
||||||
|
});
|
||||||
|
expect(document.querySelector('[data-testid="world-range"]')).toBeNull();
|
||||||
|
expect(document.body.textContent).toContain(m.timeline_layer_historical_suffix());
|
||||||
|
});
|
||||||
|
|
||||||
|
it('follows the RANGE span pill with inline "· historisch" text, not a second pill (#833 REQ-009)', () => {
|
||||||
|
render(WorldBand, { entry: historical() });
|
||||||
|
const pill = document.querySelector('[data-testid="world-range"]');
|
||||||
|
expect(pill).not.toBeNull();
|
||||||
|
// The #779 span pill + its Zeitraum aria-label are unchanged.
|
||||||
|
expect(pill?.getAttribute('aria-label')).toBe('Zeitraum: 1914 bis 1918');
|
||||||
|
// The descriptor is plain text outside the pill, not a second styled pill.
|
||||||
|
expect(pill?.textContent).not.toContain(m.timeline_layer_historical_suffix());
|
||||||
|
expect(document.body.textContent).toContain(m.timeline_layer_historical_suffix());
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user