Gå till slutet av bannern
Gå till början av bannern

Uppdateringar

Hoppa till slutet på meta-data
Gå till början av metadata

Du visar en gammal version av den här sidan. Visa nuvarande version.

Jämför med nuvarande Visa sidhistorik

« Föregående Version 134 Nästa »

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

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

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

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

  • Ny komponent för etikett Badge - 1177

  • Ny komponent för positiv feecback

September

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, /wiki/spaces/USI/pages/375291975

  • 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 Certifiering UX-strategi

Maj

April

Mars

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

  • Inga etiketter