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 22.2.14

Version 22.2.14 innehåller buggrättningar, nya funktioner och en ny ikon.

Nytt och förändrat

Nya komponenter och funktioner

  • Multi-select: Nytt attribut optionsValueAttribute vilket kan användas för att specificera vilket attribut i options som ska speglas i attributet value, det vill säga vilka alternativ som är valda. OBS. endast aktuell om options är en lista med objekt.
  • Single-select: Är nu möjligt att inaktivera ett alternativ i listan av alternativ genom att sätta disabled på option-elementet. Alternativet kommer synas i listan men vara utgråad och går inte att välja.
  • Nya ikon: Ny tillagd ikon.
    • kalkylator

Felrättningar

  • Multi-select: Numera skickas ett change event när man tar bort ett vald tag (de som hamnar under inmatningsfältet), vilket bland annat gör så att Angular får veta att valda alternativ har förändrats.
  • Meny: Använder man komponenten för meny så wrappades tidigare nav-elementet i en span detta gör de inte längre.
  • Flex layout: Tagit bort width 100% från flex-klasserna och ersatt med en CSS variabel --jv-l-flex-width som defaultar till auto om man inte anger något.
  • Bifoga fil: Tagit bort standardtext som webbläsaren skapar om vilka filer som bifogats, eftersom den inte stämmde överens med summeringen under om man tog bort en fil.

På gång i styleguiden

Vi håller på att migrera information på webbplatsen till Confluence och designsystemet (storybook).

Installera npm paket

npm install -save --save-exact @sjv/komponentbibliotek@22.2.14

Hämta CSS

<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/22.2.14/package/dist/designsystem/designsystem.css" integrity="sha512-S0DL3PsNYNya69z8BOigtUGtv348wMpzcNHkCB96W1L1NhCznmc0+IhcIVLz4NT5FJ5AgHRPOpWunJ/Z7AB32Q==" crossorigin="anonymous">

Hämta JavaScript

<script src="https://cdn.jordbruksverket.se/designsystem/22.2.14/package/dist/designsystem/designsystem.js" integrity="sha512-UKMCIzJJcrczXIhRfO8BxVyyb4haVbzFM43KKVIVRIRvsTTi4r4rGeCUgyjSjgOeiWll5x8pelwGvkkLoBQd6w==" crossorigin="anonymous"></script>

<script src="https://cdn.jordbruksverket.se/designsystem/22.2.14/package/dist/designsystem/designsystem.esm.js" integrity="sha512-BsukKCYLd3zzBLVBbcsl4gfMXeAAfAbzuVuywN5KpjlQhG69r4WfHrkhioVooYzYua2pRvj5nb9yniGPtxIxqg==" crossorigin="anonymous"></script>

Publicerad