diff --git a/doc-site/components/nve-heading.md b/doc-site/components/nve-heading.md new file mode 100644 index 00000000..10b62817 --- /dev/null +++ b/doc-site/components/nve-heading.md @@ -0,0 +1,120 @@ +--- +layout: component +--- + + + +```html +Dette er en overskrift +``` + + + +## Eksempler + +Eksemplene viser hvordan du kan bruke heading-komponenten med ulike typografivarianter og nivåer for å tilpasse overskrifter til innholdet. + +### Heading-varianter + +Disse variantene gir deg de ulike typografistilene for hovedoverskrifter, og kan brukes på alle heading-nivåer etter behov. + + + +```html +Dette er en h1 med heading-xlarge +Dette er en h2 med heading-large +Dette er en h3 med heading-medium +Dette er en h4 med heading-small +Dette er en h5 med heading-xsmall +``` + + + +### Subheading-varianter + +Subheading-variantene gir undertitler med egne typografistiler, og brukes gjerne for å dele opp innhold under hovedoverskrifter. + + + +```html +Dette er en h2 med subheading-large +Dette er en h3 med subheading-medium +Dette er en h4 med subheading-small +``` + + + +### Default stil + +Når du ikke spesifiserer en variant, får heading-komponenten automatisk riktig typografi basert på valgt heading-nivå (`level`). Typografien følger designsystemets standard for h1–h6. + + + +```html +Heading h1 +Heading h2 +Heading h3 +Heading h4 +Heading h5 +``` + + + +## Retningslinjer + +Heading brukes til å skape struktur og hierarki i innholdet. Bruk overskrifter for å dele opp innholdet i logiske seksjoner. Pass på at du bruker riktige overskriftsnivåer (h1-h6) for å sikre god semantisk struktur. + +### Mobilskalering + +Komponenten skalerer automatisk overskrifter på ulike skjermstørrelser. Dette sikrer god lesbarhet og tilgjengelighet på mobil og små skjermer. + +### Stil og fleksibilitet + +Alle overskriftsnivåer har en standard stil som passer i de fleste kontekster. Du kan velge stil og størrelse for hvert nivå etter behov og design, noe som gir fleksibilitet til å tilpasse typografien til ulike seksjoner og innholdstyper. + +Se mer detaljer om typografi og heading-hierarki i [introduksjonen til designsystemet](introduction/designelementer/typography.html). + +### Hierarki + +Komponenten bruker prop `level` for å sikre riktig heading-hierarki. Start alltid med `level="1"` (h1) for hovedtittel, deretter `level="2"` (h2) for mellomtitler og `level="3"` (h3) for underordnede titler. `Level="4"` og lavere kan brukes for ytterligere inndeling. + +Det er viktig å ikke hoppe over nivåer, for eksempel h2 til h4. En side skal aldri ha mer enn én h1. Riktig hierarki gir bedre tilgjengelighet, struktur og SEO, og sikrer konsistent navigasjon for brukere med hjelpemidler. + +#### Eksempel på artikkel + + + +```html +Energisparing i hjemmet + + Ingress: Å spare energi er bra for både miljøet og lommeboken. Her får du tips til hvordan du kan redusere + strømforbruket hjemme. + + +Slik sparer du strøm + + Bruk energieffektive lyspærer og slå av lys når du forlater rommet. Unngå å la elektronikk stå i standby-modus, og + trekk ut ladere når de ikke er i bruk. + + +Varmepumpe + + En varmepumpe kan redusere oppvarmingskostnadene betydelig. Velg en modell som passer til boligens størrelse og klima. + + +Isolering + + God isolering holder på varmen og gjør at du bruker mindre energi til oppvarming. Sjekk vinduer, dører og tak for + trekk. + +``` + + + +## Tilgjengelighet + +Overskrifter bør brukes i riktig rekkefølge (h1–h6) for å skape en tydelig og forutsigbar struktur. Riktig hierarki gjør det enklere for brukere og hjelpemidler å navigere og forstå innholdet. Vær konsekvent på tvers av sider og seksjoner, slik at samme stil og semantikk brukes for samme overskriftsnivå. + +Bruk komponentens `level`-prop for korrekt HTML-tag (h1–h6). Teksten legges i slot for god tilgjengelighet. + +Husk at WCAG krever god fargekontrast. Det er ditt ansvar som designer eller utvikler å sikre at kontrasten oppfyller kravene. diff --git a/doc-site/components/nve-paragraph.md b/doc-site/components/nve-paragraph.md new file mode 100644 index 00000000..da0d5bc2 --- /dev/null +++ b/doc-site/components/nve-paragraph.md @@ -0,0 +1,110 @@ +--- +layout: component +--- + + + +```html +Dette er et vanlig avsnitt +``` + + + +## Eksempler + +Eksemplene viser hvordan du kan bruke paragraph-komponenten med ulike typografivarianter for å tilpasse tekst til innhold og kontekst. + +### Lead-varianter + +Lead-varianter brukes typisk som ingress, altså et kortfattet sammendrag mellom heading og brødtekst. + + + +```html +Lead Large Regular +Lead Medium Regular +Lead Small Regular +Lead Large Semibold +Lead Medium Semibold +Lead Small Semibold +``` + + + +### Body-varianter + +Body-varianter brukes til vanlig brødtekst i artikler, hjelpetekster og lignende. + + + +```html +Body Large +Body Medium +Body Small +Body XSmall +Body Large Underline +Body Medium Underline +Body Small Underline +Body XSmall Underline +``` + + + +### Body-compact-varianter + +Body-compact-varianter gir ekstra kompakt brødtekst, egnet for tabeller, lister eller områder med begrenset plass. + + + +```html +Body Compact Large +Body Compact Medium +Body Compact Small +Body Compact XSmall +Body Compact Large Underline +Body Compact Medium Underline +Body Compact Small Underline +Body Compact XSmall Underline +``` + + + +## Retningslinjer + +Paragraph brukes til å formidle løpende tekst, mengdetekst og ingress på en tydelig og strukturert måte. Del opp innholdet i avsnitt for å gjøre det lettere å lese og forstå. + +### Brukes til + +- Avsnitt i artikler +- Mengdetekst +- Ingress (lead-varianter) + +### Brukes ikke til + +- Inline tekst +- Annen semantisk tekst: overskrift, liste, ledetekst, tabelltittel. + +### Varianter + +Det finnes stiler for brødtekst og ingress. Du velger selv hvilken stil (størrelse og vekt) du skal bruke: body-stiler for brødtekst og lead-stiler for ingress. "Medium" er standard størrelse for tekst. Bruk andre størrelser om teksten skal fremheves eller tones ned. + +### Hvilken stil? + +Navn på stilene kombinerer semantisk element (avsnitt eller ingress) og størrelse. Velg variant ut fra hvor teksten skal brukes og hvor mye oppmerksomhet den skal få. + +### Struktur og lesbarhet + +Hold avsnitt fokuserte og godt strukturerte, og del opp lange tekstblokker i mindre deler for å gjøre innholdet lettere å skanne og forstå. Sørg for at linjelengde og luft rundt teksten bidrar til god leseflyt. + +Brødtekst skal være tydelig, konsis og skrevet i klart språk. Start med det viktigste innholdet slik at brukerne raskt forstår sammenhengen. Hvert avsnitt bør handle om ett tema eller én idé av gangen. + +Lead brukes typisk som ingress, altså et kortfattet sammendrag mellom heading og brødtekst. + +## Tilgjengelighet + +- Paragraph-komponenten bruker `

