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

Version 22.3.20 innehåller buggrättningar och nya funktioner. Vi har även migrerat en stor del av dokumentationen till storybook.

Nytt och förändrat

Den mesta informationen har flyttats från webbplatsen styleguide.jordbruksverket.se till storybook. Vi kommer hädanefter dokumentera allt i storybook. Webbplatsen (styleguide.jordbruksverket.se) kommer finnas kvar tills all information är flyttad till storybook.

Nya komponenter och funktioner

  • Knappar: Länk till annan webbplats. Ny variant kallad "danger". Den är tänkt att användas för "farliga" funktioner som ger sidoeffekter t.ex. vid en borttagning som inte går att ångra.
  • Datatabell: Länk till annan webbplats. Ny klass för att visa att en rad är markerad.
  • Checkbox: Länk till annan webbplats. Ny variant indeterminate (ofullständig) som används när värdet på checkboxen inte är true eller false. Det uppstår exempelvis när man har en checkbox för att välja en hel kategori och bara enstaka alternativ i kategorin är valda. Indeterminate kan bara sättas med javascript och är endast visuellt.
  • Logotyper: Länk till annan webbplats. Vi har optimerat våra logotyper så deras filstorlek blivit mindre, utseendet är oförändrat.

Felrättningar

  • Datatabell: Länk till annan webbplats.
    • Lagt till padding som tidigare saknades på sista kolumnen på högerkanten.
    • Justerat marginalen under tabellrubriken som var för stor i kortvy-läget.
  • Modalt fönster: Länk till annan webbplats.
    • När man i Angular lämnade en sida som innehöll ett modalt fönster small det i koden. Detta är nu åtgärdat.
    • Justerat rubriklayouten i modalt fönster så att en ikon vid rubriken hamnar i linje med rubriken.
  • Knappar: Länk till annan webbplats. Knappar med bara en ikon (utan knapptext) fick för liten höjd. Detta är nu åtgärdat så att en knapp med bara ikon får samma höjd som en knapp med text.
  • Datumfält: Länk till annan webbplats. I Chrome och Safari blev datumfält för korta. Detta är nu åtgärdat.
  • Multi-select: Länk till annan webbplats.
    • Valda alternativ som hamnar under fältet försvann om man öppnade komponenten. Det är nu åtgärdat så de stannar kvar.
    • Om value sätts med en skrivskyddad lista gick det inte att välja något alternativ. Detta är nu åtgärdat.
  • Multitext: Länk till annan webbplats. Det skickades inget change event om man tog bort ett valt alternativ. Det gjorde att ramverk som Angular inte registrerade ett borttag. Detta är nu åtgärdat.
  • Dropdown: Länk till annan webbplats. Ändrat bakgrundfärgen på dropdown. Nu är den beige istället för vit.
  • Sidhuvud: Länk till annan webbplats. Ändrat bakgrundsfärg på det gröna sidhuvudet till brun. Anledningen till bytet är att grön är vår primärfärg och används för att indikera att något går att interagera med.
  • Meny: Länk till annan webbplats.
    • Ändrat hover- och fokuseffekt på vertikal och horisontell meny, detta för att ge en tydligare och större träffyta. Det gör också att de kan användas i en dropdown som ersättare för objektlistan som togs bort i version 22.0.71 av designsystemet.
    • Ny variant "vertical" som på sikt ska ersätta den felstavade varianten "verticle". Den gamla varianten är kvar tills nästa brytande driftsättning i december.

På gång i styleguiden

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

Installera npm paket

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

Hämta CSS

<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/22.3.20/package/dist/designsystem/designsystem.css" integrity="sha512-K7YZwxKIwoiVaDp/tWsfXfrWtcjsuzSqVaaHyZ3jTmxGYHTfg46TjSHvlKXxGfGkllJYVZqOTpPoj9H91Ai16w==" crossorigin="anonymous">

Hämta JavaScript

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

<script src="https://cdn.jordbruksverket.se/designsystem/22.3.20/package/dist/designsystem/designsystem.esm.js" integrity="sha512-EXc7tiC0Wx0V7KHsgBJS2hLXKzswAldvFqbT8HyiOWBWI/44DDNvgwM5Agcb+KN/m/1UXGgtzM8SiP/m0hfJAQ==" crossorigin="anonymous"></script>

Publicerad