Politiets Designsystem (PDS)

Politiets Designsystem er retningslinjer, anbefalinger og komponenter for publikumsrettede tjenester og applikasjoner på politiet.no.

Er du designer kan du ta en titt på installguide for designere

Forutsetninger (Requirements)

• Node v. 16+: Last ned herfra

installasjon (Installation)

npm install @politiet/pds

Oppstart og bruk (Usage)

Komponenter

Støtte for React (JavaScript og TypeScript).

import {<komponent>} from '@politiet/pds';

Hvor <komponent> kan være Accordion, Autocomplete, Breadcrumbs, Button, Checkbox, CallToAction, Campaign, Card, ErrorMessage, EventMessage, Fieldset, FormReview, FormStepIndicator, Icon, LanguageSelector, Link, List, MessageCard, Modal, Notification, RadioButton, Select, Spinner, Text, TextArea, eller TextField.

Styling

Styling til komponenter må importeres manuelt. Importer filen(e) i den globale stylingsfilen.

For CSS/SCSS/LESS:

// Enten
@use '@politiet/pds/dist/style/<komponent>/pds-<komponent>';

// Eller
@import '@politiet/pds/dist/style/<komponent>/pds-<komponent>';

For javaScript/TypeScript:

import '@politiet/pds/dist/style/<komponent>/pds-<komponent>.css';

Hvor <komponent> er en av komponentene over i snake-case.

Det er også mulig å ta i bruk all styling fra alle komponentene:

// Enten
@use '@politiet/pds/dist/style/index';
@use '@politiet/pds/dist/style/core/pds-core';

// Eller
@import '@politiet/pds/dist/style/index';
@import '@politiet/pds/dist/style/core/pds-core';

Testing

For å visuelt regresjonsteste komponentene i storybook, har vi innført lokijs. Konfigurasjonen til loki er under eget avsnitt i package.json, og er p.t. kun avgrenset til historier for Checkbox.

Testene kjøres browserless via chrome.docker, og krever at storybook kjører (ref. ##### Første gang). Dette er WIP. Hensikten er at man skal kunne gjøre kontrollerte endringer av komponentene. Man oppfordres derfor til å utvide loki.storiesFilter til å inkludere komponenter fortløpende ved endringer.

Testene kjøres ved

npm run test:loki

PS: Det er viktig å ta snapshots av komponentene før man gjør endringer for å ha et sammenlikningsgrunnlag.

Hvis man gjør endringer av komponenter før de tilhørende snapshots blir oppdatert vil snapshot feile. For å løse dette kjør

npm run test:ci

trykk "a" for å kjøre alle tester, deretter "u" for å oppdatere feilende snapshots.

https://jestjs.io/docs/snapshot-testing

Design tokens

Støtte for CSS, SCSS, LESS og CSS-in-JS.

// Enten
@use '@politiet/pds/dist/tokens/<variable>';

.example {
  attribute: <variable>.$<token>
}

// Eller
@import '@politiet/pds/dist/tokens/<variable>';

Hvor <variable> kan være css, js, less eller scss.

Konstanter og hjelpefunksjoner

For utviklere finnes det i tillegg enn rekke funksjoner som kan være til hjelp i utviklingen.

Hjelpefunksjoner:
capitalize(), isExternalLink() and classNames().

Konstanter:
Keyboard().

Innspill og bidrag (Contributing)

Teknisk

Trengs det en endring kan man opprette en issue. Eventuelt kan man også opprette en egen branch, gjøre endringen selv og lage pull request som vil godkjennes av en på Team politiet.no. Si gjerne fra i Teams-kanalen eller til et av medlemmene i Team politiet.no. Her er det også mulig å komme med spørsmål og kommentarer som ikke egner seg like godt under issues på Github.

Versjonering

Vi følger Semantic Versioning. Følgende tommelfingerregler gjelder ved inkrementering av versjonsnummer:

• Patch (x.x.x): Feilrettinger som ikke bryter med eksisterende kode.
• Minor (x.x.x): Ny funksjonalitet eller mindre endringer som ikke bryter med eksisterende kode.
• Major (x.x.x): Endringer som bryter med eksisterende kode, eller større pakker med ny funksjonalitet.

Generelt

Har du innspill eller behov om design kan du sende en epost til [email protected] Har du laget eller endret en komponent? Lag en pull request og ta kontakt med innloggede tjenester

Lisens (License)

Opphavsrett Politiet 2022. Til bruk i alle interne og eksterne løsninger finansiert av Politiet.

Installguide for designere

Last ned Github desktop Last ned Visual studio code

• Åpne GitHub Desktop
• Logg på med din politietbruker
• Velg "pds" i "Current Reposoitory"

Install Homebrew for mac ved å åpne Terminal (i apper) på din Mac. Lim inn og trykk enter: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Det kan hende du må taste passord. Det er da passordet du bruker for å låse opp din Mac etter dvale (ikke PIT-passordet). I terminal vil ikke markøren flytte seg for å vise hva du har tastet. Dette er normalt, og du må bare trykke enter etter at du har skrevet det ferdig. Instalasjon tar litt tid, finn deg en kopp kaffe mens du venter.

Ikke lukk Terminal enda. For at maskinen skal kunne finne brew må lime inn og trykke enter: echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/stinegronstadskar/.zprofile etterfulgt av: eval "$(/opt/homebrew/bin/brew shellenv)"

For å sjekke at alt er OK med Brew, kan du skrive inn brew doctor

For å kunne kjøre storybook, skal du installere Node og NPM med (home)brew. Lim inn og tykk enter: brew install node

Gratulerer, du kan nå lukke Terminal.

Start GitHub desktop. Dette er verktøyet for å laste ned kode, og laste opp endringer. Legg til reposotory pds (https-github-com-politiet/pds) i Github Desktop etter at du er logget inn med din politiet-github bruker. (Eget passord, ikke PIT-passord)

Bruke Visual studio code

Første gang

Åpne Visual Studio Code Naviger på venstre side (ikonet øverst til venstre med to ark) til mappa PDS (Typisk Documents/GitHub/pds) Finn README.md (denne filen) Velg "Terminal" i menyen øverst. Trykk på "New Terminal"

Du får nå en terminal nederst i vinduet, du kan bruke for å kjøre kommandoer relatert til prosjektet du står i.

npm install Når det er fullført kan du kjøre npm run storybook Gå til http://localhost:6006/ i nettleseren, hvis den ikke starter automatisk.

Kjør på Mac etter install

Åpne Visual Studio Code. Pass på at du har åpnet rett mappe på høyre side. Hvis ikke terminal er åpnet nederst, gjør dette i menyen. Lim inn og trykk enter, eller bruk pil opp i terminalen for å bla i siste brukte kommandoer.

npm run storybook

Gå til http://localhost:6006/ i nettleseren, hvis den ikke starter automatisk.