docs(website, sanity): standardisere og migrere komponentdokumentasjonen

[ceciliehrr]

Todo:

• Oppdatere skills for dokumentasjon av komponenter

💡 Hvorfor?

Komponentdokumentasjonen i Sanity manglet en felles standard for struktur. Fanene hadde ingen fast
inndeling, og innholdsforfattere måtte finne opp hjulet på nytt for hver komponent. Målet er en
forutsigbar og gjenbrukbar struktur med faste faner (Oversikt, Kode, Tilgjengelighet) og seksjoner
med standardtitler (Bruk, Retningslinjer, Komponentprops osv.).

🔧 Hvordan?

• Nytt docSection-skjema introduseres: en seksjon med valgfri tittel og et innholdsarray (tekst,
  kodeeksempler, props-tabeller, guidelines m.m.)
• componentDocTab får et nytt sections-felt (array av docSection) som erstatter det gamle
  content-feltet (textBlocks). Det gamle feltet beholdes som deprecated og skjult frem til alle
  dokumenter er migrert — ingen breaking change for eksisterende data
• ComponentDocTemplate normaliserer til _rawSections ?? _rawContent slik at begge formater rendres
  korrekt under overgangen
• textBlocks-tittelen skjules i kontekster der den ikke gir mening (f.eks. intro-feltet)

🧩 Type endring

• 🐞 Feilretting
• 🚀 Ny funksjonalitet
• 💥 Breaking change (krever kodeendringer hos brukere)
• 📝 Dokumentasjonsoppdatering
• 🧹 Refaktorering (ingen funksjonelle endringer)
• ⚡️ Ytelsesforbedring
• 🏗️ Bygg-/CI-endring

🖼️ Skjermbilder

Legges til etter at Logo er migrert og testet lokalt.

💬 Tilleggsnotater

• Eksisterende komponentdokumenter i Sanity vises fortsatt korrekt — ingen publisert innhold endres
  av denne PR-en
• Skjemaet er deployet til linje.sanity.studio — nye sections-felt er tilgjengelige i Studio
  umiddelbart, test i vei!
• Logo er valgt som pilotkomponent for ny standard. Migrering gjøres i Studio som draft og publiseres
  etter godkjenning fra teamet

💣 Breaking changes

Ikke aktuelt — gammelt content-felt beholdes og rendres korrekt inntil alle dokumenter er migrert.

✅ Sjekkliste

• Navnestandarder følges
• Kode og Figma reflekterer hverandre
• Dokumentasjonen er oppdatert (hvis aktuelt)
• Ingen ubrukte imports / varsler / console.logs

🧪 Testing

• Testet med skjermleser
• Testet i Safari og Firefox
• Testet i dokumentasjonsiden — eksisterende komponenter (Tab, Modal, Expand) rendres korrekt med
  gammelt format. Logo testes lokalt med ny struktur via overlayDrafts i development mode

[Copilot]

Pull request overview

Copilot reviewed 11 out of 12 changed files in this pull request and generated no new comments.

Suppressed comments (6)

apps/studio-linje/components/TitleSuggestionsInput.tsx:63

