Styleguide

Lägga till styleguiden i utvecklingsprojekt

Här kan du läsa om hur du kommer igång med styleguiden genom att lägga till styleguiden i ett befintligt projekt.

När du lägger till styleguiden i ett befintligt utvecklingsprojekt

Det finns i huvudsakligen två sätt att lägga till styleguiden i ditt projekt. De två sätten är:

installera styleguiden via npm.
manuellt lägga in CSS och javascript länkarna i ditt projekt.

Webbkomponenter

I styleguiden bygger vi våra komponenter som 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.

Installera styleguide via npm

Om ditt utvecklingsprojekt använder NodeJS, kan du enkelt kan installera webbkomponenterna med:

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

Glöm inte att sätta jordbruksverket registry innan du kör npm install, detta kan du exempelvis göra genom att lägga in en .npmrc fil i din frontend applikationsprojekt.

Webbkomponenter i Angular

Använder du Angular måste du även importera och ladda in webbkomponenterna tillsammans med din Angular-kod. Ett lämpligt ställa att göra detta är i main.ts.

//main.ts
// Import Styleguide web components.
import { defineCustomElements, applyPolyfills } from '@sjv/component-library/dist/loader';

// Load styleguide web components.
applyPolyfills().then(() => {
  defineCustomElements(window);
});

För att kunna använda webbkomponenter i Angular måste du även lägga in CUSTOM_ELEMENTS_SCHEMA i de Angular moduler du använder webbkomponenter 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],
})

Ikoner i Angular-projekt

För att lägga in alla ikoner lägg in följande 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/component-library/dist/release/sjv-ikoner.css",
  "bundleName": "sjv-ikoner"
},
...

CSS i Angular

Använder du Angular måste du även importera styleguidens CSS på ett lämpligt ställe t.ex. i styles.scss.

@import url("~@sjv/component-library/dist/release/sjv-komponentbibliotek.css");

//Angular 17
// @import "@sjv/component-library/dist/release/sjv-komponentbibliotek.css";

// Om du vill använda bootstrap grid kommentera bort raden nedan.
//@import url("~@sjv/component-library/dist/release/assets/bootstrap-grid.css");

Hämta CSS

<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/19.8.6/package/dist/release/sjv-komponentbibliotek.css" integrity="sha512-qMChUtUpyFqdDWiz8dCHmT/niK8ynAqPNSNbGCCQzZx2ko9LWPqHBQm11oE8UhEhH73qR4GKKKg7+undsrK1Jw==" crossorigin="anonymous"/>

Efter att du hämtat CSS:en kan du välja vilka komponenter du vill använda och kopiera in html-koden från styleguiden till ditt projekt.

Hämta JavaScript

Till några av våra komponenter finns det JavaScript och på liknande sätt som för styleguidens CSS så går det att lägga till en script-tagg i projektets index.html-fil.

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

<script type="module" src="https://cdn.jordbruksverket.se/designsystem/19.8.6/package/dist/designsystem/designsystem.esm.js" integrity="sha512-CfCDjJH2qcDCa1xke3s1ATC6K6c2f72JpmlyUXNSKyZj4F/7auJUIFkqwOpG/N8BkQd+iKGSLJmzC/rSOzy7Uw==" crossorigin="anonymous"></script>

Det första skriptet kommer endast köras i webbläsare med stöd för ES-moduler medans det andra scriptet endast kommer köras i webbläsare som saknar stöd för ES-moduler.

Läs in färger från fil

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/_settings.color.scss.

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

Läs in SCSS variabler från fil

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älla 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 2023-11-30

Sidansvarig för sidan är Styleguide