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 6.0.0 är driftsatt

Version 6.0.0 innehåller två nya komponenter, multi-select och laddningsindikator, det vill säga spinner. Den innehåller också fyra brytande förändringar och flera felrättningar.

Nytt och förändrat

Nya komponenter

  • Multi-select
  • Laddningsindikator, dvs spinner

Felrättningar

  • Brytpunkterna för skärmstorlek på header och grid är ändrade så att de nu har två brytpunkter istället för fyra.
  • På inmatningsfält är paddingen och bakgrunden ändrad så att det ska vara enhetligt på alla inmatningsfält.
  • På flikar är designen ändrad så att den bättre följer styleguidens formspråk.
  • På inaktiv single-select är rubrikfärgen justerad så att den bättre följer styleguidens formspråk.
  • Färgen på etiketten på inmatningsfält ändrad till #4d4d4d från #333.
  • Box shadow på de små varianterna av komponenterna är minskad.
  • Tabellerna är uppdaterade så att de bara har ett <thead> element i <tbody>.
  • Ifyllt värde i barnkomponenter till radioknappar och checkboxar försvinner när de blir inaktivta.

Brytande förändringar

  • På ikoner använder vi nu <span> istället för <i> på för att förbättra tillgängligheten så att skärmläsare inte ska tolka en ikon som kursiv text. <i> ska bara användas för kursiv text.
  • Alla små varianter av komponenterna har bytt namn från compact till tiny, förutom för knappar som har både compact och tiny.
  • Textfältsvarianten godkänd (sucess) är borttagen på grund av att det inte finns behov av den.
  • Den komponent som tidigare benämndes accordion heter nu accordion_text.

Något du funderar över?

Hör av dig till styleguideteamet om du vill veta mer eller undrar över något. Du når oss på styleguide@jordbruksverket.se eller genom att komma förbi oss i landskapet i NO3. Vi gillar besök!

Hämta CSS

<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/6.0.0/package/dist/release/sjv-komponentbibliotek.css" integrity="sha256-I9nKbkRkjQ9uB1svJCn4jgwq7V8aeAqzbv/xQ5hbLfg=" crossorigin="anonymous">

Hämta JavaScript

<script src="https://cdn.jordbruksverket.se/designsystem/6.0.0/package/dist/release/sjv-komponentbibliotek.js" integrity="sha256-xhvgGaQnpxfZKD6n+uRFwGdIniVqPzrnTp3C7oJUnuM=" crossorigin="anonymous"></script>

Publicerad