diff --git a/src/components/hmrc-account-header/account-header.yaml b/src/components/hmrc-account-header/account-header.yaml index 11d7d604..11e21ca6 100644 --- a/src/components/hmrc-account-header/account-header.yaml +++ b/src/components/hmrc-account-header/account-header.yaml @@ -25,20 +25,40 @@ examples: href: '/components/account-header/with-service-name/preview' cy: href: '/components/account-header/welsh-with-service-name/preview' +- name: global-service-name + data: + serviceName: 'My Service' +- name: overridden-global-service-name + data: + serviceName: 'My Global Service Name (unused)' + hmrcAccountHeader: + serviceName: 'My Actual Service Name' + abc: 'def' - name: all-available-options data: hmrcAccountHeader: - accountHomeHref: '#accountHomeHref' - messagesHref: '#messagesHref' - messageCount: '30' - checkProgressHref: '#checkProgress' - paperlessSettingsHref: '#paperlessSettingsHref' - personalDetailsHref: '#personalDetailsHref' - signOutHref: '#signOutHref' + serviceName: 'My Service' + accountHome: + href: '/account/home' + messages: + href: '/messages/href' + messageCount: '30' + checkProgress: + href: '/checkProgress' + paperlessSettings: + href: '/paperless/settings' + personalDetails: + href: '/personalDetails' + signOut: + href: '?signOut=true' language: 'en' languageToggle: en: href: '/components/account-header/with-service-name/preview' cy: href: '/components/account-header/welsh-with-service-name/preview' - serviceName: 'My service' + serviceName: 'My service' + homepageUrl: '/the-homepage' + serviceUrl: '/the-service' + containerClasses: 'the-header-container-classes govuk-width-container' + classes: 'the-header-classes' diff --git a/src/components/hmrc-account-header/example.njk b/src/components/hmrc-account-header/example.njk index 3ff71b16..1af8f5b3 100644 --- a/src/components/hmrc-account-header/example.njk +++ b/src/components/hmrc-account-header/example.njk @@ -1,9 +1,9 @@ {% extends 'layout-hmrc-account-header.html' %} {% block content %} -
+

HMRC Account Menu

