...
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
Maj
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
...
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):
...
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:
https://css-dev.netlify.app/?path=/story/components-page-footer-1177--footer 1177 footer
https://css-dev.netlify.app/?path=/story/components-page-footer-1177-profession--footer&globals=theme:1177-profession 1177 profession footer
https://css-dev.netlify.app/?path=/story/components-page-header-1177--default 1177 Header
https://css-dev.netlify.app/?path=/story/components-page-header-1177--with-menu-under 1177 Header med meny
https://css-dev.netlify.app/?path=/story/components-page-header-1177-profession-desktop--default 1177 Profession Header
https://css-dev.netlify.app/?path=/story/components-page-header-1177-profession-mobile--logged-out 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öreslå egna komponenter i Figma . 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):
https://inera.atlassian.net/l/cp/kesNauMc - brödsmula för desktop och mobil (truncated)
https://inera.atlassian.net/l/cp/rcMbhoK7 - uppdaterad struktur och nytt sätt att bygga på med table header och table cell
H1 small - mindre storlek av H1, se specifikation på https://inera.atlassian.net/l/cp/4cpPDuCP
Error state för radioknapp/checkbox
Nya ikoner klara: “Id-card locked” och “Copy file” Icons
Card-komponenten har gått igenom acceptanstest. Cards
Nytt dokument om “toastmeddelanden” med riktlinjer kring tillgänglighet finns på Confluence under avsnittet “Vägledning och tips för tillgänglighet”: Toastmeddelanden
...
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: 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 - 1177Figma 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
...
Designhistorik
Nu finns Snabbguiden från SoB med som designhistorik: Designhistorik - Stöd och behandling
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 Designförslag
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, FAQ - vanliga frågor
...
UX-ramverk godkänt och testat
Certifiering version 1.0 klar och är därmed obligatorisk för alla UX-nära resurser Certifiering UX-strategi
Maj
Introduktion till nya konsulter skapad: Ny inom UX på Inera
Certifieringen klar version 1.0 Certifiering UX-strategi
Designsystemet, “komponenter” klara version 1.0
...