[SPIKE] Add parent prefixes to nested component options

[colinrotherham]

Morning 👋

I noticed last week that we sometimes "dot-prefix" nested option names with the associated parent or component:

• Clarify docs for all nested options govuk-frontend#3919

Nested options with prefixes

For example Accordion summary.text and summary.html are NOT shown as nested options. Perhaps for readability, does the prefix visually help the nested option link together with the parent it belongs to?

Nested options without prefixes

But there are many more examples where we don't benefit from "dot-prefix" clarity in our docs, should we add them?

For example the nested hint option in the image below. It's easy to lose context, especially when html and text options and descriptions are frequently duplicated elsewhere on examples pages

For comparison, here's (hopefully) a complete list of all the options we don't "dot-prefix":

Character count

1. formGroup.classes
2. label.text
3. label.html
4. label.for
5. label.isPageHeading
6. label.classes
7. label.attributes
8. hint.text
9. hint.html
10. hint.id
11. hint.classes
12. hint.attributes

Checkboxes

1. conditional.html
2. formGroup.classes
3. label.text
4. label.html
5. label.for
6. label.isPageHeading
7. label.classes
8. label.attributes
9. hint.text
10. hint.html
11. hint.id
12. hint.classes
13. hint.attributes

Date input

1. formGroup.classes
2. hint.text
3. hint.html
4. hint.id
5. hint.classes
6. hint.attributes

File upload

1. formGroup.classes

Input

1. suffix.text
2. suffix.html
3. suffix.classes
4. suffix.attributes
5. formGroup.classes
6. label.text
7. label.html
8. label.for
9. label.isPageHeading
10. label.classes
11. label.attributes
12. hint.text
13. hint.html
14. hint.id
15. hint.classes
16. hint.attributes

Radios

1. conditional.html
2. formGroup.classes
3. label.text
4. label.html
5. label.for
6. label.isPageHeading
7. label.classes
8. label.attributes
9. hint.text
10. hint.html
11. hint.id
12. hint.classes
13. hint.attributes

Select

1. formGroup.classes
2. label.text
3. label.html
4. label.for
5. label.isPageHeading
6. label.classes
7. label.attributes
8. hint.text
9. hint.html
10. hint.id
11. hint.classes
12. hint.attributes

Textarea

1. formGroup.classes
2. label.text
3. label.html
4. label.for
5. label.isPageHeading
6. label.classes
7. label.attributes
8. hint.text
9. hint.html
10. hint.id
11. hint.classes
12. hint.attributes

Summary list

1. title.text
2. title.html
3. title.headingLevel
4. title.classes

Task list

1. card.title
2. card.actions
3. card.classes
4. title.text
5. title.html
6. title.headingLevel
7. title.classes

Nested options with automatic prefixes

This spike PR updates nested options to add parent prefixes automatically

[netlify]

✅ You can preview this change here:

Name	Link
🔨 Latest commit	c5a5238
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-design-system-preview/deploys/6526b9395c1dda000821a574
😎 Deploy Preview	https://deploy-preview-2892--govuk-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[colinrotherham]

Related to:

• Produce a 'style guide' for how Nunjucks documentation is written  govuk-frontend#3913

[Izabela-16]

not a priority but needs team decision

[colinrotherham]

I've given one this a rebase to fix the conflict

Spike wise, it sounded quite simple to always show parent names in code notation for:

1. Nested object child → parent.child
2. Nested array child → parent[].child

But this soon gets more complicated for deeply nested options

[stevenjmesser]

@colinrotherham Please can you confirm whether this needs design or dev review?

[colinrotherham]

@stevenjmesser Both please

Out of the series of Macro options spikes this was the most extreme, so no problem saying "let's close it"