Open

Ineras UX-ramverk utvecklas löpande. Denna sida visar nya komponenter och större förändringar i UX-ramverket samt direktlänkar till relaterade sidor.

2025

Juni

Kod

• Release 7.0 (Länkar till Storybook)

  • Ids-react-paketet nu fullständigt react

  • Större namnändringar och strukturella ändringar

  • Bugfixar

Figma

• Header - Ny design inloggat läge i mobil för 1177 profession, 1177 admin och inera admin.

• Tab - Uppdaterad design.

• Notification badge - nya varianter för information, success, attention och error.

Maj

Kod

• Release 6.2 (Länkar till Storybook)

  • Liten patch med mindre förbättringar och bugfixar

Figma

• Dark mode 

  • Alla komponenter är kompatibla med dark mode. 

  • 1177 mode för Brand Profession/Admin bryts isär, befintligt mode byter namn till Admin, ett nytt mode för Profession läggs till. 

  • Nya semantiska namn på färger. 

    • Color/surface - bakgrundsfärger 

      • background-40 byter namn till surface-default 

      • on-background-40 byter namn till on-surface-default 

      • Ny bakgrund för surface-alternative (beige) som kan användas i admintjänster. 

    • Color/brand - varumärkesbärande färger. 

    • Color/navigation - används t.ex. för menyer och Header. 

    • Color/interactive - används t.ex. för länkar och knappar. 

    • Color/feedback - används t.ex. för Alert och Badge. 

  • Heading - nya färger för respektive rubrikstorlek. 

  • Befintliga färger finns kvar men byter namn till Palette/.. – OBS! Dessa färger är inte kompatibla med dark mode. 

    • Palette/primary 

    • Palette/secondary 

    • Palette/accent 

    • Palette/neutral 

    • Palette/success 

    • Palette/attention 

    • Palette/error 

  • Nya färger 

    • Palette/primary/60 

    • Palette/primary/90 (Inera) 

    • Palette/accent/50 (1177) 

    • Palette/accent/60 (1177) 

    • Palette/neutral/10 

    • Palette/neutral/15 

    • Palette/error/60 (Inera)

• Ikoner 

  • Många nya ikoner har lagts till. 

  • Uppdatering av alla befintliga ikoner. 

  • 1177 har nu enfärgade ikoner och har därför inte längre varianter för färger. 

  • Förinställda storlekar har ändrats - det går fortsatt bra att använda andra storlekar. 

    • Large minskas från 40x40px till 20x20px 

    • Small minskas från 20x20px till 16x16px 

  • Vissa ikoner har fått en anpassad design i små varianter för att synas bättre. 

  • Arrow, Chevron och Swap bryts isär till komponenter för respektive riktning istället för varianter. 

  • Ny ikonfont som innehåller samtliga ikoner - Inera design icons 

    • Instruktioner för användning av ikonfonten finns på sidan Icons i komponentbiblioteken.

• Header 

  • Uppdaterad design för 1177. 

  • Uppdaterad design av länkar för 1177 Profession/Admin desktop. 

  • Ny ombudsfunktion inbyggd i Header för 1177. 

  • Ökat antal länkar i inloggade användarens meny. 

• Footer 

  • Uppdaterad design för 1177 citizen/profession/admin. 

• Patient header - ny komponent 

• Accordion 

  • Använder nu rubrikstorlekar. 

  • Hover state tillagt. 

• Link -  variant för dokument-ikoner är borttagen. 

• Search field - label tillagt. 

• Range - uppdaterad design. 

• Date label - använder nu mode istället för varianter. 

• Bullet list använder nu mode för brand. 

• Description list använder nu mode för brand. 

• Badge 

  • variant “Primary” byter namn till “Notification”. 

  • variant “Secondary” byter namn till “Subtle”. 

• Notification badge - har nu en variant istället för två för antal tecken. 

• Card 

  • 1177 - variant med röd kantlinje finns nu endast för invånare och variant med blå kantlinje finns nu endast för profession/admin. 

  • Variabler för padding går nu att använda för Card så att paddingen anpassas för mobil/desktop. 

    • Card/padding-horizontal 

    • Card/padding-vertical 

• Focus card 

  • Uppdaterad design för 1177. 

  • Nu finns motsvarande komponent även för Inera. 

• Survey card - tas bort, använd istället Focus card. 

• Tables - Justerad design för samtliga tabeller. 

• Scrollbar - Justerad nedtonad design. 

April

