@oslokommune/punkt-elements 16.26.7 → 17.0.2

package/src/components/footer/footer-base.ts

@@ -0,0 +1,238 @@
+import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'
+import { property, state } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import {
+  deriveSocialIcon,
+  fetchHeaderFooterData,
+  getExternalDomainLabel,
+  getLinkDomainLabel,
+  selectLocaleData,
+} from 'shared-utils/header-footer'
+import {
+  type Booleanish,
+  booleanishConverter,
+  type IHeaderFooter,
+  type IHeaderMenuLink,
+  type IHeaderMenuSection,
+  type IPktFooterLink,
+  type THeaderFooterApi,
+  type THeaderMenuLocale,
+} from 'shared-types'
+import { PktElement } from '@/base-elements/element'
+
+import '@/components/consent'
+import '@/components/icon'
+
+const CONSENT_TRIGGER_URL = '#cb-trigger'
+
+/**
+ * Shared base for `pkt-footer` and `pkt-footer-simple`.
+ *
+ * - Fetching and caching global footer data
+ * - Rendering the global footer band (blue)
+ * - Rendering the consent dialog (if `includeConsent` is set)
+ */
+
+export abstract class PktFooterBaseElement<T = {}> extends PktElement<T> {
+  @property({ type: String, attribute: 'data-url' }) dataUrl?: string
+  @property({ type: Object, attribute: false }) data?: THeaderFooterApi
+  @property({ type: String }) locale: THeaderMenuLocale = 'nb-NO'
+
+  @property({ type: Boolean, attribute: 'skip-global', converter: booleanishConverter })
+  skipGlobal: Booleanish = false
+  @property({ type: Boolean, attribute: 'open-links-in-new-tab', converter: booleanishConverter })
+  openLinksInNewTab: Booleanish = false
+
+  @property({ type: Boolean, attribute: 'include-consent', converter: booleanishConverter })
+  includeConsent: Booleanish = false
+  @property({ type: String, attribute: 'hotjar-id' }) hotjarId: string | null = null
+  @property({ type: String, attribute: 'google-analytics-id' }) googleAnalyticsId: string | null =
+    null
+  @property({ type: Boolean, attribute: 'dev-mode', converter: booleanishConverter })
+  devMode: Booleanish = false
+  @property({ type: String, attribute: 'cookie-domain' }) cookieDomain: string | null = null
+  @property({ type: String, attribute: 'cookie-secure' }) cookieSecure: string | null = null
+  @property({ type: String, attribute: 'cookie-expiry-days' }) cookieExpiryDays: string | null =
+    null
+
+  @state() private fetchedData?: THeaderFooterApi
+
+  private abortController?: AbortController
+
+  connectedCallback() {
+    super.connectedCallback()
+    if (!this.data && !this.skipGlobal) {
+      void this.loadData()
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.abortController?.abort()
+  }
+
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties)
+    if (
+      changedProperties.has('dataUrl') &&
+      changedProperties.get('dataUrl') !== undefined &&
+      !this.data
+    ) {
+      void this.loadData()
+    }
+  }
+
+  private async loadData() {
+    this.abortController?.abort()
+    this.abortController = new AbortController()
+    try {
+      this.fetchedData = await fetchHeaderFooterData<string>(
+        this.dataUrl,
+        this.abortController.signal,
+      )
+    } catch (error) {
+      if ((error as Error).name === 'AbortError') return
+      console.warn('Failed to fetch header/footer data:', error)
+      this.dispatchEvent(
+        new CustomEvent('data-error', { detail: { error }, bubbles: true, composed: true }),
+      )
+    }
+  }
+
+  private get globalFooterData(): IHeaderFooter | undefined {
+    return selectLocaleData(this.data ?? this.fetchedData, this.locale)?.footer
+  }
+
+  protected linkTarget(link: IPktFooterLink): { target: string; rel?: string } {
+    const newTab = link.openInNewTab || this.openLinksInNewTab
+    return newTab ? { target: '_blank', rel: 'noopener noreferrer' } : { target: '_self' }
+  }
+
+  /** "(topdomain.tld)" display for external links */
+  protected renderLinkDomain(link: IPktFooterLink, className = 'pkt-footer__link-domain') {
+    if (!link.external) return nothing
+    const domain = getLinkDomainLabel(link.href)
+    if (!domain) return nothing
+    return html` <span class=${className}>(${domain})</span>`
+  }
+
+  protected renderCustomLink(link: IPktFooterLink): TemplateResult {
+    const { target, rel } = this.linkTarget(link)
+    return html`
+      <a href=${link.href} target=${target} rel=${ifDefined(rel)}
+        >${link.text}${this.renderLinkDomain(link)}</a
+      >
+    `
+  }
+
+  protected renderConsent(): TemplateResult | typeof nothing {
+    if (!this.includeConsent) return nothing
+    return html`
+      <pkt-consent
+        .triggerType=${'footerlink'}
+        .hotjarId=${this.hotjarId}
+        .googleAnalyticsId=${this.googleAnalyticsId}
+        .devMode=${Boolean(this.devMode)}
+        .cookieDomain=${this.cookieDomain}
+        .cookieSecure=${this.cookieSecure}
+        .cookieExpiryDays=${this.cookieExpiryDays}
+      ></pkt-consent>
+    `
+  }
+
+  private renderGlobalSectionLink(link: IHeaderMenuLink): TemplateResult | typeof nothing {
+    if (link.url === CONSENT_TRIGGER_URL) {
+      // Punkt's own consent dialog replaces the CDN cookie-banner trigger.
+      if (!this.includeConsent) return nothing
+      return html`
+        <li>
+          <pkt-consent
+            .triggerType=${'footerlink'}
+            .triggerText=${link.text}
+            .hotjarId=${this.hotjarId}
+            .googleAnalyticsId=${this.googleAnalyticsId}
+            .devMode=${Boolean(this.devMode)}
+            .cookieDomain=${this.cookieDomain}
+            .cookieSecure=${this.cookieSecure}
+            .cookieExpiryDays=${this.cookieExpiryDays}
+          ></pkt-consent>
+        </li>
+      `
+    }
+    const domain = getExternalDomainLabel(link.url)
+    return html`
+      <li>
+        <a href=${link.url}
+          >${link.text}${domain
+            ? html` <span class="pkt-footer__link-domain">(${domain})</span>`
+            : nothing}</a
+        >
+      </li>
+    `
+  }
+
+  private renderGlobalSection(section: IHeaderMenuSection): TemplateResult {
+    return html`
+      <section>
+        <h2>${section.title}</h2>
+        <ul class="pkt-footer__link-list">
+          ${section.links.map((link) => this.renderGlobalSectionLink(link))}
+        </ul>
+      </section>
+    `
+  }
+
+  private renderSomeLink(entry: IHeaderMenuLink): TemplateResult {
+    const icon = deriveSocialIcon(entry.url, entry.text)
+    if (!icon) {
+      return html`<li><a href=${entry.url}>${entry.text}</a></li>`
+    }
+    return html`
+      <li>
+        <a class="pkt-footer__some-link" href=${entry.url} aria-label=${entry.text}>
+          <pkt-icon class="pkt-footer__some-icon" name=${icon}></pkt-icon>
+        </a>
+      </li>
+    `
+  }
+
+  private renderGlobalBottom(footer: IHeaderFooter): TemplateResult | typeof nothing {
+    const hasLinks = footer.links?.length > 0
+    const hasSome = footer.some?.length > 0
+    if (!hasLinks && !hasSome) return nothing
+    return html`
+      <div class="pkt-footer__bottom">
+        ${hasLinks
+          ? html`
+              <ul class="pkt-footer__bottom-links">
+                ${footer.links.map((link) => html`<li><a href=${link.url}>${link.text}</a></li>`)}
+              </ul>
+            `
+          : nothing}
+        ${hasSome
+          ? html`
+              <ul class="pkt-footer__some">
+                ${footer.some.map((entry) => this.renderSomeLink(entry))}
+              </ul>
+            `
+          : nothing}
+      </div>
+    `
+  }
+
+  protected renderGlobalFooter(): TemplateResult | typeof nothing {
+    if (this.skipGlobal) return nothing
+    const footer = this.globalFooterData
+    if (!footer) return nothing
+    return html`
+      <div class="pkt-footer__band pkt-footer__band--global">
+        <div class="pkt-footer__inner">
+          <div class="pkt-footer__sections">
+            ${footer.sections.map((section) => this.renderGlobalSection(section))}
+            ${this.renderGlobalBottom(footer)}
+          </div>
+        </div>
+      </div>
+    `
+  }
+}

