Skip to content

Commit

Permalink
chore(storefront): fix typos and broken link (#2978)
Browse files Browse the repository at this point in the history
  • Loading branch information
Barsnes authored Jan 13, 2025
1 parent 518bf72 commit 899d848
Show file tree
Hide file tree
Showing 13 changed files with 29 additions and 27 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ I presentasjonen snakket vi om hva vi kan gjøre i fellesskap for å få flere t

Engasjementet har bekreftet hvor viktig det er at vi utforsker et felles designsystem. I tillegg til mer gjenkjennelige tjenester på tvers, påpeker flere at et felles designsystem vil gjøre det mulig for de mindre etatene og kommunene å lage gode løsninger uten å bruke alle ressursene sine på arbeid som kunne blitt gjort felles. Et felles designsystem vil gjøre det lettere for alle å etterleve krav til universell utforming, da dette er ivaretatt i komponentene.

Noen er bekymret for at merkevarene forsvinner, mens andre påpeker at de offentlige digitale tjenestene fortsatt kan ha ulike avsenderitdenteter selv om de tar utgangspunkt i samme designsystem.
Noen er bekymret for at merkevarene forsvinner, mens andre påpeker at de offentlige digitale tjenestene fortsatt kan ha ulike avsenderidentiteter selv om de tar utgangspunkt i samme designsystem.

[Her kan du se sammenstillingen av Miro-brettet](https://miro.com/app/board/uXjVMnk1ZM4=/?) og alle utfordringene og gevinstene som ble nevnt.

Expand Down
28 changes: 14 additions & 14 deletions apps/storefront/app/bloggen/2024/altinn-studio/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ _"Det er viktig at det er mulig å utvide komponentene til det mer komplekse, fo
---
<br />

Når vi skal ta i bruk en tredjepart, uavhengig om det er designsystemt eller noe annet. Så er det viktig å tenke over noen grunnlegende kjøreregler for å sørge for kvalitet og sikkerhet i din løsning.
Når vi skal ta i bruk en tredjepart, uavhengig om det er designsystemet eller noe annet. Så er det viktig å tenke over noen grunnlegende kjøreregler for å sørge for kvalitet og sikkerhet i din løsning.

Designsystemet tilbyr en hel rekke av grunnleggende komponenter, som kan utformes i mange varianter. Et eksempel er knappkomponenten (se figur 1).

Expand All @@ -58,7 +58,7 @@ Selv om knappkomponenten kommer i mange varianter betyr ikke det at du og ditt t

_Designsystemet har dokumentasjon på mønstre når de forskjellige variantene skal benyttes. [Se eksempelvis for knappen på denne lenken](https://storybook.designsystemet.no/?path=%2Fdocs%2Fkomponenter-button--docs)._

Hvordan skal vi klare å sørge for at et helt team har kontroll på hvilke varianter som skal brukes hvor og når i teamets produkt og hvorfor er det så viktig? Det er først og fremst viktig fordi vi skal utvikle en løsning som er gjennomtenkt og formidler et helhetlig produkt som brukeren forstår. Vi må derfor passe på at samme type arbeidsoppgaver for brukeren løses på akkruat den samme måten, både visuelt og funksjonelt på tvers av produktet. Det betyr også at vi må passe på at det ikke blir en tilfeldig implementasjon og brukeropplevelse utfra hvilken utvikler som har implementert funksjonen, men heller ha godt etablerte konsepter i teamet.
Hvordan skal vi klare å sørge for at et helt team har kontroll på hvilke varianter som skal brukes hvor og når i teamets produkt og hvorfor er det så viktig? Det er først og fremst viktig fordi vi skal utvikle en løsning som er gjennomtenkt og formidler et helhetlig produkt som brukeren forstår. Vi må derfor passe på at samme type arbeidsoppgaver for brukeren løses på akkurat den samme måten, både visuelt og funksjonelt på tvers av produktet. Det betyr også at vi må passe på at det ikke blir en tilfeldig implementasjon og brukeropplevelse utfra hvilken utvikler som har implementert funksjonen, men heller ha godt etablerte konsepter i teamet.

Så, det betyr at vi må sørge for å ivareta tre viktige hovedpunkter når vi tar i bruk designsystemet.

Expand All @@ -68,7 +68,7 @@ Så, det betyr at vi må sørge for å ivareta tre viktige hovedpunkter når vi

Hvordan kan vi ivareta egne mønstre, konsepter, trygghet og breaking changes? Nøkkelordet her er å isolere. Ved å isolere tredjepartssystemer øker vi kontrollen på tredjepartssystemet internt i kodebasen og i teamet.

Hva er egentlig å isolere en trejdepart? Det handler om å sørge for at vi bare har et integrasjonspunkt med tredjepart. I dette tilfellet handler det om at vi bare har avhengigheter til desginsystemet et sted. Hvordan kan vi oppnå det? Vi kan oppnå det ved å ta i bruk fasademønsteret.
Hva er egentlig å isolere en trejdepart? Det handler om å sørge for at vi bare har et integrasjonspunkt med tredjepart. I dette tilfellet handler det om at vi bare har avhengigheter til designsystemet et sted. Hvordan kan vi oppnå det? Vi kan oppnå det ved å ta i bruk fasademønsteret.

## Fasademønsteret

Expand All @@ -78,13 +78,13 @@ _Fasademønsteret i programvareutvikling refererer til en designmønstre som til

Team Altinn Studio benytter seg av monorepo som betyr at de kan opprette egne pakker internt i sin egen kodebase. Dette fremmer muligheten til å bygge modulær og skalerbar kode.

Altinn Studio har derfor utviklet sin egen pakke internt i monorepo som de kaller for `studio-components`. Hva er forskjellen på desginsystemet og `studio-components`? Forskjellen er at designsystemet tilbyr et helt desginsystem som inkluderer tokens for farger og avstander, samt grunnleggende komponenter. Mens `studio-components` følger fasademønsteret for å bygge videre på komponentene fra designsystemet, samt tar i bruk tokens fra designsystemet. Med andre ord, så oppnår Altinn Studio isolering av designsystemt ved bruk av `studio-components`. Det gir også muligheten for teamet å definere sine egne mønstre og komponenter for sine behov.
Altinn Studio har derfor utviklet sin egen pakke internt i monorepo som de kaller for `studio-components`. Hva er forskjellen på designsystemet og `studio-components`? Forskjellen er at designsystemet tilbyr et helt designsystem som inkluderer tokens for farger og avstander, samt grunnleggende komponenter. Mens `studio-components` følger fasademønsteret for å bygge videre på komponentene fra designsystemet, samt tar i bruk tokens fra designsystemet. Med andre ord, så oppnår Altinn Studio isolering av designsystemet ved bruk av `studio-components`. Det gir også muligheten for teamet å definere sine egne mønstre og komponenter for sine behov.

_*Er du nysgjerring`studio-components`? Altinn Studio har dokumentasjon av komponentene på https://components.altinn.studio. I skrivende stund er dokumentasjonen under utvikling og mer informasjon om mønstere og konsepter kommer.*_
_*Er du nysgjerrig`studio-components`? Altinn Studio har dokumentasjon av komponentene på https://components.altinn.studio. I skrivende stund er dokumentasjonen under utvikling og mer informasjon om mønstere og konsepter kommer.*_

Her oppnår Team Altinn Studio isolering av designsystemet, samtidig som det åpner for å utvide designsystemet med mer komplekse komponeter for eget behov. Fordelen med å utvide designsystemet er at man ser helheten og kjenner igjen de sammensatte komponentene, fordi den er bygget opp av en eller flere komponenter fra designsystemet.
Her oppnår Team Altinn Studio isolering av designsystemet, samtidig som det åpner for å utvide designsystemet med mer komplekse komponenter for eget behov. Fordelen med å utvide designsystemet er at man ser helheten og kjenner igjen de sammensatte komponentene, fordi den er bygget opp av en eller flere komponenter fra designsystemet.

Eksempelvis har Altinn Studio behov for en [ExpressionEditor](https://components.altinn.studio/?path=%2Fdocs%2Fforms-studioexpression--docs). Dette er en komponent som blir for spesifikk for designsystemet, så det er ikke hensiktsmessig å la designsystemet utvikle og vedlikeholde denne komponenten. Team Altinn Studio har derfor laget sin egen komponent i `studio-components` som utvider designsystemet ved å ta i burk grunnkomponentene designsystemet tilbyr. Komponenten tar også i bruk de samme tokene for avstasnder og størrelser som benyttes i designsystemet. I figur 3 under, så kan du kjenne igjen helheten fordi de bruker grunnkomponentene i designsystemet som byggeklosser. Kult, ikke sant!
Eksempelvis har Altinn Studio behov for en [ExpressionEditor](https://components.altinn.studio/?path=%2Fdocs%2Fforms-studioexpression--docs). Dette er en komponent som blir for spesifikk for designsystemet, så det er ikke hensiktsmessig å la designsystemet utvikle og vedlikeholde denne komponenten. Team Altinn Studio har derfor laget sin egen komponent i `studio-components` som utvider designsystemet ved å ta i burk grunnkomponentene designsystemet tilbyr. Komponenten tar også i bruk de samme tokene for avstander og størrelser som benyttes i designsystemet. I figur 3 under, så kan du kjenne igjen helheten fordi de bruker grunnkomponentene i designsystemet som byggeklosser. Kult, ikke sant!

<Image
src='/img/bloggen/altinnstudio-figur2.png'
Expand All @@ -102,7 +102,7 @@ Her ivaretar Team Altinn Studio det første prinsippet med å kunne definere egn

La oss gå videre og finne ut hvordan vi kan ivareta tryggheten ved oppdateringer av ny versjon av designsystemet.

For å oppnå trygghet og sikkerhet ved oppdateringer av tredjepart er det viktig med isolering av tredjeparten. Hvis man ikke isolerer designsystemet må en ha direkte avhengigheter til designsystemet i alle sider og komponenter i appen. Dette betyr at en må innom alle komponenter og sider som benytter seg av en komponent fra designsystemet som får breaking change. Det betyr at vi potensielt kan få hundrevis av filer som er endret, bare fordi man gjorde en oppdatering av designsystemet. Figur 4 under viser en forenklet illustrasjon. Illustrasjonen viser fire sider som benytter seg av en knapp direkte fra designsystemet, altså ingen isolering. Det betyr at dersom knappen får en breaking change, må det endres kode i 4 side-komponenter. I det virklige liv kan det være snakk om endringer i hundevis av komponenter. Dette gjør at man ikke er helt sikker på om alt fungerer som før oppdateringen.
For å oppnå trygghet og sikkerhet ved oppdateringer av tredjepart er det viktig med isolering av tredjeparten. Hvis man ikke isolerer designsystemet må en ha direkte avhengigheter til designsystemet i alle sider og komponenter i appen. Dette betyr at en må innom alle komponenter og sider som benytter seg av en komponent fra designsystemet som får breaking change. Det betyr at vi potensielt kan få hundrevis av filer som er endret, bare fordi man gjorde en oppdatering av designsystemet. Figur 4 under viser en forenklet illustrasjon. Illustrasjonen viser fire sider som benytter seg av en knapp direkte fra designsystemet, altså ingen isolering. Det betyr at dersom knappen får en breaking change, må det endres kode i 4 side-komponenter. I det virkelige liv kan det være snakk om endringer i hundevis av komponenter. Dette gjør at man ikke er helt sikker på om alt fungerer som før oppdateringen.

<Image
src='/img/bloggen/altinnstudio-figur3.png'
Expand All @@ -112,7 +112,7 @@ For å oppnå trygghet og sikkerhet ved oppdateringer av tredjepart er det vikti
dataUnstyled
/>

Hvrdan kan vi løse denne problemstillingen? Helt riktig — vi kan løse det med isolering av komponentene ved hjelp av fasademønsteret.
Hvordan kan vi løse denne problemstillingen? Helt riktig — vi kan løse det med isolering av komponentene ved hjelp av fasademønsteret.

Figur 4 illustrerer hvordan vi kan isolere ved hjelp av fasademønsteret. Ved å isolere eksterne kilder i egne fasadekomponenter. Så kan vi eksportere kun de nødvendige egenskapene til selve applikasjonen vår. Når det kommer en breaking change, så trenger vi bare å implementere endringen i fasadekomponenten og beholde det samme API ut til vår egen applikasjon internt. Det betyr at vi får bare en fil å endre istedenfor 4 side-komponenter som vist i figur 4.

Expand All @@ -122,22 +122,22 @@ Når vi isolerer komponentene våre, eliminerer vi behovet for å endre den eksi

<Image
src='/img/bloggen/altinnstudio-figur4.png'
alt=' Illustrasjon som viser isolering av designsystemet. Illustrasjonen viser også hvordan man kan håndtere breaking chnage, uten å mått endre de 4 side-komponentene.'
alt=' Illustrasjon som viser isolering av designsystemet. Illustrasjonen viser også hvordan man kan håndtere breaking change, uten å mått endre de 4 side-komponentene.'
boxShadow={false}
caption='Figur 4. Illustrasjon som viser isolering av designsystemet. Illustrasjonen viser også hvordan man kan håndtere breaking chnage, uten å mått endre de 4 side-komponentene.'
caption='Figur 4. Illustrasjon som viser isolering av designsystemet. Illustrasjonen viser også hvordan man kan håndtere breaking change, uten å mått endre de 4 side-komponentene.'
dataUnstyled
/>

Nå som Team Altinn Studio har oppnådd isolering av sammensatte komponenter, kan frontend-utivklere og designere jobbe tettere sammen mellom det som er teknisk implementert og skissene i Figma. Det vil si at Figma skissene kan gjenspeile komponentnavnene i `studio-components`.
Nå som Team Altinn Studio har oppnådd isolering av sammensatte komponenter, kan frontend-utviklere og designere jobbe tettere sammen mellom det som er teknisk implementert og skissene i Figma. Det vil si at Figma skissene kan gjenspeile komponentnavnene i `studio-components`.

Nå kan de dokumentere og benytte de samme komponentene og navnene både i Figma og i kode. Det gjør at det blir lettere for teamet å etablere mønstre og gjenbrukbare komponenter som skal løse de samme problemene på tvres av produktet. Nå kan også fasadekomponentene begrense antall varianter av komponenten fra designsystemet, slik at det blir mindre sannsynlig for at varianter som ikke skal brukes blir benyttet.
Nå kan de dokumentere og benytte de samme komponentene og navnene både i Figma og i kode. Det gjør at det blir lettere for teamet å etablere mønstre og gjenbrukbare komponenter som skal løse de samme problemene på tvers av produktet. Nå kan også fasadekomponentene begrense antall varianter av komponenten fra designsystemet, slik at det blir mindre sannsynlig for at varianter som ikke skal brukes blir benyttet.

**_Altinn Studio kodebasen er åpen kilekode og derfor åpent tilgjengelig for alle. Er du nysgjerrig på studio-components koden, kan du finne koden på denne lenken https://github.com/Altinn/altinn-studio/tree/main/frontend/libs/studio-components._**

Det er avgjørende å sikre at komponentene som utgjør fasadepakken er enkle. Dette betyr at de kun bør motta informasjon som input-props, basert på denne inputen, levere et forventet resultat tilbake. Det er essensielt at komponentene i fasadepakken ikke foretar API-kall eller har tette koblinger til eksterne tredjeparter. Dette kan føre til redusert gjenbrukbarhet av komponentene.

## Oppsummering

Nå har vi lært at vi burde vurdere å isolere tredjeparter som blir brukt som en sentral del av vår egen løsning. Vi har lært at isolering vil skape trygghet og forutsigbarhet. Det vil bidra til å kunne dokumentere og utivkle interne konsepter og mønstre som bygger videre på designsystemet for produktets behov, samtidig som helheten ivaretas. Det vil være med å knytte et enda tettere og bedre samarbeidet mellom design og utvikling.
Nå har vi lært at vi burde vurdere å isolere tredjeparter som blir brukt som en sentral del av vår egen løsning. Vi har lært at isolering vil skape trygghet og forutsigbarhet. Det vil bidra til å kunne dokumentere og utvikle interne konsepter og mønstre som bygger videre på designsystemet for produktets behov, samtidig som helheten ivaretas. Det vil være med å knytte et enda tettere og bedre samarbeidet mellom design og utvikling.

<Contributors authors={['David Øvrelid']} />
2 changes: 1 addition & 1 deletion apps/storefront/app/bloggen/2024/v1rc1/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Her er en kort oppsummering av hva som er nytt:

### Nytt fargesystem og token-struktur

Flere intervjuer og [brukertester](/bloggen/2024/bachelor-temavelger#brukertester-og-videre-arbeid) avdekket at det første fargesystemet ikke løste alle behov. Fargene hadde heller ikke alltid forventet oppførsel, og strukuren var noe tungtvindt å forholde seg til.
Flere intervjuer og [brukertester](/bloggen/2024/bachelor-temavelger#brukertester-og-videre-arbeid) avdekket at det første fargesystemet ikke løste alle behov. Fargene hadde heller ikke alltid forventet oppførsel, og strukturen var noe tungtvindt å forholde seg til.

Vi har de siste månedene utforsket et nytt fargesystem og en token-struktur som er mer fleksibel, lettere å forstå og samtidig ivaretar kontrastkrav. Å definere en solid Token-arkitektur med flerdimensjonale temaer krever overraskende mye tankearbeid - inkludert søvnløse netter og tegninger i dusjen. Ikke bare skal tokens fungere som bro mellom design og kode, det skal støtte multibranding og ulike modes (darkmode og contrastmode), og det skal ivareta kontrastkrav mellom farge-tokens tiltenkt tekst og bakgrunner.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,4 @@ Agne må hjelpe moren sin med digitale oppgaver, og har derfor brukt hennes Bank
## 6. Mika - vergen som ikke får gjort jobben sin

Mika representerer verger.
Mika er verge for 15 personer med ulikt behov for hjelp. Han møter på mange problemer, spesielt med den digitale diaogen han ønsker å ha på vegne av de han er verge for. [Les mer om MIka, gruppen han representerer og hvilke barrierer denne brukergruppen møter.](https://www.digdir.no/klart-sprak/brukergrupper/4658#6_mika__vergen_som_ikke_fr_gjort_jobben_sin)
Mika er verge for 15 personer med ulikt behov for hjelp. Han møter på mange problemer, spesielt med den digitale dialogen han ønsker å ha på vegne av de han er verge for. [Les mer om MIka, gruppen han representerer og hvilke barrierer denne brukergruppen møter.](https://www.digdir.no/klart-sprak/brukergrupper/4658#6_mika__vergen_som_ikke_fr_gjort_jobben_sin)
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ Dersom du ønsker å dele av egen innsikt i innsiktbiblioteket så har vi satt o

Ettersom systemet er på et tidlig prototypstadie og mangler forklarende innholder og guider har vi satt opp [en enkel guide i Miro](https://miro.com/app/board/uXjVM8DHH3o=/?share_link_id=998152182535) som vi håper kan hjelpe deg å komme i gang med å registrere innsikt i innsiktsbiblioteket.

## Bidra til innsiktsbibilioteket
## Bidra til innsiktsbiblioteket

Vårt mål er at innsiktsbiblioteket skal eies og modereres i fellesskap på tvers av offentlig sektor. Dersom du ønsker å bidra til å realisere ett felles innsiktsbibliotek på tvers av det offentlige vil vi gjerne høre fra deg. Vi håper også på at alle (kommune, stat, næringsliv, frivillige organisasjoner, innbyggere, mm) gir tilbakemeldinger samt sender inn forslag og ideer til hvordan vi kan gjøre løsningen enda bedre. Opprett gjerne en ny tråd i [Github discussions forumet](https://github.com/digdir/innsiktsbibliotek/discussions) eller kontakt oss på [email protected] og [email protected].

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Derfor skal vi skrive aktivt og som om vi snakker direkte til brukeren. Vi skal

### Unngå substantivsjuken

Når vi bruker mange substantiver, blir teksten tung å lese og vi bruker flere ord enn nødvendig. Særlig gjelder det når vi gjør et verb om til et substantiv, for eksempel når vi velger å skrive «foreta en utredning» i stedet for å «utrede». Du kan sjekke om teksten er subtantivsjuk ved å se etter ord som slutter på «-ing» og «-else» og har en «av» foran.
Når vi bruker mange substantiver, blir teksten tung å lese og vi bruker flere ord enn nødvendig. Særlig gjelder det når vi gjør et verb om til et substantiv, for eksempel når vi velger å skrive «foreta en utredning» i stedet for å «utrede». Du kan sjekke om teksten er substantivsjuk ved å se etter ord som slutter på «-ing» og «-else» og har en «av» foran.

#### Eksempel

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,4 @@ Bli med å [bidra her](https://github.com/navikt/aksel/blob/main/%40navikt/aksel

### Tilgjengelighet

Ikonene skal funke for alle brukerene, uansett situasjon. Les mer om [hvordan du sikrer tilgjengeligheten](https://aksel.nav.no/god-praksis/artikler/tilgjengelig-ikonbruk) når du bruker ikoner og hvilke aria-atributter du bør bruke.
Ikonene skal funke for alle brukerene, uansett situasjon. Les mer om [hvordan du sikrer tilgjengeligheten](https://aksel.nav.no/god-praksis/artikler/tilgjengelig-ikonbruk) når du bruker ikoner og hvilke aria-attributter du bør bruke.
Loading

0 comments on commit 899d848

Please sign in to comment.