Update component pages for separated params table

Author: querkmachine

src/components/accordion/index.md

@@ -2,6 +2,7 @@
 title: Accordion
 description: The accordion component lets users show and hide sections of related content on a page
 section: Components
+item: accordion
 aliases:
 backlogIssueId: 1
 layout: layout-pane.njk
@@ -11,7 +12,7 @@ layout: layout-pane.njk
 
 The accordion component lets users show and hide sections of related content on a page.
 
-{{ example({ group: "components", item: "accordion", example: "default", html: true, nunjucks: true, open: false, size: "xl", loading: "eager" }) }}
+{{ example({ group: "components", item: item, example: "default", html: true, nunjucks: true, open: false, size: "xl", loading: "eager" }) }}
 
 ## When to use this component
 
@@ -79,7 +80,7 @@ The heading button includes all of these areas:
 
 For users of screen readers, all the text in the button will be read as a single statement (separated by commas to allow for slight pauses). There’s also some visually hidden content in the heading text to help announce the call-to-action as 'show this section' or 'hide this section'.
 
-{{ example({ group: "components", item: "accordion", example: "default", html: true, nunjucks: true, open: false, size: "xl", titleSuffix: "second" }) }}
+{{ example({ group: "components", item: item, example: "default", html: true, nunjucks: true, open: false, size: "xl", titleSuffix: "second" }) }}
 
 #### Write clear button text
 
@@ -95,7 +96,7 @@ Only add a summary line if it’s actually needed, as it's likely to make the bu
 
 If you’ve decided that you need the summary line, you must make it as short as possible.
 
-{{ example({ group: "components", item: "accordion", example: "with-summary-section", html: true, nunjucks: true, open: false, size: "xl" }) }}
+{{ example({ group: "components", item: item, example: "with-summary-section", html: true, nunjucks: true, open: false, size: "xl" }) }}
 
 #### Structure section headings with the rest of the page
 

src/components/back-link/index.md

@@ -2,6 +2,7 @@
 title: Back link
 description: Use the back link component to help users go back to the previous page in a multi-page transaction
 section: Components
+item: back-link
 aliases: return link, back button
 backlogIssueId: 32
 layout: layout-pane.njk
