feat(nve-layout): layoutkomponenter

[malingranlynve]

Layoutkomponenter: stack, box, cluster og grid

Vi har til nå manglet layout i designsystemet, og endt opp med egendefinert css for layouts i hvert enkelt prosjekt. Denne PRen introduserer fire layout-primitiver som dekker det meste av hverdagsbehov. Layout-primitivene er basert på Every-Layout: https://every-layout.dev/

Hva er med?

stack-layout – stabler innhold vertikalt med mellomrom.

box-layout – pakker inn innhold med padding og valgfri bakgrunnsfarge.

cluster-layout – grupperer elementer horisontalt med automatisk linjebryting.

grid-layout – responsivt rutenett som tilpasser antall kolonner etter tilgjengelig plass, helt uten media query.

Alle komponentene bruker samme mønster: en size-prop som er låst til spacing-tokenene våre og en separat gap/padding-prop for rå CSS-verdier i unntakstilfeller.

Hva er ikke med?

Det ble vurdert å ta med: center-layout, columnist-layout, cover-layout, sidebar-layout og wrapper-layout, men jeg landet på at det er bedre å legge til når vi ser behovet kommer. Jeg tror det meste av bruk er dekket godt med de som tilbys nå.

Si gjerne ifra om du vil endre på noe!

fixes #898

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-907.westeurope.5.azurestaticapps.net

[lisamarimyreneNVE]

Du har sikkert tenkt på dette, men burde det heller hete nve-box, nve-layout, nve-stack osv. for å lettere se i koden at det kommer fra nve designsystemet og ikke noe "egendefinert"? Er usikker på hva som er best, kanskje flere har noen meninger på det?

[malingranlynve]

Du har sikkert tenkt på dette, men burde det heller hete nve-box, nve-layout, nve-stack osv. for å lettere se i koden at det kommer fra nve designsystemet og ikke noe "egendefinert"? Er usikker på hva som er best, kanskje flere har noen meninger på det?

Jeg lurte på det samme! Ser også at f.eks. aksel.nav.no bruker bare "box" og "stack", så jeg er usikker på hva som er best her

[malingranlynve]

Note to self: lage et eksempel her som viser hvordan layoutene kan kombineres. Kanskje en visualisering av det også?

[gruble]

Bra jobba med dokumentsjon og gode eksempler.
Jeg liker at komponentene er basert på tanker og problemstillinger som er kjent og godt dokumentert fra før (på https://every-layout.dev/).

Vi får noen pedagogiske utfordringer fordi vi bruker size for å sette gap og padding. Likevel tilbyr vi overstyring ved å sette gap, padding direkte. Dette synes jeg er litt forvirrende. Kan vi ende opp med at noen angir gap eller padding med token-verdier i stedet for å bruke size og er dette egentlig et problem?

Jeg må innrømme at jeg falt av ganske fort da jeg forsøkte å lese de eksemplene som var tilgjengelige på https://every-layout.dev/
Er det virkelig så komplisert å lage god responsiv layout?

Jeg driver fortsatt og lærer meg CSS og det er mye jeg ikke skjønner.
Men jeg har stort sett greid å få til den layouten jeg ønsker med å bruke CSS likevel.
Trenger vi da et ekstra lag oppå CSS for å håndtere layout?

Hvis vi velger å ta i bruk egne komponenter for layout i designsystemet, ønsker jeg at vi dokumenetrer fordeler og ulemper med dette i https://github.com/NVE/Designsystem/blob/main/beslutninger.md og hvorfor vi bestemmer oss for å bruke dem. Kanskje bør vi skrive noe her uansett om vi går for det eller ikke, så slipper vi omkamper:)

[gruble]

Jeg sliter litt med å forstå dette konseptet.
Stemmer det at size kun setter padding og ikke påvirker selve størrelsen på boksen?
Om det stemmer, hadde det vært supert om vi kunne skrive dette enda mer tydelig, enten i dette avsnittet eller i avsnittet for stærrelse.

[malingranlynve]

Mange gode poeng her, @gruble!

Hovedpoenget med disse layoutene er for å simplifisere CSS og layout for de som ønsker det. Dette blir selvfølgelig valgfritt, og ønsker man å fortsette å bruke egen CSS for å definere dette er det absolutt mulig! Tanken er bare at man skal kunne bygge opp en responsiv layout raskt, slik at fokus kan være på logikk og utseende heller enn responsivitet 😊

Jeg er enig i at det er forvirrende med både gap og size, og kanskje jeg bare kan fjerne gap? Da kan man velge å bruke spacing-tokens rett fra DS i layout-komponentene, og om disse ikke passer, så kan man lage sin egen CSS som vanlig. Tror kanskje det vil hjelpe å gjøre det mindre forvirrende 😅 Vi må jo ikke ta alle prinsippene fra Every Layout.

Jeg kan legge til et avsnitt i beslutninger-filen så dette er dokumentert!

[gruble]

Flott.
Er det mulig å bytte navn på size til gap? Jeg synes gap-begrepet passer bedre med hva dette brukes til.
Aner ikke hvordan man da kan løse å bruke egne tokens for gap, men da har man jo alltids mulighet til å bruke css i stedet for layout-komponenten, hvis man trenger mer kontroll.

[olmabo]

Veldig kult at dere ser på slike komponenter, og bra docs og oppsett ! Jeg har ikke sett så nøye på alt men legger bare inn noen punkter her jeg kommer på etter en rask titt:

• Kunne size i box-layout egentlig heller hete padding? For det er vel padding som egentlig settes basert på den. Ofte har man bruk for padding/margin som er ulike horisonalt og vertikalt. Av og til trenger man også ulike padding i top/bottom og left/right. Så tror det også kunne vært lurt å hatt blant annet disse props-ene:
  • margin/padding
  • paddingBlock/paddingInline
  • marginBlock/marginInline
• Kunne alle layout-komponentene hatt/arvet en del felles props? Feks kunne alle layout-komponentene arvet margin/padding props (og flex-props også evt). Ofte vil man feks sette en stack med en gap, men man vil kanskje ha litt padding/margin også. Da slipper man lage 2 html-elementer (1 box og en stack). Box kan fungere som en base-komponent for de enkleste tingen som padding/margin osv, mens grid og stack har litt ekstra props som er rettet mot grid (kolonner) og stack (gaps)
• hadde det vært mulig med egen mappe til layout-komponenter i src/components ? Under doc-site har dere doc-site/layout som jeg synes er fint og ryddig. Tror det kunne vært fint med feks src/components/layout eller lignende også. Da kunne man også hatt noe kode som var felles for alle layout-kompoentene der