test: Skal ikke merges, men brukes for å lage en rask test og demonstrasjon av heading-komponent

doc-site/components/nve-heading.md

@@ -0,0 +1,24 @@
+---
+layout: component
+---
+
+<CodeExamplePreview>
+
+```html
+<nve-heading level="1">Dette er en overskrift</nve-heading>
+```
+
+</CodeExamplePreview>
+
+## Eksempler
+
+La til et par eksepler for å teste her:
+
+<CodeExamplePreview>
+
+```html
+<nve-heading level="5">Dette er en h5 med default styling</nve-heading>
+<nve-heading level="2" typographyType="headingMedium">Dette er en h2 med headingMedium typografi</nve-heading>
+```
+
+</CodeExamplePreview>

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;
+
+  /** Typografitype - Kan overstyre det som er standard typografi basert på nivå */
+  @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()}>
+        <slot></slot>
+      </${unsafeStatic(tagName)}>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nve-heading': NveHeading;
+  }
+}

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);
+  }
+`;

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<NveHeading>(html`<nve-heading></nve-heading>`);
+    expect(document.body.contains(el)).toBe(true);
+  });
+});
+

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';