Skip to content

Commit

Permalink
PLATUI-2900: Updating HmrcHeader with new params and translations (#289)
Browse files Browse the repository at this point in the history
  • Loading branch information
JoPintoPaul committed Mar 26, 2024
1 parent 7221814 commit 91cac5f
Show file tree
Hide file tree
Showing 28 changed files with 152 additions and 53 deletions.
15 changes: 15 additions & 0 deletions CHANGELOG.md
Expand Up @@ -8,6 +8,21 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
For compatibility information see `govukFrontendVersion` and `hmrcFrontendVersion` in
[LibDependencies](project/LibDependencies.scala)


## [9.3.0] - 2024-03-25

### Changed

- Updated `HmrcHeader` template to align with `GovukHeader`, and to take in optional `menuButtonText`, `menuButtonLabel`
and `navigationLabel` parameters
- Removed `hmrc-header__service-name` and `hmrc-header__service-name--linked` classes from `HmrcHeader`
- Added Welsh translation for `Choose a language`

### Compatible with

- [hmrc/hmrc-frontend v6.11.0](https://github.com/hmrc/hmrc-frontend/releases/tag/v6.11.0)
- [alphagov/govuk-frontend v5.2.0](https://github.com/alphagov/govuk-frontend/releases/tag/v5.2.0)

## [9.2.0] - 2024-03-22

### Changed
Expand Down
Expand Up @@ -17,7 +17,6 @@
package uk.gov.hmrc.hmrcfrontend.controllers

import controllers.{AssetsBuilder, AssetsMetadata}
import play.api.Environment

import javax.inject.{Inject, Singleton}
import play.api.http.HttpErrorHandler
Expand Down
Expand Up @@ -45,7 +45,9 @@ case class Header(
userResearchBanner: Option[UserResearchBanner] = None,
phaseBanner: Option[PhaseBanner] = None,
additionalBannersBlock: Option[Html] = None,
menuButtonLabel: Option[String] = None
menuButtonLabel: Option[String] = None,
menuButtonText: Option[String] = None,
navigationLabel: Option[String] = None
) {

// We use this method instead of using the input language toggle directly
Expand Down Expand Up @@ -85,7 +87,9 @@ object Header {
(__ \ "userResearchBanner").readNullable[UserResearchBanner] and
(__ \ "phaseBanner").readNullable[PhaseBanner] and
(__ \ "additionalBannersBlock").readNullable[Html] and
(__ \ "menuButtonLabel").readNullable[String]
(__ \ "menuButtonLabel").readNullable[String] and
(__ \ "menuButtonText").readNullable[String] and
(__ \ "navigationLabel").readNullable[String]
)(Header.apply _)

implicit def jsonWrites: OWrites[Header] =
Expand All @@ -108,6 +112,8 @@ object Header {
(__ \ "userResearchBanner").writeNullable[UserResearchBanner] and
(__ \ "phaseBanner").writeNullable[PhaseBanner] and
(__ \ "additionalBannersBlock").writeNullable[Html] and
(__ \ "menuButtonLabel").writeNullable[String]
(__ \ "menuButtonLabel").writeNullable[String] and
(__ \ "menuButtonText").writeNullable[String] and
(__ \ "navigationLabel").writeNullable[String]
)(header => unlift(Header.unapply)(header.copy(inputLanguageToggle = header.languageToggle)))
}
Expand Up @@ -89,7 +89,7 @@
<div class="govuk-header__content">
@serviceNameLinkOrSpan(serviceName, serviceUrl)
@if(navigation.getOrElse(Seq.empty).nonEmpty) {
<nav aria-label="@if(language == Cy){Dewislen}else{Menu}" class="@toClasses("govuk-header__navigation", navigationClasses)">
<nav aria-label="@params.navigationLabel.getOrElse(menuButtonText)" class="@toClasses("govuk-header__navigation", navigationClasses)">
<button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" @menuButtonAriaLabel hidden> @menuButtonText </button>
<ul id="navigation" class="govuk-header__navigation-list">
@for(item <- navigation.getOrElse(Seq.empty).filter(item => item.content.nonEmpty)) {
Expand Down Expand Up @@ -119,7 +119,10 @@
</nav>
}
case (_, Some(linkMap)) if linkMap.nonEmpty => {
<nav class="hmrc-language-select" aria-label="Choose a language">
<nav class="hmrc-language-select" aria-label="@{language match {
case Cy => "Dewiswch iaith"
case _ => "Choose a language"
}}">
<ul class="govuk-list hmrc-language-select__items">
@for((lang, link) <- linkMap) {
<li class="govuk-header__navigation-item">
Expand Down Expand Up @@ -157,11 +160,11 @@
case Some(NonEmptyString(s)) => {
@serviceUrl match {
case NonEmptyString(_) => {
<a href="@serviceUrl" class="govuk-header__link govuk-header__service-name hmrc-header__service-name hmrc-header__service-name--linked">
<a href="@serviceUrl" class="govuk-header__link govuk-header__service-name">
@s
</a>}
case _ => {
<span class="govuk-header__service-name hmrc-header__service-name">
<span class="govuk-header__service-name">
@s
</span>}
}
Expand All @@ -170,10 +173,10 @@
}
}

@menuButtonText = {
@if(language == Cy){Dewislen}else{Menu}
@menuButtonText = @{
params.menuButtonText.getOrElse(if(language == Cy)"Dewislen" else "Menu")
}

@menuButtonAriaLabel = {
@params.menuButtonLabel.filterNot(menuButtonText.toString == _).map { label => aria-label="@label"}
@params.menuButtonLabel.filterNot(menuButtonText == _).map { label => aria-label="@label"}
}
@@ -1 +1 @@
6.4.0
6.11.0
Expand Up @@ -20,7 +20,7 @@
</a>
</div>
<div class="govuk-header__content">
<a href="/components/header" class="govuk-header__link govuk-header__service-name hmrc-header__service-name hmrc-header__service-name--linked">
<a href="/components/header" class="govuk-header__link govuk-header__service-name">
Service Name
</a>
<nav aria-label="Menu" class="govuk-header__navigation">
Expand Down
Expand Up @@ -20,7 +20,7 @@
</a>
</div>
<div class="govuk-header__content">
<a href="/components/header" class="govuk-header__link govuk-header__service-name hmrc-header__service-name hmrc-header__service-name--linked">
<a href="/components/header" class="govuk-header__link govuk-header__service-name">
Service Name
</a>
<nav aria-label="Menu" class="govuk-header__navigation">
Expand Down
Expand Up @@ -20,7 +20,7 @@
</a>
</div>
<div class="govuk-header__content">
<a href="/components/header" class="govuk-header__link govuk-header__service-name hmrc-header__service-name hmrc-header__service-name--linked">
<a href="/components/header" class="govuk-header__link govuk-header__service-name">
Service Name
</a>
<nav aria-label="Menu" class="govuk-header__navigation">
Expand Down
Expand Up @@ -20,7 +20,7 @@
</a>
</div>
<div class="govuk-header__content">
<span class="govuk-header__service-name hmrc-header__service-name">
<span class="govuk-header__service-name">
Gwasanaeth enghreifftiol
</span>
<nav class="hmrc-sign-out-nav">
Expand Down
Expand Up @@ -20,7 +20,7 @@
</a>
</div>
<div class="govuk-header__content">
<span class="govuk-header__service-name hmrc-header__service-name">
<span class="govuk-header__service-name">
Example Service
</span>
<nav class="hmrc-sign-out-nav">
Expand Down
Expand Up @@ -20,7 +20,7 @@
</a>
</div>
<div class="govuk-header__content">
<span class="govuk-header__service-name hmrc-header__service-name">
<span class="govuk-header__service-name">
Service with HMRC Banner and an additional one
</span>
</div>
Expand Down
@@ -0,0 +1,3 @@
{
"name" : "hmrcHeader"
}
@@ -0,0 +1,19 @@
{
"navigation" : [ {
"href" : "#1",
"text" : "Navigation item 1",
"active" : true
}, {
"href" : "#2",
"text" : "Navigation item 2"
}, {
"href" : "#3",
"text" : "Navigation item 3"
}, {
"href" : "#4",
"text" : "Navigation item 4"
} ],
"menuButtonText" : "Custom button text",
"menuButtonLabel" : "Custom button label",
"navigationLabel" : "Custom navigation label"
}
@@ -0,0 +1,54 @@

<header role="banner">
<div class="govuk-header hmrc-header" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage">
<svg
focusable="false"
role="img"
class="govuk-header__logotype"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 148 30"
height="30"
width="148"
aria-label="GOV.UK"
>
<title>GOV.UK</title>
<path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
</svg>
</a>
</div>
<div class="govuk-header__content">
<nav aria-label="Custom navigation label" class="govuk-header__navigation">
<button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Custom button label" hidden>
Custom button text
</button>

<ul id="navigation" class="govuk-header__navigation-list">
<li class="govuk-header__navigation-item govuk-header__navigation-item--active">
<a class="govuk-header__link" href="#1">
Navigation item 1
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#2">
Navigation item 2
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#3">
Navigation item 3
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#4">
Navigation item 4
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
Expand Up @@ -20,11 +20,11 @@
</a>
</div>
<div class="govuk-header__content">
<span class="govuk-header__service-name hmrc-header__service-name">
<span class="govuk-header__service-name">
Service with HMRC Banner
</span>

<nav class="hmrc-language-select" aria-label="Choose a language">
<nav class="hmrc-language-select" aria-label="Choose a language" >
<ul class="govuk-list hmrc-language-select__items">
<li class="govuk-header__navigation-item">
<a aria-current="page" lang="en" hreflang="en" href="/components/header/with-hmrc-banner-english/preview">English</a>
Expand Down
Expand Up @@ -20,11 +20,11 @@
</a>
</div>
<div class="govuk-header__content">
<span class="govuk-header__service-name hmrc-header__service-name">
<span class="govuk-header__service-name">
Gwasanaeth gyda Banner CThEF
</span>

<nav class="hmrc-language-select" aria-label="Choose a language">
<nav class="hmrc-language-select" aria-label="Dewiswch iaith">
<ul class="govuk-list hmrc-language-select__items">
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" lang="en" hreflang="en" href="/components/header/with-hmrc-banner-english/preview">English</a>
Expand Down
Expand Up @@ -20,11 +20,11 @@
</a>
</div>
<div class="govuk-header__content">
<span class="govuk-header__service-name hmrc-header__service-name">
<span class="govuk-header__service-name">
Example Service
</span>

<nav class="hmrc-language-select" aria-label="Choose a language">
<nav class="hmrc-language-select" aria-label="Choose a language" >
<ul class="govuk-list hmrc-language-select__items">
<li class="govuk-header__navigation-item">
<a aria-current="page" lang="en" hreflang="en" href="/components/header/with-language-toggle-english/preview">English</a>
Expand Down
Expand Up @@ -20,11 +20,11 @@
</a>
</div>
<div class="govuk-header__content">
<span class="govuk-header__service-name hmrc-header__service-name">
<span class="govuk-header__service-name">
Gwasanaeth enghreifftiol
</span>

<nav class="hmrc-language-select" aria-label="Choose a language">
<nav class="hmrc-language-select" aria-label="Dewiswch iaith">
<ul class="govuk-list hmrc-language-select__items">
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" lang="en" hreflang="en" href="/components/header/with-language-toggle-english/preview">English</a>
Expand Down
Expand Up @@ -20,7 +20,7 @@
</a>
</div>
<div class="govuk-header__content">
<span class="govuk-header__service-name hmrc-header__service-name">
<span class="govuk-header__service-name">
Gwasanaeth ar gyfer gwasanaeth gydag enw hir iawn yn Gymraeg
</span>
<nav aria-label="Dewislen" class="govuk-header__navigation">
Expand Down
Expand Up @@ -23,7 +23,7 @@
</a>
</div>
<div class="govuk-header__content">
<a href="#s1" class="govuk-header__link govuk-header__service-name hmrc-header__service-name hmrc-header__service-name--linked">
<a href="#s1" class="govuk-header__link govuk-header__service-name">
Service name
</a>
<nav aria-label="Menu" class="govuk-header__navigation nc1">
Expand Down
Expand Up @@ -20,7 +20,7 @@
</a>
</div>
<div class="govuk-header__content">
<a href="/components/header" class="govuk-header__link govuk-header__service-name hmrc-header__service-name hmrc-header__service-name--linked">
<a href="/components/header" class="govuk-header__link govuk-header__service-name">
Service Name
</a>
<nav aria-label="Menu" class="govuk-header__navigation">
Expand Down
Expand Up @@ -20,7 +20,7 @@
</a>
</div>
<div class="govuk-header__content">
<span class="govuk-header__service-name hmrc-header__service-name">
<span class="govuk-header__service-name">
Service Name
</span>
</div>
Expand Down
Expand Up @@ -20,7 +20,7 @@
</a>
</div>
<div class="govuk-header__content">
<a href="/components/header" class="govuk-header__link govuk-header__service-name hmrc-header__service-name hmrc-header__service-name--linked">
<a href="/components/header" class="govuk-header__link govuk-header__service-name">
Service Name
</a>
</div>
Expand Down
Expand Up @@ -36,7 +36,7 @@ class HmrcHeaderSpec extends TemplateUnitSpec[Header, HmrcHeader]("hmrcHeader")
Header(serviceName = Some(""), containerClasses = "govuk-width-container", signOutHref = Some("/sign-out"))
val componentTry = Try(component(params))

componentTry should be a 'success
componentTry.isSuccess shouldBe true
}

"""display Tudor crown logo set by config""" in {
Expand All @@ -49,8 +49,8 @@ class HmrcHeaderSpec extends TemplateUnitSpec[Header, HmrcHeader]("hmrcHeader")

val componentTry = Try(hmrcHeader(Header()))

componentTry should be a 'success
componentTry.get.body should include("M22.6 10.4c-1")
componentTry.isSuccess shouldBe true
componentTry.get.body should include("M22.6 10.4c-1")
}

"""display St Edwards crown logo when set by config""" in {
Expand All @@ -63,8 +63,8 @@ class HmrcHeaderSpec extends TemplateUnitSpec[Header, HmrcHeader]("hmrcHeader")

val componentTry = Try(hmrcHeader(Header()))

componentTry should be a 'success
componentTry.get.body should include("M6.7 12.2c1")
componentTry.isSuccess shouldBe true
componentTry.get.body should include("M6.7 12.2c1")
}

"""display Tudor crown when no config is found""" in {
Expand All @@ -73,8 +73,8 @@ class HmrcHeaderSpec extends TemplateUnitSpec[Header, HmrcHeader]("hmrcHeader")

val componentTry = Try(hmrcHeader(Header()))

componentTry should be a 'success
componentTry.get.body should include("M22.6 10.4c-1")
componentTry.isSuccess shouldBe true
componentTry.get.body should include("M22.6 10.4c-1")
}
}
}

0 comments on commit 91cac5f

Please sign in to comment.