diff --git a/app/assets/stylesheets/components/_header-notice.scss b/app/assets/stylesheets/components/_header-notice.scss new file mode 100644 index 000000000..61c8a6e55 --- /dev/null +++ b/app/assets/stylesheets/components/_header-notice.scss @@ -0,0 +1,32 @@ +.app-c-header-notice { + margin-bottom: govuk-spacing(8); +} + +.app-c-header-notice__header { + background-color: govuk-colour("black"); + padding: govuk-spacing(4); +} + +.app-c-header-notice__title { + @extend %govuk-heading-m; + color: govuk-colour("white"); + margin: 0; +} + +.app-c-header-notice__content { + border: $govuk-border-width solid govuk-colour("black"); + padding: govuk-spacing(4); +} + +.app-c-header-notice__list { + margin-bottom: 0; +} + +.app-c-header-notice__link-intro { + margin-bottom: govuk-spacing(1); +} + +.app-c-header-notice__link { + @extend %govuk-link; + font-weight: bold; +} diff --git a/app/presenters/content_item/no_deal_notice.rb b/app/presenters/content_item/no_deal_notice.rb new file mode 100644 index 000000000..b2914936c --- /dev/null +++ b/app/presenters/content_item/no_deal_notice.rb @@ -0,0 +1,55 @@ +module ContentItem + module NoDealNotice + include ActionView::Helpers::TagHelper + include ActionView::Helpers::UrlHelper + include ActionView::Context + + def has_no_deal_notice? + no_deal_notice.present? + end + + def no_deal_notice_component + if has_no_deal_notice? + { + title: no_deal_notice_title, + description: no_deal_notice_description, + link_intro: no_deal_notice_link_intro, + links: no_deal_links, + } + end + end + + private + + def no_deal_notice + content_item.dig("details", "brexit_no_deal_notice") + end + + def no_deal_notice_title + "The UK has left the EU" + end + + def no_deal_notice_description + "This page tells you what you will need to do from January 2021. Follow the current information for living, working, travelling, and doing business in the UK and EU until then." + end + + def no_deal_notice_link_intro + "For current information, read: " + end + + def no_deal_links + no_deal_notice.map do |link| + { + title: link["title"], + href: link["href"], + data_attributes: { + "module": "track-click", + "track-category": "no_deal_notice", + "track-action": link["href"], + "track-label": link["title"], + }, + } + end + end + end +end diff --git a/app/presenters/content_item_presenter.rb b/app/presenters/content_item_presenter.rb index 35da16732..7c18a4c57 100644 --- a/app/presenters/content_item_presenter.rb +++ b/app/presenters/content_item_presenter.rb @@ -1,5 +1,6 @@ class ContentItemPresenter include ContentItem::Withdrawable + include ContentItem::NoDealNotice include ApplicationHelper attr_reader :content_item, diff --git a/app/views/components/_header-notice.html.erb b/app/views/components/_header-notice.html.erb new file mode 100644 index 000000000..d77da2fcf --- /dev/null +++ b/app/views/components/_header-notice.html.erb @@ -0,0 +1,30 @@ +<% + title ||= false + description ||= false + link_intro ||= false + links ||= [] +%> +<% if title && description %> +
+
+

<%= title %>

+
+ +
+

<%= description %>

+ <% if links.count == 1 %> +

+ <% if link_intro %><%= link_intro %><% end %> + <%= link_to(links[0][:title], links[0][:href], data: links[0][:data_attributes], class: "app-c-header-notice__link") %> +

+ <% else %> + <% if link_intro %>

<%= link_intro %>

