Styleguide

Lägg till komponentbibliotek

Här kan du läsa om hur du lägger in Jordbruksverkets komponentbibliotek, ikoner, färger och CSS-variabler i ditt projekt.

Komponentbiblioteket består av webbkomponenter

Komponentbiblioteket består av webbkomponenter. Det gör det både enklare att integrera styleguidens komponenter i JavaScript-ramverk, som till exempel angular, samtidigt som det underlättar utvecklingen av nya komponenter.

Lägg till komponentbiblioteket på två sätt

Du kan hämta komponentbiblioteket till ditt projekt på två sätt:

installera komponentbiblioteket via npm från Jordbruksverkets interna npm repository.
hämta CSS- och javascriptfilerna från Jordbruksverkets CDN

Använder du Angular rekommenderar vi att du installerar komponentbiblioteket via Jordbruksverkets interna npm repository.

Installera komponentbibliotek via npm

Du installerar komponentbiblioteket via npm som ligger på Jordbruksverkets interna npm repository.

Om ditt utvecklingsprojekt använder NodeJS, kan du enkelt installera komponentbiblioteket från vår interna npm repository. Glöm inte att sätta adressen Jordbruksverket registry innan du kör npm install, detta kan du exempelvis göra genom att lägga in en .npmrc fil i ditt frontend applikationsprojekt. Kommandot för att installera är:

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

Hämta CSS- och javascriptfilerna från CDN

Hämta CSS

Du kan lägga till en script-tagg i projektets index.html-fil.

<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/21.0.23/package/dist/designsystem/designsystem.css" integrity="sha512-n4frdvrhb9YPoJ7NoWKQR9HSl2RkDNVeSkM6tHzv+Fpg8qNb+ezMaivo/Tf4gQJPe3OTby0lSU6YmX0lMV4klg==" crossorigin="anonymous">

Hämta JavaScript

Till några av våra komponenter finns det JavaScript. För att använda dem lägger du till en script-tagg i projektets index.html-fil.

Första skriptet körs i webbläsare som saknar stöd för ES-moduler och det andra scriptet körs i webbläsare med stöd för ES-moduler.

<script src="https://cdn.jordbruksverket.se/designsystem/21.0.23/package/dist/designsystem/designsystem.js" integrity="sha512-IDnj43AxQrko4PFJeKbtf1DLqqzzjLDmEz8/v0pInkSszI9qxE1gfFdrUQM+cDtLyEuzakVwHSf4+0rhmrhLvg==" crossorigin="anonymous"></script>

<script type="module" src="https://cdn.jordbruksverket.se/designsystem/21.0.23/package/dist/designsystem/designsystem.esm.js" integrity="sha512-pu0HueYDJldaI7qhfS+7jLuRSH+UubFSa/Zpv8N4EiQmKuEc9s8chWQmNvUSnkSg6p4l0EN0VWQOMEW3FyplnQ==" crossorigin="anonymous"></script>

Lägg till komponentbiblioteket i Angular

I Angular kan du importera och ladda in komponentbiblioteket i angularprojektet. Detta går att göra detta i main.ts eller browser.ts.

//main.ts eller browser.ts
// Import Styleguide web components.
import { defineCustomElements } from '@sjv/komponentbibliotek/dist/loader';

// Load styleguide web components.
defineCustomElements(window);

För att kunna använda komponenterna i Angular måste du även lägga in CUSTOM_ELEMENTS_SCHEMA i angularmodulerna för att undvika att få komplieringsfel.

import { BrowserModule } from '@angular/platform-browser';

// CUSTOM_ELEMENTS_SCHEMA allows the use of the web components in the HTML markup 
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

CSS i Angular

Du behöver importera styleguidens CSS, till exempel i angular.json-fil under "styles".

"styles": [
{
   "input":"./node_modules/@sjv/komponentbibliotek/dist/designsystem/designsystem.css",
   "bundleName":"sjv-designsystem-css"
},
...

Ikoner i Angular

Vill du använda ikoner ska du importera dem i din angular.json-fil under "styles". Detta kommer göra att ikonerna lägger sig i en egen bundle-fil.

"styles": [
{
  "input": "./node_modules/@sjv/komponentbibliotek/dist/assets/sjv-icon-fonts/fonts/sjv-icon-fonts.css",
  "bundleName": "sjv-ikoner"
},
...

Lägg till de grundläggande CSS klasserna

Du bör lägga till klassen 'e-html' i HTML-taggen. Klassen sätter vissa typografiska avstånd och andra inställningar, till exempel fontstorleken 100 procent.
Du bör lockså ägga till klassen "e-body" till body-taggen. Taggen sätter styleguidens typografiska regler för rubriker, listor, stycken och teckenstorlekar samt regler för avstånd och ikoner.

<!doctype html>
<html lang="sv" class="e-html">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta title="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0"/>
  </head>
  <body class="e-body">
  </body>
</html>

Mer att tänka på när du installerar komponentbiblioteket

Importera färger

Du kan kopiera filen och lägga in den i ditt Angular projekt. Alternativt kan du kopiera det ifrån npm paketet, sökvägen är @sjv/component-library/dist/release/assets/sjv-variables/_settings.color.scss.

Styleguidens färger går även att importera från fil (scss 5kB)

Läs in SCSS variabler

Du kan kopiera filen och lägga in den i ditt Angular projekt. Alternativt kan du kopiera det ifrån npm packetet, sökvägen @sjv/component-library/dist/release/assets/sjv-variables/<filnamn>.

Styleguidens brytpunkter (scss 1kB)

Styleguidens fontstorlekar (scss 1kB)

Styleguidens tomrum (scss 2kB)

Storleken på komponenterna

De flesta komponenterna använder rem som css enhet. Rem är en relativ enhet som baseras på fontstorleken (font-size) på root-elementet <html>, vilket gör att komponenterna storlek baseras på vilken fontstorlek du satt på <html> elementet.

Vår rekomendation är att du använder en fontstorlek på 100 % vilket motsvarar 16 px för att komponenterna ska få rätt storlek.

I styleguidens CSS finns en klass som heter e-html som du kan sätta på ditt systems html element, denna klass sätter fontstorleken till 100 %, det vill säga 16 px.

Vi använder inte jQuery

Om du vill ta in en jQuery-komponent, måste du själv se till att alla nödvändiga jQuery-bibliotek finns med.

Beställ en ny komponent

Kontakta styleguide-teamet om du har behov av en komponent eller en variant av en komponent som inte redan finns i styleguiden. Du kan också kontakta oss om du är osäker på hur du ska använda en komponent. Du når teamet enklast genom att mejla till styleguide@jordbruksverket.se.

Senast publicerad 2024-10-15

Sidansvarig för sidan är Styleguide