feat(nve-exposed-height): Ny komponent for utsatt høyde#917
Conversation
Lagt til tester og forbedret dok/test
gruble
requested review from
NVEJoel,
amish1188,
lisamarimyreneNVE,
malingranlynve and
tomapedersen
as code owners
gruble
requested review from
Copilot
and removed request for
NVEJoel,
amish1188,
lisamarimyreneNVE,
malingranlynve and
tomapedersen
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-917.westeurope.5.azurestaticapps.net |
There was a problem hiding this comment.
Pull request overview
Denne PR-en introduserer en ny web-komponent (nve-exposed-height) for å visualisere “utsatt høyde” i skredvarsling, slik at samme komponent kan brukes fra både React (varsom.no) og Angular (Regobs/Varsom-appen).
Changes:
- Ny Lit-basert komponent
nve-exposed-heightmed SVG-rendering, varianter og aria-label (NO/EN). - Testdekning for varianter, aria-labels, piler og høydetekst.
- Dokumentasjonsside + oppføring i komponentoversikt, samt eksport i
nve-designsystem.ts.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/nve-designsystem.ts | Eksporterer NveExposedHeight fra designsystemets entrypoint. |
| src/components/nve-exposed-height/nve-exposed-height.component.ts | Implementerer web-komponenten og SVG-rendering for alle varianter. |
| src/components/nve-exposed-height/nve-exposed-height.styles.ts | Styling og CSS-variabler for størrelse og farger. |
| src/components/nve-exposed-height/nve-exposed-height.test.ts | Tester standardprops, aria-label, fjell-paths, piler og labels. |
| src/components/nve-exposed-height/AvalancheRose.js | Legacy-kilde lagt inn (per nå ser den ut til å være ubenyttet). |
| doc-site/components/nve-exposed-height.md | Dokumentasjon og eksempler for komponenten. |
| doc-site/components/Komponentoversikt.md | Legger komponenten til i oversikten. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-917.westeurope.5.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-917.westeurope.5.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-917.westeurope.5.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-917.westeurope.5.azurestaticapps.net |
|
🎉 This PR is included in version 4.6.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Denne komponenten trenger vi på ny varsom.no og også i Regobs/Varsom-appen når vi skriver om dette til designsystemet.
Siden varsom.no bruker React og Regobs bruker Angular, ønsker vi å bruke en felles web-komponent for dette.
Her er link til saken for de som har tilgang: https://nveprojects.atlassian.net/browse/VAR-592
Jeg har tatt utgangspunkt i dagens komponent på varsom.no.
Her er et eksempel på bruk: https://www.varsom.no/snoskred/varsling/varsel/Vest-Finnmark/2026-04-29
Legg merke til at varsom.no idag har en felles komponent for utsatt himmelretning og høyde, mens i Regobs er det to separate komponenter. Vi trenger fleksibiliteten to komponenter gir.
Jeg byttet ut skrifttypen med en vi bruker i desigsystemet, ellers har jeg beholdt fargene fra Varsom. Dette er samme farger som brukes i #913. Bruker gjerne mer offisielle farger fra Designsystemet, men da hadde det vært kjekt å se skissene i Figma først. Har spurt designerne om dette.
Håper denne komponenten kan få bo i designsystemet inntil vi finner en bedre plass!