Open

Ineras UX-ramverk (instruktioner, designsystem och komponenter) utvecklas löpande. Denna sida visar nya komponenter och större förändringar i UX-ramverket samt direktlänkar till sidorna..

2024

April

IDS (kod)

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

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 https://inera.atlassian.net/wiki/spaces/USI/pages/212609550

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 - https://inera.atlassian.net/wiki/spaces/USI/pages/3378446497 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 ,

• “Komponentbibliotek” har bytt namn till “Designsystem” -

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 och

Augusti

Uppdateringar i IDS (kod):

• Version 3.0.9 - läs mer i IDS changelog

CSS:

• Buggfixar för: button group, agent (state + färg), tooltip/popover, hamburgermeny, ikoner i footer

• Allt är inte publicerat ännu

Figma:

• Påbörjat arbete med hur design token/variabler kan appliceras i designsystemet

• Cards - ny design som utgår från designmönster på 1177, mindre skugga

• Link och rubriker i List puff har fått understreck och mörkare färg vid hover.

• Rubriker i List puff har fått en ikon framför för att indikera att det är länkar.

Confluence:

• Uppdaterad information för

• Uppdaterad information för

Juni

Uppdateringar i IDS (kod):

• IDS 3.0.5 -> 3.0.7

  • Stepper headline supportar slots.

  • Mobilemeny omarbetad, supportar nu ikoner.

  • Stilfixar.

  • Intern refaktorering.

• IDS 3.0.3 + 3.0.4

  • Bugfixar för header

• IDS 3.0.2

  • Bugfixar

  • Dialog, Popover, Tooltip har border.

  • Östergötland har uppdaterad logotyp.

  • Mindre designåtgärder.

CSS:

• Buggrättning för felvalidering i forms-element (1177 & Inera)

• Header och menyer för desktop och mobil (Inera)

Figma:

• Följande komponenter har bytts ut för att bli enklare att arbeta med

  • Link - nu finns inte längre pil som alternativ ikon

  • Local navigation

  • Content navigation

  • Global alert

  • Agent (1177)

  • Heading - ny komponent med varianter som ersätter alla befintliga komponenter för rubriker

  • Bullet and numbered list - ny komponent som ersätter Bullet list och Numbered list vilket gör att det nu går att växla mellan dom utan att behöva skriva in texten igen
    
    

• Följande komponenter uppdateras

  • Preamble mobile och Preamble desktop slås ihop till en komponent

  • Body text mobile och Body text desktop slås ihop till en komponent
    
    

• Komponenterna med text har nu text properties
  
  

• Link, Local navigation och Content navigation har nu Hover och Active states
  
  

• Följande komponenter tas bort och finns nu istället som exempel

  • Link list

  • Navigation card

  • Article footer

  • Pagination button - använd istället sekundär knapp (Button) för pagination

Maj

Uppdateringar i IDS (kod):

• IDS 3.0.1

  • Bugfixar

  • Interna ändringar i dialog/popover fokushantering.

  • Interna ändringar från enhet em → rem. Samt andra stiländringar.

• IDS 3.0 är nu live, med bland annat:

  • Omarbetning av ikonbiblioteket och hur ikoner används

  • Angular delar numera property names med core och react

  • Header och footer har fått nya slots

  • En ny light property för input-element (för input på färgad bakgrund)

  • Mer om nya releasen på Storybook

CSS:

• Nu har alla ärenden som gäller DIGG-granskningen för 1177 hanterats och publicerats på css.1177.se

Figma:

• Popover

  • Uppdaterad kantlinje med ökad kontrast för tillgänglighet

  • Bredd ändrad till 280px

  • Hörnradien ändras för Inera till 3px.

• Tooltip

  • Uppdaterad kantlinje med ökad kontrast för tillgänglighet.

• Modal

  • Uppdaterad kantlinje med ökad kontrast för tillgänglighet.

  • Bredd ändrad till 280px för mobil.

  • Bakomliggande transprent yta (blanket) kan nu aktiveras på komponenten.

• Expandable

  • Strecket i utfällda expandables flyttas från under rubriken till under innehållet som fälls ut.

  • Status active tillkommer.

• List puff

  • Det är nu enklarare att lägga till och ta bort olika delar som datum och extra textfält för att passa det behov man har

  • List puff flyttas till Navigation.

• Icon button och Fab

  • Facette byts ut till två separata komponenter, Icon button och Fab.

  • Båda knapparna får nya states: hover och active.

  • Varianten Secondary för Icon button byter färg för hover och active states till Sky-dark/Accent30.

  • Storek på pilen i Fab button justerad till 24px för både 1177 och Inera.

• Pagination - numbers

  • Uppdaterad med nya Icon button

