@oslokommune/punkt-cli NPM

Bruk av punkt-cli

Punkt har fått et kommandolinjeverktøy; punkt 🥳 for bruk i terminalen eller scripts.

📝 Forutsetninger

Node >= 18.19.0 installert

Installasjon

npm install -g @oslokommune/punkt-cli

Tilgjengelige kommandoer

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

punkt 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.

punkt.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 */
    }
  }
}

Punkt svg sprite

Komponentbibliotekene i Punkt 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="pkt-icons-sprite"></div>

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

Eksempel bruk

Hvis du har importert inn alert-information kan du nå ta den i bruk slik:

<div class="pkt-alert">
  <span class="pkt-icon pkt-alert__icon">
    <svg viewBox="0 0 32 32" aria-hidden="true">
      <use href="#alert-information"></use>
    </svg>
  </span>
  <div class="pkt-alert__text">Bruk dette tekstfeltet til å skrive en kort varsling.</div>
</div>