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.7.4

Version 19.7.4 innehåller felrättningar för multi-select, single-select och knappar. Den innehåller också filer med styleguidens SCSS-variabler för fontstorlek, tomrum och brytpunkter. Du kan också läsa om vilka komponenter som kommer tas bort i december.

Nytt och förändrat

Felrättningar

  • Multi-select: Nu försvinner inte längre mellanrummet mellan de valda alternativen i de fall man väljer många alternativ. Man kan nu också ta bort ett valt alternativ med hjälp av back-spaceknappen.
  • Single-select: Nu får man inte längre ett felmeddelanden när man använder attributet selected value för att sätta ett förvalt värde.
  • Knappar: Vi har justerat höjden på alla textknappar, det vill säga small, medium och large, så att de har samma höjd som primär- och sekundärknapparna.

Nya funktioner

  • SCSS-variabler: Det finns tre nya filer du kan ladda ner för att hämta hem SCSS-variabler. Filerna är för fontstorlek, tomrum och brytpunkter. Laddar du ner filerna kan ditt projekt utgå från de variabler styleguiden använder i komponenterna.

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

  • Test av betaversionen av en datatabell.
  • 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.7.4

Hämta CSS

<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/19.7.4/package/dist/release/sjv-komponentbibliotek.css" integrity="sha512-bHPyVatF3YWfQA3p1/gu5GfVzDSrUBoic1+gAElvi4GLNT8/EwmxeOoIWCa3sviofBlgKqzOwvnGpbI1+df/DQ==" crossorigin="anonymous" />

Hämta JavaScript

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

<script type="module" src="https://cdn.jordbruksverket.se/designsystem/19.7.4/package/dist/designsystem/designsystem.esm.js" integrity="sha512-iK8vbzqMMwMMMekIb6xuhUzR5oYGxeBqqW4zYsHj7/oaSUPc9gkdylXx+OJqKYlf312a6uEJS7w1d9cuDyRVsQ==" crossorigin="anonymous" ></script>

Publicerad