• Badge

  • Variant Main byter namn till Primary

  • Ineras variant Primary byter färg från error till primary.

• Breadcrumbs

  • Brödsmulorna för mobile och desktop blir en komponent istället för två separata.

  • Det går nu att växla mellan mobile och desktop.

April

Uppdateringar i IDS (kod):

• Nu är 2.6 releasad!

  • Ny toggle-knapp

  • En mer flexibel footer

  • En hel del ändringar i formulärstates

  • Förbättrad tillgänglighet i datepickern och breadcrumbs

  • Samt bugfixar
    
    

Confluence:

-

CSS:

Nu har css.inera.se och css.1177.se uppdaterats. Uppdateringarna gäller DIGG-ärenden:

• Lagt till understrykning på länkar i header

• Buttons, åtgärdat fokusramar som låg för nära knapparna

• Footer, åtgärdat dålig kontrast på fokusram

• Mobilmeny - Fokusramar i Header

Figma:

Omarbetning av buttons:

• Varianter för Pagination, Search och filter lyfts ut till separata komponenter.

• Button kan nu ha ikon.

• Pagination button - ny komponent (tidigare variant av Button)

• Search button - ny komponent (tidigare variant av Button)

• Filter button - ny komponent (tidigare variant av Button)

• Hover state och fokusmarkering tillkommer för alla knappar.

Select

• Varianter för Time, Date och Select multiple lyfts ut till separata komponenter.

Select multiple

• Ny komponent (tidigare variant av Select)

• Nu finns Select multiple med motsvarande varianter som Select: Default, Active, Disabled och Invalid.

• Select multiple har även varianter för hopfälld och utfälld dropdown.

Time

• Ny komponent (tidigare variant av Select)

• Time har nu varianter för Empty och Filled content.

Date

• Ny komponent (tidigare variant av Select)

• Date har nu varianter för Empty och Filled content.

• Komponenten Datepicker ersätts av komponentnen Date.

• Ny komponent för Datepicker tillkommer som endast är den utfällda datumväljaren som fälls ut i kombination med Date.

Search field

• Uppdaterat utseende för disabled state.

Felmeddelanden

• Har uppdaterats för formulärselementens invalid state. Dessa har nu en ikon och tydligare kantmarkering.

• Ineras felmeddelanden ligger nu i en pratbubbla som det redan gjort för 1177.

Mars

Uppdateringar i IDS (kod):

• 2.5.0
  Detta är en stor release som innehåller många ändringar, efterfrågade features och bugfixar. Ni som använder Web Components och React kommer behöva göra en del ändringar för att era projekt ska vara kompatibla med denna release. Se mer under Changed i changeloggen.

• 2.4.0

  • Stepper-komponenten.

  • Går nu att göra Logotyp och text i headern till länk.

  • Nya ikoner (Image, Clipboard, Clipboard with cross, Clipboard with text, Office building, Organization, Doctors bag, Visibility, Visibility off)

Confluence:

• Nya riktlinjer och information om , ,

• Riktlinjer och rekommendationer för

Figma:

• Toggle switch

  • Ny komponent

  • Toggle switch låter användaren växla mellan två lägen, på eller av. Den används när effekten är direkt och ingen ytterligare bekräftelse görs.

• Input och Textarea

  • Nu går det att slå på max antal tecken för att visa att fältet har en begränsning av antal tecken.

• Tab

  • Notification badge kan nu aktiveras i tab.

• Footer

  • Möjlighet att ha en eller två länkkolumner istället för tre som är standard.

Februari

Uppdateringar i IDS (kod):

• 2.3.0

  • Karusell & Tag komponent. Notification Badge + Tab kombination.

  • Checkboxgrupper supportar ett mer kompakt läge.

  • Select-multiple supportar max höjd.

  • Notification-badge har en ny outlined variant.

  • Omarbete där alla ikoner är lite fetare.

  • Footerns underrubrik (h2) är nu del av huvudrubriken (h1).

  • Utilklasserna går nu på root font-sizen.

Figma:

Mallsidor/exempel (1177 och Inera)

• Felsidor

• Till inloggning

Nya ikoner (1177 och Inera): image, clipboard, clipboard with cross, clipboard with text, office, organization, functions, folder, doctors bag, visibility, visibility off.

• Uppdaterade zipfiler med alla ikoner finns att ladda ner på sidan .

(1177 och Inera):

• Stepper visar var användaren befinner sig i ett numrerat flöde. Den visar även vad som är klart, om något saknas och vilka steg som är kvar att göra för att slutföra flödet.

Tag (1177 och Inera)

• Tag-komponenten representerar specifika ord som hjälper till att märka, organisera och kategorisera innehåll. En tag kan vara både statisk, interaktiv och flera taggar visas ofta tillsammans i grupp.

Formulärselement (Inera)

• Flera forumulärselement har ändrats (input, textarea, select, checkbox och radio button).

• Textfield byter namn till Input.

• Fokusmarkering för active state läggs till.

• Möjlighet att ha ikon i label.

• Nytt utseende för disabled state som nu får grå bakgrund med streckad kantlinje.

• Checkbox och radio button kan nu vara vald/selected med alla statusar. T.ex. default selected och active selected.

Tillgänglighet

Det finns nu beskrivning kring “Riktlinjer för att designa/jobba med infographics” på Confluence:

Januari

Uppdateringar i IDS (kod):

• 2.2.0 - Två nya knapptyper (fab/facettknapp, ikon). Expanderbar/kollapsbar Alert.

• 2.1.2 - Förbättrar kompatibiliteten mellan IDS komponenter och Angulars lazy loading.

• 2.1.1 - Uppdatering utav typografi för samtliga teman:
  Vi skiljer nu på styling och semantik i typografin. Detta betyder att det finns mer flexibilitet designmässigt. Exempelvis kan en H1 ha samma stil som en H3 men fortfarande vara semantiskt korrekt.

CSS:

• Det skapade förvirring över vilka element i Gemensam CSS hade uppdaterats. Därför är den gamla versionen av Inera tillfälligt tillbaka. Det arbetas på en liknande lösning för uppdateringar som i IDS.

• Under tiden så kan ni se uppdateringarna i testmiljön https://css-dev.netlify.app

• Ny logotyp för Inera finns nu i CSS

Figma:

• Uppdaterad namngivning av textstyles för att matcha IDS/Storybook (1177, Inera)

• Texter i komponenter uppdaterade för att bli mer generiska (t ex “Här kan du skriva en text om…”)

• Uppdaterad information och bilder för:

  • : lagt till bildexempel för olika typer av alerts, bland annat nya collapsable

  • : uppdatering av utseende

• Ny komponent för facettknapp har fått en egen sida med dokumentation och länkar:

2022

December

Uppdateringar i IDS (kod):

• Release av 2.0.x. Nu supportas Ineras nya grafiska profil. design.inera.se

CSS:

• Inter UI som är en gammal fontutgåva av familjen har bytts ut till den nya Inter-familjen.

• H1 small (mindre storlek av H1) finns nu även i CSS

• Header 1177 Profession: vi har tightat till marginaler och whitespace för att den ska ta upp mindre pixelyta på skärmen. Den är nu uppdaterad så den är den samma som finns i webcomponents.

• Nu är Inera 2.0 live i Gemensam CSS.

  • Logotypen och typografin har uppdaterats.

  • Arbete på Header har påbörjats.

Confluence:

• Uppdaterade riktlinjer, bilder och komponentlänkar efter bytet av grafisk profil för Inera.

• Nya ikoner för 1177 & Inera (i de nya färgerna) finns att ladda ner i SVG på sidan .

• Utökad information med exempel och riktlinjer för , och (uppdaterad med tydligare riktlinjer för varje färg).

Figma:

• Header Inera admin och 1177 pro är uppdaterade med ej inloggat läge. Menylänkar har enhetligt fått benämningen Länk.

• Alert (1177 och Inera)

  • Nu finns det varianter för att fälla ut och fälla ihop en alert: Collapsed/Expanded

  • Det går nu att växla mellan status och mobil/desktop utan att rubrik och text återställs

  • Mobil variant är nu 280px bred som övriga komponenter (den var tidigare 300px)

  • Nu finns det även tydligare instruktioner för användning av alert i Figma.

• Tab (1177 och Inera)

  • Nytt uppdaterat utseende

  • Det går nu att växla mellan varianter utan att rubriken återställs

  • För att få en linje som täcker sidan i bredd bredvid tabarna görs nu detta enkelt genom att göra den tab längst till höger bredare t.ex. med fill content.

• För att använda nya Alert och Tab behöver man lyfta in dem från biblioteket igen eftersom dessa inte kommer att uppdateras för befintliga instanser i skisser. Detta för att undvika att befintliga komponenter återställs och att texter försvinner.

• Var man hittar komponenter i biblioteket (1177)

  • Nu har alla komponenter i 1177 bibliotek flyttat till sina respektive sidor för att gör det lättare att hitta.

  • Arbetet med att göra motsvarande för Inera har påbörjats.

November

• Nu finns ett nytt komponentbibliotek i Figma med uppdaterad design efter Ineras nya varumärkesplattform

  • Ny logotyp och favikoner

  • Ny färgpalett

  • Ny design på header, footer och tabs

  • OBS. För Text styles så hänger färger inte automatiskt med utan här krävs att man ändrar manuellt. Se spec över typografi:

    • H1 och H2 ska generellt vara röda (Primary40)

    • Länkar och länkade rubriker ska vara gröna (Accent40)

    • Övrig typografi svart (Neutral20)

• Uppdateringar i IDS (kod):
  Ny Instruktionsvideo.

  • Ny Badges komponent.

  • Ny Popover komponent.

  • Ny Progressbar komponent.

  • Ny Navigation-content komponent.

  • Ny Tooltip komponent.

  • Arbete för att skydda komponenter (alert och button) mot projektspecifika CSSer.

  • Knappar kan nu ha en custom färg, denna prop är inte dokumenterad.

  • Generella bug- och stylefixar.

  • Mer info finns i changelog i Storybook.

• Ikoner i Figma:

  • Ikoner för 1177 finns nu publicerade i Figma, både nya versioner av alla redan existerande ikoner samt de tio nya ikonerna (lightbulb, shield locked/shield locked filled, double arrow, star/star filled, reload, reply, call/call active)

  • Både ikoner för Inera och 1177 finns i två storlekar, small och large, och det går att växla mellan storlekarna med component properties i högerpanelen

  • Ikoner går att färga om till egen färg vid behov (t ex om vit ikon behövs). I 1177:s designsystem använder du ikonfärgen “custom” i högerpanelen när ikon behöver färgas om. En bugg i Figma gör att vissa delar av ikonerna annars inte går att ändra färg på (röd eller blå).

  • Vissa chevrons kan se skeva ut:
    förut hade ikonen chevron inte samma bredd som höjd vilket gjorde den svårt att arbeta med när man byter mellan ikoner eller roterar den. Nu har den samma bredd som höjd, precis som övriga ikoner. Ser din chevron skev ut kan det åtgärdas genom att högerklicka på ikonen och välja “reset all changes”.

• CSS:

  • Header för Inera döljer nu alternativen “logged in” och “logged in with mobile menu”.

  • css.1177.se och css.inera.se visar nu den senaste versionen av CSS, med de senaste ändringarna från dev-miljön.

  • H1 och H2-rubriker för 1177 Profession har nu rätt färg (svart istället för röd).

• Figma:

  • Paddingen på sidorna av tertiary button är borttagna så de kan aligna med andra saker i design.

• Confluence - utökad information med exempel och riktlinjer för:

Oktober

• Uppdateringar i IDS (kod):

  • Expandables för expanderbart innehåll

  • Rotate-funktion på ikoner: låter dig rotera ikoner, exempelvis pilar och chevrons

  • Kolumnbredd i footer kan ställas in manuellt efter behov, om du har långa länktexter

  • Mer info finns i changelog i Storybook, bland annat buggfixar och ändringar

• CSS: Release 0.18.0 är nu uppe på css.1177.se 

• Utökad information i Confluence med exempel och riktlinjer för

• Figma: uppdaterade och nya ikoner för Ineras komponentbibliotek (1177 är på gång men inte klara än)

  • Ikonerna är omritade för att se bättre ut i små storlekar

  • Alla ikoner har nu två varianter för storlek: Large (40x40) och Small (20x20). Men det går såklart bra att skala till andra storlekar vid behov.

  • 10 nya ikoner har tillkommit (lightbulb, shield locked/shield locked filled, double arrow, star/star filled, reload, reply, call/call active)

September

• Kodkomponenter
  I september uppdaterades ids-paketen från version 1.7.1 till 1.10.0
  Dessa uppdateringar inkluderar en ny Grid. Card, Dialog och Agent samt många förbättringar och refaktoreringar.
  Mer info finns i changelog (1.8.0 ->1.10.0).

• CSS (se ny uppdatering i rätt miljö ovan)
  Nu finns den nya CSS-koden i vår testmiljö (vi avvaktar behörighetsändring för push till rätt miljö men för att ni skall kunna se så länge lägger jag upp länkar här)
  Nedan några exempel:
  1177 footer
  1177 profession footer
  1177 Header
  1177 Header med meny
  1177 Profession Header
  1177 Profession mobile header
  När vi lagt upp i rätt miljö kommer ny länk här.

• Nu finns uppdaterade instruktioner för att föreslå nya komponenter i Figma, se . För att förenkla processen finns en ny separat leveransfil i Figma att använda och vi har tagit bort instruktionerna om branches. Leveransfilen “1177 & Inera - Leveransfil nya komponenter” ligger i Figma under UX ramverk / Designsystem.

• Följande komponenter är klara (kod och Figma):

  • - brödsmula för desktop och mobil (truncated)

  • - uppdaterad struktur och nytt sätt att bygga på med table header och table cell

  • H1 small - mindre storlek av H1, se specifikation på

  • Error state för radioknapp/checkbox

• Nya ikoner klara: “Id-card locked” och “Copy file”

• Card-komponenten har gått igenom acceptanstest.

• Nytt dokument om “toastmeddelanden” med riktlinjer kring tillgänglighet finns på Confluence under avsnittet “Vägledning och tips för tillgänglighet”:

Augusti

• Kodkomponenter:
  Tabs
  Breadcrumbs
  Checkbox (error state)
  h1 Small
  Mer info finns i changelog (1.6.0->1.7.1)

• Följande komponenter har acceptanstestats samt tillgänglighetsgranskats: Breadcrumbs, Truncated Breadcrumbs, Table, samt H1 small och Error state för radioknapp/checkbox.

• Tillgänglighetskrav har tagit fram för Content navigation, Tool tip och Scroll back to top komponenterna.

Juli

• Vi har länkat in våra pågående ärenden till sidan:

• Uppdateringar i struktur, hittar du inte? Använd gärna sökfunktionen här:

• Figma uppdateringar:

  • Typografi (1177/Inera) - Nya textstyles för H1 small både desktop och mobile

Juni

• Kodkomponenter:
  Tabs

• Figma uppdateringar:

  • Expandables (1177, Inera) - ny komponent. Tidigare komponent "Expanderbara ytor" utgår och finns nu istället som exempel som byggs ihop av Expandables och Cards.

  • Article footer (1177, Inera) - modifierad komponent med desktop och mobil som varianter i samma komponent

  • Alerts (1177, Inera) - justering av marginal i mobil

  • Mobilmeny (1177, Inera) - justeringar med markering för active state nivå 1

  • Badge (1177, Inera) - ny komponent som ersätter labels. Finns nu fler färger att välja på.

  • Bullet list (1177, Inera) - uppdatering med fler (dolda) punkter. 

  • Numbered list (1177, Inera) - uppdatering med fler (dolda) punkter. 

  • Popover (1177, Inera) - ny komponent som ersätter Pop up-tip

  • Tooltip (1177, Inera) - liten justering av marginaler

  • Table cell, Table header, Table example (1177, Inera) - komponenter som ersätter tidigare tabell

  • Search (1177, Inera)- ny komponent som ersätter tidigare Sökfält i Forms

  • Nya effect styles (1177, Inera): Inner shadow default, Drop shadow default

  • Header (1177-profession) - uppdaterad med plats för extra rubrik ovan eller under tjänstens namn.

  • Progress bar (1177, Inera) - ny komponent som ersätter tidigare Progress bar.

  • Carousel (Inera) - ny komponent som ersätter Slideshow.

    
    Dessa komponenter har tagits bort från biblioteket i Figma och finns nu istället som exempel i ”Exempel på sidor"

  • Panel 

  • A-Ö lista

  • Puffar

  • Filtreringslist

  • Faktaruta (Inera)

Maj

• Kodkomponenter:
  @inera/ids-core 1.2.1 → 1.3.0 (Webcomponents)
  @inera/ids-angular 1.1.0 → 1.3.0 (Angular)
  @inera/ids-react 1.1.0 → 1.3.0 (React)
  Dokumentation uppdaterad (Webcomponents, Angular, React)
  Release inkluderar:

  • Nytt 1177-proffessions-tema.

  • Nytt inera-admin-tema.

  • Release av Header, med subkomponenter:
    Header-avatar
    Header-item
    Header-navigation
    Header-navigation-mobile-item
    Header-mobile-menu

  • Footer, Link, Notification-badge

  • Mobile-meny, med subkomponenter:
    Mobile-menu-item
    Mobile-menu-avatar

  • Utökning av ikonutbut, Bug fixar m.m.

• Ny rekommendation gällande möten:

• Nu finns även den nya logotypen för 1177 utan friyta här:

• Ny logotyp för 1177
  1177 Vårdguiden har bytt namn till 1177 och i samband med detta har Figma och Confluence uppdaterats. Vi bör så skyndsamt det går byta ut loggor i produktion. Det kommer inte gå att samordna så alla tjänster gör detta så snart det går. Hitta filer här:

• Figma uppdateringar:

  • Agent (1177) - ny färg (grå) för att skilja ut agent banner mot globala meddelanden

  • Grid (1177, Inera) - Ny grid för admin/verktyg “Desktop wide”

  • Header 1177 profession - uppdaterad header för 1177 profession med minskad höjd och därmed justerad storlek på textlänkar och ikoner

  • Tabs (1177, Inera) - ny komponent som ersätter Flikar

  • Tables (1177,Inera) - ny komponent som ersätter gamla tabeller, nya är skapade för skalbarhet samt blivit modulär så man kan skapa tabeller efter de behoven man har i sitt projekt

