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..
2022
Oktober
September
Augusti
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
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: Möten med "stakeholders"
Nu finns även den nya logotypen för 1177 utan friyta här: Logotyper och favikoner - 1177
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: Logotyper och favikoner - 1177
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
Mars
Kodkomponenter:
Koddokumentation:
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
Januari
2021
December
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: Godkända avsteg från UX-ramverket
Ni har väl inte missat uppdaterade Favikoner Icons
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
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 Ikoner - Inera (Arkiverad) . (Ej uppdaterat ännu i css eller Fontello).
Augusti
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
Juni
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:
FAQ med vanliga frågor påbörjad, FAQ - vanliga frågor
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 Felsida 404 med flera - 1177
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 Icons (ej uppdaterat ännu i Storybook eller Fontello). Utförligare beskrivning av ikonografi finns även i Sketchbiblioteket samt på Icons .
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, https://inera.atlassian.net/wiki/spaces/USI/pages/212671454/Kontakt+UX+are
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 Deltagare 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
Back to Top Button - 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. Sajtfot för tjänster som riktar sig till invånare - 1177
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 Komponenter samt Färger - 1177 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 Select
2020
December
https://css.inera.se och https://css.1177.se finns publicerade
Hur skall vi arbeta med designreviews och designrevisioner Designcykler
Nya ikoner för 1177: ombud, kamera (sätta på, stänga av samt växla kamera) samt provtagning (provrör fyllt resp. tomt) Icons
Komponentbiblioteket för Inera i Confluence är uppdaterat med beskrivningar av komponenter samt kodexempel. Fortsatt arbete pågår. Inera
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). Sketchbibliotek 1177
November
Oktober
September
Juli
Juni
Maj
April
Mars