Arrange Figma component-library for the new altinn 3 design system

[mrosvik]

Description

Flere komponenter finnes i dag både i ADS og i Altinn Studio Apps, dette skaper problemer ift. å holde komponenter og tokens i sync mellom Figma og kode. Vi må derfor kombinere de ulike Figma komponent-bibliotekene ADS og Altinn Studio Apps til en felles fil for tokens og en felles fil for komponenter - Slik at vi kun har en master per komponent å oppdatere tokens på til vårt nye designsystem for Altinn 3.

Filene organiseres slik:

1. Design tokens

Filen inneholder:

• Grunnleggende verdier for farger, avstander, størrelser, osv (f.eks en farge - blue-500
)
• Semantiske verdier, som relaterer til en spesifikk kontekst og gir verdien en intensjon (f.eks. farge for advarsel - color-warning)
.

2. Komponenter

Alle komponenter med tilhørende tokens (spesifikke verdier, som angir verdier kun for en konkret komponent, f.eks fargen på et panel (color-background- panel)).

Komponent-siden viser

• Hovekomponent + Base components (Mindre komponenter brukes som byggeklosser for større komponent)
• Eksempler på bruk
• Guidelines
• Komponent-spesifikke Design Tokens
• Status (lenke til Storybook dersom ferdig)

3. Ressurser

F.eks ikonbibliotek, illustrasjoner, logo, mm.

4. Prototype-kit for eksterne

Filen "Altinn Studio Apps", som er et prototype-kit laget for tjensteeiere, må hente inn komponenter som instanser fra ADS, og deretter lage nye komponenter med instansen, slik at de blir tilgjengelige i assets for eksterne.

Tasks

• Lage en fil for alle felleskomponenter, med en komponent per side (Det er tungvint å lete i forskjellige filer, slik det er i dag.)
• Guidelines for oppretting av nye design tokens (navnekonvensjon, osv)
• Tilrettelegge for status på hver komponent som sier om de er påtenkt (ønsket), under arbeid, klar til utvikling eller om de finnes i storybook.
• Dersom komponenten finnes i storybook: lenke fra Figma til storybook.
• Opplyse om design-tokens som en del av Figma-filen (ikke bare i pluginen)
• Flytte alle main components fra Altinn Studio Apps over i ADS og hente inn som instanser i Altinn Studio Apps.
• Bibliotekene som skal kombineres bruker ulike fonter (Altinn-Din og FF-Din) - Bytte disse til inter.

---

Oppdatering 15.07.22:
Har flyttet alt over til Komponent-filen, men har lagt de fleste Altinn 2-komponenter på backlog-side foreløpig, slik at vi kan gjennomgå dem før de lages som egne sider per komponent.

• Dette bør gjøres per komponent i backlog:
• Dersom det finnes ulike versjoner av en komponent i autorisasjon og i Studio, eniges om hva som skal gjelde.
• Skrive guidelines / evt. sjekke at guidelines fra Altinn 2 fortsatt er gjeldende
• Sjekk at komponenten benytter autolayout og er korrekt skalerbar i bredde og høyde.
• Sjekk om component properties kan brukes i stedet for varianter, for å forenkle vedlikehold.
• Sjekke komponenten opp mot nye WCAG-krav
• Opprette design tokens