scb-wc-test

v0.1.316

Published

2 hours ago

> ⚠️ **Testpaket** > `scb-wc-test` innehåller komponenter under utveckling. API, utseende och beteende kan ändras eller tas bort mellan versioner.

0High
0Medium
0Low

peter.sandgren

Om SCB Web Components Test

⚠️ Testpaket
scb-wc-test innehåller komponenter under utveckling. API, utseende och beteende kan ändras eller tas bort mellan versioner.

SCB Web Components(test) finns för att underlätta skapandet av enhetliga, tillgängliga och användbara webbapplikationer.

Komponenterna bygger på:

Storybook och dokumentation (internt)

Testkomponenterna dokumenteras och demonstreras i Storybook på SCB:s interna testadress:

Test: https://webcomponentstest.scb.intra

Produktionskomponenterna finns på:

Prod: https://webcomponents.scb.intra

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-wc-test

Alternativ 1: Använd som ES‑moduler (t.ex. i React, Vue, SPA)

Importera CSS och de testkomponenter du använder (bäst för tree‑shaking):

// Global CSS + tokens (måste bara importeras en gång)
import 'scb-wc-test/scb-wc-test.css';
import 'scb-wc-test/scb-typography.css';

// Enskilda web components
import 'scb-wc-test/scb-button';
import 'scb-wc-test/scb-accordion';

Vill du ladda allt finns en samlingsfil (inte rekommenderat i större appar):

// Global CSS + tokens (måste bara importeras en gång)
import 'scb-wc-test/scb-wc-test.css';
import 'scb-wc-test/scb-typography.css';
import 'scb-wc-test/all';

Självhosta fonter (Inter + Material Symbols)

Som standard laddas fonterna från Google Fonts via scb-wc-test.css. Vill du selfhosta kan du istället importera:

import 'scb-wc-test/scb-wc-test-selfhost.css';

Då används paketets egna fontfiler under node_modules/scb-wc-test/fonts/.

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

Det här läget använder den färdig‑splittade MVC‑ESM‑builden som följer med paketet under:

node_modules/scb-wc-test/mvc/

2.1) Rekommenderat: ett npm‑script för att kopiera UI‑filer

Lägg till i din apps package.json:

{
  "scripts": {
    "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc-test/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc-test?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');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 node_modules/scb-wc-test/mvc/ till wwwroot/ui/ i din applikation (komponenter, vendor och CSS).

2.2) Ladda filer i din layout (Razor, .cshtml, klassisk MVC)

Du kan byta till ~/ui/scb-wc-test-selfhost.css om du vill selfhosta fonterna (mappen ui/fonts/ kopieras av ui:install).

<!-- Lägg helst i <head> -->
<link rel="stylesheet" href="~/ui/scb-wc-test.css" />
<link rel="stylesheet" href="~/ui/scb-typography.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>

2.3) CI/CD‑exempel

Kör samma script i din pipeline:

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

Behöver du en annan webbrotsökväg (t.ex. om din wwwroot ligger någon annanstans) kan du ange flaggan:

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

Alternativ 3: Bundlad version (IIFE) för äldre miljöer

Om ESM inte stöds kan du använda den bundlade test‑varianten från paketroten.
Flytta följande två filer från node_modules/scb-wc-test och använd dem i applikationen:

node_modules/scb-wc-test/scb-wc-test.bundle.js
node_modules/scb-wc-test/scb-wc-test.css

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

Obs: Blanda inte MVC‑ESM och IIFE på samma sida.

Alternativ 4: Blazor (Server och WebAssembly)

SCB Web Components fungerar även i Blazor‑appar när du vill använda samma komponenter i både MVC/MPA och Blazor.

Grundprincipen är samma som för scb-wc:

Använd MVC‑ESM‑builden (node_modules/scb-wc-test/mvc) och kopiera den till wwwroot/ui med ui:install.
Ladda scb-blazor-bridge.js från wwwroot/ui i din Blazor‑layout.
Lägg till (eller återanvänd) ScbBlazorInteropBase i din lösning.

4.1) Script i Blazor-projektets `package.json`

Lägg till ett script som kopierar interop-filen från node_modules till ditt projekt (till exempel mappen ScbBlazor). Utöver ui:install-scriptet från MVC-exemplet ovan. Så att det till exempel blir så här i din package.json:

{
  "scripts": {
    "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc-test/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc-test?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\"",
    "ui:blazor:interop": "node -e \"const fs=require('fs'),p=require('path');const start=process.env.INIT_CWD||process.cwd();const candidates=['node_modules/scb-wc-test/blazor/ScbBlazorInteropBase.cs','node_modules/scb-wc/blazor/ScbBlazorInteropBase.cs'];const src=candidates.find(f=>fs.existsSync(f));if(!src){console.error('Hittar inte ScbBlazorInteropBase.cs i scb-wc-test eller scb-wc. Har du kört npm install scb-wc-test?');process.exit(1);}const dst=p.resolve(start,'ScbBlazor/ScbBlazorInteropBase.cs');fs.mkdirSync(p.dirname(dst),{recursive:true});fs.copyFileSync(src,dst);console.log('Kopierade '+src+' → '+dst);\""
  }
}

Exempel på layout:

<link rel="stylesheet" href="~/ui/scb-wc-test.css" />
<link rel="stylesheet" href="~/ui/scb-typography.css" />

<script type="module" src="~/ui/scb-blazor-bridge.js"></script>

ScbBlazorInteropBase är samma bas‑klass som används med prodpaketet. Du kan därför dela samma C#‑fil mellan projekt som använder scb-wc och scb-wc-test.

Viktigt

scb-wc-test är ett testpaket. Komponenter kan ändras eller tas bort mellan versioner. Använd inte paketet i externa produktionsmiljöer.
Kör kommandon i mappen med din package.json. Placeringen av package.json styr standardmål för ui:install (rot → wwwroot/ui, ClientApp/ → använd --ui_wwwroot=../wwwroot).
Blanda inte MVC‑ESM och IIFE på samma sida. Välj en distributionsform per sida/app.
Blazor: Se till att scb-blazor-bridge.js laddas efter att komponent‑JS:et finns på sidan, och att ScbBlazorInteropBase inte dupliceras i flera namespaces i samma lösning.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme