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..a06d70f01 --- /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 is leaving the EU" + end + + def no_deal_notice_description + "This page tells you what you will need to do from January 2021. Sign up for email alerts to find out when it is updated.".html_safe + 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