Arbetsförmedlingens designsystem

Digin är Arbetsförmedlingens designsystem som består av fler delar. Webbplatsen digi.arbetsformedlingen.se innehåller bland annat riktinjer och teststrategier som ligger till grund för lättanvända och tillgängliga tjänster. Idag används ett flertal ramverk och bibliotek för att ta fram våra digitala tjänster vilket är komplicerat att underhålla. Här beskrivs nuläget följt av det önskade nyläget.

Nuläge

  • digi-core
    En helt ramverksoberoende källa för komponenter, design tokens, css och övrigt som har med Digin att göra. Här finns bland annat ett web components-baserat komponentbibliotek, gemensam css/sass och hjälpfunktioner för webbläsaridentifiering, mus- och tangentbordsfunktioner och så vidare. Detta paket är ungt, men jobbas mycket aktivt med. Det kommer i förlängningen att vara den naturliga källan för all digirelaterad kod. I praktiken så ersätter det både naf-ui-framework, af-b4, af-ui, af-webfont-new och af-sass helt och i stor mån även digi-ng
  • digi-ng
    Angularversionen av komponentbiblioteket. Här finns allt från ui-komponenter som knappar, kort och formulärelement till tillgänglighets- och hjälpkomponenter som focus traps och skärmläsartexter. Detta paket jobbas aktivt med och har som målsättning att vara uppdaterat efter de senaste riktlinjerna. Långsiktigt så kommer digi-ng att vara ett tunt angularskal ovanpå digi-core.
  • af-sass
    Källa för gemensam sass. Innehåller både äldre bootstrapbaserad sass och nyare tredjepartsoberoende sass. Den äldre css:en används av af-ui, och den nyare till stor del av digi-ng. Arbetas inte speciellt aktivt med då det i förlängningen kommer ersättas med digi-core.
  • af-ui
    Det första komponentbiblioteket för angular. Bygger på flera stora tredjepartsverktyg och ramverk (bland annat bootstrap, angular-material, angular-cdk, hammer.js och moment.js) och följer ej nuvarande riktlinjer. Arbetas inte alls med och ska ej användas om det går att undvika. Ersattes i början av 2020 av digi-ng.
  • af-b4 (global stilmall baserad på bootstrap 4)
    Används av arbetsformedlingen.se och externa tjänster utvecklade eller refaktorerade efter 2018 då Arbetsförmedlingens nya grafiska profil implementerades. De flesta tjänster på arbetsformedlingen.se är idag baserade på nyare version av Angular och använder Bootstrap 4 som css-ramverk.
  • naf-ui-framework (e-tjänstspecifik stilmall baserad på bootstrap 3)
    Används av de första externa tjänsterna som utvecklades mellan 2014 och 2017 med angularjs. Ett fåtal tjänster använder fortfarande bootstrap 3.
  • af-webfont-new
    Egengenererad webfont med ett urval av ikoner från FontAwesome 5 som primärt används av webbplatsen och alla externa tjänster. Webfonten importeras i af-b4 och tillhandahålls på hela externa webbplatsen. Dokumenteras på sidan Ikoner.
  • Ui-kittet
    Ui-kittet är ett komponentbibliotek i Sketch vars komponenter är gjorda som symboler. Dessa symboler gör att när designen uppdateras i Ui-kittet, slår de ändringarna igenom i allas filer som är synkade till biblioteket. Alla Ui-kittets komponenter är beslutade, globala och utvecklade och de fungerar som ett facit till Digin.
  • Bubblarn
    Bubblarn är ett Sketch-dokument där vi inventerar de komponenter som är beslutade och utvecklade men inte globala – det är alltså bara något team som använder dem. Dessa komponenter är inte gjorda som symboler.

Nyläge

I december 2019 påbörjades ett arbete med digi-ng, det gemensamma komponentbiblioteket för angular. Syftet var att skapa ett skalbart bibliotek som underlättade för tjänsterna att följa designsystemets riktlinjer och inte hade några stora tredjepartsberoenden. Under 2020 har det växt rejält och innehåller i skrivande stund nästan 200 komponenter (varav 70 i och för sig är ikoner).

Behovet av gemensamma komponenter finns dock även för applikationer som inte använder angular, så parallellt har det initierats ett arbete för att få till en ramverksoberoende lösning. af-b4 är inte tillräckligt skarpt då det enbart täcker upp visuella riktlinjer och har begränsad täckning för t.ex. tillgänglighet.

Lösningen är digi-core. Här utvecklar vi ett komponentbibliotek med web components (vi använder Stencil.js för detta), vilket innebär att de går att använda precis överallt där html finns: Angular, Sitevision, React, ren och skär html, var som helst. Detta bibliotek växer markant då allt fler komponenter byggs.

Digi-core innehåller också gemensam css och sass, som är byggt på ett mycket modernare sätt. Vi tänker hela tiden i design tokens (t.ex. marginaler, fontstorlekar etc), här representerade med variabler i både css och sass. Tanken är att detta ska kopplas ihop med ui-kittet och andra designverktyg så att det sker ett sömlöst utbyte av design tokens däremellan.

Målsättningen med digi-core är att all grundläggande digirelaterad kod ska finnas där. Sedan kan andra mer specifika paket använda sig av detta (t.ex. kommer digi-ng använda sig av komponenter härifrån). Syftet är att ha en källa för allt, så att vi inte behöver ha flera versioner av samma sak. Vi vill att den allt för långa listan med paket ovan ska kunna bantas ner till bara ett eller två.