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..

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

  • Nu finns även den nya logotypen för 1177 utan friyta här: https://inera.atlassian.net/wiki/spaces/USI/pages/227967774

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

  • 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:

  • 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

  • Kod
    Nu finns en samlad ingång för vårt kodsystem dit material flyttas in, http://design.inera.se

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

  • Ni har väl inte missat uppdaterade Favikoner https://inera.atlassian.net/wiki/spaces/USI/pages/228066143

 

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

  • 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

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

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

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

  • 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 https://inera.atlassian.net/wiki/spaces/USI/pages/228066143 (ej uppdaterat ännu i Storybook eller Fontello). Utförligare beskrivning av ikonografi finns även i Sketchbiblioteket samt på https://inera.atlassian.net/wiki/spaces/USI/pages/228066143 .

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

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

Februari

2020

December

November

Oktober

September

Juli

Juni

Maj

April

Mars