Komponenter och kod har flyttat så det kan det vara lite stökigt här nu!

I april 2025 driftsattes en ny version av komponentbiblioteket som matchar Jordbruksverkets nya grafiska profil. Samtidigt har vi flyttat till en ny plattform, Storybook, där du hämtar kod till komponenterna. Där hittar du även layoutsystemet, färger, ikoner och typografi. Styleguide i Storybook - v22.1.17

Version 18.5.4

Versionen innehåller en ny funktion i komponenten för multi-select så att du nu kan välja vilket värde som ska visas i inmatningsfältet. Versionen innhåller också ett flertal felrättningar. Till exempel har avståndet mellan den dynamiska hjälptexten och input-fältet blivit något större på alla inmatningsfält.

Nytt och förändrat

Nya funktioner

  • Multi-select: Nu kan välja vilket värde som ska visas i listan med valbara alternativ. Det gör du genom att du skickar in en lista med objekt i attributet option.

Felrättningar

  • Alla inmatningsfält: Avståndet mellan den dynamiska hjälptexten och inmatningsfältet är något större.
  • Toggle: Tidigare var toggle grön när den var vald och inaktiverad, det vill säga disabled. Nu är det tillrättat så att den är grå när den är vald och inaktiverad.
  • Datumfält: Fonten är ändrad till Open Sans. Tidigare var det webbläsarens förvalda font som användes för fältet vilket ledde till att intrycket inte blev enhetligt för användarna.
  • Multi-select: Nu går det att lyssna på alla keyup- och keydownevent. Tidigare var de blockerade så att det inte gick att lyssna på dem.

Pågående arbete i styleguiden

Just nu arbetar vi i styleguideteamet med:

  • Varianter av radioknappar
  • Layouten

Nästa brytande driftsättning

Driftsättningen den 1 februari 2023 kommer att innehålla brytande förändringar.

Installera npm paket

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

Hämta CSS

HTML
<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/18.5.4/package/dist/release/sjv-komponentbibliotek.css" integrity="sha256-aykKd5WqS4F8Q34+lNEnGo8jj0x1m7cvFF3+s0Kp+w8=" crossorigin="anonymous">

Hämta JavaScript

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

<script type="module" src="https://cdn.jordbruksverket.se/designsystem/18.5.4/package/dist/designsystem/designsystem.esm.js" integrity="sha256-eucSNBMNhD7Hq8EE9IeNwhq+yfpQSqxlV9Wy5Duzgfs=" crossorigin="anonymous"></script>

Publicerad