Om SCB Designsystem

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

---

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:
``sh
npm install scb-designsystem
`

---

Alternativ 1) ES-moduler i bundlade appar (Vite/Webpack)

Importera enskilda komponenter (bäst för tree-shaking):
`js
import 'scb-designsystem/scb-designsystem.css';
import 'scb-designsystem/scb-button';
import 'scb-designsystem/scb-accordion';
`

Importera allt (ej rekommenderat, men möjligt):
`js
import 'scb-designsystem/scb-designsystem.css';
import 'scb-designsystem/all';
`

---

Alternativ 2) MVC/MPA via

`

---

$3

Kör samma script i din pipeline:
`yaml
steps:
- script: npm ci
- script: npm run ui:install
`

Behöver du annan webbrotsökväg i pipelinen? Lägg till flaggan:
`yaml
- script: npm run ui:install --ui_wwwroot=../wwwroot
`

---

3) 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-designsystem och använd dem i applikationen:
`
node_modules/scb-designsystem/scb-designsystem.bundle.js
node_modules/scb-designsystem/scb-designsystem.css
`
`html


`

---

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.