From 8c5e5ee62cc328e1aac4b8ea5e336b147d7bfaec Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Mon, 27 Jan 2020 10:39:06 +0000 Subject: [PATCH 1/2] Revert "Revert "No deal notice"" --- .../components/_header-notice.scss | 32 +++++++++++ app/presenters/content_item/no_deal_notice.rb | 55 +++++++++++++++++++ app/presenters/content_item_presenter.rb | 1 + app/views/components/_header-notice.html.erb | 30 ++++++++++ app/views/components/docs/header-notice.yml | 24 ++++++++ app/views/content_items/case_study.html.erb | 1 + .../content_items/detailed_guide.html.erb | 1 + .../document_collection.html.erb | 1 + .../content_items/html_publication.html.erb | 1 + app/views/content_items/publication.html.erb | 2 + test/components/header_notice_test.rb | 49 +++++++++++++++++ 11 files changed, 197 insertions(+) create mode 100644 app/assets/stylesheets/components/_header-notice.scss create mode 100644 app/presenters/content_item/no_deal_notice.rb create mode 100644 app/views/components/_header-notice.html.erb create mode 100644 app/views/components/docs/header-notice.yml create mode 100644 test/components/header_notice_test.rb 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 %> +
    + <% links.each do |link| %> +
  • <%= link_to(link[:title], link[:href], data: link[:data_attributes], class: "app-c-header-notice__link") %>
    • + <% 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 From 0d7572eef7822a191de2c7c5b196a240529fdd54 Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Mon, 27 Jan 2020 13:59:51 +0000 Subject: [PATCH 2/2] Update content --- app/presenters/content_item/no_deal_notice.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/presenters/content_item/no_deal_notice.rb b/app/presenters/content_item/no_deal_notice.rb index b2914936c..a06d70f01 100644 --- a/app/presenters/content_item/no_deal_notice.rb +++ b/app/presenters/content_item/no_deal_notice.rb @@ -26,11 +26,11 @@ def no_deal_notice end def no_deal_notice_title - "The UK has left the EU" + "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. Follow the current information for living, working, travelling, and doing business in the UK and EU until then." + "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