Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PLATUI-2900: Updating HmrcHeader to take in custom menu button text a… #289

Merged
merged 1 commit into from
Mar 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 15 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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)))
}
Original file line number Diff line number Diff line change
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"}
}
Original file line number Diff line number Diff line change
@@ -1 +1 @@
6.4.0
6.11.0
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"name" : "hmrcHeader"
}
Original file line number Diff line number Diff line change
@@ -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"
}
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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")
}
}
}