Om SCB Web Components

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

Komponenterna bygger på:

• Lit
• Material Web Components

Storybook och dokumentation (internt)

Produktionskomponenterna dokumenteras och demonstreras i Storybook på SCB:s interna adress:

• Prod: https://webcomponents.scb.intra

Testkomponenterna finns på:

• Test: https://webcomponentstest.scb.intra

Kom igång

Rekommenderad startväg:

npx scb-wc init html my-app
npx scb-wc init html-service my-service
npx scb-wc init react my-react-app
npx scb-wc init react-service my-react-service
npx scb-wc init blazor my-blazor-app
npx scb-wc init blazor-service my-blazor-service

Webbplatsmallarna skapar en liten starterapp med:

• scb-header
• scb-footer
• scb-grid
• några vanliga komponenter

Webbtjänstmallarna skapar en starterapp med:

• scb-app-bar
• scb-search
• scb-table-advanced
• komponenter för actions och status

Välj sedan den starter som ligger närmast din app och kör npm install i den nya mappen.

Om du redan har en app med package.json, kör kommandon i den mappen och installera paketet:

npm install scb-wc

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

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

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

// Enskilda web components
import 'scb-wc/scb-button';
import 'scb-wc/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/scb-wc.css';
import 'scb-wc/scb-typography.css';
import 'scb-wc/all';

scb-wc.css använder paketets standardtypografi. För tätare app- eller tjänstlayouter kan du ladda compact-lagret efter bas-CSS:en:

import 'scb-wc/scb-wc.css';
import 'scb-wc/scb-typography.css';
import 'scb-wc/scb-compact.css';

Service- och appstartermallarna laddar scb-compact.css. Webbplatsstartermallarna använder standardtypografin.

Självhosta fonter (Inter + Material Symbols)

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

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

Då används paketets egna fontfiler under node_modules/scb-wc/fonts/. Material Symbols är inte hela Google-fonten här. Selfhost-filen innehåller alla ikoner som visas under Foundations/Icons (ikoner) i Storybook. Listan kommer från paketets icons.json. Fonten behåller stöd för både fyllda och ofyllda varianter.

Optimera Material Symbols med eget ikon-subset

Det här är bara för appar som behöver Material Symbols utöver paketets icons.json. Då använder du scb-wc-core.css + ditt genererade scb-wc-icons.css i stället för scb-wc-selfhost.css.

Skapa en ikonlista i appens rot. Om du vill ersätta paketets selfhost-lista, kopiera paketets icons.json och lägg till dina egna ikon-namn:

npx scb-wc subset-icons --icons ./src/scb-icons.json --out ./public/scb-icons

Om --icons utelämnas används paketets standardlista icons.json. Om du skickar in en egen fil lägger kommandot till några basikoner, men inte hela paketets ikonlista. Kommandot skapar scb-wc-icons.css, en lokal fontfil och en kopia av ikonlistan i målmappen. Ladda då den fontlösa bas-CSS:en plus den genererade ikon-CSS:en:

import 'scb-wc/scb-wc-core.css';
import '/scb-icons/scb-wc-icons.css';
import 'scb-wc/scb-typography.css';

För MVC/MPA räcker det normalt att använda scb-wc-selfhost.css, eftersom den redan pekar på paketets selfhostade fontfiler.

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-wc/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/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc?');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/mvc/ till wwwroot/ui/ i din applikation (komponenter, vendor, CSS och fonts).

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

Exemplet använder selfhost-läget. Lägg CSS i <head> och ladda bara de komponentskript som sidan använder.

<!-- Global layout, helst i <head> -->
<link rel="stylesheet" href="~/ui/scb-wc-selfhost.css" />
<link rel="stylesheet" href="~/ui/scb-typography.css" />
<!-- Lägg till scb-compact.css om sidan ska använda compact-typografi. -->

<!-- Ladda bara de komponenter sidan använder -->
<script type="module" src="~/ui/components/scb-button/scb-button.js"></script>

~/ui/scb-wc-selfhost.css laddar Inter och paketets Material Symbols-subset från ~/ui/fonts/.

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 varianten från paketroten.
Flytta följande tre filer från node_modules/scb-wc och använd dem i applikationen:

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

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

Lägg till scb-compact.css om sidan ska använda compact-typografi.

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:

1. Använd MVC‑ESM‑builden (node_modules/scb-wc/mvc) och kopiera den till wwwroot/ui med ui:install.
2. Ladda scb-blazor-bridge.js från wwwroot/ui i din Blazor‑layout.
3. 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/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc?');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 src=p.resolve('node_modules/scb-wc/blazor/ScbBlazorInteropBase.cs');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc?');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.css" />
<link rel="stylesheet" href="~/ui/scb-typography.css" />

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

ScbBlazorInteropBase kan återanvändas mellan projekt som använder både scb-wc@latest och scb-wc@next.

Viktigt

• scb-wc@latest är produktionskanalen. Använd scb-wc@next för komponenter under utveckling och experiment.
• 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.