April

• Figma uppdateringar (1177, Inera):

  • Nya ikoner: Copy-file samt Id-card locked

  • Datepicker - ny komponent med utfälld datepicker

  • Link - ny komponent för länkar med ikon

  • Link list - ny/uppdaterad komponent som ersätter tidigare länklista

  • Header Inera - ändrad så att header för Inera admin blir default istället för Inera.se

Mars

• Kodkomponenter:

  • Release av Icon, Alert (patch), Alert global & Grid Container + bug fixar.

  • @inera/ids-core 1.1.1 → 1.2.1 (Webcomponents)

  • @inera/ids-angular 1.0.0 → 1.1.0 (Angular)

  • @inera/ids-react 1.0.1 → 1.1.0 (React)
    Nästa release kommer pusha react och angulars feature versionen till samma som core för enklare kompatibilitetsöverblick.

• Koddokumentation:

  • Uppdatering och tillägg av nya komponenter i Web components, Angular, React.

  • Angular har nu även temaväljare.

• Design: Vi har sett över listkomponenter för 1177 (sökträffar, eventlistning och nyhetslistning) och valt att ta bort den ljusblå pyjamasrandningen. Istället kommer vi framöver att använda linjer som avdelare mellan listpuffarna. Detta ger bättre och tydligare design för korta listor, samt bättre kontrast på avgränsning mellan olika listpuffar.

• Figma uppdateringar:

  • List puff (1177, Inera) - ersätter tidigare listkomponenter: Sökträff, Eventlistning samt Nyhetslistning

  • Checkbox och radio button (1177, Inera) - Error state har tillkommit

  • Breadcrumb (1177, Inera) - uppdaterad komponent

  • Modal (1177, Inera)- ny komponent som ersätter tidigare modaler

  • Button (1177, Inera) - Ändrad resizing för Default - Desktop vilket gör att knappen följer knapptextens bredd.

Februari

• Figma uppdateringar:

  • Footer (1177, Inera) - ny komponent som ersätter tidigare sajtfot. (Samma design som tidigare, men förbättrad hantering av komponenter samt resizing.)

    • Nu finns även footer för Inera admin-/verktygstjänster

  • Färger Inera - uppdaterad namngivning (inga färger eller färgkoder är ändrade)

• Kod
  Release av Angularbiblioteket (ids-angular) till npm för konsumtion.
  Release av medföljande dokumentation till Storybook.

• Nya svar i FAQ om :

  • Ikoner - UX-ramverket - Confluence (atlassian.net) och

  • Måste vi bygga responsivt? - UX-ramverket - Confluence (atlassian.net)

Januari

• Kod
  Release av Webkomponentsbiblioteket (ids-core) till npm för konsumtion.
  Release av medföljande dokumentation till Storybook.

• Figma uppdateringar:

  • Alerts (1177, Inera) - ny komponent som ersätter infobox/meddelanden. En förbättrad systematisering av meddelanden. Se mer:

  • Global alert (1177, Inera) - ersätter Globalt meddelande, men designen är densamma

  • Header (1177, Inera) - ny komponent som ersätter tidigare sajthuvud. Samma design som tidigare.

    • Nu finns även header för Inera admin-/verktygstjänster

  • Typography (1177, Inera) - justering av komponenter

  • Color styles (1177, Inera) - uppdaterad information med hex-koder

2021

December

• Kod
  Nu finns en samlad ingång för vårt kodsystem dit material flyttas in,

• Figma uppdateringar:

  • Ikoner för Inera är uppdaterade. För varje ikon finns varianter med färger, vilket kan väljas i högerpanelen i Figma. Som standard är ikonerna 40 px, men vissa ikoner exempelvis dokumentikoner och stäng-kryss har även en anpassad variant för 20 px med justerad linjetjocklek för god synlighet. Funktionella ikoner som chevrons, arrows och expandera har dock anpassade, mindre format.

November

• Figma uppdateringar:

  • Ikoner för 1177 är uppdaterade. För varje ikon finns varianter med färger, vilket kan väljas i högerpanelen i Figma. Som standard är ikonerna 40 px, men vissa ikoner exempelvis dokumentikoner och stäng-kryss har även en anpassad variant för 20 px med justerad linjetjocklek för god synlighet. Funktionella ikoner som chevrons, arrows och expandera har dock anpassade, mindre format.

  • Komponenter i Forms är uppdaterade för 1177 och Inera:

    • Button

    • Checkbox

    • Dropdown

    • Radio button

    • Range

    • Spinner

    • Textarea

    • Textfield

  För varje komponent finns olika varianter som kan väljas/ställas in i högerpanelen. Exempelvis Button kan ställas in efter device (mobile, desktop), type (default, pagination, filter, search), color (default, secondary) respektive state (default, pressed, sent, disabled) i de fall där det är tillämpligt.
  
  

  Open

  

  
  
  