@@ -37,7 +38,7 @@ See the full list of [components and patterns affected by WCAG 2.2](/accessibili
 
 Although browsers have a back button, some sites break when you use it - so many users avoid it, instead of losing their progress in a service. Also, not all users are aware of the back button.
 
-{{ example({ group: "components", item: "back-link", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
+{{ example({ group: "components", item: item, example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
 
 ## When to use this component
 
@@ -76,7 +77,7 @@ Where possible, ensure the back link works even when JavaScript is not available
 
 There are 2 ways to use the back link component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro.
 
-{{ example({ group: "components", item: "back-link", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }}
+{{ example({ group: "components", item: item, example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }}
 
 Using the default link text ('Back') is ideal for services with a simple journey. For example, [applying for a National Insurance number](https://www.gov.uk/apply-national-insurance-number). Users will only ever go back to the previous page in the service.
 
@@ -88,4 +89,4 @@ Use the `govuk-back-link--inverse` modifier class to show a white link on a dark
 
 Make sure all users can see the back link – the background colour [must have a contrast ratio of at least 4.5:1](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) with white.
 
-{{ example({ group: "components", item: "back-link", example: "inverse", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "inverse", html: true, nunjucks: true, open: false }) }}

src/components/breadcrumbs/index.md

@@ -2,6 +2,7 @@
 title: Breadcrumbs
 description: Help users orientate themselves and navigate pages within a hierarchical structure
 section: Components
+item: breadcrumbs
 aliases: navigation path, cookie crumb
 backlogIssueId: 33
 layout: layout-pane.njk
@@ -34,7 +35,7 @@ See the full list of [components and patterns affected by WCAG 2.2](/accessibili
   classes: "app-inset-text"
 }) }}
 
-{{ example({ group: "components", item: "breadcrumbs", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
+{{ example({ group: "components", item: item, example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
 
 ## When to use this component
 
@@ -62,20 +63,20 @@ The breadcrumbs should start with your 'home' page and end with the parent secti
 
 There are 2 ways to use the breadcrumbs component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro.
 
-{{ example({ group: "components", item: "breadcrumbs", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }}
+{{ example({ group: "components", item: item, example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }}
 
 ### Collapsing breadcrumbs on mobile devices
 
 If you have long breadcrumbs you can configure the component to only show the first and last items on mobile devices.
 
 To do this, add a `govuk-breadcrumbs--collapse-on-mobile` class to the outer `<div>` element of the component HTML. Or if you’re using Nunjucks, add `collapseOnMobile: true` to the Nunjucks macro as shown in this example.
 
-{{ example({ group: "components", item: "breadcrumbs", example: "collapse-mobile", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "collapse-mobile", html: true, nunjucks: true, open: false }) }}
 
 ### Breadcrumbs on dark backgrounds
 
 Use the `govuk-breadcrumbs--inverse` modifier class to show white links and arrows on dark backgrounds – for example, in headers, custom components, and patterns with darker backgrounds.
 
 Make sure all users can see the breadcrumbs – the background colour [must have a contrast ratio of at least 4.5:1](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) with white.
 
-{{ example({ group: "components", item: "breadcrumbs", example: "inverse", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "inverse", html: true, nunjucks: true, open: false }) }}

src/components/button/index.md

@@ -2,6 +2,7 @@
 title: Button
 description: Use the button component to help users carry out an action
 section: Components
+item: button
 aliases:
 backlogIssueId: 34
 layout: layout-pane.njk
@@ -32,7 +33,7 @@ See the full list of [components and patterns affected by WCAG 2.2](/accessibili
   classes: "app-inset-text"
 }) }}
 
-{{ example({ group: "components", item: "button", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
+{{ example({ group: "components", item: item, example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
 
 ## When to use this component
 
@@ -73,30 +74,30 @@ Use a default button for the main call to action on a page.
 
 Avoid using multiple default buttons on a single page. Having more than one main call to action reduces their impact, and makes it harder for users to know what to do next.
 
-{{ example({ group: "components", item: "button", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }}
+{{ example({ group: "components", item: item, example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }}
 
 ### Start buttons
 
 Use a start button for the main call to action on your service’s [start page](/patterns/start-using-a-service/).
 Start buttons do not usually submit form data, so use a link tag instead of a button tag.
 
-{{ example({ group: "components", item: "button", example: "start", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "start", html: true, nunjucks: true, open: false }) }}
 
 ### Secondary buttons
 
 Use secondary buttons for secondary calls to action on a page.
 
 Pages with too many calls to action make it hard for users to know what to do next. Before adding lots of secondary buttons, try to simplify the page or break the content down across multiple pages.
 
-{{ example({ group: "components", item: "button", example: "secondary", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "secondary", html: true, nunjucks: true, open: false }) }}
 
 You can also [group default and secondary buttons together](#grouping-buttons).
 
 ### Warning buttons
 
 Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.
 
-{{ example({ group: "components", item: "button", example: "warning", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "warning", html: true, nunjucks: true, open: false }) }}
 
 Only use warning buttons for actions with serious destructive consequences that cannot be easily undone by a user. For example, permanently deleting an account.
 
@@ -112,25 +113,25 @@ Use the `govuk-button--inverse` modifier class to show white buttons on dark bac
 
 Make sure all users can see the button – the white button and background colour [must have a contrast ratio of at least 3:1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html).
 
-{{ example({ group: "components", item: "button", example: "inverse", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "inverse", html: true, nunjucks: true, open: false }) }}
 
 ### Disabled buttons
 
 Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
 
 Only use disabled buttons if research shows it makes the user interface easier to understand.
 
-{{ example({ group: "components", item: "button", example: "disabled", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "disabled", html: true, nunjucks: true, open: false }) }}
 
 ### Grouping buttons
 
 Use a button group when two or more buttons are placed together.
 
-{{ example({ group: "components", item: "button", example: "secondary-combo", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "secondary-combo", html: true, nunjucks: true, open: false }) }}
 
 Any links within a button group will automatically align with the buttons.
 
-{{ example({ group: "components", item: "button", example: "button-group", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "button-group", html: true, nunjucks: true, open: false }) }}
 
 ### Stop users from accidentally sending information more than once
 
@@ -148,7 +149,7 @@ If you are working in production and research shows that users are frequently se
 
 To do this, set the `data-prevent-double-click` attribute to `true`. You can do this directly in the HTML or, if you’re using Nunjucks, you can use the Nunjucks macro as shown in this example.
 
-{{ example({ group: "components", item: "button", example: "prevent-double-click", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "prevent-double-click", html: true, nunjucks: true, open: false }) }}
 
 This feature will prevent double clicks for users that have JavaScript enabled, however you should also think about the issue server-side to protect against attacks.
 

src/components/character-count/index.md

@@ -2,6 +2,7 @@
 title: Character count
 description: Tell users how many characters or words they can enter into a textarea
 section: Components
+item: character-count
 aliases: word count
 backlogIssueId: 67
 layout: layout-pane.njk
@@ -11,7 +12,7 @@ layout: layout-pane.njk
 
 Help users know how much text they can enter when there is a limit on the number of characters.
 
-{{ example({ group: "components", item: "character-count", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
+{{ example({ group: "components", item: item, example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
 
 ## When to use this component
 
@@ -46,21 +47,21 @@ This component uses JavaScript. If JavaScript is not available, users will see a
 
 There are 2 ways to use the character count component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
 
-{{ example({ group: "components", item: "character-count", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }}
+{{ example({ group: "components", item: item, example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }}
 
 ### If you’re asking more than one question on the page
 
 If you're asking more than one question on the page, do not set the contents of the `<label>` as the page heading. Read more about [asking multiple questions on question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).
 
-{{ example({ group: "components", item: "character-count", example: "without-heading", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "without-heading", html: true, nunjucks: true, open: false }) }}
 
 ### Consider if a word count is more helpful
 
 In some cases it may be more helpful to show a word count. For example, if your question requires a longer answer.
 
 Do this by setting `data-maxwords` in the component markup. For example, `data-maxwords="150"` will set a word limit of 150.
 
-{{ example({ group: "components", item: "character-count", example: "word-count", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "word-count", html: true, nunjucks: true, open: false }) }}
 
 ### Avoid narrow limits
 
@@ -74,13 +75,13 @@ To do this, set the threshold in the component markup as a percentage. For examp
 
 Screen reader users will hear the character limit when they first interact with a textarea using the threshold option. Sighted users will not see anything until the count message is shown – though you might choose to include the character limit in the hint text.
 
-{{ example({ group: "components", item: "character-count", example: "threshold", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "threshold", html: true, nunjucks: true, open: false }) }}
 
 ### Error messages
 
 Error messages should be styled like this:
 
-{{ example({ group: "components", item: "character-count", example: "error", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: item, example: "error", html: true, nunjucks: true, open: false }) }}
 
 If a user tries to send their response with too many characters, you must show an error message above the field as well as the count message below it.