ehoandClaude Sonnet 5
43dc3210cd
The folder now equals the layer, as CLAUDE.md decision 2 requires. 33 directories move by git mv (25 flat, plus upload/'s 8 subfolders split across all three layers). 28 distinct @shared/ui/* specifiers rewrite across 73 files, longest-first. Five relative imports inside upload/ become @shared/ui aliases because their sibling now lives in a different layer; two stay relative because both ends stay in the same layer. Four .mdx docs get their seven broken story imports fixed; atomic-design.mdx's page-shell import is untouched, because layout/ does not move. No component, template, story title, or layer-tag comment changes. That is RD-28's job. Verified against the ticket's acceptance commands: the 26 flat directories become exactly 3 layer folders with the counts the ticket names, only three @shared/ui/* prefixes remain (atoms, molecules, organisms), the .mdx import count holds at 7, and the relative-import count inside ui/ drops from 7 to 2 as decision 4 requires. The @shared/ui/ occurrence count moves from 200 to 205: decision 4 mandates turning 5 of those 7 relative imports into @shared/ui/* aliases, which decision 3's "200 before, 200 after" check does not account for. The 5-occurrence gap is exactly the 5 conversions decision 4 names, not a lost or duplicated specifier. npm run ci --full passes: lint, typecheck, dep:check, format, tokens, seam, both apps' + both libraries' tests, both apps' localized build, audit, backend tests, all three generated-artifact drift checks, and both Storybook instances' build + axe-core a11y suite (67+45 suites, 198+112 tests, all green). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import { Component, input } from '@angular/core';
|
|
|
|
/** Molecule: one key/value row inside a CIBG Huisstijl **Datablock** (see
|
|
`data-block.component.ts`) — the row primitive of the datablock/`controlestap`
|
|
data summary. Used on a `<div>` so the `<dl>`'s direct child is a native element
|
|
(the HTML5.1 `dl > div > dt + dd` grouping), which keeps the definition list
|
|
axe-clean — a bare custom element between `<dl>` and its `<dt>/<dd>` trips axe's
|
|
definition-list rule regardless of `display:contents`. The host is the Bootstrap
|
|
`.row`; `dt.col-md-4`/`dd.col-md-8` give the label/value widths. Wrap several in a
|
|
`<dl class="mb-0">` (a `<app-data-block>`). Project custom content (e.g. a badge)
|
|
into the `<dd>` via `<ng-content>`. */
|
|
@Component({
|
|
selector: 'div[app-data-row]',
|
|
host: { class: 'row' },
|
|
// The CIBG datablock draws a separator between entries. It ships that border on
|
|
// dt/dd with a `:last-of-type` reset, but our one-row-per-<div> grouping (for axe)
|
|
// makes every dt/dd a last-of-type — so we carry the separator on the row instead.
|
|
styles: [
|
|
`
|
|
:host:not(:last-of-type) {
|
|
border-block-end: var(--rhc-border-width-sm) solid var(--rhc-color-cool-grey-200);
|
|
}
|
|
`,
|
|
],
|
|
template: `
|
|
<dt class="col-md-4">{{ key() }}</dt>
|
|
<dd class="col-md-8">
|
|
<ng-content>{{ value() }}</ng-content>
|
|
</dd>
|
|
`,
|
|
})
|
|
export class DataRowComponent {
|
|
key = input.required<string>();
|
|
value = input<string | null>('');
|
|
}
|