<% end %> + + <% end %> +
+
+<% end %> diff --git a/app/views/components/docs/header-notice.yml b/app/views/components/docs/header-notice.yml new file mode 100644 index 000000000..b013d7de9 --- /dev/null +++ b/app/views/components/docs/header-notice.yml @@ -0,0 +1,24 @@ +name: Header Notice +description: A bolder style of notice +shared_accessibility_criteria: + - link +examples: + default: + data: + title: "This is an important notice" + description: "Here is a message about this notice" + link_intro: "Look at these links: " + links: + - title: "This is a link" + href: "/this-is-a-link" + multiple_links: + data: + title: "This is an important notice" + description: "Here is a message about this notice" + link_intro: "Look at these links: " + links: + - title: "This is a link" + href: "/this-is-a-link" + - title: "This is a second link" + href: "/this-is-a-link" + diff --git a/app/views/content_items/case_study.html.erb b/app/views/content_items/case_study.html.erb index a35fe7fbf..4f541e883 100644 --- a/app/views/content_items/case_study.html.erb +++ b/app/views/content_items/case_study.html.erb @@ -16,6 +16,7 @@ <%= render 'shared/publisher_metadata_with_logo' %> <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component %> +<%= render 'components/header-notice', @content_item.no_deal_notice_component unless @content_item.withdrawal_notice_component %>
diff --git a/app/views/content_items/detailed_guide.html.erb b/app/views/content_items/detailed_guide.html.erb index 0876bf1ad..bb082ff6f 100644 --- a/app/views/content_items/detailed_guide.html.erb +++ b/app/views/content_items/detailed_guide.html.erb @@ -17,6 +17,7 @@ <%= render 'shared/publisher_metadata_with_logo' %> <%= render 'shared/history_notice', content_item: @content_item %> <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component %> +<%= render 'components/header-notice', @content_item.no_deal_notice_component unless @content_item.withdrawal_notice_component %>
diff --git a/app/views/content_items/document_collection.html.erb b/app/views/content_items/document_collection.html.erb index 08273a19f..8874c4d54 100644 --- a/app/views/content_items/document_collection.html.erb +++ b/app/views/content_items/document_collection.html.erb @@ -15,6 +15,7 @@
<%= render 'govuk_publishing_components/components/lead_paragraph', text: @content_item.description %> <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component %> + <%= render 'components/header-notice', @content_item.no_deal_notice_component unless @content_item.withdrawal_notice_component %> <%= render 'shared/history_notice', content_item: @content_item %>
diff --git a/app/views/content_items/html_publication.html.erb b/app/views/content_items/html_publication.html.erb index 299097e67..005caaa78 100644 --- a/app/views/content_items/html_publication.html.erb +++ b/app/views/content_items/html_publication.html.erb @@ -35,6 +35,7 @@ <% end %> <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component %> +<%= render 'components/header-notice', @content_item.no_deal_notice_component unless @content_item.withdrawal_notice_component %>
<%= render 'shared/history_notice', content_item: @content_item %> + <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component %> +<%= render 'components/header-notice', @content_item.no_deal_notice_component unless @content_item.withdrawal_notice_component %>
diff --git a/test/components/header_notice_test.rb b/test/components/header_notice_test.rb new file mode 100644 index 000000000..e82daec3f --- /dev/null +++ b/test/components/header_notice_test.rb @@ -0,0 +1,49 @@ +require "component_test_helper" + +class HeaderNoticeTest < ComponentTestCase + def component_name + "header-notice" + end + + test "doesn't render a header notice when no params are given" do + assert_empty render_component({}) + end + + test "doesn't render a header notice when no title is given" do + assert_empty render_component(links: [{ title: "test", href: "/test" }], description: "description") + end + + test "doesn't render a header notice when no description is given" do + assert_empty render_component(links: [{ title: "test", href: "/test" }], title: "title") + end + + test "renders a header notice with text correctly" do + render_component(title: "This is an important notice", description: "This is some important information about the content.") + + assert_select ".app-c-header-notice__title", text: "This is an important notice" + assert_select ".app-c-header-notice__content p", text: "This is some important information about the content." + end + + test "renders a header notice with an aria label" do + render_component(title: "This is an important notice", description: "This is some important information about the content.") + assert_select "section[aria-label=notice]" + end + + test "renders a header notice with one link" do + render_component(title: "This is an important notice", description: "This is a description", links: [{ title: "test", href: "/test" }]) + + assert_select ".app-c-header-notice__title", text: "This is an important notice" + assert_select ".app-c-header-notice__content p", text: "This is a description" + assert_select ".app-c-header-notice__link[href='/test']", text: "test" + end + + test "renders a header notice with multiple links" do + render_component(title: "This is an important notice", description: "This is a description", link_intro: "Look at these links: ", links: [{ title: "test", href: "/test" }, { title: "test2", href: "/test2" }]) + + assert_select ".app-c-header-notice__title", text: "This is an important notice" + assert_select ".app-c-header-notice__content p", text: "This is a description" + assert_select ".app-c-header-notice__link-intro", text: "Look at these links:" + assert_select ".app-c-header-notice__list .app-c-header-notice__link[href='/test']", text: "test" + assert_select ".app-c-header-notice__list .app-c-header-notice__link[href='/test2']", text: "test2" + end +end