package/src/components/footer/footer-simple.ts

@@ -0,0 +1,71 @@
+import { html, nothing, type TemplateResult } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import type { IPktFooterLink } from 'shared-types'
+import { PktFooterBaseElement } from './footer-base'
+import type { IPktFooterSimple } from './types'
+
+import '@/components/icon'
+
+/**
+ * PktFooterSimple — kompakt footer: en sentrert rad med pil-lenker i det
+ * grå sekundær-båndet, stablet oppå den globale (blå) footeren. Uten
+ * `links` rendres kun den globale footeren.
+ */
+export class PktFooterSimple
+  extends PktFooterBaseElement<IPktFooterSimple>
+  implements IPktFooterSimple
+{
+  @property({ type: Array }) links?: IPktFooterLink[]
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.classList.add('pkt-footer-simple-host')
+  }
+
+  private renderLink(link: IPktFooterLink): TemplateResult {
+    const { target, rel } = this.linkTarget(link)
+    return html`
+      <a class="pkt-footer-simple__link" href=${link.href} target=${target} rel=${ifDefined(rel)}>
+        <pkt-icon class="pkt-footer-simple__link-icon" name="arrow-link"></pkt-icon>
+        <span>${link.text}${this.renderLinkDomain(link, 'pkt-footer-simple__link-domain')}</span>
+      </a>
+    `
+  }
+
+  render() {
+    const hasCustomContent = !!this.links?.length
+    // Med skipGlobal rendres consent-lenken i sekundær-båndet i stedet
+    // for i den globale footeren.
+    const consentInSecondary = this.skipGlobal && this.includeConsent
+    return html`
+      <footer class="pkt-footer-simple">
+        ${hasCustomContent || consentInSecondary
+          ? html`
+              <div class="pkt-footer__band pkt-footer__band--secondary">
+                <div class="pkt-footer__inner pkt-footer__inner--compact">
+                  <ul class="pkt-footer-simple__list">
+                    ${this.links?.map((link) => html`<li>${this.renderLink(link)}</li>`)}
+                    ${consentInSecondary ? html`<li>${this.renderConsent()}</li>` : nothing}
+                  </ul>
+                </div>
+              </div>
+            `
+          : nothing}
+        ${this.renderGlobalFooter()}
+      </footer>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pkt-footer-simple': PktFooterSimple
+  }
+}
+
+try {
+  customElement('pkt-footer-simple')(PktFooterSimple)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-footer-simple>, men den er allerede definert')
+}

package/src/components/footer/footer.accessibility.test.ts

@@ -0,0 +1,66 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { afterEach, describe, expect, test, vi } from 'vitest'
+
+import './footer'
+import './footer-simple'
+import { PktFooter } from './footer'
+import { PktFooterSimple } from './footer-simple'
+import { EXAMPLE_HEADER_FOOTER_DATA } from 'shared-utils/header-footer'
+import type { IPktFooterColumn, IPktFooterLink } from 'shared-types'
+
+expect.extend(toHaveNoViolations)
+
+const COLUMNS: IPktFooterColumn[] = [
+  {
+    title: 'Overskrift 1',
+    text: 'Beskrivende tekst om løsningen.',
+    links: [{ text: 'Lenke 1', href: 'https://example.test/lenke-1' }],
+  },
+  {
+    title: 'Overskrift 2',
+    links: [{ text: 'Lenke 2', href: 'https://example.test/lenke-2' }],
+  },
+]
+
+const SIMPLE_LINKS: IPktFooterLink[] = [
+  { text: 'Lenke 1', href: 'https://example.test/lenke-1' },
+  { text: 'Lenke 2', href: 'https://example.test/lenke-2' },
+]
+
+afterEach(() => {
+  document.body.innerHTML = ''
+  vi.restoreAllMocks()
+})
+
+const mount = async <T extends PktFooter | PktFooterSimple>(
+  tag: 'pkt-footer' | 'pkt-footer-simple',
+  props: Record<string, unknown> = {},
+): Promise<T> => {
+  const el = document.createElement(tag) as T
+  el.data = EXAMPLE_HEADER_FOOTER_DATA
+  Object.assign(el, props)
+  document.body.appendChild(el)
+  await customElements.whenDefined(tag)
+  await el.updateComplete
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  await el.updateComplete
+  return el
+}
+
+describe('PktFooter tilgjengelighet', () => {
+  test('kun global footer har ingen a11y-avvik', async () => {
+    const el = await mount('pkt-footer')
+    expect(await axe(el)).toHaveNoViolations()
+  })
+
+  test('footer med custom kolonner har ingen a11y-avvik', async () => {
+    const el = await mount('pkt-footer', { columns: COLUMNS })
+    expect(await axe(el)).toHaveNoViolations()
+  })
+
+  test('kompakt footer har ingen a11y-avvik', async () => {
+    const el = await mount('pkt-footer-simple', { links: SIMPLE_LINKS })
+    expect(await axe(el)).toHaveNoViolations()
+  })
+})

package/src/components/footer/footer.test.ts

@@ -0,0 +1,238 @@
+import '@testing-library/jest-dom'
+import { afterEach, describe, expect, test, vi } from 'vitest'
+
+import './footer'
+import './footer-simple'
+import { PktFooter } from './footer'
+import { PktFooterSimple } from './footer-simple'
+import { EXAMPLE_HEADER_FOOTER_DATA } from 'shared-utils/header-footer'
+import type { IPktFooterColumn, IPktFooterLink } from 'shared-types'
+
+const COLUMNS: IPktFooterColumn[] = [
+  {
+    title: 'Overskrift 1',
+    text: 'Her kan du skrive en lengre tekst som beskriver løsningen.',
+    links: [{ text: 'Lenke 1', href: 'https://example.test/lenke-1' }],
+  },
+  {
+    title: 'Overskrift 2',
+    links: [
+      { text: 'Lenke 2', href: 'https://example.test/lenke-2', external: true },
+      { text: 'Lenke 3', href: 'https://example.test/lenke-3', openInNewTab: true },
+    ],
+  },
+]
+
+const SIMPLE_LINKS: IPktFooterLink[] = [
+  { text: 'Lenke 1', href: 'https://example.test/lenke-1' },
+  { text: 'Lenke 2', href: 'https://example.test/lenke-2' },
+]
+
+const mountFooter = async (props: Record<string, unknown> = {}): Promise<PktFooter> => {
+  const el = document.createElement('pkt-footer') as PktFooter
+  el.data = EXAMPLE_HEADER_FOOTER_DATA
+  Object.assign(el, props)
+  document.body.appendChild(el)
+  await customElements.whenDefined('pkt-footer')
+  await el.updateComplete
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  await el.updateComplete
+  return el
+}
+
+const mountSimple = async (props: Record<string, unknown> = {}): Promise<PktFooterSimple> => {
+  const el = document.createElement('pkt-footer-simple') as PktFooterSimple
+  el.data = EXAMPLE_HEADER_FOOTER_DATA
+  Object.assign(el, props)
+  document.body.appendChild(el)
+  await customElements.whenDefined('pkt-footer-simple')
+  await el.updateComplete
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  await el.updateComplete
+  return el
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+  vi.restoreAllMocks()
+})
+
+describe('PktFooter global footer', () => {
+  test('rendrer kun global footer uten custom innhold', async () => {
+    const el = await mountFooter()
+    expect(el.querySelector('.pkt-footer__band--secondary')).toBeNull()
+    expect(el.querySelector('.pkt-footer__band--global')).not.toBeNull()
+    const titles = [
+      ...el.querySelectorAll('.pkt-footer__band--global h2'),
+    ].map((t) => t.textContent)
+    expect(titles).toEqual(['Kontakt', 'Jobb i Oslo kommune', 'Om nettstedet'])
+  })
+
+  test('rendrer bunnrad med språklenke og some-ikoner', async () => {
+    const el = await mountFooter()
+    const bottom = el.querySelector('.pkt-footer__band--global .pkt-footer__bottom')
+    expect(bottom?.querySelector('a')?.textContent).toContain('English')
+    const someLinks = [...el.querySelectorAll('.pkt-footer__band--global .pkt-footer__some-link')]
+    expect(someLinks).toHaveLength(3)
+    expect(someLinks[0].getAttribute('aria-label')).toBe('Facebook')
+    expect(someLinks[0].querySelector('pkt-icon')?.getAttribute('name')).toBe('facebook')
+  })
+
+  test('merker eksterne lenker med toppdomene i parentes', async () => {
+    const el = await mountFooter()
+    const jobLink = [...el.querySelectorAll('.pkt-footer__band--global a')].find(
+      (link) => link.textContent?.includes('Ledige stillinger'),
+    )
+    expect(jobLink?.querySelector('.pkt-footer__link-domain')?.textContent).toBe('(webcruiter.com)')
+    const internalLink = [
+      ...el.querySelectorAll('.pkt-footer__band--global a'),
+    ].find((link) => link.textContent?.includes('Tilgjengelighet'))
+    expect(internalLink?.querySelector('.pkt-footer__link-domain')).toBeNull()
+  })
+
+  test('skjuler #cb-trigger-lenken uten includeConsent', async () => {
+    const el = await mountFooter()
+    expect(el.textContent).not.toContain('Innstillinger for informasjonskapsler')
+    expect(el.querySelector('pkt-consent')).toBeNull()
+  })
+
+  test('erstatter #cb-trigger med pkt-consent når includeConsent er satt', async () => {
+    const el = await mountFooter({ includeConsent: true })
+    const consent = el.querySelector('pkt-consent')
+    expect(consent).not.toBeNull()
+    expect(consent?.closest('.pkt-footer__band--global')).not.toBeNull()
+  })
+
+  test('bruker valgt locale', async () => {
+    const el = await mountFooter({ locale: 'en-GB' })
+    const titles = [
+      ...el.querySelectorAll('.pkt-footer__band--global h2'),
+    ].map((t) => t.textContent)
+    expect(titles).toContain('Contact us')
+  })
+
+  test('skipGlobal dropper global footer og henter ikke data', async () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('should not run'))
+    const el = document.createElement('pkt-footer') as PktFooter
+    el.skipGlobal = true
+    el.columns = COLUMNS
+    document.body.appendChild(el)
+    await customElements.whenDefined('pkt-footer')
+    await el.updateComplete
+    expect(el.querySelector('.pkt-footer__band--global')).toBeNull()
+    expect(el.querySelector('.pkt-footer__band--secondary')).not.toBeNull()
+    expect(fetchSpy).not.toHaveBeenCalled()
+  })
+})
+
+describe('PktFooter henting av data', () => {
+  test('henter data fra endepunkt når data ikke er satt', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify(EXAMPLE_HEADER_FOOTER_DATA), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      }),
+    )
+    const el = document.createElement('pkt-footer') as PktFooter
+    document.body.appendChild(el)
+    await customElements.whenDefined('pkt-footer')
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    await el.updateComplete
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      'https://cdn.web.oslo.kommune.no/header-footer/header-footer.json',
+    )
+    expect(el.querySelector('.pkt-footer__band--global')).not.toBeNull()
+  })
+
+  test('rendrer ingenting og emitter data-error når hentingen feiler', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      new Response('boom', { status: 500 }) as unknown as Response,
+    )
+    const el = document.createElement('pkt-footer') as PktFooter
+    const events: CustomEvent[] = []
+    el.addEventListener('data-error', (e) => events.push(e as CustomEvent))
+    document.body.appendChild(el)
+    await customElements.whenDefined('pkt-footer')
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    await el.updateComplete
+    expect(events).toHaveLength(1)
+    expect(el.querySelector('.pkt-footer__band--global')).toBeNull()
+    expect(el.querySelector('footer')?.textContent?.trim()).toBe('')
+  })
+})
+
+describe('PktFooter sekundær footer (custom innhold)', () => {
+  test('rendrer kolonner med tittel, tekst og lenker', async () => {
+    const el = await mountFooter({ columns: COLUMNS })
+    const columns = [...el.querySelectorAll('.pkt-footer__band--secondary section')]
+    expect(columns).toHaveLength(2)
+    expect(columns[0].querySelector('h2')?.textContent).toBe('Overskrift 1')
+    expect(columns[0].querySelector('p')?.textContent).toContain(
+      'lengre tekst',
+    )
+    expect(columns[1].querySelector('p')).toBeNull()
+    const link = columns[0].querySelector<HTMLAnchorElement>('a')
+    expect(link?.getAttribute('href')).toBe('https://example.test/lenke-1')
+    expect(link?.getAttribute('target')).toBe('_self')
+  })
+
+  test('eksterne og nye-fane-lenker får riktige attributter', async () => {
+    const el = await mountFooter({ columns: COLUMNS })
+    const links = [
+      ...el.querySelectorAll<HTMLAnchorElement>('.pkt-footer__band--secondary a'),
+    ]
+    // external-flagget viser toppdomenet i parentes bak lenketeksten
+    const external = links.find((l) => l.textContent?.includes('Lenke 2'))
+    expect(external?.querySelector('.pkt-footer__link-domain')?.textContent).toBe('(example.test)')
+    const newTab = links.find((l) => l.textContent?.includes('Lenke 3'))
+    expect(newTab?.querySelector('.pkt-footer__link-domain')).toBeNull()
+    expect(newTab?.getAttribute('target')).toBe('_blank')
+    expect(newTab?.getAttribute('rel')).toBe('noopener noreferrer')
+  })
+
+  test('openLinksInNewTab åpner alle custom lenker i ny fane', async () => {
+    const el = await mountFooter({ columns: COLUMNS, openLinksInNewTab: true })
+    const links = [
+      ...el.querySelectorAll<HTMLAnchorElement>('.pkt-footer__band--secondary a'),
+    ]
+    expect(links.every((l) => l.getAttribute('target') === '_blank')).toBe(true)
+  })
+
+  test('global footer rendres under sekundær footer', async () => {
+    const el = await mountFooter({ columns: COLUMNS })
+    const footer = el.querySelector('footer.pkt-footer')
+    const children = [...(footer?.children ?? [])].map((c) => c.className)
+    expect(children[0]).toContain('pkt-footer__band--secondary')
+    expect(children[1]).toContain('pkt-footer__band--global')
+  })
+
+  test('consent rendres i sekundær footer ved skipGlobal + includeConsent', async () => {
+    const el = await mountFooter({ columns: COLUMNS, skipGlobal: true, includeConsent: true })
+    const consent = el.querySelector('pkt-consent')
+    expect(consent).not.toBeNull()
+    expect(consent?.closest('.pkt-footer__band--secondary')).not.toBeNull()
+  })
+})
+
+describe('PktFooterSimple', () => {
+  test('rendrer kompakt lenkerad med pil-ikoner + global footer', async () => {
+    const el = await mountSimple({ links: SIMPLE_LINKS })
+    const links = [...el.querySelectorAll<HTMLAnchorElement>('.pkt-footer-simple__link')]
+    expect(links).toHaveLength(2)
+    expect(links[0].querySelector('pkt-icon')?.getAttribute('name')).toBe('arrow-link')
+    expect(el.querySelector('.pkt-footer__band--global')).not.toBeNull()
+  })
+
+  test('rendrer kun global footer uten links', async () => {
+    const el = await mountSimple()
+    expect(el.querySelector('.pkt-footer-simple .pkt-footer__band--secondary')).toBeNull()
+    expect(el.querySelector('.pkt-footer__band--global')).not.toBeNull()
+  })
+
+  test('consent rendres som listepunkt ved skipGlobal + includeConsent', async () => {
+    const el = await mountSimple({ links: SIMPLE_LINKS, skipGlobal: true, includeConsent: true })
+    expect(el.querySelector('.pkt-footer__band--global')).toBeNull()
+    const consent = el.querySelector('pkt-consent')
+    expect(consent?.closest('.pkt-footer-simple__list')).not.toBeNull()
+  })
+})

package/src/components/footer/footer.ts

@@ -0,0 +1,81 @@
+import { html, nothing, type TemplateResult } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import type { IPktFooterColumn } from 'shared-types'
+import { PktFooterBaseElement } from './footer-base'
+import type { IPktFooter } from './types'
+
+/**
+ * PktFooter — footer med valgfritt custom innhold (grått sekundær-bånd)
+ * stablet oppå den globale (blå) footeren. Uten `columns` rendres kun den
+ * globale footeren. Den globale henter innhold fra Oslo kommunes felles
+ * header/footer-endepunkt (samme som `pkt-header type="global"`).
+ */
+export class PktFooter extends PktFooterBaseElement<IPktFooter> implements IPktFooter {
+  @property({ type: Array }) columns?: IPktFooterColumn[]
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.classList.add('pkt-footer-host')
+  }
+
+  private renderColumn(column: IPktFooterColumn): TemplateResult {
+    return html`
+      <section>
+        <h2>${column.title}</h2>
+        ${column.text ? html`<p>${column.text}</p>` : nothing}
+        ${column.links?.length
+          ? html`
+              <ul class="pkt-footer__link-list">
+                ${column.links.map((link) => html`<li>${this.renderCustomLink(link)}</li>`)}
+              </ul>
+            `
+          : nothing}
+      </section>
+    `
+  }
+
+  private renderSecondary(): TemplateResult {
+    // Med skipGlobal rendres consent-lenken i sekundær-båndet i stedet
+    // for i den globale footeren.
+    const consentInSecondary = this.skipGlobal && this.includeConsent
+    return html`
+      <div class="pkt-footer__band pkt-footer__band--secondary">
+        <div class="pkt-footer__inner">
+          ${this.columns?.length
+            ? html`
+                <div class="pkt-footer__sections">
+                  ${this.columns.map((column) => this.renderColumn(column))}
+                </div>
+              `
+            : nothing}
+          ${consentInSecondary
+            ? html`<div class="pkt-footer__consent">${this.renderConsent()}</div>`
+            : nothing}
+        </div>
+      </div>
+    `
+  }
+
+  render() {
+    const hasCustomContent = !!this.columns?.length
+    const consentInSecondary = this.skipGlobal && this.includeConsent
+    return html`
+      <footer class="pkt-footer">
+        ${hasCustomContent || consentInSecondary ? this.renderSecondary() : nothing}
+        ${this.renderGlobalFooter()}
+      </footer>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pkt-footer': PktFooter
+  }
+}
+
+try {
+  customElement('pkt-footer')(PktFooter)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-footer>, men den er allerede definert')
+}