Uppdateringar
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
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 https://inera.atlassian.net/wiki/spaces/USI/pages/212674162
Genomgång och uppdatering av https://inera.atlassian.net/wiki/spaces/USI/pages/3378446497
Juli
I juli har IDS-teamet semester. Mellan måndag 1 juli och måndag 5 augusti har vi stängt för hantering av supportärenden. Vi återupptar supporten från och med 5/8. Du kan fortfarande:
Skicka in ditt ärende via formuläret för återkoppling (gäller även IDS-buggar)
Fråga andra i kanalerna #komponenter_design och #komponenter_kod i vår Slack
Trevlig sommar önskar IDS-teamet!
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 https://inera.atlassian.net/wiki/spaces/USI/pages/74613672.
IDS (kod)
Ingenting nytt - du kan se det vi arbetar på just nu under .
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
Uppdaterad information för övergången till 1177 för vårdpersonal (öppna sidor och admingränssnitt). Sidor som berörs:
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
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 SmallVi 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)
1177 – DESKTOP
Heading Large alternative (Heading 1 small): size 36 px, lh 42 px (Letter spacing: -1 px)
Inera – DESKTOP
Heading Large alternative (Heading 1 small): size 32 px, lh 40 px
Heading Medium (Heading 2): size 24 px, lh 32 px
Heading Small (Heading 3): size 20 px, lh 26 px
Heading Extra small (Heading 4): size 16 px, lh 20 px
Subheading Medium (Heading 5): size 20 px, lh 24 px (Letter spacing: 1,5 px)
Subheading Small (Heading 6): size 14 px, lh 20 px (Letter spacing: 1,4 px)
Preamble : size 22 px, lh 36 px
Body text : size 16 px, lh 24 px
Inera – MOBILE
Heading Large (Heading 1): size 30 px, lh 38 px
Heading Large alternative (Heading 1 small): size 26 px, lh 32 px
Heading Medium (Heading 2): size 22 px, lh 28 px
Heading Small (Heading 3): size 20 px, lh 24 px
Heading Extra small (Heading 4): size 16 px, lh 20 px
Subheading Medium (Heading 5): size 20 px, lh 24 px (Letter spacing: 1,5 px)
Subheading Small (Heading 6): size 14 px, lh 20 px (Letter spacing: 1,4 px)
Preamble : size 18 px, lh 28 px
Body text : size 16 px, lh 24 px
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 - för att samla designriktlinjer. Samlingen är under uppbyggnad och fler riktlinjer läggs till löpande.
Designriktlinje för
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:
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:
TabsFigma 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-menuMobile-meny, med subkomponenter:
Mobile-menu-item
Mobile-menu-avatarUtö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 :
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.
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.