...

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

Figma

• Data table - justerad och minskad padding

Juli

...

Ingenting nytt - du kan se det vi arbetar på just nu under Pågående arbete.

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:

...

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

...

• 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

...

• Ny sida - Designriktlinjer för att samla designriktlinjer. Samlingen är under uppbyggnad och fler riktlinjer läggs till löpande.

  • Designriktlinje för Laddning av innehåll

• Uppdaterad information för Link, Local navigation

• “Komponentbibliotek” har bytt namn till “Designsystem” - 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:

...

• 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

  • https://inera.atlassian.net/l/cp/ymusjEVz

  • https://inera.atlassian.net/l/cp/cfBNYT0q

  • https://inera.atlassian.net/l/cp/J9xBUnHj

  • https://inera.atlassian.net/l/cp/gf1biNZb

  • https://inera.atlassian.net/l/cp/2bNPVLx7

  • https://inera.atlassian.net/l/cp/Q61umk9o

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

...

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

  • Ikoner - UX-ramverket - Confluence (atlassian.net) och

  • Måste vi bygga responsivt? - UX-ramverket - Confluence (atlassian.net)

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: https://www.figma.com/file/mG2D5R8VolIKNIaRGmvuXF/1177-Va%CC%8Ardguiden-Komponentbibliotek?node-id=0%3A2040 https://www.figma.com/file/cqiqw5dpANIVcRJZOMmwxm/Inera-Komponentbibliotek?node-id=0%3A966

  • 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

...

• 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) https://www.figma.com/file/mG2D5R8VolIKNIaRGmvuXF/1177-V%C3%A5rdguiden-Komponentbibliotek?node-id=0%3A559

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

...

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

...

• 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 Felsidor , 404 med flera- 1177 & Inera

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

...

• 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 (Facette variantFAB (floating action button / back to top) - 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

...

• Nya krav inom tillgänglighet på gång, WCAG 2.2

• Ombudsbanner Agent banner (ombud)

• Uppdaterat material med 1177 loggor och faviconer Logotyper och favikoner - 1177

• Ny komponent för flikar, Tabs

• Ny komponent för markör för notiser, Notification badge

...

• Ny komponent för etikett Badge

• Ny komponent för positiv feecback

September

• Utökning till varumärket Inera påbörjat Inera

• Lagt till ytterligare verktyg för UX Verktyg som underlättar UX

...