• Card rendres som <button> uten eksplisitt type. I forms kan default være submit, som kan gi uønsket submit/sideeffekter. Sett type="button" på knappene i dropdownen.

                <Card
                  key={s}
                  as="button"
                  padding={3}
                  radius={1}
                  tone="default"
                  style={{

apps/studio-linje/schemaTypes/objects/componentDocTab.ts:31

• componentDocTab kan nå lagres med verken sections eller content satt, som gir tomme faner i dokumentasjonen. Legg til validering som krever minst én seksjon (eller legacy content mens migreringen pågår).

    defineField({
      name: 'sections',
      title: 'Seksjoner',
      type: 'array',
      of: [{ type: 'docSection' }],
      description:
        'Legg til seksjoner med standardtitler (f.eks. Bruk, Retningslinjer, Eksempler).',
    }),

apps/documentation/src/components/Navigations/TableOfContent/SanityTableOfContent.tsx:28

• extractHeadingsFromPortableText legger nå til TOC-overskrifter for textBlocks.title (når variant ikke er alert). textBlocks-resolveren renderer ikke tittelen som en heading/anchor i DOM, så TOC-lenker kan peke til ikke-eksisterende anker (og potensielt vise "spøkelses"-overskrifter). Begrens TOC-generering til typer som faktisk renderer heading anchors (f.eks. docSection og Portable Text block-headings).

    if (
      (block._type === 'docSection' ||
        (block._type === 'textBlocks' && block.variant !== 'alert')) &&
      block.title
    ) {

apps/studio-linje/components/TitleSuggestionsInput.tsx:13

• TitleSuggestionsInput initialiserer searchTerm fra props.value, men synker ikke state når verdien endres utenfra (f.eks. undo/redo, patch fra andre felter, initialValue). Det kan gjøre at inputen viser feil verdi. Synk state mot props.value.

This issue also appears on line 57 of the same file.

    const [searchTerm, setSearchTerm] = useState(props.value ?? '');
    const [showDropdown, setShowDropdown] = useState(false);

    const filtered = suggestions.filter(s =>
      s.toLowerCase().includes(searchTerm.toLowerCase()),

apps/studio-linje/components/AutocompleteTagInput.tsx:113

• Card rendres som <button> uten eksplisitt type. I forms kan default være submit, som kan gi uønsket submit/sideeffekter. Sett type="button" på valg-knappene i dropdownen.

                <Card
                  key={tag}
                  as="button"
                  padding={3}
                  radius={1}
                  tone="default"
                  style={{

apps/studio-linje/components/AutocompletePageFieldInput.tsx:135

• Card rendres som <button> uten eksplisitt type. I forms kan default være submit, som kan gi uønsket submit/sideeffekter. Sett type="button" på valg-knappene i dropdownen.

                <Card
                  key={option.value}
                  as="button"
                  padding={3}
                  radius={1}
                  tone="default"
                  style={{

[github-actions]

Preview for this PR in prd (updated for commit 684645b):

https://entur-design-system--preview-444-etu-74037-standardise-g27zywq8.web.app
(Expires Thu, 10 Sep 2026 14:14:08 GMT)

[magnusrand]

Legger ved et resultat fra Claude for min egen hukommelses skyld:

  - Standard title lists are hardcoded in three places (componentDocTab.ts, docSection.tsx, textBlocks.tsx, plus the
  tab→section map inside TitleSuggestionsInput). Four lists to keep in sync. Worth one shared const.
  - Anchor id collisions. TOC dedupes with a per-tab seen map (bruk, bruk-2). But HeadingAnchor for a docSection title
  renders outside PortableText, so it gets the default context (getId: sanitizeText, no dedupe) → both would become
  bruk. Also each section's PortableText opens its own HeadingIdProvider, so the per-section counter resets while the
  TOC counter doesn't. Duplicate titles in one tab → TOC links that go nowhere. Test with two sections named the same.
  - resolveReferences dropped for _rawSections. Today no reference type exists in the schema, so it's likely fine —
  but image assets are refs. Verify media inside a section actually renders (MediaResolver has a fallback path via
  getGatsbyImageData, but untested here).
  - Hand-declared _rawSections: JSON in gatsby-node is a temporary crutch. Needs removal once real data exists,
  otherwise it permanently overrides the plugin's derived type.

[ceciliehrr]

Legger ved et resultat fra Claude for min egen hukommelses skyld:

  - Standard title lists are hardcoded in three places (componentDocTab.ts, docSection.tsx, textBlocks.tsx, plus the
  tab→section map inside TitleSuggestionsInput). Four lists to keep in sync. Worth one shared const.
  - Anchor id collisions. TOC dedupes with a per-tab seen map (bruk, bruk-2). But HeadingAnchor for a docSection title
  renders outside PortableText, so it gets the default context (getId: sanitizeText, no dedupe) → both would become
  bruk. Also each section's PortableText opens its own HeadingIdProvider, so the per-section counter resets while the
  TOC counter doesn't. Duplicate titles in one tab → TOC links that go nowhere. Test with two sections named the same.
  - resolveReferences dropped for _rawSections. Today no reference type exists in the schema, so it's likely fine —
  but image assets are refs. Verify media inside a section actually renders (MediaResolver has a fallback path via
  getGatsbyImageData, but untested here).
  - Hand-declared _rawSections: JSON in gatsby-node is a temporary crutch. Needs removal once real data exists,
  otherwise it permanently overrides the plugin's derived type.

@magnusrand Ser på og fikser disse nå 🙏

[ceciliehrr]

Legger ved et resultat fra Claude for min egen hukommelses skyld:

  - Standard title lists are hardcoded in three places (componentDocTab.ts, docSection.tsx, textBlocks.tsx, plus the
  tab→section map inside TitleSuggestionsInput). Four lists to keep in sync. Worth one shared const.
  - Anchor id collisions. TOC dedupes with a per-tab seen map (bruk, bruk-2). But HeadingAnchor for a docSection title
  renders outside PortableText, so it gets the default context (getId: sanitizeText, no dedupe) → both would become
  bruk. Also each section's PortableText opens its own HeadingIdProvider, so the per-section counter resets while the
  TOC counter doesn't. Duplicate titles in one tab → TOC links that go nowhere. Test with two sections named the same.
  - resolveReferences dropped for _rawSections. Today no reference type exists in the schema, so it's likely fine —
  but image assets are refs. Verify media inside a section actually renders (MediaResolver has a fallback path via
  getGatsbyImageData, but untested here).
  - Hand-declared _rawSections: JSON in gatsby-node is a temporary crutch. Needs removal once real data exists,
  otherwise it permanently overrides the plugin's derived type.

@magnusrand Ser på og fikser disse nå 🙏

1. ✅ Fikset — delt konstant-modul (titleSuggestions.ts). Problem: fane- og seksjonstitlene var hardkodet i fire ulike filer uten felles kilde, og hadde allerede driftet fra hverandre ('Bruk' vs. 'Bruk komponenten når').
2. ✅ Fikset — delt HeadingIdProvider per fane. Problem: en seksjonstittel fikk aldri en unik ID ved duplikat, fordi den ble rendret utenfor enhver id-provider mens resten av fanens overskrifter delte en annen, isolert teller — TOC-lenker kunne peke på IDer som ikke fantes i DOM-en.
3. ✅ Verifisert trygt — ingen kodeendring nødvendig. Problem: mistanke om at bilder i seksjoner ville feile fordi _rawSections ikke løser opp Sanity-referanser. Testet direkte mot ekte data — fallback-funksjonen er bygget for akkurat rå referanser, og fungerer. Denne vil jeg teste selv etter merging også.
4. ✅ Dokumentert — tydelig kommentar med konkret fjerningsbetingelse. Problem: en hardkodet skjema-overstyring i gatsby-node.js som permanent overstyrer det Gatsby ellers ville avledet selv, uten noen varsling om når den blir overflødig.

[magnusrand]

Denne PR-en brekker Table of Content i sanity-genererte dokumenter. ToC vises, men å velge et ankerpunkt skroller frem til punktet. Dette funker per i dag, så det er noe med den nye ID-håndteringen som ikke fungerer.

[ceciliehrr]

god'ammit!

[ceciliehrr]

Fant den til slutt — var HeadingIdContext.tsx sin "ambient reuse"-endring (implisitt useContext-oppslag for å dele ID-teller på tvers av docSections). Den plukket opp gamle, allerede-inkrementerte tellere fra Gatsby sin "Query on demand" i dev-modus, som ga "+1" på alle overskrifts-IDer. Bekreftet med A/B-test at kun denne filens diff forårsaket det. Fikset i 015c32f: reverterte til main sin enkle logikk, og gjorde delt telling eksplisitt via en sharedHeadingIds-prop i stedet for implisitt oppslag. Testet på nytt på begge sidene – fungerer nå.

Dette ble et rabbithole for Claude stakkar, men vi fant ut av det 😅