• Vi utökar återanvändbara sidor så som felsidor tar fram exempel på hur dessa ska se ut. Felsidor - 1177 & Inera

Kod

• Release 6.1 (Länkar till Storybook)

  • Förbättring tillgänglighet

  • Flera ikoner till fonten

  • Bugfixar

Figma

Figma uppdateras inte i samma utsträckning under det arbete som pågår med att skapa förutsättningarna för Dark Mode. Vi kommer därför i maj månad komma med en betydligt större uppdatering av våra komponenter där vi också kommer informera om nya arbetssätt för färger och färghantering.

Mars

Kod

• Release 6.0 (Länkar till Storybook)

  • Ikonfont

  • Många breaking changes

  • Test av renodlade React-komponenter

Figma

Arbetet med att förbereda Dark Mode i Figma (kommer i release 7.0 19 juni) innebär att vi inte kan släppa uppdateringar i Figma just nu. Vi kommer återkomma i april med uppdateringar och förbättringar i Figma.

Februari

Kod

• Release 5.5 (Länkar till Storybook)

  • Linkbox

  • Bugfixar

• Påbörjat dark-mode branch.

• Test för native-komponenter.

• Påbörjad implementation av ikonfont.

Figma

• Accordion

  • Nytt namn, tidigare “Expandable”

  • Ikoner (chevron och plus/minus) har flyttats till vänster om rubriken

  • Icon buttons med plus och minus har bytts ut till motsvarande ikoner

  • Padding kring divider har ändrats

  • Två nya varianter har lagts till, Small och Extra small, den nuvarande varianten har fått namnet Medium.

• Badge - Variant Neutral för Inera får uppdaterat utseende.

Januari

Kod

• Release 5.4 (Länkar till Storybook)

  • Sidomeny och sidopanel

  • Uppdaterad mobilmeny

  • Mindre komponentfeatures

  • Bugfixar

Figma

• Side menu container - ny komponent

• Side menu option - ny komponent

• Side panel - ny komponent

• Box link - ny komponent

• Check button

  • Nytt namn, tidigare “Filter button”

  • Justerad design med check-ikon för valda

• Breadcrumbs

  • Ikonen i mobil har ändrats från chevron till arrow.

  • Varianter för Device har ersatts med mode.

• Alert global - bytt namn från Global alert

2024

Julledighet

December

Kod

• Release av IDS 5.3

  • Kompakta formulär i admin och pro.

  • Updaterad Jämtland Härjedalen logotyp och flexiblare header knappar.

  • Bugfixar

• Release av IDS 5.2

  • Headers för Inera och Inera admin kan ha både knappar och länkar i header

  • En hel del CSS-fixar

  • Tillgänglighetsfixar, bland annat fokuserbar headline i dialog

  • Bugfixar

Läs mer om uppdateringarna i vår changelog.

Figma

• Nytt mode introducerat vid namn "Brand" som används för att sätta tema (gäller endast formulär för nu).

  • 1177: Citizen och Pro/Admin.

  • Inera: Inera.se och Admin.

• Button, Loading button, Spinner och Search button - Justerade storlekar.

• Search button - Varianter för Device har ersatts med mode.

• Formulär

  • Kompakta formulär för Admin och Pro (mode: Brand - Pro/Admin).

  • Varianter för light som används på mörkare bakgrunder (Color style: Light).

  • Justerade storlekar.

  • Uppdaterad design för Disabled och Invalid.

• Search field

  • Nu finns motsvarande varianter som övriga formulärskomponenter.

  • Varianter för Size: Small som har samma storlekar som vanlig Input.

  • Varianter för Device har ersatts med mode.

• Select multiple - Varianter för Expanded har ersatts med booleaner.

• Header (1177) - Ökad fontstorlek för tjänstens namn i mobilläge för profession och admin.

• Header (Inera) - Puff med text finns nu för megamenyn i desktop.

November

Figma

• Badge - Ikon kan nu aktiveras i properties.

• Description list

  • Variant med linjer byter namn till Column.

  • Ny variant för invånare med linjer för 1177.

• Scrollbar

  • Justerad bredd och padding.

  • Nya varianter för Hover och Active states.

• Popover - Justerad Scrollbar.

• Textarea - Justerad Scrollbar.

• Search field - Kryss för att rensa Search field är borttaget.

Resursbiblioteket
Thumbnail - Justerad bredd och höjd till Figmas nya aspect ratio.

Oktober

Kod

• Release av IDS 5.1

  • Nya komponenter: Dropdown, Pagination, Desciptionlist

  • All relevanta komponent CSSer är nu i ids-design.

  • Refaktorering av button och link.

  • List css och mycket mer

  • Bugfixar

