From d36206e318f4661bcae64955737a5b0ef32e1d27 Mon Sep 17 00:00:00 2001 From: lisamarimyrene Date: Fri, 24 Apr 2026 13:16:19 +0200 Subject: [PATCH 1/4] wip --- doc-site/introduction/forDesigner/getStarted.md | 16 +++++++++++----- .../introduction/forDevelopers/development.md | 8 ++++---- doc-site/introduction/home.md | 2 +- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/doc-site/introduction/forDesigner/getStarted.md b/doc-site/introduction/forDesigner/getStarted.md index 26be0d54..d49dd14a 100644 --- a/doc-site/introduction/forDesigner/getStarted.md +++ b/doc-site/introduction/forDesigner/getStarted.md @@ -1,6 +1,8 @@ -# Kom igang +# Kom i gang + +Designsystem samler og tilgjengeliggjør verktøy, filer, komponenter og designretningslinjer som brukes av designere og utviklere for å lage gode og konsekvente brukeropplevelser i NVE og Varsoms digitale tjenester. ## Før du starter @@ -13,8 +15,15 @@ Før du starter å bruke designsystemet, er det flere viktige skritt og forbered ## Jobb sammen +Det er fastslått at alle nye produkter som utvikles i NVE og Varsom skal bruke og bidra inn mot designsystemet. + Alle som er en del av prosjektet bør ha tilgang på Figma-filene. Derfor er det viktig å legge dem til i Teamet. Da kan alle kommentere, se status og hente ut kode. Det er derfor også viktig at du legger ting opp på en ryddig og organisert måte slik at det er mulig for andre å forstå. +### Pass på å gi riktig tilgangsnivå: + +- Editor: Kan redigere filene (Kun designere) +- Viewer: Kan se, hente kode og bruke prototyper (Alle andre) + ## Aktiver Designsystemet i Figma om du ikke finner NVE komponenter For å kunne bruke designsystemet må du aktivere denne i Figma. Alle komponentnavn har “NVE-” foran komponentnavnet. Hvis du ikke finner dette må du følge disse trinnene. @@ -81,9 +90,6 @@ Designsystemet består av grunnleggende stiler og komponenter som brukes for å

Mønstre

-

Er en sammensetning av flere komponenter sammen. Dette er mer enn 4-5 komponenter satt sammen for å danne et mer komplekst grensesnittelement. - -Dette kan for eksempel være en header/navigasjonsbar eller et “cookies” panel som kommer opp.

- +

Er en sammensetning av flere komponenter sammen. Dette er mer enn 4-5 komponenter satt sammen for å danne et mer komplekst grensesnittelement. Dette kan for eksempel være en header/navigasjonsbar eller et “cookies” panel som kommer opp.

