Skip to content

Commit 2658d66

Browse files
author
Fergus Bisset
committed
fix(HeaderServer): correct inline script import path
CRITICAL BUG FIX: HeaderServer inline script was using wrong import path The inline script that auto-initializes header behaviours had: import('/dist/behaviours/headerBehaviour.js') This absolute path doesn't work in Next.js - it tries to load from domain root. Changed to: import('@fergusbisset/nhs-fdp-design-system/behaviours') This correctly imports from the npm package, allowing Next.js to resolve and bundle. Impact: - HeaderServer now works in Next.js without any additional setup - No need to manually import behaviours in layout - Script is truly self-contained as originally intended - Overflow menus, keyboard nav, and transitions now work automatically This was the root cause of Headers not being interactive in Next.js despite having the inline initialization script.
1 parent c5def2d commit 2658d66

File tree

6 files changed

+606
-60
lines changed

6 files changed

+606
-60
lines changed

‎README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,38 @@ function App() {
101101
}
102102
```
103103

104+
## 🚨 Critical: Next.js Setup
105+
106+
**If you're using this design system in Next.js, you MUST load the behaviour script** for progressive enhancement features to work (interactive headers, character counts, conditional reveals, etc.).
107+
108+
### Quick Setup
109+
110+
Add one import at the top of your root layout:
111+
112+
```tsx
113+
// app/layout.tsx
114+
import '@fergusbisset/nhs-fdp-design-system/behaviours' // ← Add this line!
115+
import { Header } from '@fergusbisset/nhs-fdp-design-system/ssr'
116+
import '@fergusbisset/nhs-fdp-design-system/dist/nhs-fdp-design-system.css'
117+
118+
export default function RootLayout({ children }) {
119+
return (
120+
<html lang="en">
121+
<body>
122+
<Header {/* your header props */} />
123+
{children}
124+
</body>
125+
</html>
126+
)
127+
}
128+
```
129+
130+
**That's it!** The behaviours module has auto-initialization code that runs on import.
131+
132+
**Without this**, components like `HeaderServer` will render but won't be interactive (no overflow menus, no keyboard navigation, no transitions).
133+
134+
📖 **[Complete Next.js Setup Guide](./docs/NEXTJS-QUICK-START.md)** - Detailed setup, verification, and troubleshooting
135+
104136
## Project Structure
105137

106138
```

‎dist/meta/components.json‎

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"version": "0.0.44-alpha.4",
3-
"generatedAt": "2025-10-25T16:20:59.738Z",
2+
"version": "0.0.44-alpha.5",
3+
"generatedAt": "2025-10-25T16:21:56.701Z",
44
"count": 18,
55
"components": {
66
"Textarea": {
@@ -426,29 +426,6 @@
426426
],
427427
"source": "src/components/Label/Label.schema.ts"
428428
},
429-
"InsetText": {
430-
"name": "InsetText",
431-
"category": "content",
432-
"since": "0.1.1",
433-
"props": [
434-
{
435-
"name": "text",
436-
"type": "string",
437-
"description": "Plain text content (ignored if html is provided)"
438-
},
439-
{
440-
"name": "html",
441-
"type": "string",
442-
"description": "HTML content (overrides text)"
443-
},
444-
{
445-
"name": "className",
446-
"type": "string",
447-
"description": "Additional CSS classes"
448-
}
449-
],
450-
"source": "src/components/InsetText/InsetText.schema.ts"
451-
},
452429
"Input": {
453430
"name": "Input",
454431
"category": "form",
@@ -618,6 +595,29 @@
618595
],
619596
"source": "src/components/Hint/Hint.schema.ts"
620597
},
598+
"InsetText": {
599+
"name": "InsetText",
600+
"category": "content",
601+
"since": "0.1.1",
602+
"props": [
603+
{
604+
"name": "text",
605+
"type": "string",
606+
"description": "Plain text content (ignored if html is provided)"
607+
},
608+
{
609+
"name": "html",
610+
"type": "string",
611+
"description": "HTML content (overrides text)"
612+
},
613+
{
614+
"name": "className",
615+
"type": "string",
616+
"description": "Additional CSS classes"
617+
}
618+
],
619+
"source": "src/components/InsetText/InsetText.schema.ts"
620+
},
621621
"Heading": {
622622
"name": "Heading",
623623
"category": "typography",
@@ -746,39 +746,6 @@
746746
],
747747
"source": "src/components/ErrorSummary/ErrorSummary.schema.ts"
748748
},
749-
"ErrorMessage": {
750-
"name": "ErrorMessage",
751-
"category": "form",
752-
"since": "0.1.1",
753-
"a11yNotes": [
754-
"Includes visually hidden prefix text (default \"Error:\") to aid screen reader users."
755-
],
756-
"props": [
757-
{
758-
"name": "id",
759-
"type": "string",
760-
"description": "HTML id attribute"
761-
},
762-
{
763-
"name": "className",
764-
"type": "string",
765-
"description": "Additional CSS classes"
766-
},
767-
{
768-
"name": "visuallyHiddenText",
769-
"type": "string",
770-
"defaultValue": "Error:",
771-
"description": "Prefix announced to screen readers"
772-
},
773-
{
774-
"name": "children",
775-
"type": "ReactNode|string",
776-
"required": true,
777-
"description": "Error message content"
778-
}
779-
],
780-
"source": "src/components/ErrorMessage/ErrorMessage.schema.ts"
781-
},
782749
"Details": {
783750
"name": "Details",
784751
"category": "content",
@@ -880,6 +847,39 @@
880847
],
881848
"source": "src/components/DateInput/DateInput.schema.ts"
882849
},
850+
"ErrorMessage": {
851+
"name": "ErrorMessage",
852+
"category": "form",
853+
"since": "0.1.1",
854+
"a11yNotes": [
855+
"Includes visually hidden prefix text (default \"Error:\") to aid screen reader users."
856+
],
857+
"props": [
858+
{
859+
"name": "id",
860+
"type": "string",
861+
"description": "HTML id attribute"
862+
},
863+
{
864+
"name": "className",
865+
"type": "string",
866+
"description": "Additional CSS classes"
867+
},
868+
{
869+
"name": "visuallyHiddenText",
870+
"type": "string",
871+
"defaultValue": "Error:",
872+
"description": "Prefix announced to screen readers"
873+
},
874+
{
875+
"name": "children",
876+
"type": "ReactNode|string",
877+
"required": true,
878+
"description": "Error message content"
879+
}
880+
],
881+
"source": "src/components/ErrorMessage/ErrorMessage.schema.ts"
882+
},
883883
"Checkboxes": {
884884
"name": "Checkboxes",
885885
"props": [
@@ -1122,8 +1122,8 @@
11221122
"Input",
11231123
"Fieldset",
11241124
"ErrorSummary",
1125-
"ErrorMessage",
11261125
"DateInput",
1126+
"ErrorMessage",
11271127
"Button"
11281128
],
11291129
"meta": [

0 commit comments

Comments
 (0)