Läs mer om uppdateringarna i vår changelog.

Figma

• Pagination byter namn till List pagination.

• Data table pagination byter namn till Data pagination.

• Typografi

  • En rubriknivå har lagts till

  • Rubriknivåerna har fått nya namn

  • Fonten har bytts ut i wireframe mode

  • Rubriker och texter som komponenter har tagits bort

Confluence

• Designriktlinjer för https://inera.atlassian.net/l/cp/cAGYrCcb har ändrats och utökats

• Dokumentation för Data table pagination

• Dokumentation för List pagination

September

Kod

• Release av IDS 5.0

  • Footer CSS.

  • Header CSS (1177, 1177-admin, 1177-pro)

  • Temaspecifika header/footer komponenter baserade på ids-design.

  • Datatabell CSS

  • Popover CSS

  • Bugfixar

Figma

• Data table - justerad och minskad padding

• Tag

  • Inera: Minskad padding

  • 1177: Minskad padding, vit bg-färg, högre kontrast på konturlinje och justerad border radius

Augusti

Under augusti har fokus varit på att:

• Fortsätta med arbetet med ids-design (IDS CSS)

• Planera hösten

• Onboarding av nya personer i designsystem-teamet

Confluence

• Genomgång och uppdatering av dokumentation för alla Komponenter

• Genomgång och uppdatering av Designriktlinjer

Juli

Juni

Nya regler gällande användningstester och ersättning. INGEN ERSÄTTNING utgår till användare vid användningstester med omedelbar verkan. Vi undersöker om det kommer finnas andra sätt att ge ersättning och återkommer då. Du kan läsa mer om ersättning vid användningstester på sidan Deltagare.

IDS (kod)

Ingenting nytt - du kan se det vi arbetar på just nu under Pågående arbete.

Figma

Text styles
Nu styrs även text styles med modes. Text styles som tidigare var uppdelade i mobile och desktop har ersatts med nya text styles med variabler. Det blir enklare att välja rätt text style och antalet text styles i listan halveras.
Exempel: Istället för att välja "Mobile/Heading large" eller "Desktop/Heading large" väljer du bara "Heading large". Följande komponenter har uppdaterats med modes som ersätter varianter för device:

• Modal

  • Ny variant "Custom" har lagts till med en placeholder slot som kan användas för annat innehåll med lokal komponent.

• Stepper

  • Vid långa rubriker fyller texten ut på ny rad (fill).

• Progress bar

  • Nya varianter "Empty" och "full".

• Global alert

• Agent (1177)

• Preamble

• Body text

Confluence

Kommande:

• Sommarstädning

• Uppdatering av information

• Nya designriktlinjer för

  • Tabell i mobil

  • Sök i select/multiselect

  • Card i mobil

Maj

IDS (kod)

Release av 4.10.0.

• Alert ribbons

• Button group kontroller för breakpoint

• Angular länk, 1177 avatar och card bugfix.

Release av 4.9.0.

• 1177-pro har bytt till blått (första steget mot 1177-admin)

• Intervaller för range

• Nya card

Figma

• Versalrubriker i Expandable har tagits bort, komponenten använder nu modes för device.

• Versalrubriker i komponenten Heading har tagits bort, komponenten använder nu modes för device.

April

IDS (kod)

Release av 4.8.0.

• Card utan ram på mobil.

• Textarea som växer med content.

• Header skip-link.

• Ikoner i länkar placeras med första rad.

Release av 4.7.0.

• Nya och uppdaterade ikoner.

• All formulär CSS är nu migrerad till design.

• Bugfixar och prestandaförbättring (borttagning av gamla ikonbiblioteket, mindre CSS-redundans i formulären).

• Total omskrivning av formulär-element hantering. IDS formulärelement kan nu integreras mycket enklare med manuell validering.

• Agent och Alerts har nu öppna headline slots för egna h-taggar.

Figma

• Ikon “double arrow” (dubbelriktade pilar) byter namn till “swap” för att matcha IDS

• Komponenter med versaltext - beslut tagna, ej genomförda ännu

  • Versalrubriker utgår, påverkar alla komponenter som använder dessa, t ex expandables och cards med versalrubriker

  • Badges blir versalgemena (inledande stor bokstav, följt av små)

  • Knappar fortsatt versala

• Alert ombyggda för att utgå från nya 8-baserade avstånden och använder nu också layer modes (desktop/mobil)