diff --git a/doc-site/introduction/forDevelopers/development.md b/doc-site/introduction/forDevelopers/development.md index eb46607e..e44bb2a8 100644 --- a/doc-site/introduction/forDevelopers/development.md +++ b/doc-site/introduction/forDevelopers/development.md @@ -1,8 +1,8 @@ -## Kom i gang +# Kom i gang -### Web-komponenter +## Web-komponenter Alle komponentene er [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), og dette gjør at de skal kunne brukes i de fleste web-applikasjoner, uavhengig av rammeverk. Komponentene er ferdig utformet med NVE sitt design. @@ -12,13 +12,13 @@ Mange av komponentene er basert på [Shoelace](https://shoelace.style/). Det mes For mange av komponentene som er basert på Shoelace bør du også se i Shoelace-dokumentasjonen for å få et komplett bilde av hva du kan gjøre med komponenten. -### Rapportere feil +## Rapportere feil Kildekoden til komponentene finner du i [GitHub](https://github.com/NVE/Designsystem). Finner du feil i dokumentasjon eller komponenter, sjekk aktuell komponent i [komponentoversikten](https://designsystem.nve.no/components/Komponentoversikt.html) om feilen allerede er registrert. Om ikke, [registrer en sak i Github](https://github.com/NVE/Designsystem/issues). Gi gjerne saken til deg selv om du ønsker å fikse problemet med en gang, men det kan være lurt å melde fra om dette også på [FUX-forum i Teams](https://teams.microsoft.com/l/channel/19%3A3vNPKWAB1NfvK_GxsEsNWj04elWJ8WrylwsoZF9KaOY1%40thread.tacv2/FUX%20Forum?groupId=ec755ca5-8bfc-4a59-b502-d9721ef8eda4&tenantId=bc8d840d-60c9-410b-b4fb-11b86806780c&ngc=true&allowXTenantAccess=true), så folk får vite at noen er på saken. Der kan man også stille spørsmål om man lurer på noe. -### Les dette før du begynner å endre designsystemet +## Les dette før du begynner å endre designsystemet Før du begynner å gjøre endringer i Designsystemet anbefales det å lese gjennom [README.md](https://github.com/NVE/Designsystem/blob/main/README.md) og [CONTRIBUTING.md](https://github.com/NVE/Designsystem/blob/main/CONTRIBUTING.md). Der finner du tips og en del kjøreregler for utvikling. diff --git a/doc-site/introduction/home.md b/doc-site/introduction/home.md index dd626a67..16066ce8 100644 --- a/doc-site/introduction/home.md +++ b/doc-site/introduction/home.md @@ -2,7 +2,7 @@ # Om designsystemet -Designsystemet samler og tilgjengeliggjør verktøy, filer, komponenter og designretningslinjer som brukes av designere og utviklere for å lage gode og konsekvente brukeropplevelser i NVEs digitale tjenester. Designsystemet skal sette NVEs profiler i kontekst. Med andre ord vise deg hvorfor, hvor, når og hvordan du bruker og videreutvikler innhold i designsystemet for å skape gevinster og tettere samarbeid på tvers av roller og produkter. +Designsystemet samler og tilgjengeliggjør verktøy, filer, komponenter og designretningslinjer som brukes av designere og utviklere for å lage gode og konsekvente brukeropplevelser i NVEs digitale tjenester. Det ivaretar merkevarenes individuelle uttrykk, samtidig som det sikrer gode brukeropplevelser på tvers av merkevarene og de digitale brukerreisene. Designsystemet skal sette NVEs profiler i kontekst. Med andre ord vise deg hvorfor, hvor, når og hvordan du bruker og videreutvikler innhold i designsystemet for å skape gevinster og tettere samarbeid på tvers av roller og produkter. Et designsystem handler, til tross for sitt navn, om mer enn bare design. Det handler først og fremst om mennesker og hvordan vi må jobbe for å få brukt designet godt på en praktisk måte når vi utvikler en løsning. Designsystem som konsept er ikke teknologibundet, men er heller et uttrykk som beskriver prosessene og vanene som leder til mest effektivt design, utvikling og ledelse. From b2ce378c2405d73f0ce7be4c6de8fee0772129b7 Mon Sep 17 00:00:00 2001 From: lisamarimyrene Date: Fri, 29 May 2026 13:52:01 +0200 Subject: [PATCH 2/4] (docs):Legge inn informasjon fra Frontify til DS --- doc-site/.vitepress/config.mts | 33 +++++++++--------- .../.vitepress/theme/components/StartPage.vue | 19 +++++++--- doc-site/assets/images/get-started-1.png | Bin 49690 -> 241162 bytes .../designelementer/animasjoner.md | 11 +----- .../introduction/designelementer/farger.md | 12 +------ .../introduction/designelementer/tokens.md | 20 +++++------ .../designelementer/typography.md | 22 ++++++------ .../designelementer/visuellform.md | 5 +-- .../forDesigner/commitMessages.md | 6 ++-- .../introduction/forDesigner/contribution.md | 31 ++++++++-------- .../forDesigner/{design.md => figma.md} | 25 +++++++++++-- .../introduction/forDesigner/getStarted.md | 31 ++++------------ .../introduction/forDevelopers/development.md | 20 +++++------ .../introduction/forDevelopers/validation.md | 10 +++--- doc-site/introduction/forDevelopers/vue.md | 2 +- doc-site/introduction/home.md | 6 ++-- doc-site/introduction/roller.md | 30 ++++++++++++++++ doc-site/introduction/universellUtforming.md | 14 ++++---- 18 files changed, 160 insertions(+), 137 deletions(-) rename doc-site/introduction/forDesigner/{design.md => figma.md} (71%) create mode 100644 doc-site/introduction/roller.md diff --git a/doc-site/.vitepress/config.mts b/doc-site/.vitepress/config.mts index c5fc43cc..944d63be 100644 --- a/doc-site/.vitepress/config.mts +++ b/doc-site/.vitepress/config.mts @@ -40,37 +40,38 @@ export default defineConfig({ text: 'Introduksjon', items: [ { text: 'Om designsystemet', link: '/introduction/home' }, - { text: 'Universell Utforming', link: '/introduction/universellUtforming' }, + { text: 'Roller', link: '/introduction/roller' }, { - text: 'Designelementer', + text: 'For utviklere', items: [ - { text: 'Tokens', link: '/introduction/designelementer/tokens' }, - { text: 'Farger', link: '/introduction/designelementer/farger' }, - { text: 'Typografi', link: '/introduction/designelementer/typography' }, - { text: 'Avstander og luft', link: '/introduction/designelementer/avstander' }, - { text: 'Visuell form', link: '/introduction/designelementer/visuellform' }, - { text: 'Animasjoner', link: '/introduction/designelementer/animasjoner' }, + { text: 'Kom i gang', link: '/introduction/forDevelopers/development' }, + { text: 'Bruk i Vue', link: '/introduction/forDevelopers/vue' }, + { text: 'Importering av filer', link: '/introduction/forDevelopers/import' }, + { text: 'Validering', link: '/introduction/forDevelopers/validation' }, + { text: 'Vue-komponentbibliotek', link: '/introduction/forDevelopers/vueLibrary' }, ], }, { text: 'For designere', items: [ - { text: 'Design', link: '/introduction/forDesigner/design' }, { text: 'Kom i gang', link: '/introduction/forDesigner/getStarted' }, + { text: 'Bruk i Figma', link: '/introduction/forDesigner/figma' }, { text: 'Bidrag', link: '/introduction/forDesigner/contribution' }, { text: 'Commit-meldinger', link: '/introduction/forDesigner/commitMessages' }, ], }, - { - text: 'For utviklere', + { + text: 'Designelementer', items: [ - { text: 'Kom i gang', link: '/introduction/forDevelopers/development' }, - { text: 'Importering av filer', link: '/introduction/forDevelopers/import' }, - { text: 'Bruk i Vue', link: '/introduction/forDevelopers/vue' }, - { text: 'Validering', link: '/introduction/forDevelopers/validation' }, - { text: 'Vue-komponentbibliotek', link: '/introduction/forDevelopers/vueLibrary' }, + { text: 'Tokens', link: '/introduction/designelementer/tokens' }, + { text: 'Farger', link: '/introduction/designelementer/farger' }, + { text: 'Typografi', link: '/introduction/designelementer/typography' }, + { text: 'Avstander og luft', link: '/introduction/designelementer/avstander' }, + { text: 'Visuell form', link: '/introduction/designelementer/visuellform' }, + { text: 'Animasjoner', link: '/introduction/designelementer/animasjoner' }, ], }, + { text: 'Universell Utforming', link: '/introduction/universellUtforming' }, ], }, { text: 'Komponenter', items: componentsLinks }, diff --git a/doc-site/.vitepress/theme/components/StartPage.vue b/doc-site/.vitepress/theme/components/StartPage.vue index e9abcbca..36366b20 100644 --- a/doc-site/.vitepress/theme/components/StartPage.vue +++ b/doc-site/.vitepress/theme/components/StartPage.vue @@ -1,10 +1,12 @@