Version 18.0.31

Den här versionen innehåller flera brytande förändringar. En stor nyhet är det nya systemet för layoutmoduler som ersätter Bootstraps grid. Det finns nu också ett mer flexibelt utfällbart stycke och ett nytt kort.

Information om webbplatsen

Efter den senaste driftsättningen har vi fått problem med utseendet på styleguiden. Det har blivit fel med:

  • utseendet på sidhuvudet
  • hur koden visas för varje komponent.

Nytt och förändrat

Nya komponenter

  • Layoutmoduler (grid): Nu finns det ett nytt system med layoutmodul som är framtagna för Jordbruksverket styleguide. Systemet ersätter Bootstraps grid.
  • Utfällbart stycke (accordion): Det finns en ny accordion där det är möjlight att ha ett mer flexibelt innehåll. Den gamla accordionen finns kvar men kommer att försvinna på sikt.

Nya varianter av komponenter

  • Kort: Länk till annan webbplats. Den nya varianten på kort ser till att alla kort anpassar hödjen efter innehållet i det kort som har mest innehåll, det vill säga att alla kort får samma höjd.

Brytande förändringar

  • Utfällbart stycke (accordion): I och med att vi har utvecklat en ny, bättre accordion som på sikt kommer att ersätta den befintliga accordion har den befintliga accordion fått ett nytt namn.
  • Kort: Eftersom vi har lagt till en ny variant på kort har vi blivit tvungna att lägga till lite CSS-klasser.
  • Bifoga fil: Nu måste man ange en input som en slot, detta för att underlätta integration med Angular som har enklare att integrera med ett inputfält.
  • Sidhuvud för interna system: Komponenenten är anpassad till det nya laoytsystemet.
  • Sidhuvud för e-tjänster: Komponenenten är anpassad till det nya laoytsystemet. Den har också fått en helt ny design.
  • Ikoner: Vi har brutit ur ikonerna så att de inte längre ligger inbakade i styleguidens CSS. Du kan därför välja den ikon du behöver och bara importera just den.
  • Horisontella menyn: Komponenenten är anpassad till det nya laoytsystemet. Den har också fått en helt ny design.
  • Dropdown: Nu måste du fylla i attributet options med ett strikt json format.
  • Multi-select: Nu måste du fylla i attributen options och value med ett strikt json format
  • Mulit-text: Nu måste du fylla i attributet value med ett strikt json format
  • Flikar: Nu måste du fylla i attributen tabs-content-ref och tabs-ref med ett strikt json format.

Felrättningar

  • Dropdown: Fungerar nu att använda med tangentbordet i Angular Shadow DOM.
  • Ikoner: I Angular 13 fick man felmeddelanden i console loggen och detta är nu rättat.
  • Inmatningsfält: Den automatiska id genereringen på inmatningsfält med hjälptext blev ibland fel vilket gjorde att hjälptexten inte läses upp, är nu rättat för alla inmatningsfält med hjälptext.

Uppgraderingsskript

I denna driftsättning är att vi har skapat ett uppgraderingsskript för att underlätta uppgraderingen till version 18.0.31. Viktigt att veta innan man kör skriptet är att du uppgraderat till version 17.2.0 innan du kör skriptet, annars kan vi inte garantera att det fungerar.

  • Vi rekommenderar att du kör skriptet i en privat git branch utan ocommitade ändringar.
  • Skriptet går endast igenom och uppdaterar html filerna i ditt projekt. Har du eventuell annan styleguide-relaterad kod i andra filer får du justera dem manuellt.
  • Installera styleguide 17.2.0 i ditt projekt (kolla under rubrik "Installera npm paket" nedan)
  • Ladda ner uppgradersingsskriptet Zip, 2.3 kB.
  • unzippa filen och lägg i rotmappen av ditt projekt
  • För att köra skriptet skriv följande i en terminal:
node upgrade.js

Installera npm paket

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

Hämta CSS

HTML
<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/18.0.31/package/dist/release/sjv-komponentbibliotek.css" integrity="sha256-35ViMk+dyJkB+LqfbhRpPHA2j4654bHcSIEgiAb8gro=" crossorigin="anonymous">

Hämta JavaScript

<script type="module" src="https://cdn.jordbruksverket.se/designsystem/18.0.31/package/dist/designsystem/designsystem.esm.js" integrity="sha256-H8DIhy1sxg/E+yIjG9Ttypeuj21OsdW6n/VZUesllrY=" crossorigin="anonymous"></script>

<script nomodule src="https://cdn.jordbruksverket.se/designsystem/18.0.31/package/dist/designsystem/designsystem.js" integrity="sha256-+SjoMHsfmwH5cCpNKuc1+g4R/vfiR0eN+QsQKlsSV+w=" crossorigin="anonymous"></script>

Publicerad