Här kan du läsa om hur du kommer igång med styleguiden, både när du startar ett helt nytt projekt ocn när du lägger till styleguiden i ett befintligt projekt.
Snabbaste sättet att komma igång när du startar ett nytt projekt är att utgå ifrån frontend arketypen som finns i gitlab Länk till annan webbplats.
Det finns i huvudsakligen två sätt att lägga till styleguiden i ditt projekt:
I Styleguiden bygger vi våra komponenter som webbkomponenter. Det gör det både enklare att integrera Styleguides komponenter i JavaScript ramverk som till exempel Angular samtidigt som det underlättar utvecklingen av nya komponenter.
Om ditt utvecklingsprojekt använder NodeJS, kan du enkelt kan installera webbkomponenterna med:
npm install -save --save-exact @sjv/component-library@19.4.5
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.
// 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],
})
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"
},
...
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");
// Om du vill använda bootstrap grid kommentera bort raden nedan.
//@import url("~@sjv/component-library/dist/release/assets/bootstrap-grid.css");
<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/19.4.5/package/dist/release/sjv-komponentbibliotek.css" integrity="sha256-93gV5AqMKOQAr0okuU/zRZ1907Q+YezmlAW4z4EoADs=" crossorigin="anonymous">
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.4.5/package/dist/designsystem/designsystem.js" integrity="sha256-HbmWBW/LJ04UhcqrlWrLrw6/YpCT6ge1barXDRCwkSw=" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.jordbruksverket.se/designsystem/19.4.5/package/dist/designsystem/designsystem.esm.js" integrity="sha256-HbmWBW/LJ04UhcqrlWrLrw6/YpCT6ge1barXDRCwkSw=" 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.
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.
Om du vill ta in en jQuery-komponent, måste du själv se till att alla nödvändiga jQuery-bibliotek finns med.
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
Sidansvarig för sidan är Styleguide