• Mall för godkännande om avsteg från användning av UX-ramverk skapad:

• Ni har väl inte missat uppdaterade Favikoner

Uppdateringar från tillgänglighet och test:

• Första komponenten av web components har gått igenom och godkänts i acceptanstester inklusive tillgänglighetstester. Och flera komponenter är på väg till acceptanstest.

• Det har lagts till några riktlinjer och råd hur man ska tänka kring tillgänglighet i diverse scenarier samt information om WCAG. Detta är ett arbete som pågår för att underlätta beslut och återkommande frågetecken som kan uppstå. Nyligen har dessa ämnen lagts till:

  • Avstånd mellan klickytor

  • Obligatoriska fält

Sidan hittar ni här: https://inera.atlassian.net/wiki/spaces/USI/pages/528843061/WCAG

Oktober

• Arbete med att uppdatera komponenter i Figma pågår. Förbättring av autolayout samt struktur med varianter av komponenter.

• Uppdaterad design på minsta storlekarna av favikoner för 1177 Vårdguiden (16x216 px samt 32x32 px)

September

• Instruktion för utvecklare Angular, Patrik H

• Ikonbiblioteket för Inera är uppdaterat och använder nu samma grundikoner som 1177 Vårdguidens ikonbibliotek, men med egen färgsättning utefter Ineras grafiska profil. Detta ger nu ett mer enhetligt designmanér samt ökat antal ikoner. Finns för användning i Figma- respektive Sketchbiblioteket samt zipfil med ikoner i svg-format på sidan . (Ej uppdaterat ännu i css eller Fontello).

Augusti

• JSON-fil för 1177:s e-tjänster publicerad Gemensam menystruktur för 1177 - 1177 Vårdguiden

• Ny information om där vi övergår till att använda samma Googlebibliotek som fallback som för 1177.

• Beta-test at Bootstrap CSS för de förvaltningar som bedrivs och som inte har resurser att flytta in i UX-ramverksvärlden ännu.

Juli

I Juli är större delen av oss som arbetar med UX-ramverket på semester så förvänta er inga större uppdateringar

• Våra designsystem har flyttat in i Figma och arbetet kan påbörjas med migrering till den plattformen. Rekommendation för hur arbetet skall bedrivas framöver kommer.

Juni

• Designhistorik

  • Nu finns Snabbguiden från SoB med som designhistorik:

• Sketchbibliotek - 1177:

  • Uppdaterad design på modaler med vänsterjusterad rubrik och text, samt centrerade knappar.

  • Design på tillbakalänk i mobil.

• Sketchbibliotek - Inera:

  • Uppdaterad design på expandables (accordions) för Inera.

  • Ändrad färg på ramlinje i textfält och sökfält till #7C7C7C

  • Ändrad färg på “avdelare” (linje) till color-muted #A1958A

  • Uppdaterad design på modaler med vänsterjusterad rubrik och text, samt centrerade knappar.

  • Design på tillbakalänk i mobil.

• Ny release 0.16.0

  • BREAKING: Expandables are now using the <details> element.

  • Padding changed back to 20px for consistency with values in default.scss.

  • Added csupport for logged in mobile menu.

  • Layout fix for Inera checkboxes.

  • Layout fixes for radio buttons (Inera theme). Changed labels for button examples to use Primary/Secondary wording.

• Designförslag för hur Ineras varumärken kan samordnas framöver

Maj

• Justerat färg på H Underrubrik Versal Stor till muted-dark #5F5F5F för att uppfylla tillgänglighetskrav på godkända kontrastvärden (Sketch samt uppdaterat spec i Confluence)

• Sketchbibliotek - Inera:

  • Uppdaterad design på checkboxar och radioknappar.

  • Disabled state för checkboxar och radioknappar tillagt.

  • Uppdaterad design (färger) på knappar. Success-button tillagt.

• Sketchbibliotek - 1177:

  • Disabled state för checkboxar och radioknappar tillagt.

• FAQ med vanliga frågor påbörjad,

April

• HTML/CSS-komponenter: Ny release 0.15.0

  • Removed use of multiple ULs for desktop navigation.

  • Edited to default alignment of tooltip arrow.

  • Code is now valid with validator.w3.org/nu.

  • Added styles for expanded top level navigation link.

• Sidan med Felsidor är uppdaterad med fler felvarianter som 500-fel och 300-fel utöver 404-fel, se