• Alert ribbon - ny variant: en mer slim och stängbar variant av alert utan rubrik, med mindre ikon

• Description list - ny komponent: visar listor med innehåll där varje informationspost har en beskrivande term/rubrik

Confluence

• Uppdaterade riktlinjer för Visa mer/visa mindre (fälla in och ut)

• Uppdaterad information för övergången till 1177 för vårdpersonal (öppna sidor och admingränssnitt). Sidor som berörs:

  • 1177 - varumärke

  • Färger - 1177

  • Logotyper och favikoner - 1177

  • Typografi: generella riktlinjer

Gemensam CSS

Sista ärendet hanterat runt månadsskiftet. Det innebär att:

• Vi numera endast hanterar buggfixar och akuta problem

• Sista planerade release är 2 september 2024

Mars

IDS (kod)

Release av 4.6.0 som innehåller förbättringsarbetet för ids-angular.

Figma

1177

• Befintliga Header och Footer för profession byter namn till Admin

• Nya varianter för Header och Footer profession tillkommer i blått

• Färgen Secondary/95 blir Accent/95. Ingen visuell skillnad.

1177 och Inera

• Header har nu en property som visar länk "Skip to content".

• Ikonen arrow uppdateras med ny design

• Standardikonen för länkar ändras från chevron till arrow.

• Komponenter där chevron ersätts med arrow:

  • Link

  • List puff

  • Fab

  • Header megamenu (desktop)

  • Footer (desktop)

Februari

Figma

• Nya ikoner:

  • File-CSV

  • Prescription

  • Document

  • Share

  • Headphones

  • Flag

  • Alarmclock neutral

  • Alarmclock inactivity

  • Activity

  • Switch person

  • Denied

  • Hourglass

  • Hourglass start

  • Hourglass end

  • Form numbered

  • Form numbered reoccuring

  • Email sent

  • Email unread

  • Moment start

  • Moment stop

  • Archive

  • Download

   

• Uppdaterade ikoner:

  • Attention

  • Information

  • Warning

  • Search

  • Visibility

• Toggle, Label flytts till höger sida om Toggle
  
  

IDS (kod)

4.5.0
Mindre bug och stilfixar.
Loading Button
Fortsatt CSS arbete

4.4.0 release:
Angular tree shaking support.
Första formulär CSSen
Med mera

CSS

Confluence

Januari

Figma

• Uppdaterad hörnradie för Inera Alert (från 10px till 3px)
  
  

IDS (kod)

• 4.3 är släppt!

  • Innehåller många småfixar och bugfixar som efterfrågats under december och januari.

  • Även ren CSS för Tabs, List och Notification-badge.

  • Uppdatering av alla 1177/1177-pro CSS-properties (om dessa används i era egna komponenter eller skrivs över behöver dessa uppdateras).

• Exempelsida för IDS där komponenter presenteras och testats (kör IDS 4.2.0 i 1177-tema)
  
  

CSS

• Nu finns 0.19.5 av CSS bibloteket tillgängligt. Uppdateringarna innehåller:

  • Storybooks startsida för CSS biblioteket är nu uppdaterat med aktuell information gällande vad som kommer att ske med CSS biblioteket framöver.

  • CSS List är nu uppdaterad med ny aktuell design, "striped" har utgått och har där med tagits bort.

  • Mobilmeny desktop och footer är uppdaterade för både 1177 och 1177 professional temat.

  • Ikoner gällande länkar är utbytta.

  • Breakpoints uppdaterade gällande header på desktop.

  • Footer för 1177 temar har nu en böjd övre kant i både desktop och mobil.

  • Font storlek för CSS Agent / GlobalMessage är nu uppdaterade till korrekt storlek.

  • Färgerna för CSS Agent / GlobalMessage är uppdaterade till korrekta färger.
    
    

Confluence

• Förtydligad designspecifikation och dokumentation kring Alerts

2023

December

Figma

• Rubriknivåerna har fått nya namn för att separera dessa från semantiska H1, H2 osv.
  Heading 1 byter namn till Heading Large
  Heading 1 small byter namn till Heading Large alternative
  Heading 2 byter namn till Heading Medium
  Heading 3 byter namn till Heading Small
  Heading 4 byter namn till Heading Extra small
  Heading 5 byter namn till Subheading Medium
  Heading 6 byter namn till Subheading Small
  
  

• Vi passar även på att samordna rubriknivåer mellan 1177 och Inera, vilket gör det mer systematiserat, smidigare att hantera samt enklare att öka antalet rubriknivåer om det skulle behövas i framtiden. (Ändringar i bold nedan)

