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 20.2.9

Version 20.2.9 innehåller en ny komponent, den efterlängtade namnvärdelistan. Versionen innehåller också nya funktioner i sidpanelen och ett flertal felrättningar.

Nytt och förändrat

Nya komponenter och nya funktioner

  • Namnvärdelista: Ny komponent som passar när du vill presentera ett värde, det vill säga information, under en etikett.
  • Sidpanel: Nu möjligt att ändra animering när sidpanel öppnas eller stängs, via CSS variablerna:
    • --c-sidpanel-transition-speed: Sätter animationsshastighet.
    • --c-sidpanel-transition-timing-function: Sätter animationsfunktion.
    • --c-sidpanel-transition-delay: Sätter animationsfördröjning.

Felrättningar

  • Bifoga fil: Hover markering på "ta bort" knappen på en bifogad fil är numera korrekt
  • Toggle: Justerat checkmark i toggle så att den är centrerad.
  • Checkbox: Justerat så att checkboxrutan är centrerad mot etiketten.
  • Sidpanel: Rättat så att det går att dynamsikt ändra bredden på sidpanelen. För sidpanel som skjuter innehållet på sidan är det även rättat så att sidpanelen tar hela bredden på sidan i de fall när det inte finns tillräckligt med plats kvar för innehållet när sidpanelen är öppen.

Installera npm paket

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

Hämta CSS

<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/20.2.9/package/dist/release/sjv-komponentbibliotek.css" integrity="sha512-NREjXHLzpKh0s3ONG8IJd+FRQTJ2rZb1LCZub0OKH8wRwoqjIXmh1kuHy+ZDs7E1POO7K/Ia4rVUaLevtZj8hQ==" crossorigin="anonymous"/>

Hämta JavaScript

<script src="https://cdn.jordbruksverket.se/designsystem/20.2.9/package/dist/designsystem/designsystem.js" integrity="sha512-l4dVyGh06GSV/DvCBMCRc1Du4OCwt8RHGVVr6yQg++iMSs2eOWECk/j3P0Udh/pG0XgdGxSsfNwmraQx0xCrPg==" crossorigin="anonymous"></script>

<script type="module" src="https://cdn.jordbruksverket.se/designsystem/20.2.9/package/dist/designsystem/designsystem.esm.js" integrity="sha512-XBo3yWqt+XvgsvDkfpmDCBBjzq8pJ18tb4x7lsZ3fajZIa+nYEdxKctQXTC/jeTJkJCcvZoHaz6NfWToN9FJdQ==" crossorigin="anonymous"></script>

Publicerad