Om SCB Web Components

SCB Web Components innehåller SCB:s gemensamma webbkomponenter.

Dokumentation

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

1. Skapa en app

Välj den teknik du använder. Exemplet skapar en vanlig webbplats:

npx scb-wc init html my-app
cd my-app
npm install
npm run dev

Byt html mot:

• react för React
• html-service eller react-service för en tätare webbtjänst

2. Lägg till i en app som redan finns

Kör kommandot i mappen där appens package.json ligger:

npm install scb-wc

Importera CSS och bara de komponenter som sidan använder:

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

Lägg sedan komponenten i sidan:

<scb-button variant="filled">Fortsätt</scb-button>

Nästa steg

• Öppna Kom igång i Prod Storybook för HTML/CSS, React och MVC.
• Öppna mallar och exempel när du vill bygga en hel sida.
• Öppna komponentöversikten när du vill välja nästa komponent.

Kort referens

Ladda alla komponenter

Importera all bara om appen verkligen behöver de flesta komponenterna:

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

Tätare webbtjänster

Ladda Compact efter bas-CSS och typografi:

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

Webbplatsmallarna använder standardläget. Service- och appmallarna laddar Compact.

MVC och statiska webbplatser

Paketets färdiga MVC-filer ligger i node_modules/scb-wc/mvc/. Följ det kopierbara MVC-exemplet i Kom igång. Det visar vilket ui:install-script som ska läggas i appens package.json och vilka filer layouten ska ladda.

Fonter och egna ikoner

Vanliga appar använder scb-wc.css. Selfhost och egna Material Symbols-subset är avancerade val. Följ Foundations/Icons om appen inte får ladda Google Fonts eller behöver fler ikoner än paketets icons.json.

Bundlad version

Miljöer som inte kan använda ESM kan ladda:

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

Blanda inte bundle och MVC-ESM på samma sida.

Uppdatera paketet

Kör först i appens mapp:

npm outdated scb-wc

Om en ny version finns, läs Uppdatera SCB Web Components. Där länkas du vidare till versionen och eventuella migrationssteg.

Uppdatera sedan paketet, bygg appen och kör appens vanliga tester:

npm install scb-wc

För MVC behöver du även köra appens befintliga kopieringsscript efter installationen. Exakta steg finns på uppdateringssidan.

Viktigt

• scb-wc@latest är produktionskanalen. Använd scb-wc@next för komponenter under utveckling och experiment.
• Kör alltid npm-kommandon i mappen där appens package.json ligger.
• Ladda inte samma komponent på flera sätt på samma sida.