Version 17.1.21 är driftsatt

Den här versionen innehåller nya funktioner i webbkomponenterna, inmatningsfälten och navigeringskortet. Du får också lite tips på hur du får rätt rubriknivåer i navigeringskortet.

Nytt och förändrat

Nya funktioner i komponenter

  • Webbkomponenterna: nu finns ett attribut så att du kan lägga in en CSS-klass på varje komponent.
  • Inmatningsfälten: nu finns ett attribut så att du kan lägga in feltexten som en slot.
  • Navigeringskort: nu är det bara rubriken som är länkad. Tidigare var hela kortet en länk och det var inte bra ur tillgänglighetssynpunkt.

Ny design av komponenter

  • Navigeringskort: nu syns det tydligare när man fokuserar och hovrar.

Felrättningar

  • Drop-down: nu är den tillrättad så att den fungerar i Angular shadow DOM.
  • Multitextfält: utseendet på inmatningsfältet som har storleken small är justerad så att den följer utseendet på de andra inmatnngsfälten i samma storlek.

Använd rätt rubriknivå i komponenten

När du hämtar koden för komponenterna kort, navigeringskort och utfällbart stycke så följer det med en rubriknivå. Det är inte säkert att den rubriknivå som finns i koden passar i din rubrikstruktur. Du behöver alltså själv anpassa rubriknivån det vill säga H1, H2 osv. så att det blir rätt rubrikstruktur i ditt projekt.

Ställ dina frågor i Elements

Du kan följa oss och ställa frågor i Elements. Servern heter matrix.intern.jordbruksverket.se och gruppen heter "Styleguide hjälp mig" och är en öppen grupp för dig som jobbar på Jordbruksverket. Du kan ställa alla typer av frågor som rör styleguiden och vi svarar så snabbt vi kan.

Installera npm paket

npm install --save --save-exact @sjv/component-library@17.1.21

Hämta CSS

<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/17.1.21/package/dist/release/sjv-komponentbibliotek.css" integrity="sha256-+K4Fp6G/9q2ocbSMr64t05h10Ze3elRrAd57Vh9coZU=" crossorigin="anonymous">

Hämta JavaScript

<script type="module" src="https://cdn.jordbruksverket.se/designsystem/17.1.21/package/dist/designsystem/designsystem.esm.js" integrity="sha256-hwdlUbCN0I9qf8KAZO0M6FnB4Un6cDw/B8lzr2FSzWc=" crossorigin="anonymous"></script>

<script src="https://cdn.jordbruksverket.se/designsystem/17.1.21/package/dist/designsystem/designsystem.js" integrity="sha256-+SjoMHsfmwH5cCpNKuc1+g4R/vfiR0eN+QsQKlsSV+w=" crossorigin="anonymous"></script>  

Publicerad