From 20de6e354293a4989136485236ac3c321ad25d67 Mon Sep 17 00:00:00 2001 From: Tom Are Pedersen Date: Tue, 3 Mar 2026 10:56:01 +0100 Subject: [PATCH 1/3] =?UTF-8?q?test:=20Skal=20ikke=20merges,=20men=20bruke?= =?UTF-8?q?s=20for=20=C3=A5=20lage=20en=20rask=20test=20og=20demonstrasjon?= =?UTF-8?q?=20av=20heading-komponent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc-site/components/nve-heading.md | 24 ++++++++ .../nve-heading/nve-heading.component.ts | 59 +++++++++++++++++++ .../nve-heading/nve-heading.styles.ts | 19 ++++++ .../nve-heading/nve-heading.test.ts | 20 +++++++ src/nve-designsystem.ts | 2 + 5 files changed, 124 insertions(+) create mode 100644 doc-site/components/nve-heading.md create mode 100644 src/components/nve-heading/nve-heading.component.ts create mode 100644 src/components/nve-heading/nve-heading.styles.ts create mode 100644 src/components/nve-heading/nve-heading.test.ts diff --git a/doc-site/components/nve-heading.md b/doc-site/components/nve-heading.md new file mode 100644 index 00000000..924b6517 --- /dev/null +++ b/doc-site/components/nve-heading.md @@ -0,0 +1,24 @@ +--- +layout: component +--- + + + +```html +Dette er en overskrift +``` + + + +## Eksempler + +La til et par eksepler for å teste her: + + + +```html +Dette er en h5 med default styling +Dette er en h2 med headingMedium typografi +``` + + 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..9e80dba0 --- /dev/null +++ b/src/components/nve-heading/nve-heading.component.ts @@ -0,0 +1,59 @@ +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'; + +@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 */ + @property({ type: Number, reflect: true }) level: 1 | 2 | 3 | 4 | 5 | 6 = 1; + + /** Heading level - Hvilket nivå overskriften skal ha */ + @property({ type: String, reflect: true }) typographyType?: + | 'headingXlarge' + | 'headingLarge' + | 'headingMedium' + | 'headingSmall'; + + 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'; + default: + return 'headingSmall'; + } + } + + render() { + const tagName = this.getTagName(); + return html` + <${unsafeStatic(tagName)} part="base" data-testid=${this.testId} class=${this.typographyType ? this.typographyType : 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..780639ac --- /dev/null +++ b/src/components/nve-heading/nve-heading.styles.ts @@ -0,0 +1,19 @@ +import { css } from 'lit'; + +export default css` + .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); + } +`; 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..6482c843 --- /dev/null +++ b/src/components/nve-heading/nve-heading.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 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); + }); +}); + \ No newline at end of file diff --git a/src/nve-designsystem.ts b/src/nve-designsystem.ts index e334bb66..0a778f27 100644 --- a/src/nve-designsystem.ts +++ b/src/nve-designsystem.ts @@ -1,5 +1,6 @@ /** Alle komponenter som er tilgjengelige, i alfabetisk rekkefølge. */ /** Denne filen blir genererert av npm run add-component */ +import '../node_modules/@shoelace-style/shoelace/dist/themes/light.css'; export { default as NveAccordion } from './components/nve-accordion/nve-accordion.component'; export { default as NveAccordionItem } from './components/nve-accordion-item/nve-accordion-item.component'; @@ -17,6 +18,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'; From f0a8ebaecd6df1e649dca8f07dbf3571282735b2 Mon Sep 17 00:00:00 2001 From: Tom Are Pedersen Date: Tue, 3 Mar 2026 11:00:06 +0100 Subject: [PATCH 2/3] reset fra merge --- src/nve-designsystem.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/nve-designsystem.ts b/src/nve-designsystem.ts index 0a778f27..d8a1fd00 100644 --- a/src/nve-designsystem.ts +++ b/src/nve-designsystem.ts @@ -1,6 +1,5 @@ /** Alle komponenter som er tilgjengelige, i alfabetisk rekkefølge. */ /** Denne filen blir genererert av npm run add-component */ -import '../node_modules/@shoelace-style/shoelace/dist/themes/light.css'; export { default as NveAccordion } from './components/nve-accordion/nve-accordion.component'; export { default as NveAccordionItem } from './components/nve-accordion-item/nve-accordion-item.component'; From fd30bbf5b175e68d3d609c4d17c3d961882ef2d1 Mon Sep 17 00:00:00 2001 From: Tom Are Pedersen Date: Tue, 3 Mar 2026 11:08:21 +0100 Subject: [PATCH 3/3] Fisket doc-kommentar --- src/components/nve-heading/nve-heading.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/nve-heading/nve-heading.component.ts b/src/components/nve-heading/nve-heading.component.ts index 9e80dba0..94ff1eb0 100644 --- a/src/components/nve-heading/nve-heading.component.ts +++ b/src/components/nve-heading/nve-heading.component.ts @@ -10,7 +10,7 @@ export default class NveHeading extends LitElement implements INveComponent { /** Heading level - Hvilket nivå overskriften skal ha */ @property({ type: Number, reflect: true }) level: 1 | 2 | 3 | 4 | 5 | 6 = 1; - /** Heading level - Hvilket nivå overskriften skal ha */ + /** Typografitype - Kan overstyre det som er standard typografi basert på nivå */ @property({ type: String, reflect: true }) typographyType?: | 'headingXlarge' | 'headingLarge'