Lowercase component names

CHANGELOG.md

@@ -36,6 +36,9 @@
 - Update back-link example to show default usage doesn't need
   `text` parameter
   ([PR #819](https://github.com/alphagov/govuk-frontend/pull/819))
+
+- Lowercase component names
+  ([PR #822](https://github.com/alphagov/govuk-frontend/pull/822))
 
 ## 1.0.0 (Major release)
 

app/views/examples/template-block-areas/index.njk

@@ -115,7 +115,7 @@
     <p class="govuk-body">
       Set this block to add content before to appear outside <code>&lt;main&gt;</code> element.
       <br>
-      For example: The Back link component, Phase banner component.
+      For example: The back link component, phase banner component.
     </p>
     {% from 'back-link/macro.njk' import govukBackLink %}
 

app/views/layouts/component.njk

@@ -8,7 +8,7 @@
 {% endset %}
 
 {% set componentName = componentPath %}
-{% set componentNameHuman = componentName | replace("-", " ") | capitalize %}
+{% set componentNameHuman = componentName | replace("-", " ") %}
 {% set componentGuidanceLink = componentGuidanceLink | default('https://design-system.service.gov.uk/components/' + componentName)%}
 {% set htmlMarkup %}
   {% include componentName +"/"+ componentName +".njk" ignore missing %}
@@ -27,7 +27,7 @@
   <div class="govuk-width-container">
     <h1 class="govuk-heading-xl">
       {% block componentName %}
-        {{ componentNameHuman }}
+        {{ componentNameHuman | capitalize }}
       {% endblock %}
     </h1>
   </div>

app/views/layouts/readme.njk

@@ -1,10 +1,10 @@
 {% set nunjucksHtmlUsageMessage = '**If you’re using Nunjucks macros in production be aware that using  `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**' %}
 {% set componentName = componentPath %}
-{% set componentNameHuman = componentName | replace("-", " ") | capitalize %}
+{% set componentNameHuman = componentName | replace("-", " ") %}
 {% set componentGuidanceLink = componentGuidanceLink | default('https://design-system.service.gov.uk/components/' + componentName)%}
 <h1>
 {% block componentName %}
-{{ componentNameHuman }}
+{{ componentNameHuman | capitalize }}
 {% endblock %}
 </h1>
 

src/components/back-link/README.md

@@ -6,7 +6,7 @@ Link back component, to go back a page.
 
 ## Guidance
 
-Find out when to use the Back link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/back-link).
+Find out when to use the back link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/back-link).
 
 ## Quick start examples
 

src/components/breadcrumbs/README.md

@@ -6,7 +6,7 @@ The Breadcrumbs component helps users to understand where they are within a webs
 
 ## Guidance
 
-Find out when to use the Breadcrumbs component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/breadcrumbs).
+Find out when to use the breadcrumbs component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/breadcrumbs).
 
 ## Quick start examples
 

src/components/button/README.md

@@ -6,7 +6,7 @@ A button is an element that allows users to carry out an action on a GOV.UK page
 
 ## Guidance
 
-Find out when to use the Button component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/button).
+Find out when to use the button component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/button).
 
 ## Quick start examples
 

src/components/checkboxes/README.md

@@ -6,7 +6,7 @@ Let users select one or more options.
 
 ## Guidance
 
-Find out when to use the Checkboxes component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/checkboxes).
+Find out when to use the checkboxes component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/checkboxes).
 
 ## Quick start examples
 

src/components/date-input/README.md

@@ -6,7 +6,7 @@ A component for entering dates, for example - date of birth.
 
 ## Guidance
 
-Find out when to use the Date input component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/date-input).
+Find out when to use the date input component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/date-input).
 
 ## Quick start examples
 

src/components/details/README.md

@@ -6,7 +6,7 @@ Component for conditionally revealing content, using the details HTML element.
 
 ## Guidance
 
-Find out when to use the Details component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/details).
+Find out when to use the details component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/details).
 
 ## Quick start examples
 

src/components/error-message/README.md

@@ -6,7 +6,7 @@ Component to show a red error message - used for form validation. Use inside a l
 
 ## Guidance
 
-Find out when to use the Error message component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/error-message).
+Find out when to use the error message component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/error-message).
 
 ## Quick start examples
 

src/components/error-summary/README.md

@@ -6,7 +6,7 @@ Component to show an error summary box - used at the top of the page, to summari
 
 ## Guidance
 
