Jämförda versioner

Nyckel

  • Dessa rader lades till.
  • Denna rad togs bort.
  • Formateringen ändrades.

...

Om vårt

...

designsystem

Komponentbiblioteket ingår i Ineras Designsystem består av komponentbibliotek i Figma och kod (IDS) samt riktlinjer för gränssnittsdesign. Sedan år 2020 skall alla projekt och tjänster använda men också bidra till komponentbiblioteketkomponentbiblioteken. Hur övergången görs på bästa sätt görs upp i dialog med Arkitektur/UX under arbetet med Design Authority.

...

Ibland är det inte lika tydligt vilken variant av Inera Designsystem som skall användas och då bör kontakt tas medux@inera.seför att säkra att rätt spår väljs.

Panel
bgColor#DEEBFF#F4F5F7

Sök efter komponenter

Livesökning
spaceKeyUSI
sizelarge
additionalpage excerpt
placeholderSök enbart komponenter
labelskomponent

...

Innehåll

Innehållsförteckning

...

Varför?

...

Vi har vårt designsystem för att:

  • minska kostnader i våra projekt och förvaltningar

  • göra det enklare för externa konsulter att påbörja sitt arbete genom en verktygslåda

  • förenkla för användarna och öka igenkänning

  • kvalitetsgranska det som ingår i designsystemet med avseende på tillgänglighet och god användbarhet.

Bakgrund

Ineras designsystem är uppbyggt genom att vi plockat ut återanvändbara delar från tidigare projekt där tillgänglighet och användbarhet är säkerställda genom erfarenhet och tester. Dessa delar är sedan omgjorda till så kallade komponenter, både i Figma och frontend-kod.

Vi strävar inte efter att ligga i framkant utan använder oss av designmönster som har uppnått mogenhet så att merparten av användarna känner igen sig. Detta innebär att vi behöver lägga något mindre resurser på att testa våra skisser på användare då vi har tidigare erfarenheter av att det fungerar. Vi fokuserar främst på att testa flöden och hur informationen i UI:n förstås.

Inera Design System (IDS)

Inera Design System (IDS) är motsvarigheten till komponentbiblioteket men i kod. IDS är uppbyggt med Web Components i grunden (ids-core). Arkitekturavdelningen på Inera rekommenderar att framtida projekt främst väljer React, därför finns ids-react. Vi har också stöd för Angular, genom ids-angular. IDS har inga beroenden utan levererar allt i ett paket.

För tjänster som inte kan använda core, react eller angular kan rätt styling ändå appliceras genom ids-design, som är ren CSS.

Du hittar IDS på https://design.inera.se/ .

/wiki/spaces/AOR/pages/2228423708

...

Äldre versioner av gemensam kod/bibliotek

Vi har både ett css- och ett angularbibliotek som numera är utdaterade och inte ska användas längre. Behöver du använda angular hänvisar vi till ids-angular.

CSS (end of life januari 2025)

Vi har återanvändbar CSS för både Inera och 1177 varumärket. Skapandet av en gemensam CSS var ett första steg mot återanvändbar kod för våra tjänster. I all nyutveckling framöver rekommenderas IDS, och vår CSS kommer ha end of life 2025. Detta betyder att vi inte längre kommer uppdatera eller ha support för användare som inte ännu gått över till IDS.

Angular (gammal version)

Vi har återanvändbara komponenter skrivna i Angular och för . För mer information om dessa så besök webbplatsen: https://ic-angular.1177.se.

...

Återkoppling

När det saknas komponenter eller mönster i designsystemet så tar vi gemensamt fram dessa. Detta kan göras på olika sätt efter överenskommelse med oss som arbetar med UX-ramverket.

...