• Ikoner beställda av Journalen (graf, lista, analys provtagning, logg, logg låst) finns även nu i ikonbiblioteket.

• Ikoner för 1177 Vårdguiden är uppdaterade och justerade med enhetligt designmanér gällande storlek, ramlinje, hörnrundning och färgsättning. Finns för användning i Sketchbibliotek - 1177 Vårdguiden samt zipfil med ikoner i svg-format på sidan (ej uppdaterat ännu i Storybook eller Fontello). Utförligare beskrivning av ikonografi finns även i Sketchbiblioteket samt på .

Mars

• npm-paket för angularkomponenter publicerat.

• Komponentbibliotek för angular påbörjat.

• Inera Design System (gemensam css): Ny release ute (0.14.0):

  • Change name of $breakpoints to $core-breakpoints, avoiding foundation-sites collission. Add $base parameter to rem-calc(), maintaining use compatibility with foundation-sites.

  • Changed breakpoint lg (large) 1024px (from 1025px).

  • Removed the use of divs inside of spans on buttons.

  • Updated aria attributes for modals.

• Kontakt UX:are, uppdaterad med nya namn och projekt,

• Gemensam CSS: Ny version (0.13.0) av ramverket ligger i master nu. Inkluderar namnändring av breakpoint mixin samt förändringar i globala navigationen.

• Uppdaterat sidan med information om att det nu finns en användarpanel för både 1177.se och UMO/Youmo.

• Sketchbibliotek - 1177 Vårdguiden uppdaterat med:

  • Design för felsida 404 - 1177.

  • Design för sajthuvud och huvudnavigation för tjänster som riktar sig till invånare, inloggat läge/e-tjänster - 1177

• - ny komponent. Sketchbibliotek samt Confluence uppdaterat.

• Sajtfot 1177: Samma komponent ska framöver användas för öppna sidor och inloggat läge/e-tjänster. Särskild design för inloggat läge/e-tjänster utgår alltså. Sketchbibliotek samt Confluence uppdaterat.

Februari

• Sketchbibliotek - 1177 Vårdguiden:

  • Tydligare namngivning av H1:or och H2:or för att tydliggöra att invånartjänster använder röda H1:or och H2:or samt att tjänster för professionen använder mörkgrå H1:or och H2:or

  • Tydligare struktur samt namngivning av ramverkskomponenter (sidhuvud, sidfot och menykomponenter) uppdelade efter invånartjänster respektive tjänster för professionen.

• Uppdatering av sidorna samt för att göra det tydligare hur röd respektive blå färg kan användas.

• Adderat beskrivning kring vad som skiljer ett default select element mot ett custom

2020

December

• https://css.inera.se och https://css.1177.se finns publicerade

• Hur skall vi arbeta med designreviews och designrevisioner

• Nya ikoner för 1177: ombud, kamera (sätta på, stänga av samt växla kamera) samt provtagning (provrör fyllt resp. tomt)

• Komponentbiblioteket för Inera i Confluence är uppdaterat med beskrivningar av komponenter samt kodexempel. Fortsatt arbete pågår.

• Inera Sketchbibliotek (Sketchfil) finns nu i en första upplaga. Vissa komponenter ska dock uppdateras och revideras, främst med nya färger som uppfyller kontrastkrav (markerade med orange färg i Sketchfilen).

November

• Nya krav inom tillgänglighet på gång,

• Ombudsbanner

• Uppdaterat material med 1177 loggor och faviconer

• Ny komponent för flikar,

• Ny komponent för markör för notiser,

Oktober

• Ny komponent för etikett

• Ny komponent för positiv feecback

September

• Utökning till varumärket Inera påbörjat

• Lagt till ytterligare verktyg för UX

Juli

• Adderat sida med länkar till prototyper, testmiljöer med mera som kan vara till nytta för att se hur andra löst problem,

• Små korrigeringar

Juni

• UX-ramverk godkänt och testat

• Certifiering version 1.0 klar och är därmed obligatorisk för alla UX-nära resurser

Maj

• Introduktion till nya konsulter skapad:

• Certifieringen klar version 1.0

• Designsystemet, “komponenter” klara version 1.0

April

• : Textfält, textarea, dropmeny, radioknappar och checkboxar har fått ny färg på ramlinjen, sky-base #396291, som uppfyller krav på kontrastvärde för UI-komponenter.
  Komponenter:
  Textfält - 1177
  Textarea - 1177
  Dropmeny - 1177
  Radioknappar - 1177
  Checkboxar - 1177
  
  

• : Komponenter från 1177.se finns nu i designsystemet.

Mars

• : Introduktion och vägledning för systemet finns nu tillgängligt.