-Find out when to use the Error summary component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/error-summary).
+Find out when to use the error summary component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/error-summary).
 
 ## Quick start examples
 

src/components/fieldset/README.md

@@ -6,7 +6,7 @@ The fieldset element is used to group several controls within a web form. The le
 
 ## Guidance
 
-Find out when to use the Fieldset component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/fieldset).
+Find out when to use the fieldset component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/fieldset).
 
 ## Quick start examples
 

src/components/file-upload/README.md

@@ -6,7 +6,7 @@ The HTML `<input>` element with type="file" lets a user pick one or more files,
 
 ## Guidance
 
-Find out when to use the File upload component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/file-upload).
+Find out when to use the file upload component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/file-upload).
 
 ## Quick start examples
 

src/components/footer/README.md

@@ -6,7 +6,7 @@ The footer component is used at the bottom of every GOV.UK page, to help users n
 
 ## Guidance
 
-Find out when to use the Footer component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/footer).
+Find out when to use the footer component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/footer).
 
 ## Quick start examples
 

src/components/header/README.md

@@ -6,7 +6,7 @@ The header component is used at the top of every GOV.UK page, to help users navi
 
 ## Guidance
 
-Find out when to use the Header component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/header).
+Find out when to use the header component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/header).
 
 ## Quick start examples
 

src/components/input/README.md

@@ -6,7 +6,7 @@ A single-line text field.
 
 ## Guidance
 
-Find out when to use the Input component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/text-input).
+Find out when to use the input component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/text-input).
 
 ## Quick start examples
 

src/components/panel/README.md

@@ -6,7 +6,7 @@ The confirmation panel has a turquoise background and white text. Used for trans
 
 ## Guidance
 
-Find out when to use the Panel component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/panel).
+Find out when to use the panel component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/panel).
 
 ## Quick start examples
 

src/components/phase-banner/README.md

@@ -6,7 +6,7 @@ A banner that indicates content is in alpha or beta phase with a description.
 
 ## Guidance
 
-Find out when to use the Phase banner component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/phase-banner).
+Find out when to use the phase banner component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/phase-banner).
 
 ## Quick start examples
 

src/components/radios/README.md

@@ -6,7 +6,7 @@ Let users select a single option from a list.
 
 ## Guidance
 
-Find out when to use the Radios component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/radios).
+Find out when to use the radios component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/radios).
 
 ## Quick start examples
 

src/components/select/README.md

@@ -6,7 +6,7 @@ The HTML `<select>` element represents a control that provides a menu of options
 
 ## Guidance
 
-Find out when to use the Select component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/select).
+Find out when to use the select component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/select).
 
 ## Quick start examples
 

src/components/skip-link/README.md

@@ -6,7 +6,7 @@ Skip link component. Make skip links visible when they are tabbed to. You'll nee
 
 ## Guidance
 
-Find out when to use the Skip link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/skip-link).
+Find out when to use the skip link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/skip-link).
 
 ## Quick start examples
 

src/components/table/README.md

@@ -6,7 +6,7 @@ Table description.
 
 ## Guidance
 
-Find out when to use the Table component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/table).
+Find out when to use the table component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/table).
 
 ## Quick start examples
 

src/components/tabs/README.md

@@ -6,7 +6,7 @@ Component for conditionally revealing content, using tabs and tabs panels.
 
 ## Guidance
 
-Find out when to use the Tabs component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tabs).
+Find out when to use the tabs component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tabs).
 
 ## Quick start examples
 

src/components/tag/README.md

@@ -6,7 +6,7 @@ Phase tags are mostly used inside phase banners as an indication of the state of
 
 ## Guidance
 
-Find out when to use the Tag component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tag).
+Find out when to use the tag component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tag).
 
 ## Quick start examples
 

src/components/textarea/README.md

@@ -6,7 +6,7 @@ A multi-line text field.
 
 ## Guidance
 
-Find out when to use the Textarea component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/textarea).
+Find out when to use the textarea component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/textarea).
 
 ## Quick start examples
 

src/components/warning-text/README.md

@@ -6,7 +6,7 @@ Use bold text with an exclamation icon if there are consequences - for example,
 
 ## Guidance
 
-Find out when to use the Warning text component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/warning-text).
+Find out when to use the warning text component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/warning-text).
 
 ## Quick start examples