Edwin van den Houdt
88442b0616
- Move the guard to scripts/check-tokens.sh; regex now catches hex + rgb()/hsl() (was hex-only) across ALL src/app components (was three ui/layout dirs). `token-ok` marker suppresses justified false positives; px stays out of scope (documented in the script). - Zero exclusions: debug-state's dark code-editor palette moves to --app-devpanel-* tokens in styles.scss (the one exempt file), dropping its --exclude hole. - Tokenize remaining hits: site-footer border via color-mix; three brief border widths via --rhc-border-width-* (new --rhc-border-width-lg: 3px). Verified: planted violation fails the guard; GREEN + test-storybook:ci. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
46 lines
3.3 KiB
TypeScript
46 lines
3.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:.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:.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 {}
|