ehoandClaude Sonnet 5
e7156c5132
Restructures into apps/ssp + apps/behandelportal (two Angular projects) plus libs/shared + libs/beheer (cross-app libraries), replacing WP-61's separate sibling repo. That split had already produced real drift: a hand-vendored copy of the backend's OpenAPI doc, a shared/ui+layout tree forked and silently diverging (7 files), and beheer + the styles.scss token bridge duplicated byte-for-byte across both repos. - git mv the SSP's src/app/* into apps/ssp/; fold shared/, beheer/, environments/, the Storybook docs/*.mdx, and styles.scss into libs/shared + libs/beheer (all confirmed identical between the two repos before merging). auth stays deliberately duplicated per ADR-0002 (actor-specific, expected to diverge) - amended there. - One generated API client (libs/shared), no more vendored swagger.json. - .dependency-cruiser split into a base factory + one config per app, and Storybook into .storybook-ssp/.storybook-behandelportal - both forced by the @auth/* alias resolving to different directories per app. - SiteHeaderComponent/ShellComponent gained HEADER_NAV_ITEMS/ HEADER_ADMIN_LINKS/DEBUG_PANEL injection tokens so each app supplies its own nav/admin-links/dev-panel instead of one being hardcoded. - CLAUDE.md, ARCHITECTURE.md, dependencies.md, and ADR-0002 updated; WP-67 backlog entry documents the full decision trail. npm run ci green (lint, dep:check x2, 360 tests across ssp/ behandelportal/shared/beheer, both localized builds, backend tests, snippet + api-client drift); both dev servers, both Storybook instances, and docker compose verified working. The old sibling repo (/home/eho/repos/behandelportal) is left untouched, not deleted. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
import { Component } from '@angular/core';
|
|
|
|
/** Organism: Rijksoverheid-style site footer — dark-blue, with the
|
|
"De Rijksoverheid. Voor Nederland." tagline, responsible-ministry attribution,
|
|
and a small "Over deze site" link column. ponytail: links point at the real
|
|
rijksoverheid.nl pages, not a fabricated dead-link forest. */
|
|
@Component({
|
|
selector: 'app-site-footer',
|
|
styles: [
|
|
`
|
|
:host {
|
|
display: block;
|
|
}
|
|
.bar {
|
|
background: var(--rhc-color-layout);
|
|
color: var(--rhc-color-foreground-on-primary);
|
|
margin-block-start: var(--rhc-space-max-5xl);
|
|
inline-size: 100%;
|
|
}
|
|
.inner {
|
|
max-inline-size: var(--app-content-max);
|
|
margin-inline: auto;
|
|
padding: var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
gap: var(--rhc-space-max-3xl);
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
.tagline {
|
|
font-style: italic;
|
|
font-weight: var(--rhc-text-font-weight-semi-bold);
|
|
font-size: var(--rhc-text-font-size-lg);
|
|
max-inline-size: 18rem;
|
|
}
|
|
.ministry {
|
|
margin-block-start: var(--rhc-space-max-md);
|
|
font-size: var(--rhc-text-font-size-sm);
|
|
color: var(--rhc-color-foreground-on-primary);
|
|
}
|
|
/* CIBG's vendored h2 tag rule (dark navy, for light backgrounds) beats inherited
|
|
color regardless of specificity — restate on-primary explicitly for this dark bar. */
|
|
.col h2 {
|
|
margin: 0 0 var(--rhc-space-max-md);
|
|
font-size: var(--rhc-text-font-size-sm);
|
|
font-weight: var(--rhc-text-font-weight-bold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--rhc-color-foreground-on-primary);
|
|
}
|
|
.links {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--rhc-space-max-sm);
|
|
font-size: var(--rhc-text-font-size-sm);
|
|
}
|
|
.links a {
|
|
color: var(--rhc-color-foreground-on-primary);
|
|
text-decoration: none;
|
|
}
|
|
.links a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
/* CIBG's vendored .meta class (unrelated component, coincidental name) sets a
|
|
dark grey — override rather than rename to keep the CIBG-mirroring class name. */
|
|
.meta {
|
|
inline-size: 100%;
|
|
border-block-start: var(--rhc-border-width-sm) solid
|
|
color-mix(in srgb, var(--rhc-color-foreground-on-primary) 25%, transparent);
|
|
margin-block-start: var(--rhc-space-max-xl);
|
|
padding-block-start: var(--rhc-space-max-lg);
|
|
font-size: var(--rhc-text-font-size-sm);
|
|
opacity: 0.85;
|
|
color: var(--rhc-color-foreground-on-primary);
|
|
}
|
|
`,
|
|
],
|
|
template: `
|
|
<footer class="bar">
|
|
<div class="inner">
|
|
<div>
|
|
<div class="tagline" i18n="@@footer.tagline">De Rijksoverheid. Voor Nederland.</div>
|
|
<div class="ministry" i18n="@@footer.ministry">
|
|
CIBG — Ministerie van Volksgezondheid, Welzijn en Sport
|
|
</div>
|
|
</div>
|
|
<nav class="col" i18n-aria-label="@@footer.overSiteAria" aria-label="Over deze site">
|
|
<h2 i18n="@@footer.overSite">Over deze site</h2>
|
|
<ul class="links">
|
|
<li>
|
|
<a
|
|
href="https://www.rijksoverheid.nl/privacy"
|
|
rel="noopener"
|
|
target="_blank"
|
|
i18n="@@footer.privacy"
|
|
>Privacy</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://www.rijksoverheid.nl/cookies"
|
|
rel="noopener"
|
|
target="_blank"
|
|
i18n="@@footer.cookies"
|
|
>Cookies</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://www.rijksoverheid.nl/toegankelijkheid"
|
|
rel="noopener"
|
|
target="_blank"
|
|
i18n="@@footer.toegankelijkheid"
|
|
>Toegankelijkheid</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="meta" i18n="@@footer.demo">Demo / POC — geen echte gegevens.</div>
|
|
</div>
|
|
</footer>
|
|
`,
|
|
})
|
|
export class SiteFooterComponent {}
|