diff --git a/lib/highlighter.js b/lib/highlighter.js index 544935ab9c..e21aacc2ae 100644 --- a/lib/highlighter.js +++ b/lib/highlighter.js @@ -1,5 +1,7 @@ const hljs = require('highlight.js') +hljs.registerLanguage('erb', require('highlight.js/lib/languages/erb')) + // Highlight Nunjucks as JavaScript hljs.registerLanguage('njk', require('highlight.js/lib/languages/javascript')) diff --git a/lib/nunjucks/globals.js b/lib/nunjucks/globals.js index 701508dd08..8fabfaa688 100644 --- a/lib/nunjucks/globals.js +++ b/lib/nunjucks/globals.js @@ -27,6 +27,80 @@ exports.getNunjucksCode = function (path) { return content.replace(/{%\s*extends\s*\S*\s*%}\s+/, '') } +/** + * This helper function takes a path of a *.erb file and + * returns the Rails syntax inside that file without markdown data + * + * @param {string} path - Path to ERb file + * @returns {string} ERb code for the file + */ +exports.getRubyOnRailsCode = (path) => { + const { content } = matter(readFileSync(path, 'utf-8')) + + return content +} + +/** + * This helper function takes an component name and returns + * a URL for the full documentation for that Rails helper. + * + * @param {string} componentName - Name of component + * @returns {string} URL - Link to documentation page + */ +exports.getRailsLink = (componentName) => { + const links = { + accordion: 'https://govuk-components.netlify.app/components/accordion/', + 'back-link': 'https://govuk-components.netlify.app/components/back-link/', + breadcrumb: 'https://govuk-components.netlify.app/components/breadcrumbs/', + 'character-count': + 'https://govuk-form-builder.netlify.app/form-elements/textarea/', + checkboxes: + 'https://govuk-form-builder.netlify.app/form-elements/checkboxes/', + 'cookie-banner': + 'https://govuk-components.netlify.app/components/cookie-banner/', + 'date-input': + 'https://govuk-form-builder.netlify.app/form-elements/date-input/', + details: 'https://govuk-components.netlify.app/components/details/', + 'error-message': + 'https://govuk-form-builder.netlify.app/introduction/error-handling/', + 'error-summary': + 'https://govuk-form-builder.netlify.app/introduction/error-handling/', + 'exit-this-page': + 'https://govuk-components.netlify.app/components/exit-this-page/', + fieldset: + 'https://govuk-form-builder.netlify.app/building-blocks/fieldsets/', + 'file-upload': + 'https://govuk-form-builder.netlify.app/form-elements/file-upload/', + footer: 'https://govuk-components.netlify.app/components/footer/', + header: 'https://govuk-components.netlify.app/components/header/', + 'inset-text': 'https://govuk-components.netlify.app/components/inset-text/', + 'notification-banner': + 'https://govuk-components.netlify.app/components/notification-banner/', + pagination: 'https://govuk-components.netlify.app/components/pagination/', + panel: 'https://govuk-components.netlify.app/components/panel/', + 'phase-banner': + 'https://govuk-components.netlify.app/components/phase-banner/', + radios: 'https://govuk-form-builder.netlify.app/form-elements/radios/', + select: 'https://govuk-form-builder.netlify.app/form-elements/select/', + 'skip-link': 'https://govuk-components.netlify.app/helpers/skip-link/', + 'summary-list': + 'https://govuk-components.netlify.app/components/summary-list/', + table: 'https://govuk-components.netlify.app/components/table/', + tabs: 'https://govuk-components.netlify.app/components/tabs/', + tag: 'https://govuk-components.netlify.app/components/tag/', + 'task-list': 'https://govuk-components.netlify.app/components/task-list/', + 'text-input': + 'https://govuk-form-builder.netlify.app/form-elements/text-input/', + textarea: 'https://govuk-form-builder.netlify.app/form-elements/textarea/', + 'warning-text': + 'https://govuk-components.netlify.app/components/warning-text/' + } + + const fallbackLink = 'https://govuk-components.netlify.app/' + + return links[componentName] || fallbackLink +} + /** * This helper function takes a path of a *.md.njk file and * returns the frontmatter as an object diff --git a/src/components/accordion/default/index.erb b/src/components/accordion/default/index.erb new file mode 100644 index 0000000000..ceb35b7ceb --- /dev/null +++ b/src/components/accordion/default/index.erb @@ -0,0 +1,14 @@ +<%= govuk_accordion do |accordion| + accordion.with_section(heading_text: "Writing well for the web") { + tag.p("This is the content for Writing well for the web.") + } + accordion.with_section(heading_text: "Writing well for specialists") { + tag.p("This is the content for Writing well for specialists.") + } + accordion.with_section(heading_text: "Know your audience") { + tag.p("This is the content for Know your audience.") + } + accordion.with_section(heading_text: "How people read") { + tag.p("This is the content for How people read.") + } +end %> diff --git a/src/components/accordion/index.md b/src/components/accordion/index.md index 3eaf9fb262..ccfcbc1aee 100644 --- a/src/components/accordion/index.md +++ b/src/components/accordion/index.md @@ -11,7 +11,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: "accordion", example: "default", html: true, nunjucks: true, rails: true, open: false, size: "xl", loading: "eager" }) }} ## When to use this component @@ -79,7 +79,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: "accordion", example: "default", html: true, nunjucks: true, rails: true, open: false, size: "xl", titleSuffix: "second" }) }} #### Write clear button text @@ -95,7 +95,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: "accordion", example: "with-summary-section", html: true, nunjucks: true, rails: true, open: false, size: "xl" }) }} #### Structure section headings with the rest of the page diff --git a/src/components/accordion/with-summary-section/index.erb b/src/components/accordion/with-summary-section/index.erb new file mode 100644 index 0000000000..4e253635d1 --- /dev/null +++ b/src/components/accordion/with-summary-section/index.erb @@ -0,0 +1,81 @@ +<%= govuk_accordion do |accordion| end %> + <%= accordion.with_section(heading_text: "Understanding agile project management", summary_text: "Introductions, methods, core features.") do %> + + <% end %> + <%= accordion.with_section(heading_text: "Working with agile methods", summary_text: "Workspaces, tools and techniques, user stories, planning.") do %> + + <% end %> + <%= accordion.with_section(heading_text: "Governing agile services", summary_text: "Principles, measuring progress, spending money.") do %> + + <% end %> + <%= accordion.with_section(heading_text: "Phases of an agile project", summary_text: "Discovery, alpha, beta, live and retirement.") do %> + + <% end %> +<% end %> diff --git a/src/components/back-link/default/index.erb b/src/components/back-link/default/index.erb new file mode 100644 index 0000000000..ca61e47c8d --- /dev/null +++ b/src/components/back-link/default/index.erb @@ -0,0 +1 @@ +<%= govuk_back_link(href: "#", text: "Back") %> diff --git a/src/components/back-link/index.md b/src/components/back-link/index.md index bd533138c1..73501d9759 100644 --- a/src/components/back-link/index.md +++ b/src/components/back-link/index.md @@ -31,7 +31,7 @@ Use the back link component to help users go back to the previous page in a mult 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: "back-link", example: "default", html: true, nunjucks: true, rails: true, open: false, loading: "eager" }) }} ## When to use this component @@ -64,7 +64,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: "back-link", example: "default", html: true, nunjucks: true, rails: 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. @@ -76,4 +76,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 with white to meet [WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html). -{{ example({ group: "components", item: "back-link", example: "inverse", html: true, nunjucks: true, open: false }) }} +{{ example({group: "components", item: "back-link", example: "inverse", html: true, nunjucks: true, rails: true, open: false}) }} diff --git a/src/components/back-link/inverse/index.erb b/src/components/back-link/inverse/index.erb new file mode 100644 index 0000000000..62b3ff16f5 --- /dev/null +++ b/src/components/back-link/inverse/index.erb @@ -0,0 +1 @@ +<%= govuk_back_link(href: "#", text: "Back", inverse: true) %> diff --git a/src/components/breadcrumbs/collapse-mobile/index.erb b/src/components/breadcrumbs/collapse-mobile/index.erb new file mode 100644 index 0000000000..8876e701ec --- /dev/null +++ b/src/components/breadcrumbs/collapse-mobile/index.erb @@ -0,0 +1,7 @@ +<%= govuk_breadcrumbs(breadcrumbs: { + "Home" => "#", + "Environment" => "#", + "Rural and countryside" => "#", + "Rural development and land management" => "#", + "Economic growth in rural areas" => "#" +}, collapse_on_mobile: true) %> diff --git a/src/components/breadcrumbs/default/index.erb b/src/components/breadcrumbs/default/index.erb new file mode 100644 index 0000000000..76284c74df --- /dev/null +++ b/src/components/breadcrumbs/default/index.erb @@ -0,0 +1,5 @@ +<%= govuk_breadcrumbs(breadcrumbs: { + "Home" => "#", + "Passports, travel and living abroad" => "#", + "Travel abroad" => "#" +}) %> diff --git a/src/components/breadcrumbs/index.md b/src/components/breadcrumbs/index.md index ee578dc231..5fbe63a119 100644 --- a/src/components/breadcrumbs/index.md +++ b/src/components/breadcrumbs/index.md @@ -25,7 +25,7 @@ The breadcrumbs component helps users to understand where they are within a webs ] }) }} -{{ example({ group: "components", item: "breadcrumbs", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }} +{{ example({group: "components", item: "breadcrumbs", example: "default", html: true, nunjucks: true, rails: true, open: false, loading: "eager" }) }} ## When to use this component @@ -50,7 +50,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: "breadcrumbs", example: "default", html: true, nunjucks: true, rails: true, open: false, titleSuffix: "second"}) }} ### Collapsing breadcrumbs on mobile devices @@ -58,7 +58,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: "breadcrumbs", example: "collapse-mobile", html: true, nunjucks: true, rails: true, open: false}) }} ### Breadcrumbs on dark backgrounds @@ -66,4 +66,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 with white to [meet WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html). -{{ example({ group: "components", item: "breadcrumbs", example: "inverse", html: true, nunjucks: true, open: false }) }} +{{ example({group: "components", item: "breadcrumbs", example: "inverse", html: true, nunjucks: true, rails: true, open: false}) }} diff --git a/src/components/breadcrumbs/inverse/index.erb b/src/components/breadcrumbs/inverse/index.erb new file mode 100644 index 0000000000..097bcd25d2 --- /dev/null +++ b/src/components/breadcrumbs/inverse/index.erb @@ -0,0 +1,5 @@ +<%= govuk_breadcrumbs(breadcrumbs: { + "Home" => "#", + "Passports, travel and living abroad" => "#", + "Travel abroad" => "#" +}, inverse: true) %> diff --git a/src/components/button/button-group/index.erb b/src/components/button/button-group/index.erb new file mode 100644 index 0000000000..3bb9ff91bf --- /dev/null +++ b/src/components/button/button-group/index.erb @@ -0,0 +1,3 @@ +<%= form.govuk_submit("Continue") do %> + <%= govuk_link_to("Cancel", "#") %> +<% end %> diff --git a/src/components/button/default/index.erb b/src/components/button/default/index.erb new file mode 100644 index 0000000000..87cd1b2897 --- /dev/null +++ b/src/components/button/default/index.erb @@ -0,0 +1 @@ +<%= form.govuk_submit("Save and continue") %> diff --git a/src/components/button/disabled/index.erb b/src/components/button/disabled/index.erb new file mode 100644 index 0000000000..09c42f76b8 --- /dev/null +++ b/src/components/button/disabled/index.erb @@ -0,0 +1 @@ +<%= form.govuk_submit("Disabled button", disabled: true) %> diff --git a/src/components/button/index.md b/src/components/button/index.md index c2fdfd8226..715e2a3073 100644 --- a/src/components/button/index.md +++ b/src/components/button/index.md @@ -23,7 +23,7 @@ layout: layout-pane.njk ] }) }} -{{ example({ group: "components", item: "button", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }} +{{ example({group: "components", item: "button", example: "default", html: true, nunjucks: true, rails: true, open: false, loading: "eager" }) }} ## When to use this component @@ -61,14 +61,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: "button", example: "default", html: true, nunjucks: true, rails: 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: "button", example: "start", html: true, nunjucks: true, rails: true, open: false}) }} ### Secondary buttons @@ -76,7 +76,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: "button", example: "secondary", html: true, nunjucks: true, rails: true, open: false}) }} You can also [group default and secondary buttons together](#grouping-buttons). @@ -84,7 +84,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: "button", example: "warning", html: true, nunjucks: true, rails: 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. @@ -100,7 +100,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 4.5:1 to meet [WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html). -{{ example({ group: "components", item: "button", example: "inverse", html: true, nunjucks: true, open: false }) }} +{{ example({group: "components", item: "button", example: "inverse", html: true, nunjucks: true, rails: true, open: false}) }} ### Disabled buttons @@ -108,17 +108,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: "button", example: "disabled", html: true, nunjucks: true, rails: 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: "button", example: "secondary-combo", html: true, nunjucks: true, rails: 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: "button", example: "button-group", html: true, nunjucks: true, rails: true, open: false}) }} ### Stop users from accidentally sending information more than once @@ -136,7 +136,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: "button", example: "prevent-double-click", html: true, nunjucks: true, rails: 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/button/inverse/index.erb b/src/components/button/inverse/index.erb new file mode 100644 index 0000000000..bd57b445dd --- /dev/null +++ b/src/components/button/inverse/index.erb @@ -0,0 +1 @@ +<%= form.govuk_submit("Create an account", inverse: true) %> diff --git a/src/components/button/prevent-double-click/index.erb b/src/components/button/prevent-double-click/index.erb new file mode 100644 index 0000000000..78cc275379 --- /dev/null +++ b/src/components/button/prevent-double-click/index.erb @@ -0,0 +1 @@ +<%= form.govuk_submit("Confirm and send") %> diff --git a/src/components/button/secondary-combo/index.erb b/src/components/button/secondary-combo/index.erb new file mode 100644 index 0000000000..af4f23fe06 --- /dev/null +++ b/src/components/button/secondary-combo/index.erb @@ -0,0 +1,3 @@ +<%= form.govuk_submit("Continue") do %> + <%= form.govuk_submit("Save as draft", secondary: true) %> +<% end %> diff --git a/src/components/button/secondary/index.erb b/src/components/button/secondary/index.erb new file mode 100644 index 0000000000..b5337cde2f --- /dev/null +++ b/src/components/button/secondary/index.erb @@ -0,0 +1 @@ +<%= form.govuk_submit("Find address", secondary: true) %> diff --git a/src/components/button/start/index.erb b/src/components/button/start/index.erb new file mode 100644 index 0000000000..d1a8402855 --- /dev/null +++ b/src/components/button/start/index.erb @@ -0,0 +1 @@ +<%= govuk_start_button(text: "Start now", href: "#") %> diff --git a/src/components/button/warning/index.erb b/src/components/button/warning/index.erb new file mode 100644 index 0000000000..772035cebf --- /dev/null +++ b/src/components/button/warning/index.erb @@ -0,0 +1 @@ +<%= form.govuk_submit("Delete account", warning: true) %> diff --git a/src/components/character-count/default/index.erb b/src/components/character-count/default/index.erb new file mode 100644 index 0000000000..51237d11d8 --- /dev/null +++ b/src/components/character-count/default/index.erb @@ -0,0 +1,11 @@ +<%= form.govuk_text_area :detail, + label: { + text: "Can you provide more detail?", + tag: "h1". + size: "l" + }, + hint: { + text: "Do not include personal or financial information like your National Insurance number or credit card details." + }, + max_chars: 200 +%> diff --git a/src/components/character-count/error/index.erb b/src/components/character-count/error/index.erb new file mode 100644 index 0000000000..a670708d55 --- /dev/null +++ b/src/components/character-count/error/index.erb @@ -0,0 +1,16 @@ +<% + # In the associated model, add: + # validates description: { + # maximum: 350, + # too_long: "Job description must be #{count} characters or less" + # } +%> + +<%= form.govuk_text_area :description, + label: { + text: "Enter a job description", + tag: "h1". + size: "l" + }, + max_chars: 350 +%> diff --git a/src/components/character-count/index.md b/src/components/character-count/index.md index d33f34cd66..dffacfe804 100644 --- a/src/components/character-count/index.md +++ b/src/components/character-count/index.md @@ -11,7 +11,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: "character-count", example: "default", html: true, nunjucks: true, rails: true, open: false, loading: "eager" }) }} ## When to use this component @@ -46,13 +46,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: "character-count", example: "default", html: true, nunjucks: true, rails: 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 `
{% endif %} + {%- if (params.rails) %} +
+ + +

This uses a Ruby gem maintained by the community. Options for this helper.

+
+ + ```erb + {{ getRubyOnRailsCode(railsPath) | safe }} + ``` + +
+
+ +
Ruby on Rails
+ {% endif %} {%- if (params.nunjucks) %} {%- if (multipleTabs) %}
Nunjucks