-
+
{% endblock %} {% block bodyEnd %} diff --git a/src/components/hmrc-account-menu/account-menu.yaml b/src/components/hmrc-account-menu/account-menu.yaml index f061d793..31c741ba 100644 --- a/src/components/hmrc-account-menu/account-menu.yaml +++ b/src/components/hmrc-account-menu/account-menu.yaml @@ -1,50 +1,100 @@ params: -- name: accountHomeHref - type: string +- name: accountHome + type: object required: false - description: "The url of the Account home menu item. Defaults to #" -- name: messagesHref - type: string + description: The Account home menu item. + params: + - name: href + type: string + required: false + description: "The url of the Account home item. Defaults to #." + - name: active + type: boolean + required: false + description: Flag to mark the Account home item as active or not. +- name: messages + type: object required: false - description: The url of the Messages menu item. Defaults to / -- name: messageCount - type: number + description: The Messages menu item. + params: + - name: href + type: string + required: false + description: "The url of the Messages item. Defaults to #." + - name: active + type: string + required: false + description: Flag to mark the Messages item as active or not. + - name: messageCount + type: number + required: false + description: The number of messages to display in the notifacation badge next to Messages. Defaults to not being displayed. +- name: checkProgress + type: object required: false - description: "The number of messages to display in the notifacation badge next to Messages. Defaults to not being displayed" -- name: checkProgressHref - type: string - required: false - description: "The url of the Check progress menu item. Defaults to #" -- name: paperlessSettingsHref - type: string + description: The Check progress menu item. + params: + - name: href + type: string + required: false + description: "The url of the Check progress item. Defaults to #." + - name: active + type: string + required: false + description: Flag to mark the Check progress item as active or not. +- name: paperlessSettings + type: object required: false - description: "The url of the Manage your paperless settings submenu item. Defaults to #" -- name: personalDetailsHref + description: The Manage your paperless settings submenu item. + params: + - name: href + type: string + required: false + description: "The url of the Manage your paperless settings submenu item. Defaults to #." +- name: personalDetails type: string required: false - description: "The url of the Manage your personal details submenu item. Defaults to #" -- name: signOutHref + description: The Manage your personal details submenu item. + params: + - name: href + type: string + required: false + description: "The url of the Manage your personal details submenu item. Defaults to #." +- name: signOut type: string required: false - description: "The url of the Sign out menu item. Defaults to #" + description: The Sign out menu item. + params: + - name: href + type: string + required: false + description: "The url of the Sign out menu item. Defaults to #." examples: - name: default - description: The standard account menu as used on Personal Tax Account pages + description: The standard account menu as used on Personal Tax Account pages. data: {} - name: with-unread-messages - description: If you need to show the user they have unread messages + description: If you need to show the user they have unread messages. data: - messageCount: 2 + messages: + messageCount: 2 - name: with-navigaiton-urls - description: If you need to provide a custom urls for the menu items + description: If you need to provide a custom urls for the menu items. data: - accountHomeHref: "#account-home" - messagesHref: "#messages" - checkProgressHref: "#check-progress" - paperlessSettingsHref: "#paperless-settings" - personalDetailsHref: "#personal-details" - signOutHref: "#sign-out" + accountHome: + href: "#account-home" + active: true + messages: + href: "#messages" + checkProgress: + href: "#check-progress" + paperlessSettings: + href: "#paperless-settings" + personalDetails: + href: "#personal-details" + signOut: + href: "#sign-out" diff --git a/src/components/hmrc-account-menu/template.njk b/src/components/hmrc-account-menu/template.njk index a6d7a7b1..8e598669 100644 --- a/src/components/hmrc-account-menu/template.njk +++ b/src/components/hmrc-account-menu/template.njk @@ -2,7 +2,7 @@ diff --git a/src/components/hmrc-account-menu/template.test.js b/src/components/hmrc-account-menu/template.test.js index 38c64576..5547b648 100644 --- a/src/components/hmrc-account-menu/template.test.js +++ b/src/components/hmrc-account-menu/template.test.js @@ -47,12 +47,12 @@ describe('Account Menu', () => { const $detailsLink = $nav.find('a:contains("personal details")') const $signOutLink = $nav.find('a:contains("Sign out")') - expect($accountHomeLink.attr('href')).toEqual(example.accountHomeHref) - expect($messagesLink.attr('href')).toEqual(example.messagesHref) - expect($progressLink.attr('href')).toEqual(example.checkProgressHref) - expect($paperlessLink.attr('href')).toEqual(example.paperlessSettingsHref) - expect($detailsLink.attr('href')).toEqual(example.personalDetailsHref) - expect($signOutLink.attr('href')).toEqual(example.signOutHref) + expect($accountHomeLink.attr('href')).toEqual(example.accountHome.href) + expect($messagesLink.attr('href')).toEqual(example.messages.href) + expect($progressLink.attr('href')).toEqual(example.checkProgress.href) + expect($paperlessLink.attr('href')).toEqual(example.paperlessSettings.href) + expect($detailsLink.attr('href')).toEqual(example.personalDetails.href) + expect($signOutLink.attr('href')).toEqual(example.signOut.href) }) it('renders a notification badge with a message count', () => { @@ -62,7 +62,7 @@ describe('Account Menu', () => { const $messageCount = $('.hmrc-notification-badge') expect($messageCount).not.toBeNull() - expect($messageCount.text()).toEqual(example.messageCount.toString()) + expect($messageCount.text()).toEqual(example.messages.messageCount.toString()) }) }) }) diff --git a/src/govuk-prototype-kit.config.json b/src/govuk-prototype-kit.config.json index 315743dd..dd1b2a6a 100644 --- a/src/govuk-prototype-kit.config.json +++ b/src/govuk-prototype-kit.config.json @@ -1,6 +1,6 @@ { "assets": [ - "/components/account-menu/images" + "/components/hmrc-account-menu/images" ], "nunjucksPaths": [ "/layouts", diff --git a/src/layouts/layout-hmrc-account-header.html b/src/layouts/layout-hmrc-account-header.html index 42a39b0c..0a713fa3 100644 --- a/src/layouts/layout-hmrc-account-header.html +++ b/src/layouts/layout-hmrc-account-header.html @@ -7,11 +7,14 @@ {% include "includes/cookie-banner.html" %} {{ hmrcHeader({ - homepageUrl: "/", - serviceName: serviceName, - serviceUrl: "/", - containerClasses: "govuk-width-container", + homepageUrl: hmrcAccountHeader.homepageUrl, + serviceName: hmrcAccountHeader.serviceName or serviceName, + serviceUrl: hmrcAccountHeader.serviceUrl, + containerClasses: hmrcAccountHeader.headerContainerClasses or "govuk-width-container", language: hmrcAccountHeader.language, + attributes: hmrcAccountHeader.attributes, + classes: hmrcAccountHeader.classes, + containerClasses: hmrcAccountHeader.containerClasses, languageToggle: { en: { href: hmrcAccountHeader.languageToggle.en.href