From 2820c0e747997b0688f3fb47d7671c3b3429acde Mon Sep 17 00:00:00 2001 From: beeps Date: Wed, 21 Aug 2024 10:14:35 +0100 Subject: [PATCH] Update component pages for separated params table --- src/components/accordion/index.md | 7 +++-- src/components/back-link/index.md | 7 +++-- src/components/breadcrumbs/index.md | 9 +++--- src/components/button/index.md | 21 ++++++------- src/components/character-count/index.md | 13 ++++---- src/components/checkboxes/index.md | 19 ++++++------ src/components/cookie-banner/index.md | 21 ++++++------- src/components/date-input/index.md | 13 ++++---- src/components/details/index.md | 5 ++-- src/components/error-message/index.md | 9 +++--- src/components/error-summary/index.md | 13 ++++---- src/components/exit-this-page/index.md | 5 ++-- src/components/fieldset/index.md | 5 ++-- src/components/file-upload/index.md | 7 +++-- src/components/footer/index.md | 11 +++---- src/components/header/index.md | 9 +++--- src/components/inset-text/index.md | 5 ++-- src/components/notification-banner/index.md | 9 +++--- src/components/pagination/index.md | 11 +++---- src/components/panel/index.md | 5 ++-- src/components/password-input/index.md | 5 ++-- src/components/phase-banner/index.md | 7 +++-- src/components/radios/index.md | 21 ++++++------- src/components/select/index.md | 9 +++--- src/components/skip-link/index.md | 5 ++-- src/components/summary-list/index.md | 17 ++++++----- src/components/table/index.md | 15 +++++----- src/components/tabs/index.md | 5 ++-- src/components/tag/index.md | 9 +++--- src/components/task-list/index.md.njk | 5 ++-- src/components/text-input/index.md | 33 +++++++++++---------- src/components/textarea/index.md | 11 +++---- src/components/warning-text/index.md | 5 ++-- 33 files changed, 192 insertions(+), 159 deletions(-) diff --git a/src/components/accordion/index.md b/src/components/accordion/index.md index d68c8c5904..0751431dac 100644 --- a/src/components/accordion/index.md +++ b/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 diff --git a/src/components/back-link/index.md b/src/components/back-link/index.md index 83b4162771..e7fcadd5cc 100644 --- a/src/components/back-link/index.md +++ b/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 }) }} diff --git a/src/components/breadcrumbs/index.md b/src/components/breadcrumbs/index.md index cfc1506e9a..3aa713f247 100644 --- a/src/components/breadcrumbs/index.md +++ b/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,7 +63,7 @@ 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 @@ -70,7 +71,7 @@ If you have long breadcrumbs you can configure the component to only show the fi To do this, add a `govuk-breadcrumbs--collapse-on-mobile` class to the outer `
` 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 @@ -78,4 +79,4 @@ Use the `govuk-breadcrumbs--inverse` modifier class to show white links and arro 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 }) }} diff --git a/src/components/button/index.md b/src/components/button/index.md index e241f5a871..b239073476 100644 --- a/src/components/button/index.md +++ b/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,14 +74,14 @@ 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 @@ -88,7 +89,7 @@ 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). @@ -96,7 +97,7 @@ You can also [group default and secondary buttons together](#grouping-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,7 +113,7 @@ 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 @@ -120,17 +121,17 @@ Disabled buttons have poor contrast and can confuse some users, so avoid them if 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. diff --git a/src/components/character-count/index.md b/src/components/character-count/index.md index bd1ea4cdc5..b0a0e56682 100644 --- a/src/components/character-count/index.md +++ b/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,13 +47,13 @@ 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 `