Fix: skrive om flex komponent

[zenabii]

Fremdeles work in progress!
Ikke klar for review enda :)

• Closes Flex komponent #4238
• Closes Definere alle attributter som kan tilføyes Flex komponenten #4239
• Closes Få inn all logikk i stylesheet istedenfor i tsx fila #4240
• Closes Ny skriftlig dokumentasjon og interaktiv eksempel som viser alt man kan gjøre med Flex komponenten #4241

Notater for dokumentasjon til Flex:

PROPS:
Layout
Angir layout for elementer per rad. Layouter med lik bredde er navngitt for å korrelere med antall elementer du ønsker per rad, da dette gir en konsistent opplevelse når du hekker. Layouter med ujevn bredde er navngitt basert på et 12-kolonne rutenett for å korrelere med hvordan designere jobber i Figma.

Godtar både en enkelt verdi layout="2" eller et objekt for å spesifisere forskjellige verdier for forskjellige bruddpunkter (alle bruddpunkter er valgfrie): layout={{ xs: 1, md: 2, lg: 4 }}.

Gap
Gap kan være en av forhåndsdefinerte konstanter. Godtar også to verdier atskilt med mellomrom for å spesifisere forskjellige row- og column gap. For eksempel vil gap="lg md" forårsake lg row gap og md column gap.

Avstandsstørrelsene er xs (unit-10 / 8px), sm (unit-20 / 16px), md (unit-30 / 24px), lg (unit-40 / 32px), xl (unit-50 / 40px), xxl (enhet-100 / 80px). (disse verdiene må tilpasses etter Jøkul sin praksis - her har jeg bare lagt inn midlertidige verdier)

Aksepterer både en enkelt verdi gap="md" eller et objekt for å spesifisere forskjellige verdier for forskjellige bruddpunkter (alle bruddpunkter er valgfrie): gap={{ xs: 'none', md: 'lg' }}.

Alt du kan gjøre med display: flex, du kan gjøre med < Flex >. Props til < Flex > er kjent for CSS flex-spesifikasjonen. Dette betyr at vi kan skrive mindre CSS når vi bare trenger å plassere elementer - både i rutenett, men også på mikronivå, som Buttons ved siden av hverandre. Det betyr også; jo mer du kjenner til CSS flex-standarden, jo mer kan du låse opp kreftene til < Flex >. Vi anbefaler disse CSS flex guidene og spillene:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
https://flexboxfroggy.com

Som standard gjengis alle Flex som vanlige

-tagger. Du kan endre dette ved å sende et hvilket som helst HTML-tagnavn eller React-komponent til as prop.

🎯 Sjekkliste

• Nye features er dokumentert (sjekk Contributing om du er usikker på hva som trengs av dokumentasjon)
• Testet responsivitet og UU (tastaturnavigasjon, skjermleser)
• pnpm build og pnpm ci:test gir ingen feil

[zenabii]

Har begynt å såvidt samle info og skrible litt for dokumentasjon til flex, legger det øverst i selve PR'en :)

[fremtind-bot]

✅ Forhåndsvisning: https://jokul.fremtind.no/preview/fix--flex-component/
🔍 Commit: 24d23a6

Forhåndsvisningen blir tilgjengelig innen et par minutter. Den fjernes automatisk når pull requesten lukkes.

[ivarni]

Her smeller det i eksempelet til Expander (det er derfor visuell regresjonstest feiler) fordi gap er sent inn som et tall og tall har ingen trim() funksjon.

Har også kanskje lyst til å foreslå at toObj får et bedre navn for den ser ikke ut til å lage noe objekt men et array. Det var litt vanskelig å resonere seg fram til hvorfor det krasjer.

[zenabii]

Lagt inn ignore prettier på selve style filen for Flex og ryddet opp, dette reduserer linjer kode i style.scss fra over 1000+ til ca 300 linjer med styling 👍