Skip to content

Commit 749cb9f

Browse files
author
Fergus Bisset
committed
Header: eliminate hydration flash and layout shift (SSR neutral init, reserve More space), behaviours early init; story updates
1 parent 54c4e70 commit 749cb9f

File tree

8 files changed

+240
-198
lines changed

8 files changed

+240
-198
lines changed

‎dist/meta/components.json‎

Lines changed: 147 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"version": "0.0.44-alpha.11",
3-
"generatedAt": "2025-10-26T10:31:19.128Z",
2+
"version": "0.0.44-alpha.12",
3+
"generatedAt": "2025-10-26T10:32:11.787Z",
44
"count": 18,
55
"components": {
66
"Textarea": {
@@ -192,6 +192,68 @@
192192
],
193193
"source": "src/components/Tag/Tag.schema.ts"
194194
},
195+
"Radios": {
196+
"name": "Radios",
197+
"category": "form",
198+
"since": "0.1.1",
199+
"a11yNotes": [
200+
"Keyboard arrow navigation cycles through options.",
201+
"Conditional content container is hidden with --hidden class when inactive."
202+
],
203+
"props": [
204+
{
205+
"name": "name",
206+
"type": "string",
207+
"required": true,
208+
"description": "Group name"
209+
},
210+
{
211+
"name": "value",
212+
"type": "string",
213+
"description": "Controlled selected value"
214+
},
215+
{
216+
"name": "defaultValue",
217+
"type": "string",
218+
"description": "Uncontrolled initial value"
219+
},
220+
{
221+
"name": "hasError",
222+
"type": "boolean",
223+
"defaultValue": "false",
224+
"description": "Error style"
225+
},
226+
{
227+
"name": "describedBy",
228+
"type": "string",
229+
"description": "aria-describedby id list"
230+
},
231+
{
232+
"name": "className",
233+
"type": "string",
234+
"description": "Extra CSS classes"
235+
},
236+
{
237+
"name": "size",
238+
"type": "'normal'|'small'",
239+
"defaultValue": "normal",
240+
"description": "Size variant"
241+
},
242+
{
243+
"name": "inline",
244+
"type": "boolean",
245+
"defaultValue": "false",
246+
"description": "Inline layout"
247+
},
248+
{
249+
"name": "options",
250+
"type": "Array<{ value: string; text: string; hint?: string; disabled?: boolean; conditional?: any }>",
251+
"required": true,
252+
"description": "Radio options"
253+
}
254+
],
255+
"source": "src/components/Radios/Radios.schema.ts"
256+
},
195257
"Select": {
196258
"name": "Select",
197259
"category": "form",
@@ -281,68 +343,6 @@
281343
],
282344
"source": "src/components/Select/Select.schema.ts"
283345
},
284-
"Radios": {
285-
"name": "Radios",
286-
"category": "form",
287-
"since": "0.1.1",
288-
"a11yNotes": [
289-
"Keyboard arrow navigation cycles through options.",
290-
"Conditional content container is hidden with --hidden class when inactive."
291-
],
292-
"props": [
293-
{
294-
"name": "name",
295-
"type": "string",
296-
"required": true,
297-
"description": "Group name"
298-
},
299-
{
300-
"name": "value",
301-
"type": "string",
302-
"description": "Controlled selected value"
303-
},
304-
{
305-
"name": "defaultValue",
306-
"type": "string",
307-
"description": "Uncontrolled initial value"
308-
},
309-
{
310-
"name": "hasError",
311-
"type": "boolean",
312-
"defaultValue": "false",
313-
"description": "Error style"
314-
},
315-
{
316-
"name": "describedBy",
317-
"type": "string",
318-
"description": "aria-describedby id list"
319-
},
320-
{
321-
"name": "className",
322-
"type": "string",
323-
"description": "Extra CSS classes"
324-
},
325-
{
326-
"name": "size",
327-
"type": "'normal'|'small'",
328-
"defaultValue": "normal",
329-
"description": "Size variant"
330-
},
331-
{
332-
"name": "inline",
333-
"type": "boolean",
334-
"defaultValue": "false",
335-
"description": "Inline layout"
336-
},
337-
{
338-
"name": "options",
339-
"type": "Array<{ value: string; text: string; hint?: string; disabled?: boolean; conditional?: any }>",
340-
"required": true,
341-
"description": "Radio options"
342-
}
343-
],
344-
"source": "src/components/Radios/Radios.schema.ts"
345-
},
346346
"Panel": {
347347
"name": "Panel",
348348
"category": "content",
@@ -449,33 +449,6 @@
449449
],
450450
"source": "src/components/InsetText/InsetText.schema.ts"
451451
},
452-
"Hint": {
453-
"name": "Hint",
454-
"category": "typography",
455-
"since": "0.1.1",
456-
"a11yNotes": [
457-
"Provides supporting contextual help text associated with a form field or section."
458-
],
459-
"props": [
460-
{
461-
"name": "id",
462-
"type": "string",
463-
"description": "HTML id attribute"
464-
},
465-
{
466-
"name": "className",
467-
"type": "string",
468-
"description": "Additional CSS classes"
469-
},
470-
{
471-
"name": "children",
472-
"type": "ReactNode|string",
473-
"required": true,
474-
"description": "Hint content"
475-
}
476-
],
477-
"source": "src/components/Hint/Hint.schema.ts"
478-
},
479452
"Input": {
480453
"name": "Input",
481454
"category": "form",
@@ -618,6 +591,33 @@
618591
],
619592
"source": "src/components/Input/Input.schema.ts"
620593
},
594+
"Hint": {
595+
"name": "Hint",
596+
"category": "typography",
597+
"since": "0.1.1",
598+
"a11yNotes": [
599+
"Provides supporting contextual help text associated with a form field or section."
600+
],
601+
"props": [
602+
{
603+
"name": "id",
604+
"type": "string",
605+
"description": "HTML id attribute"
606+
},
607+
{
608+
"name": "className",
609+
"type": "string",
610+
"description": "Additional CSS classes"
611+
},
612+
{
613+
"name": "children",
614+
"type": "ReactNode|string",
615+
"required": true,
616+
"description": "Hint content"
617+
}
618+
],
619+
"source": "src/components/Hint/Hint.schema.ts"
620+
},
621621
"Heading": {
622622
"name": "Heading",
623623
"category": "typography",
@@ -827,59 +827,6 @@
827827
],
828828
"source": "src/components/Details/Details.schema.ts"
829829
},
830-
"DateInput": {
831-
"name": "DateInput",
832-
"category": "form",
833-
"since": "0.1.1",
834-
"a11yNotes": [
835-
"Groups day/month/year inputs with shared hint/error via describedBy.",
836-
"Field-level validation errors (client side state in React) are not present in initial SSR/macro output."
837-
],
838-
"props": [
839-
{
840-
"name": "id",
841-
"type": "string",
842-
"required": true,
843-
"description": "Root id used as prefix for generated input IDs and hint/error IDs"
844-
},
845-
{
846-
"name": "className",
847-
"type": "string",
848-
"description": "Additional classes for the date input wrapper"
849-
},
850-
{
851-
"name": "items",
852-
"type": "Array<{ name: string; label?: string; value?: string; classes?: string; id?: string; inputmode?: string; autocomplete?: string; pattern?: string }>",
853-
"description": "Explicit configuration of day/month/year items (fallback defaults applied when omitted)"
854-
},
855-
{
856-
"name": "namePrefix",
857-
"type": "string",
858-
"description": "Prefix to wrap submitted field names e.g. prefix[day]"
859-
},
860-
{
861-
"name": "values",
862-
"type": "{ day?: string; month?: string; year?: string }",
863-
"description": "Initial values for each field"
864-
},
865-
{
866-
"name": "fieldset",
867-
"type": "{ legend?: string; classes?: string; describedBy?: string }",
868-
"description": "Optional fieldset wrapper and legend text"
869-
},
870-
{
871-
"name": "hint",
872-
"type": "{ text?: string; html?: string; classes?: string }",
873-
"description": "Hint configuration (before error message)"
874-
},
875-
{
876-
"name": "errorMessage",
877-
"type": "{ text?: string; html?: string; classes?: string }",
878-
"description": "Group level error message (adds error state styles)"
879-
}
880-
],
881-
"source": "src/components/DateInput/DateInput.schema.ts"
882-
},
883830
"Checkboxes": {
884831
"name": "Checkboxes",
885832
"props": [
@@ -1111,20 +1058,73 @@
11111058
}
11121059
],
11131060
"source": "src/components/Button/Button.schema.ts"
1061+
},
1062+
"DateInput": {
1063+
"name": "DateInput",
1064+
"category": "form",
1065+
"since": "0.1.1",
1066+
"a11yNotes": [
1067+
"Groups day/month/year inputs with shared hint/error via describedBy.",
1068+
"Field-level validation errors (client side state in React) are not present in initial SSR/macro output."
1069+
],
1070+
"props": [
1071+
{
1072+
"name": "id",
1073+
"type": "string",
1074+
"required": true,
1075+
"description": "Root id used as prefix for generated input IDs and hint/error IDs"
1076+
},
1077+
{
1078+
"name": "className",
1079+
"type": "string",
1080+
"description": "Additional classes for the date input wrapper"
1081+
},
1082+
{
1083+
"name": "items",
1084+
"type": "Array<{ name: string; label?: string; value?: string; classes?: string; id?: string; inputmode?: string; autocomplete?: string; pattern?: string }>",
1085+
"description": "Explicit configuration of day/month/year items (fallback defaults applied when omitted)"
1086+
},
1087+
{
1088+
"name": "namePrefix",
1089+
"type": "string",
1090+
"description": "Prefix to wrap submitted field names e.g. prefix[day]"
1091+
},
1092+
{
1093+
"name": "values",
1094+
"type": "{ day?: string; month?: string; year?: string }",
1095+
"description": "Initial values for each field"
1096+
},
1097+
{
1098+
"name": "fieldset",
1099+
"type": "{ legend?: string; classes?: string; describedBy?: string }",
1100+
"description": "Optional fieldset wrapper and legend text"
1101+
},
1102+
{
1103+
"name": "hint",
1104+
"type": "{ text?: string; html?: string; classes?: string }",
1105+
"description": "Hint configuration (before error message)"
1106+
},
1107+
{
1108+
"name": "errorMessage",
1109+
"type": "{ text?: string; html?: string; classes?: string }",
1110+
"description": "Group level error message (adds error state styles)"
1111+
}
1112+
],
1113+
"source": "src/components/DateInput/DateInput.schema.ts"
11141114
}
11151115
},
11161116
"categories": {
11171117
"form": [
11181118
"Textarea",
1119-
"Select",
11201119
"Radios",
1120+
"Select",
11211121
"Label",
11221122
"Input",
11231123
"Fieldset",
11241124
"ErrorSummary",
11251125
"ErrorMessage",
1126-
"DateInput",
1127-
"Button"
1126+
"Button",
1127+
"DateInput"
11281128
],
11291129
"meta": [
11301130
"Tag"

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,8 @@
182182
"./components/Parallax/ParallaxScene/css": "./dist/components/Parallax/ParallaxScene.css",
183183
"./components/PatternBanner/css": "./dist/components/PatternBanner/PatternBanner.css",
184184
"./components/StepByStepNavigation/css": "./dist/components/StepByStepNavigation/StepByStepNavigation.css",
185-
"./components/ProductCard/css": "./dist/components/ProductCard/ProductCard.css"
185+
"./components/ProductCard/css": "./dist/components/ProductCard/ProductCard.css",
186+
"./components/Header/Header.brand/css": "./dist/components/Header/Header.brand.css"
186187
},
187188
"sideEffects": [
188189
"dist/**/*.css"

‎src/behaviours/NHSBehaviours.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
'use client';
22

3-
import { useEffect } from 'react';
3+
import { useLayoutEffect } from 'react';
44

55
// Dynamically import behaviours and attach to window to avoid tree-shaking
66
export default function NHSBehavioursInit() {
7-
useEffect(() => {
7+
useLayoutEffect(() => {
88
let cancelled = false;
99

1010
(async () => {

0 commit comments

Comments
 (0)