Migrasjonsguide

Jøkul 4.0

Density-modusene er fjernet til fordel for size-moduser

Tidligere kalte vi størrelsesdimensjonen density, i tillegg til at fontstørrelsene endret seg avhengig av skjermstørrelser.

Nå bruker vi ordet size for å gjøre det tydeligere at det som endrer seg er komponentenes størrelse, og ikke den faktiske tettheten i grensesnittet.

Selv om disse konseptene ikke er helt like så kan du som regel bytte ut data-density="compact" med data-size="small".

• Les mer om endringene her.
• Se oversikt over tokens for avstander her.

Før:

data-density="compact" 
// Eller 
data-layout-density="compact"

Etter:

data-size="small"

Komponenter har mistet størrelse som prop

Langtlevende komponenter har hatt mulighet for å sette density som en prop. Dette er fjernet til fordel for data-attributter. Sett data-size på seksjoner med innhold.

Før:

<section/div/article>  
...  
<Button density="compact">Klikk på meg</Button>  
... 
</section/div/article>

Etter:

<section/div/article data-size="small">  
...  
<Button>Klikk på meg</Button>  
... 
</section/div/article>

Endrede typografi-tokens gir endringer i mixin-parametre

Der du har brukt body eller small, må du nå velge mellom en variant av paragraph eller text.

Hva som skal brukes ser du i oversikten i portalen, men i korte trekk:

• Dersom du har brukt mixinen vår, men gjort linjehøyden mindre er det mest sannsynlig text og ikke paragraph som skal brukes.
• Dersom du har overskrevet størrelsen på teksten til å være mindre enn 16px skal du nå bruke micro.
• Dersom du er usikker: kontakt en designer på teamet ditt, eller Jøkul-teamet.

Før:

@includes jkl.text-style("body"); @includes jkl.text-style("small");

Etter:

@includes jkl.text-style("paragraph-medium"); 
@includes jkl.text-style("paragraph-small");  

// Eller 
@includes jkl.text-style("text-medium"); 
@includes jkl.text-style("text-small"); 
@includes jkl.text-style("text-micro");

Beta-komponenter blir stabile

Betakomponentene prefixes med BETA_ for å gjøre det enkelt å finne. For å bruke stabile komponenter må du derfor fjerne prefixen. Dette gjelder:

• Search
• Table of Contents

Før:

<BETA_Search ... 
<BETA_TableOfContents ...

Etter:

<Search ... 
<TableOfContents ...

Link List variant="ordered" erstattet med Table of Contents

Beta-versjonen av LinkList er tatt inn som stabil.

• Der du tidligere brukte variant="ordered" bruker du nå den nye komponenten TableOfContents.

Før:

<LinkList variant="ordered">  
<LinkList.Item>  
<LinkList.Link href="#">  Lenketekst  </LinkList.Link>  
</LinkList.Item> 
</LinkList>

Etter:

<TableOfContents>  
<TableOfContents.Link href="#">  Lenketekst  </TableOfContents.Link> 
</TableOfContents>

• Der du tidligere brukte variant="unordered", eller uten å sette variant, bruker du den nå alltid uten variant.

Før:

<LinkList variant="unordered">  
<LinkList.Item>  
<LinkList.Link href="#">  Lenketekst  </LinkList.Link>  
</LinkList.Item> 
</LinkList>

Etter:

<LinkList>  
<LinkList.Link href="#">  Lenketekst  </LinkList.Link> 
</LinkList>Copy

Beta-varianten av Description List droppes

Vi har ikke vært så fornøyd med APIet i BETA_DescriptionList, og har derfor valgt å droppe denne. Den stabile versjonen av DescriptionList er beholdt. Utseende og ny funksjonalitet fra beta-varianten er tatt med inn i den stabile varianten.

Hvis du ikke har tatt i bruk BETA_DescriptionList trenger du ikke gjøre noen endringer.

Hvis du har tatt i bruk BETA_DescriptionList, kan du bytte til DescriptionList på følgende måte:

// Før: 
<BETA_DescriptionList alignment="justified" showSeparators={true}>  <BETA_DescriptionList.Item  title="Dekning"  value="Kasko"  />  <BETA_DescriptionList.Item  title="Egenandel"  value={["2 000 kr for glass", "6 000 kr for øvrige skader"]}  /> </BETA_DescriptionList>  

// Etter: 
<DescriptionList alignment="justified" separators={true}>  <DescriptionTerm>Dekning</DescriptionTerm>  <DescriptionDetail>Kasko</DescriptionDetail>   <DescriptionTerm>Egenandel</DescriptionTerm>  <DescriptionDetail>2 000 kr for glass</DescriptionDetail>  <DescriptionDetail>6 000 kr for øvrige skader</DescriptionDetail> </DescriptionList>