Add Rails examples for the components

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'))
 

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

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 %>

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
 

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 %>
+    <ul class="govuk-list">
+      <li>
+        <a class="govuk-link" href="#">Agile and government services: an introduction</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Agile methods: an introduction</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Core principles of agile</a>
+      </li>
+    </ul>
+  <% end %>
+  <%= accordion.with_section(heading_text: "Working with agile methods", summary_text: "Workspaces, tools and techniques, user stories, planning.") do %>
+    <ul class="govuk-list">
+      <li>
+        <a class="govuk-link" href="#">Creating an agile working environment</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Agile tools and techniques</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Set up a team wall</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Writing user stories</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Planning in agile</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Deciding on priorities</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Developing a roadmap</a>
+      </li>
+    </ul>
+  <% end %>
+  <%= accordion.with_section(heading_text: "Governing agile services", summary_text: "Principles, measuring progress, spending money.") do %>
+    <ul class="govuk-list">
+      <li>
+        <a class="govuk-link" href="#">Governance principles for agile service delivery</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Measuring and reporting progress</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Spend controls: check if you need approval to spend money on a service</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Spend controls: apply for approval to spend money on a service</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Spend controls: the new pipeline process</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Working across organisational boundaries</a>
+      </li>
+    </ul>
+  <% end %>
+  <%= accordion.with_section(heading_text: "Phases of an agile project", summary_text: "Discovery, alpha, beta, live and retirement.") do %>
+    <ul class="govuk-list">
+      <li>
+        <a class="govuk-link" href="#">How the discovery phase works</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">How the alpha phase works</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">How the beta phase works</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">How the live phase works</a>
+      </li>
+      <li>
+        <a class="govuk-link" href="#">Retiring your service</a>
+      </li>
+    </ul>
+  <% end %>
+<% end %>

src/components/back-link/default/index.erb

@@ -0,0 +1 @@
+<%= govuk_back_link(href: "#", text: "Back") %>

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}) }}

src/components/back-link/inverse/index.erb

@@ -0,0 +1 @@
+<%= govuk_back_link(href: "#", text: "Back", inverse: true) %>

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) %>

src/components/breadcrumbs/default/index.erb

@@ -0,0 +1,5 @@
+<%= govuk_breadcrumbs(breadcrumbs: {
+  "Home" => "#",
+  "Passports, travel and living abroad" => "#",
+  "Travel abroad" => "#"
+}) %>

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,20 +50,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: "breadcrumbs", example: "default", html: true, nunjucks: true, rails: 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: "breadcrumbs", example: "collapse-mobile", html: true, nunjucks: true, rails: 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 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}) }}

src/components/breadcrumbs/inverse/index.erb

@@ -0,0 +1,5 @@
+<%= govuk_breadcrumbs(breadcrumbs: {
+  "Home" => "#",
+  "Passports, travel and living abroad" => "#",
+  "Travel abroad" => "#"
+}, inverse: true) %>

src/components/button/button-group/index.erb

@@ -0,0 +1,3 @@
+<%= form.govuk_submit("Continue") do %>
+  <%= govuk_link_to("Cancel", "#") %>
+<% end %>

src/components/button/default/index.erb

@@ -0,0 +1 @@
+<%= form.govuk_submit("Save and continue") %>

src/components/button/disabled/index.erb

@@ -0,0 +1 @@
+<%= form.govuk_submit("Disabled button", disabled: true) %>

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,30 +61,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: "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
 
 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).
 
 ### 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: "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,25 +100,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 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
 
 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: "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.
 

src/components/button/inverse/index.erb

@@ -0,0 +1 @@
+<%= form.govuk_submit("Create an account", inverse: true) %>

src/components/button/prevent-double-click/index.erb

@@ -0,0 +1 @@
+<%= form.govuk_submit("Confirm and send") %>

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 %>

src/components/button/secondary/index.erb

@@ -0,0 +1 @@
+<%= form.govuk_submit("Find address", secondary: true) %>