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 19.8.6

Version 19.8.6 innehåller en ny komponent för datatabell, det vill säga en tabell som du kan använda när användaren ska kunna sortera, filtrera och söka i en tabell. Versionen innehåller också ny funktionalitet för multi-select och en felrättning i multitextfältet.

Nytt och förändrat

Ny komponent

  • Datatabell: Nu finns en helt ny tabell som du kan använda när användaren ska kunna sortera, filtrera och söka i en tabell. Komponenten innehåller designen men du får själv bygga funktionaliteten utifrån de specifika kraven i ditt projekt.

Ny funktionalitet

  • Multi-select: Nu går det att kopiera innehållet i en tag men snabbkommandot Ctrl + C.

Felrättning

  • Multitextfält: Nu försvinner inte mellanrummet mellan de angivna alternativen.

Komponenter tas bort

Alla gamla javascriptkomponenter, som inte är webbkomponenter, kommer att tas bort från och med version 20.x.x som beräknas driftsättas i december. Kolla redan nu över så att du inte använder någon av de komponenterna. Här kan du se vilka de gamla komponenterna är och hur du kan söka efter dem i din kod:

  • Flikar, sök efter rel="c-tabs-js"
  • Modal, sök efter rel="c-modal-js"
  • Multi-select, sök efter rel="c-multiselect-js"
  • Multitext, sök efter rel="c-multitext-js"
  • Sökknapp, sök efter rel="c-search-button-js"
  • Sök, sök efter rel="c-stretched-search-js" i din kod
  • Sidpanel, sök efter rel="c-left-sidpanel-js" och rel="c-right-sidpanel-js"
  • Texträknare, sök efter rel="c-text-counter-js"

På gång i Styleguiden

  • Ny utvecklingsplattform för att styleguiden ska fungera bättre för Angular.

Installera npm paket

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

Hämta CSS

<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/19.8.6/package/dist/release/sjv-komponentbibliotek.css" integrity="sha512-qMChUtUpyFqdDWiz8dCHmT/niK8ynAqPNSNbGCCQzZx2ko9LWPqHBQm11oE8UhEhH73qR4GKKKg7+undsrK1Jw==" crossorigin="anonymous"/>

Hämta JavaScript

<script src="https://cdn.jordbruksverket.se/designsystem/19.8.6/package/dist/designsystem/designsystem.js" integrity="sha512-r5KHrVlXji5jaty5Gq1NNmntoysp5lpbJWipz9QWTx4k4+XFc2IdnICqvmiIuaBKsWQe1I3M8OrFBSRnnA489Q==" crossorigin="anonymous"></script>

<script type="module" src="https://cdn.jordbruksverket.se/designsystem/19.8.6/package/dist/designsystem/designsystem.esm.js" integrity="sha512-CfCDjJH2qcDCa1xke3s1ATC6K6c2f72JpmlyUXNSKyZj4F/7auJUIFkqwOpG/N8BkQd+iKGSLJmzC/rSOzy7Uw==" crossorigin="anonymous"></script>

Publicerad