diff --git a/app/assets/stylesheets/components/_banner.scss b/app/assets/stylesheets/components/_banner.scss index 67303f732..b9ce2252b 100644 --- a/app/assets/stylesheets/components/_banner.scss +++ b/app/assets/stylesheets/components/_banner.scss @@ -6,7 +6,6 @@ color: govuk-colour("white"); padding: govuk-spacing(3); clear: both; - @include responsive-bottom-margin; @include govuk-font(19); @include govuk-media-query($from: tablet) { diff --git a/app/views/components/_banner.html.erb b/app/views/components/_banner.html.erb index 37eeedada..102370581 100644 --- a/app/views/components/_banner.html.erb +++ b/app/views/components/_banner.html.erb @@ -1,8 +1,19 @@ -<% add_app_component_stylesheet("banner") %> <% + add_app_component_stylesheet("banner") + title ||= false aside ||= false large_text = !title && !aside + local_assigns[:margin_bottom] ||= 7 + + component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) + component_helper.add_class("app-c-banner") + component_helper.add_class("app-c-banner--aside") if aside + component_helper.add_aria_attribute({ label: "Notice" }) + component_helper.set_lang("en") + component_helper.add_data_attribute({ module: "ga4-link-tracker" }) + component_helper.add_data_attribute({ ga4_track_links_only: "" }) + component_helper.add_data_attribute({ ga4_link: { event_name: "navigation", type: "callout" } }) %> <% content_block = capture do %> <% if title %> @@ -12,15 +23,9 @@ <%= text %>
<% end %> - +<% end %> diff --git a/app/views/components/docs/banner.yml b/app/views/components/docs/banner.yml index 2da76371a..e97e7834c 100644 --- a/app/views/components/docs/banner.yml +++ b/app/views/components/docs/banner.yml @@ -10,6 +10,7 @@ accessibility_criteria: | - be visually distinct from other content on the page - have an accessible name that describes the banner as a notice - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast) +uses_component_wrapper_helper: true examples: default: data: diff --git a/app/views/content_items/_attachments_list.html.erb b/app/views/content_items/_attachments_list.html.erb index 384bca740..4e5765098 100644 --- a/app/views/content_items/_attachments_list.html.erb +++ b/app/views/content_items/_attachments_list.html.erb @@ -2,7 +2,7 @@