Dette er skrevet for de som utvikler NVE Designsystem. Skal du kun bruke designsystemet, finner du dokumentasjon og kodeeksempler her: https://designsystem.nve.no/.
Har du lyst til å bidra? Her finner du informasjon om hvordan du kan komme i gang som bidragsyter
Repositoriumet inneholder css generert fra Figma-tokens i Designsystemet. Her finner du pakka i npm.
Her er skisser i Figma.
De fleste komponentene bygger på Shoelace, men er tilpasset NVE Designsystem. Etterhvert vil de fleste Shoelace-komponenter få sin NVE-variant, men vi har også komponenter som ikke er basert på Shoelace. Vi anbefaler at du laster ned kildekoden til Shoelace og setter deg inn i Lit, som vi bruker som rammeverk.
Dette prosjektet inneholder to applikasjoner:
- I rot-mappa ligger selve komponentbiblioteket med nve-komponentene
- I mappa
doc-siteligger test-applikasjonen som viser brukerveiledninga for biblioteket. Teknisk beskrivelse av denne ligger i egen readme
Kjør npm install og npm run dev for å starte test-applikasjonen.
Dersom applikasjonen ikke er bygget på forhånd, vil npm run dev automatisk sørge for at den bygges og at dist-mappen opprettes.
Vi bygger applikasjonen før kjøring for å sikre at den importerer custom-elements.json og nve-designsystem.css fra dist. Siden begge filer ganske statiske man trenger ikke å å bygge appen på nytt hver gang man gjør noen endringer i component filen. Disse to filene kunne vært plassert i src, men vi unngår det – særlig for shoelace.css – fordi filen da måtte blitt manuelt kopiert fra node_modules til src (eller håndtert via et script).
Ved å importere shoelace.css direkte i main.ts, sørger Vite for korrekt bundling. Dette eliminerer behovet for å endre @import-referanser i global.css og gir dist-mappen som eneste source of truth.
Applikasjonen er selve brukerveiledninga for komponentbiblioteket, så her ligger api-dokumentasjon, beskrivelse av funksjonalitet og ikke minst kodeeksempler.
CHANGELOG.md genereres automatisk basert på commit-meldingene dine og vises i versjons-notatene på GitHub.
Merk at semantic-release stiller visse betingelser før oppdatering av versjonsloggen. For at en endring skal registreres i versjonsloggen, må følgende krav være oppfylt:
- Commit-typen må være en av følgende:
BREAKING CHANGE: Introduserer en endring som bryter bakoverkompatibilitetenfeat: Legger til en ny funksjonalitetfix: Retter en feilperf: Forbedrer ytelsen
- Endringen må ha skjedd i en av følgende mapper:
src/**build/**public/css/**
Vi bruker Dependabot for å automatisk opprette pull requests når det finnes oppdateringer av avhengigheter eller sikkerhetsfikser i vår package.json.
Konfigurasjonen for Dependabot ligger i: .github/dependabot.yml
Når Dependabot oppretter en pull request, genereres det automatisk et forhåndsvisningsmiljø av nettsiden via Azure Static Web Apps. Dette lar deg enkelt sjekke hvordan endringene påvirker dokumentasjonsappen.
- Gå inn i den aktuelle pull requesten.
- Klikk på fanen Checks.
- Velg jobben "Bygg og installasjon av dok-app i skyen".
- Gå til steget "Installer dokumentasjons-nettsted".
- Se etter linjen som inneholder: Visit your site at: https://...
- Klikk på lenken for å åpne den midlertidige versjonen av nettstedet.
Merk: Lenken vises ikke automatisk som en kommentar i PR-en.
Dette skyldes at Dependabot, av sikkerhetsgrunner, ikke har tillatelse til å poste kommentarer via GitHub Actions. Derfor kan du se følgende feilmelding i loggene:
Unexpectedly failed to add GitHub comment.