From f96d85ecae3a1521e2719311de78bf5d0df5369d Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Fri, 24 Jan 2020 11:39:03 +0000 Subject: [PATCH 1/4] Add header-notice component --- .../components/_header-notice.scss | 32 ++++++++++++ app/views/components/_header-notice.html.erb | 30 ++++++++++++ app/views/components/docs/header-notice.yml | 24 +++++++++ test/components/header_notice_test.rb | 49 +++++++++++++++++++ 4 files changed, 135 insertions(+) create mode 100644 app/assets/stylesheets/components/_header-notice.scss 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/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/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 27f421bb2df3fcf5cda4452d600aba2620ecb779 Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Fri, 24 Jan 2020 11:42:26 +0000 Subject: [PATCH 2/4] Add no deal notice module --- app/presenters/content_item/no_deal_notice.rb | 55 +++++++++++++++++++ app/presenters/content_item_presenter.rb | 1 + 2 files changed, 56 insertions(+) create mode 100644 app/presenters/content_item/no_deal_notice.rb 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..d3ce841bc --- /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 will the leave the EU with a deal" + end + + def no_deal_notice_description + "You do not need to follow this guidance now. It will only apply if the UK and EU do not reach an agreement" + end + + def no_deal_notice_link_intro + "Follow this guidance instead: " + 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, From 8b1a2d3afe18ba6491d7db89a66cb17d12ef00a4 Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Tue, 14 Jan 2020 12:28:55 +0000 Subject: [PATCH 3/4] Add banner to formats and hide if content is withdrawn --- app/views/content_items/case_study.html.erb | 1 + app/views/content_items/detailed_guide.html.erb | 1 + app/views/content_items/document_collection.html.erb | 1 + app/views/content_items/html_publication.html.erb | 1 + app/views/content_items/publication.html.erb | 2 ++ 5 files changed, 6 insertions(+) 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 %>
From 0d15b1039b75fa2b5183604d6fc74de0a91e7122 Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Fri, 24 Jan 2020 12:05:28 +0000 Subject: [PATCH 4/4] Update content --- app/presenters/content_item/no_deal_notice.rb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/presenters/content_item/no_deal_notice.rb b/app/presenters/content_item/no_deal_notice.rb index d3ce841bc..b2914936c 100644 --- a/app/presenters/content_item/no_deal_notice.rb +++ b/app/presenters/content_item/no_deal_notice.rb @@ -26,15 +26,15 @@ def no_deal_notice end def no_deal_notice_title - "The UK will the leave the EU with a deal" + "The UK has left the EU" end def no_deal_notice_description - "You do not need to follow this guidance now. It will only apply if the UK and EU do not reach an agreement" + "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 - "Follow this guidance instead: " + "For current information, read: " end def no_deal_links