`-tag for korrekt semantikk. +- Teksten legges i slot, slik at den er tilgjengelig for skjermlesere. +- Sørg for god fargekontrast mellom tekst og bakgrunn, i tråd med WCAG-krav. Det er ditt ansvar som designer eller utvikler å sikre at kontrasten oppfyller kravene. +- Del opp lange tekstblokker for å gjøre innholdet lettere å lese og forstå for alle brukere. + +Se designsystemet for alle varianter og tokens. diff --git a/src/components/nve-heading/nve-heading.component.ts b/src/components/nve-heading/nve-heading.component.ts new file mode 100644 index 00000000..f04416c5 --- /dev/null +++ b/src/components/nve-heading/nve-heading.component.ts @@ -0,0 +1,79 @@ +import { LitElement } from 'lit'; +import { unsafeStatic, html } from 'lit/static-html.js'; +import { customElement, property } from 'lit/decorators.js'; +import { INveComponent } from '@interfaces/NveComponent.interface'; +import styles from './nve-heading.styles'; + +/** + * nve-heading gir semantisk og tilgjengelig overskrift med riktig typografi fra designsystemet. + * Brukes for å sikre korrekt heading-hierarki (h1–h6) og typografi, og kan overstyres med variant for heading eller subheading. + * + * @slot - tekst - Selve overskriften (innholdet). + * + * @csspart nve-heading Hele heading-elementet + * + * Se designsystemet for alle varianter og tokens. + */ +@customElement('nve-heading') +export default class NveHeading extends LitElement implements INveComponent { + @property({ type: String }) testId: string | undefined = undefined; + /** Heading level - Hvilket nivå overskriften skal ha (h1-h6) */ + @property({ type: Number, reflect: true }) level: 1 | 2 | 3 | 4 | 5 | 6 = 1; + + /** Typografitype - Kan overstyre det som er standard typografi basert på nivå */ + @property({ type: String, reflect: true }) size?: + | 'headingXlarge' + | 'headingLarge' + | 'headingMedium' + | 'headingSmall' + | 'headingXsmall' + | 'subheadingLarge' + | 'subheadingMedium' + | 'subheadingSmall'; + + static styles = [styles]; + + constructor() { + super(); + } + protected getTagName() { + if (!this.level || this.level < 1 || this.level > 6 || isNaN(this.level)) { + return 'h1'; + } + return `h${this.level}`; + } + + protected getDefaultTypographyType() { + switch (this.level) { + case 1: + return 'headingXlarge'; + case 2: + return 'headingLarge'; + case 3: + return 'headingMedium'; + case 4: + return 'headingSmall'; + case 5: + return 'headingXsmall'; + case 6: + return 'headingXsmall'; + default: + return 'headingMedium'; + } + } + + render() { + const tagName = this.getTagName(); + return html` + <${unsafeStatic(tagName)} part="nve-heading" data-testid=${this.testId} class="heading ${this.size ? this.size : this.getDefaultTypographyType()}"> + + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'nve-heading': NveHeading; + } +} diff --git a/src/components/nve-heading/nve-heading.styles.ts b/src/components/nve-heading/nve-heading.styles.ts new file mode 100644 index 00000000..c8fc9396 --- /dev/null +++ b/src/components/nve-heading/nve-heading.styles.ts @@ -0,0 +1,39 @@ +import { css } from 'lit'; + +export default css` + .heading { + margin: 0; + } + + .headingXlarge { + font: var(--typography-heading-x-large); + } + + .headingLarge { + font: var(--typography-heading-large); + } + + .headingMedium { + font: var(--typography-heading-medium); + } + + .headingSmall { + font: var(--typography-heading-small); + } + + .headingXsmall { + font: var(--typography-heading-x-small); + } + + .subheadingLarge { + font: var(--typography-subheading-large); + } + + .subheadingMedium { + font: var(--typography-subheading-medium); + } + + .subheadingSmall { + font: var(--typography-subheading-small); + } +`; diff --git a/src/components/nve-heading/nve-heading.test.ts b/src/components/nve-heading/nve-heading.test.ts new file mode 100644 index 00000000..d7a05ba1 --- /dev/null +++ b/src/components/nve-heading/nve-heading.test.ts @@ -0,0 +1,19 @@ +import { afterAll, describe, expect, it } from 'vitest'; +import { fixture, fixtureCleanup } from '@open-wc/testing'; +import { html } from 'lit'; +import NveHeading from './nve-heading.component'; + +if (!customElements.get('nve-heading')) { + customElements.define('nve-heading', NveHeading); +} + +describe('nve-heading', () => { + afterAll(() => { + fixtureCleanup(); + }); + + it('is attached to the DOM', async () => { + const el = await fixture(html``); + expect(document.body.contains(el)).toBe(true); + }); +}); diff --git a/src/components/nve-paragraph/nve-paragraph.component.ts b/src/components/nve-paragraph/nve-paragraph.component.ts new file mode 100644 index 00000000..9c5f5ab8 --- /dev/null +++ b/src/components/nve-paragraph/nve-paragraph.component.ts @@ -0,0 +1,63 @@ +import { LitElement, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { INveComponent } from '@interfaces/NveComponent.interface'; +import styles from './nve-paragraph.styles'; + +/** + * nve-paragraph gir fleksibel og tilgjengelig typografi for avsnitt i designsystemet. + * Brukes til brødtekst, mengdetekst og ingress (lead), og gir riktig styling basert på designsystemets tokens. + * + * Du styrer typografivariant med size-prop, og kan velge mellom ulike varianter for brødtekst (body), ingress (lead) og kompakt tekst (body-compact). + * + * @slot - tekst - Selve avsnittet (innholdet). + * + * @csspart paragraph Hele paragraph-elementet + * + * Se designsystemet for alle varianter og tokens. + */ +@customElement('nve-paragraph') +export default class NveParagraph extends LitElement implements INveComponent { + @property({ type: String }) testId: string | undefined = undefined; + + /** Typografivariant for paragrafen */ + @property({ type: String, reflect: true }) size?: + | 'leadLargeRegular' + | 'leadLargeSemibold' + | 'leadMediumRegular' + | 'leadMediumSemibold' + | 'leadSmallRegular' + | 'leadSmallSemibold' + | 'bodyLarge' + | 'bodyLargeUnderline' + | 'bodyMedium' + | 'bodyMediumUnderline' + | 'bodySmall' + | 'bodySmallUnderline' + | 'bodyXSmall' + | 'bodyXSmallUnderline' + | 'bodyLargeCompact' + | 'bodyLargeUnderlineCompact' + | 'bodyMediumCompact' + | 'bodyMediumUnderlineCompact' + | 'bodySmallCompact' + | 'bodySmallUnderlineCompact' + | 'bodyXSmallCompact' + | 'bodyXSmallUnderlineCompact'; + + static styles = [styles]; + + render() { + const variantClass = this.size ? `${this.size}` : ''; + return html` +

+ +

+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'nve-paragraph': NveParagraph; + } +} diff --git a/src/components/nve-paragraph/nve-paragraph.styles.ts b/src/components/nve-paragraph/nve-paragraph.styles.ts new file mode 100644 index 00000000..28497098 --- /dev/null +++ b/src/components/nve-paragraph/nve-paragraph.styles.ts @@ -0,0 +1,103 @@ +import { css } from 'lit'; + +export default css` + .paragraph { + margin: 0; + } + + .leadLargeRegular { + font: var(--typography-lead-large-regular); + } + + .leadLargeSemibold { + font: var(--typography-lead-large-semibold); + } + + .leadMediumRegular { + font: var(--typography-lead-medium-regular); + } + + .leadMediumSemibold { + font: var(--typography-lead-medium-semibold); + } + + .leadSmallRegular { + font: var(--typography-lead-small-regular); + } + + .leadSmallSemibold { + font: var(--typography-lead-small-semibold); + } + + .bodyLarge { + font: var(--typography-body-large); + } + + .bodyLargeUnderline { + font: var(--typography-body-large-underline); + text-decoration: underline; + } + + .bodyMedium { + font: var(--typography-body-medium); + } + + .bodyMediumUnderline { + font: var(--typography-body-medium-underline); + text-decoration: underline; + } + + .bodySmall { + font: var(--typography-body-small); + } + + .bodySmallUnderline { + font: var(--typography-body-small-underline); + text-decoration: underline; + } + + .bodyXSmall { + font: var(--typography-body-x-small); + } + + .bodyXSmallUnderline { + font: var(--typography-body-x-small-underline); + text-decoration: underline; + } + + .bodyLargeCompact { + font: var(--typography-body-compact-large-compact); + } + + .bodyLargeUnderlineCompact { + font: var(--typography-body-compact-large-underline-compact); + text-decoration: underline; + } + + .bodyMediumCompact { + font: var(--typography-body-compact-medium-compact); + } + + .bodyMediumUnderlineCompact { + font: var(--typography-body-compact-medium-underline-compact); + text-decoration: underline; + } + + .bodySmallCompact { + font: var(--typography-body-compact-small-compact); + } + + .bodySmallUnderlineCompact { + font: var(--typography-body-compact-small-underline-compact); + text-decoration: underline; + } + + .bodyXSmallCompact { + font: var(--typography-body-compact-x-small-compact); + } + + .bodyXSmallUnderlineCompact { + font: var(--typography-body-compact-x-small-underline-compact); + text-decoration: underline; + } +`; diff --git a/src/components/nve-paragraph/nve-paragraph.test.ts b/src/components/nve-paragraph/nve-paragraph.test.ts new file mode 100644 index 00000000..3d2934ca --- /dev/null +++ b/src/components/nve-paragraph/nve-paragraph.test.ts @@ -0,0 +1,20 @@ +import { afterAll, describe, expect, it, } from 'vitest'; +import { fixture, fixtureCleanup } from '@open-wc/testing'; +import { html } from 'lit'; +import NveParagraph from './nve-paragraph.component'; + +if (!customElements.get('nve-paragraph')) { + customElements.define('nve-paragraph', NveParagraph); +} + +describe('nve-paragraph', () => { + afterAll(() => { + fixtureCleanup(); + }); + + it('is attached to the DOM', async () => { + const el = await fixture(html``); + expect(document.body.contains(el)).toBe(true); + }); +}); + \ No newline at end of file diff --git a/src/nve-designsystem.ts b/src/nve-designsystem.ts index e334bb66..0613241c 100644 --- a/src/nve-designsystem.ts +++ b/src/nve-designsystem.ts @@ -17,6 +17,7 @@ export { default as NveDialog } from './components/nve-dialog/nve-dialog.compone export { default as NveDivider } from './components/nve-divider/nve-divider.component'; export { default as NveDrawer } from './components/nve-drawer/nve-drawer.component'; export { default as NveDropdown } from './components/nve-dropdown/nve-dropdown.component'; +export { default as NveHeading } from './components/nve-heading/nve-heading.component'; export { default as NveIcon } from './components/nve-icon/nve-icon.component'; export { default as NveInput } from './components/nve-input/nve-input.component'; export { default as NveLabel } from './components/nve-label/nve-label.component'; @@ -25,6 +26,7 @@ export { default as NveMenu } from './components/nve-menu/nve-menu.component'; export { default as NveMenuItem } from './components/nve-menu-item/nve-menu-item.component'; export { default as NveMessageCard } from './components/nve-message-card/nve-message-card.component'; export { default as NveOption } from './components/nve-option/nve-option.component'; +export { default as NveParagraph } from './components/nve-paragraph/nve-paragraph.component'; export { default as NvePopup } from './components/nve-popup/nve-popup.component'; export { default as NveRadio } from './components/nve-radio/nve-radio.component'; export { default as NveRadioButton } from './components/nve-radio-button/nve-radio-button.component';