Migrering til Punkt 20

Husk Content Security Policy

Ikonene hentes nå fra https://cdn.ikoner.oslo.kommune.no/. Har du en Content Security Policy, må domenet stå i connect-src. Ellers vises ingen ikoner.

Kjør verktøyet

Kjør verktøyet fra rota av prosjektet. Det går gjennom alt under mappa og hopper over node_modules, dist, build og andre byggemapper.

npx @oslokommune/punkt-migrate@20 . --dry-run

--dry-run skriver ingenting. Du får en rapport med fil og linjenummer for hvert funn:

Kategori	Betyr
Endret	Trygt skrevet om.
Oppdatert	Utdatert skrivemåte er byttet ut. Den gamle virker fortsatt i 20.
Fjernet	Finnes ikke lenger. Se over resultatet.
Droppet	Overflødig etter omskrivingen.
Flagget	Du må vurdere det selv.
Merk	Verdt å vite. Krever ingenting.

Er rapporten grei, kjør uten --dry-run. Verktøyet nekter å skrive hvis du har endringer som ikke er sjekket inn, så du kan se hva det gjorde med git diff. Det avslutter med kode 1 hvis noe er flagget.

npx @oslokommune/punkt-migrate@20 .

Er prosjektet på Punkt 18? Verktøyet leser versjonen fra package.json og migrerer til 19 først, i samme kjøring. Finner det ikke versjonen, kan du oppgi den selv med --from 18. Se Migrering til Punkt 19 for hva som endret seg da.

Er prosjektet på en eldre versjon enn 18, dekker verktøyet bare endringene fra 18 og nyere. Det sier fra i rapporten. Endringene før det må du gjøre selv. Se CHANGELOG.md i Punkt-pakkene.

Verktøyet forstår React, Elements i HTML, Lit, Vue, Svelte, Angular, Astro og MDX. Det leser også servermaler: Razor, JSP, ERB, Handlebars, Nunjucks, Liquid, EJS, Jinja, Twig og PHP.

Ny standard-skin

Card, Messagebox og Tag har fått gray som standard-skin.

Komponent	Før	Nå
Card	outlined	gray
Messagebox	beige	gray
Tag	blue	gray

Verktøyet legger til den gamle verdien der skin mangler, så utseendet ikke endres:

// før
<PktMessagebox title="Hei" />

// etter
<PktMessagebox skin="beige" title="Hei" />

Vil du ha det nye utseendet, fjerner du skin igjen. I ren CSS-markup legger verktøyet til pkt-messagebox--beige og pkt-tag--blue. Card trenger ingen klasse.

Card

• padding, imageShape, borderOnHover og restrictImageHeight er fjernet. Bildet har nå fast høyde.
• skin="outlined-beige" er fjernet og blir outlined.

Bruker du Card som ren CSS-markup, må du legge til noen elementer selv. Verktøyet flagger det:

• <div class="pkt-card__container"> rundt bildet og .pkt-card__wrapper. Uten den legger liggende kort seg aldri på rad.
• pkt-card--clickable på <article> når kortet er en lenke, og pila <pkt-icon class="pkt-card__link-icon" name="arrow-link"> rett etter </a> i overskriften.

Link og Link card

• external er fjernet fra både Link og Link card, sammen med ikonet. På Link blir den til rel="noopener noreferrer". Skriv i teksten hvor lenken går.
• Link card: skin="beige-outline" blir outlined, og skin="no-padding" fjernes.
• Link card uten skin har ikke lenger padding.

Ikoner

Ikonene hentes fra Oslo kommunes ikonbibliotek, Osloikoner, ikke fra Punkt sin CDN. Verktøyet flagger CSP-oppsett som mangler domenet, også i nginx-, YAML- og JSON-filer.

Seks ikoner er fjernet: search-icon-round-* og search-icon-square-*. Verktøyet flagger dem.

Peker du path eller window.pktIconPath på punkt-cdn, virker det fortsatt.

Det heter visst gray, ikke grey

Skrivemåten grey er fjernet. Bruk gray. Det gjelder skin på Tag og Link card, tagSkin på tab items, tagSkinColor i Combobox og klassen pkt-section--grey. På Link card blir grey-outline til outlined. Verktøyet skriver det om. Står grey i et dataobjekt, flagger det i stedet.

Lyse skins i mørk modus

Noen skins har ingen mørk variant. Komponentene holder dem lyse selv. I ren CSS-markup legger verktøyet til data-mode="light" på dem:

• Card og Link card: white, blue, green og beige
• Messagebox: beige, blue, red og green

Utdaterte props

Disse virker fortsatt i Punkt 20, men forsvinner i en senere versjon. Verktøyet bytter dem ut nå og rapporterer dem som Oppdatert.

Gammel	Ny
requiredText, optionalText, helptextDropdownButton	strings={{ forms: { … } }}
placeholder på Searchinput, searchPlaceholder på Header	strings
ariaLabel på Backlink, tekstene på Calendar	strings
compact på Alert	size="small"
on-close på Alert og Messagebox	close
skin="zebra-blue" på Table	skin="zebra"
skin="normal" og "gray-outline" på Link card	"transparent" og "outlined"
columnOne og columnTwo på Footer	columns={[…]}
autocomplete på Textarea og Textinput, readonly på Textinput	autoComplete, readOnly

Tekstene på én komponent samles i én strings. Går samme tekst igjen mange steder, foreslår rapporten at du setter den én gang med setPktStrings().

Hva verktøyet ikke kan gjøre

Verktøyet skriver ikke om noe det ikke er sikkert på. Det flagger i stedet:

• Verdier som settes i kode, som skin={skin}. Verktøyet skriver bare om når verdien står i koden.
• Skin-verdier i dataobjekter, som { skin: 'grey' }. Verktøyet vet ikke om objektet havner på en Punkt-komponent. Fjernede verdier flagges, utdaterte nevnes under Merk.
• Props som spres, som {...props}. Da vet ikke verktøyet om skin er satt.
• Egne komponenter som sender props videre til Punkt. Dem ser ikke verktøyet. Sjekk dem selv.
• Tekster i strings på Elements i React. React kan ikke sende objekter til Elements i alle versjoner. Bruk setPktStrings().
• Maluttrykk i servermaler, som requiredtext="{{ tekst }}".
• Content Security Policy. Den ligger i serveroppsettet, så du må endre den selv.

Bruker du punkt-vue?

@oslokommune/punkt-vue får ingen nye versjoner etter Punkt 18, og verktøyet migrerer den ikke. Det flagger den i package.json. Vi anbefaler å gå over til @oslokommune/punkt-elements. Komponentene, som <pkt-button>, virker i Vue, og verktøyet tar dem med i senere migreringer. Se Elements under Kom i gang.

Henter du Punkt fra CDN?

Verktøyet migrerer koden din, ikke CDN-lenkene. Peker du på en versjonert sti, som /19/css/pkt.min.css, får du Punkt 20 først når du bytter til /20/. Kjør verktøyet samtidig.