Capitalise tags

The tag component is being redesigned [1] as part of a wider piece of work on task lists, and the new design will be released as part of v5.0.

The changes include a change in case of tags from UPPERCASE to Sentence case. At the moment in some of our examples the tag text is lowercase in the HTML source, but this doesn’t matter as a CSS text-transform is applied.

We’re currently planning to include a CSS adjustment [2] to try and sentence case existing tags, but it makes sense to update these examples to use sentence case anyway.

[1]: alphagov/govuk-frontend#3502
[2]: https://github.com/alphagov/govuk-frontend/blob/188ad751fa9e9c1db5eaa62e556483adec2b2ff8/packages/govuk-frontend/src/govuk/components/tag/_index.scss#L36-L43

src/components/phase-banner/beta/index.njk

@@ -6,7 +6,7 @@ layout: layout-example.njk
 {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
 {{ govukPhaseBanner({
   tag: {
-    text: "beta"
+    text: "Beta"
   },
   html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
 }) }}

src/components/phase-banner/default/index.njk

@@ -6,7 +6,7 @@ layout: layout-example.njk
 {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
 {{ govukPhaseBanner({
   tag: {
-    text: "alpha"
+    text: "Alpha"
   },
   html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
 }) }}

src/components/tag/default/index.njk

@@ -6,5 +6,5 @@ layout: layout-example.njk
 {%- from "govuk/components/tag/macro.njk" import govukTag -%}
 
 {{ govukTag({
-  text: "completed"
+  text: "Completed"
 }) }}

src/styles/page-template/custom/code.njk

@@ -107,7 +107,7 @@ ignore_in_sitemap: true
 {% block beforeContent %}
   {{ govukPhaseBanner({
     tag: {
-      text: "alpha"
+      text: "Alpha"
     },
     html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
   }) }}

src/styles/page-template/custom/index.njk

@@ -108,7 +108,7 @@ ignore_in_sitemap: true
 {% block beforeContent %}
   {{ govukPhaseBanner({
     tag: {
-      text: "alpha"
+      text: "Alpha"
     },
     html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
   }) }}