• Den 10-baserade skalan för avstånd byts ut till en 8-baserad skala för att följa branschstandard och göra det lättare att ta skisser vidare från design till utveckling.
  Nu går det även att använda variabler för avstånden som finns i Resurs-biblioteket.

Uppdateringar i IDS (kod):

• Version 4.2 släppt! 🎉

  • Input och Textarea har nu en ny "hint" slot.

  • Progressbaren har blivit responsiv och finns som CSS tillsammans med Tag komponenten.

  • Utöver detta innehåller 4.2 mestadels bugfixar och mindre ändringar som inte kräver några ändringar.

November

Uppdateringar i IDS (kod):

• Version 4.1 släppt

  • Releasen innehåller bland annat en del små stylefixar som dök upp efter vår första CSS merge.

  • Vår typografi är nu responsiv

  • Dialogkomponenten är en del av ids-design. Dialogen gömmer även scrollbar by default nu. Kan stängas av med prop keepscrollbar .

• Version 4.0.0 släppt

  • Början på separation av kod och CSS för komponenter: Agent, Alert, Alert Global, Badge, Breadcrumbs, Button Group, Button, Card, Date-label, Expandable, Footer, Link, Mobile-menu.

  • Uppdaterade Mobilmenyer.

  • Inera legacyteman samt datepicker borttagna.

  • Samt mycket mer.

Oktober

Uppdateringar i IDS (kod):

• Version 3.1.0 - läs mer i IDS changelog

  • Ny komponent: Navigation-Local

  • Uppdateringar som: Ramverk för länkar, Interactive Cards & List-items, responsiva buttongroups och uppdaterad multiselect label vid valda alternativ.

  • Bug och stilfixar

CSS:

Version 0.19.4 av CSS för 1177 (css.1177.se). Inkluderar följande förändringar:

• Underline for links updated

• New chevron design added

• Alert design updated

• Expandables updated

• Checkbox spacing adjusted

• Radio button spacing adjusted

• List elements adjusted

• Table colors updated

• Focus elements added to Expandables

• General list of colors for all themes updated

• 1177 mobile menu tweaked

• Hamburger focus fixed

• Forms margin-top and padding fixed

• Agent bg color change and Esc added to Tooltip

• Tooltip Alt working

• Tooltip Script working

• 1177 Fixed menu text

• Removed transitions for lines

• Mobile menu fixed for safari

• 1177 footer link changed

• Notifications updated

• Aria Label for popover updated

• Updated Info Box - Observe border color

• Adjusted globalMessage color and added dropshadow

Confluence:

• Ny sida - Designriktlinjer för att samla designriktlinjer. Samlingen är under uppbyggnad och fler riktlinjer läggs till löpande.

  • Designriktlinje för https://inera.atlassian.net/wiki/spaces/USI/pages/3385000053

• Uppdaterad information för https://inera.atlassian.net/wiki/spaces/USI/pages/242352319, https://inera.atlassian.net/wiki/spaces/USI/pages/230392724

• “Komponentbibliotek” har bytt namn till “Designsystem” - https://inera.atlassian.net/wiki/spaces/USI/pages/227213974

September

Figma:

Vi har nu implementerat variabler i våra komponentbibliotek där det i nuläget framförallt påverkar färger. Variablerna för färger (Theme) finns i två modes:

• Light som är dom vanliga färgerna som det ser ut idag

• Wireframe som kan används om man vill skapa skisser i en gråskala utan varumärkets färger

Ändringarna innebär att:

• 1177:s variabler för färger får samma namnstruktur som Inera

• Det blir lättare för er som arbetar med båda varumärkena. Exempel: Himmel/sky-base blir Secondary/40 och Gräs/grass-base blir Success/40. Vissa färger som inte används så mycket tas bort från 1177, t.ex plommon.

När ni använder färger framöver tänk på:

• Använd variablerna istället för styles för att modes ska fungera, detta rekommenderas även av Figma.

• Befintliga styles backas upp av variablerna vilket gör att när man detachar en style får objektet variabeln som färg och inte en hexkod.

• Styles för färger kommer finnas kvar under en övergångsperiod men kommer så småningom att tas bort.

Beskrivning av färgerna hittar ni:

• I komponentbiblioteket i Figma

• På sidan Färger - 1177 i Confluence

Confluence:

• Variabellistor för https://inera.atlassian.net/wiki/spaces/USI/pages/455968182 och