scb-designsystemtest

v0.3.26

Published

4 months ago

> ⚠️ **Testpaket** > Testkomponenter under utveckling – kan ändras eller tas bort.

0High
0Medium
0Low

peter.sandgren

Om SCB Designsystemtest

⚠️ Testpaket
Testkomponenter under utveckling – kan ändras eller tas bort.

SCB Designsystemtest finns för att underlätta skapandet av enhetliga, tillgängliga och användbara webbapplikationer. Komponenterna är under utveckling och kan ändras eller tas bort mellan versioner.

Kom igång

Obs: Kör alla kommandon i mappen där din package.json ligger. Har du ingen? Kör npm init -y i projektroten (eller annan lämplig mapp).

Installera paketet:

npm install scb-designsystemtest

Alternativ 1: Använd som ES-moduler (i exempelvis React)

Importera enskilda komponenter (bäst för tree‑shaking):

import 'scb-designsystemtest/scb-designsystemtest.css';
import 'scb-designsystemtest/scb-button';
import 'scb-designsystemtest/scb-accordion';

Importera allt (ej rekommenderat, men möjligt):

import 'scb-designsystemtest/scb-designsystemtest.css';
import 'scb-designsystemtest/all';

Alternativ 2: Använd i MVC/MPA via `<script type="module">`

Det här läget använder den färdig‑splittrade MVC‑ESM‑builden som följer med paketet under node_modules/scb-designsystemtest/mvc/.

Rekommenderat: ett npm‑script

Lägg till i din apps package.json:

{
  "scripts": {
    "ui:install": "node -e \"const fs=require('fs'),p=require('path');const base=(process.env.npm_config_ui_wwwroot)||'wwwroot';const src=p.resolve('node_modules/scb-designsystemtest/mvc');const dst=p.resolve(base,'ui');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-designsystemtest?');process.exit(1);}fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\""
  }
}

Kör sedan:

npm run ui:install

Det kopierar hela mvc/ till wwwroot/ui/ (komponenter, vendor och CSS).

Vanliga lägen (var ligger din `package.json`?)

A) Standard MVC-projekt
package.json ligger i projektroten (vid sidan av .csproj).
Kör bara:

npm run ui:install

Resultat: filer kopieras till ./wwwroot/ui/.

B) Frontend i ClientApp/
package.json ligger i ClientApp/ och webbroten är ../wwwroot.
Kör med flagga:

npm run ui:install --ui_wwwroot=../wwwroot

Resultat: filer kopieras till ../wwwroot/ui/.

Ladda filer i din layout

<!-- Lägg helst i <head> -->
<link rel="stylesheet" href="~/ui/scb-designsystemtest.css" />

<!-- Ladda ENDAST de komponenter du använder på sidan, gärna precis före </body> -->
<script type="module" src="~/ui/components/scb-link/scb-link.js"></script>
<script type="module" src="~/ui/components/scb-button/scb-button.js"></script>

<!-- För demosida: ladda alla -->
<!-- <script type="module" src="~/ui/components/all.js"></script> -->

2.1) CI/CD (exempel)

Kör samma script i din pipeline:

steps:
  - script: npm ci
  - script: npm run ui:install

Behöver du annan webbrotsökväg i pipelinen? Lägg till flaggan:

- script: npm run ui:install --ui_wwwroot=../wwwroot

Alternativ 3: Använd bundlad version (IIFE)

Om ESM inte stöds, använd den bundlade varianten från paketroten. Det vill säga, flytta följande två filer från node_modules/scb-designsystemtest och använd dem i applikationen:

node_modules/scb-designsystemtest/scb-designsystemtest.bundle.js
node_modules/scb-designsystemtest/scb-designsystemtest.css

<link rel="stylesheet" href="scb-designsystemtest.css">
<script src="scb-designsystemtest.bundle.js"></script>

Viktigt

Stå i mappen med din package.json när du kör npm install och kopieringskommandon.
Placeringen av package.json styr defaultmål: roten -> wwwroot/ui, ClientApp/ -> använd --ui_wwwroot=../wwwroot.
Blanda inte MVC‑ESM och IIFE på samma sida.
scb-designsystemtest är ett testpaket – komponenter kan ändras eller tas bort mellan versioner.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme