@oslokommune/oslo-designsystem-cli

Bruk av @oslokommune/oslo-designsystem-cli

Oslo designsystem har fått et kommandolinjeverktøy; ods 🥳 som bruk i terminalen eller scripts.

Forutsetninger

Node >= 12.22.12 installert

Installasjon

npm install -g @oslokommune/oslo-designsystem-cli

Tilgjengelige kommandoer

• ods gir deg en oversikt over kommandoene og options.
• ods init initierer designsystemet for bruk i din applikasjon. Lager også en ods.config.json fil basert på valg som tas i oppsettet.
• ods svg sprite generer svg sprites basert på ods.config.json.

ods init

Denne kommandoen initierer designsystemet.

Fordeler

• Oppretter konfig-filen for deg.
• Gir deg muligheten til å installere andre pakker i designsystemet.
• Legger til grunnleggende SVG-ikoner i appen din, om du ønsker.
• Gir deg personaliserte tips basert på dine svar og package.json i applikasjonen din.

ods.config.json kan eksempelvis se slik ut:

{
  "svgsprite": {
    "files": [                          /* SVG-filer i svgsprite */
      "../assets/src/icons/check.svg",
      "../assets/src/icons/24h.svg",
      "../assets/src/icons/share.svg"
    ],
    "output": {
      "fileType": "html",               /* html|svg */
      "filePath": "./index.html"        /* sti til destinasjonsfilen */
    }
  }
}

ods svg sprite

Komponentbibliotekene i Oslo designsystem forutsetter at en såkalt SVG Sprite eller SVG Symbols er tilgjengelig på siden. Det kan du lese mer om her: Multi-Colored SVG Symbol Icons with CSS Variables.

Denne kommandoen genererer en slik svgsprite for deg. Den trenger at designsystemet er initiert.

Kommandoen er avhengig av følgende verdier i konfig:

• svgsprite.files --> Array med stier til SVG ikoner.
• svgsprite.output.fileType --> Streng bestående av en av disse verdiene:
  • html - svgsprite inlines i et element i en html-fil (se under).
  • svg - svgsprite skrives i en SVG-fil.
• svgsprite.output.filePath --> Streng bestående av sti til output-filen.

MERK! Om du velger å inline i en HTML-fil skal du legge til dette elementet«:

<div id="ods-icons-sprite"></div>

Når brukes denne kommandoen? Hver gang du legger til eller tar bort en SVG.

👮 Lisens

Oslo designsystem er distribuert under MIT-lisens for åpen kildekode.