From 55efc20c3a5d3181bbf9b7f7b2fef6ec0cd9a56f Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 21 Oct 2024 15:40:13 +0100 Subject: [PATCH] Add shared helper and component wrapper helper - to govspeak - mainly to be able to pass a margin option to the component, but also because the component wrapper works well here - involves renaming a few classes to allow them to be passed to the component wrapper, specifically the disable youtube (adding a JS prefix) and direction-rtl (add a gem-c-govspeak prefix) otherwise the wrapper raises an error --- CHANGELOG.md | 4 ++++ .../components/govspeak.js | 2 +- .../_govspeak-html-publication.scss | 4 ++-- .../components/_govspeak.scss | 2 +- .../components/govspeak/_attachment.scss | 2 +- .../components/govspeak/_tables.scss | 6 ++--- .../components/govspeak/_typography.scss | 6 ++--- .../components/_govspeak.html.erb | 22 +++++++++---------- .../components/docs/govspeak.yml | 1 + .../govspeak_html_publication_spec.rb | 4 ++-- spec/components/govspeak_spec.rb | 4 ++-- spec/javascripts/components/govspeak-spec.js | 2 +- 12 files changed, 32 insertions(+), 27 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 80aa16486f..5a20333975 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ useful summary for people upgrading their application, not a replication of the commit log. +## Unreleased + +* Add shared helper and component wrapper helper to govspeak component ([PR #4325](https://github.com/alphagov/govuk_publishing_components/pull/4325)) + ## 44.4.2 * Fix ecommerce tracking of searches without query ([PR #4317](https://github.com/alphagov/govuk_publishing_components/pull/4317)) diff --git a/app/assets/javascripts/govuk_publishing_components/components/govspeak.js b/app/assets/javascripts/govuk_publishing_components/components/govspeak.js index 505c63ba51..7bafa06ff8 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/govspeak.js +++ b/app/assets/javascripts/govuk_publishing_components/components/govspeak.js @@ -7,7 +7,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; } Govspeak.prototype.init = function () { - if (this.$module.className.indexOf('disable-youtube') === -1) { + if (this.$module.className.indexOf('js-disable-youtube') === -1) { this.embedYoutube() } diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss b/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss index d368ad380f..c77cb95ede 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss @@ -11,7 +11,7 @@ // is because directly messing with the positioning of the sticky element produces undesirable results. // The nested govspeak component handles its own text direction independently, but will // coincide with the direction of its parent anyway in all usecases. - &.direction-rtl { + &.gem-c-govspeak--direction-rtl { direction: rtl; text-align: start; } @@ -57,7 +57,7 @@ h6 .number { margin-right: .1em; - .direction-rtl & { + .gem-c-govspeak--direction-rtl & { margin-right: 0; margin-left: .1em; } diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss b/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss index b286c62491..a8b06394ec 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss @@ -24,7 +24,7 @@ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items. .gem-c-govspeak { - &.direction-rtl { + &.gem-c-govspeak--direction-rtl { direction: rtl; text-align: start; } diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss index 4516cf9979..e8063fb24c 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss @@ -137,7 +137,7 @@ } } - &.direction-rtl .attachment { + &.gem-c-govspeak--direction-rtl .attachment { padding: govuk-spacing(3) ($thumbnail-width + govuk-spacing(6)) 0 0; .attachment-thumb { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss index c28987f4f1..b8ff7194b3 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss @@ -58,8 +58,8 @@ } // Add rtl table styling when `direction: "rtl"` is set -.govuk-govspeak.direction-rtl, -.gem-c-govspeak.direction-rtl { +.govuk-govspeak.gem-c-govspeak--direction-rtl, +.gem-c-govspeak.gem-c-govspeak--direction-rtl { table { caption { text-align: right; @@ -78,7 +78,7 @@ // Add rtl table styling when `.direction-rtl` is set on a parent element // stylelint-disable max-nesting-depth -.direction-rtl { +.gem-c-govspeak--direction-rtl { .govspeak, .gem-c-govspeak { table { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss index fb47fb5388..fba329eff6 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss @@ -15,8 +15,8 @@ .gem-c-govspeak { @include markdown-typography; - &.direction-rtl ol, - &.direction-rtl ul { + &.gem-c-govspeak--direction-rtl ol, + &.gem-c-govspeak--direction-rtl ul { margin-left: 0; margin-right: govuk-spacing(4); @@ -62,7 +62,7 @@ } } - &.direction-rtl blockquote { + &.gem-c-govspeak--direction-rtl blockquote { padding: 0 govuk-spacing(4) 0 0; @include govuk-media-query($from: desktop) { diff --git a/app/views/govuk_publishing_components/components/_govspeak.html.erb b/app/views/govuk_publishing_components/components/_govspeak.html.erb index 3cc908d8ab..bc78cb31a8 100644 --- a/app/views/govuk_publishing_components/components/_govspeak.html.erb +++ b/app/views/govuk_publishing_components/components/_govspeak.html.erb @@ -2,20 +2,20 @@ add_gem_component_stylesheet("govspeak") inverse ||= false - direction_class = "direction-#{direction}" if local_assigns.include?(:direction) + local_assigns[:margin_bottom] ||= 0 + direction_class = "gem-c-govspeak--direction-#{direction}" if local_assigns.include?(:direction) disable_youtube_expansions = local_assigns.fetch(:disable_youtube_expansions) if local_assigns.include?(:disable_youtube_expansions) - classes = [] - classes << direction_class if direction_class - classes << "disable-youtube" if disable_youtube_expansions - classes << "gem-c-govspeak--inverse" if inverse - - data_modules = "govspeak" - data_attributes = { module: data_modules } - + shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) + component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) + component_helper.add_class("gem-c-govspeak govuk-govspeak") + component_helper.add_class(direction_class) if direction_class + component_helper.add_class("js-disable-youtube") if disable_youtube_expansions + component_helper.add_class("gem-c-govspeak--inverse") if inverse + component_helper.add_class(shared_helper.get_margin_bottom) + component_helper.add_data_attribute({ module: "govspeak" }) %> - -<%= tag.div(class: "gem-c-govspeak govuk-govspeak " + classes.join(" "), data: data_attributes) do %> +<%= tag.div(**component_helper.all_attributes) do %> <% if local_assigns.include?(:content) %> <% if content.html_safe? %> <%= content %> diff --git a/app/views/govuk_publishing_components/components/docs/govspeak.yml b/app/views/govuk_publishing_components/components/docs/govspeak.yml index a9fecc3c77..07647e6065 100644 --- a/app/views/govuk_publishing_components/components/docs/govspeak.yml +++ b/app/views/govuk_publishing_components/components/docs/govspeak.yml @@ -19,6 +19,7 @@ shared_accessibility_criteria: - link accessibility_excluded_rules: - landmark-complementary-is-top-level # Statistic headlines are generating an aside element which can not be a top level in the examples +uses_component_wrapper_helper: true examples: basic_content: data: diff --git a/spec/components/govspeak_html_publication_spec.rb b/spec/components/govspeak_html_publication_spec.rb index 38383ff23e..282041c028 100644 --- a/spec/components/govspeak_html_publication_spec.rb +++ b/spec/components/govspeak_html_publication_spec.rb @@ -18,7 +18,7 @@ def component_name content: "

right to left

".html_safe, ) - assert_select ".direction-rtl h2", text: "right to left" + assert_select ".gem-c-govspeak--direction-rtl h2", text: "right to left" end it "can disable youtube expansion" do @@ -27,7 +27,7 @@ def component_name content: "

youtube

".html_safe, ) - assert_select ".disable-youtube h2", text: "youtube" + assert_select ".js-disable-youtube h2", text: "youtube" end it "accepts a block" do diff --git a/spec/components/govspeak_spec.rb b/spec/components/govspeak_spec.rb index 9dc0190879..f9e5004d12 100644 --- a/spec/components/govspeak_spec.rb +++ b/spec/components/govspeak_spec.rb @@ -27,7 +27,7 @@ def component_name content: "

right to left

".html_safe, ) - assert_select ".direction-rtl h2", text: "right to left" + assert_select ".gem-c-govspeak--direction-rtl h2", text: "right to left" end it "can disable youtube expansion" do @@ -36,7 +36,7 @@ def component_name content: "

youtube

".html_safe, ) - assert_select ".disable-youtube h2", text: "youtube" + assert_select ".js-disable-youtube h2", text: "youtube" end it "accepts a block" do diff --git a/spec/javascripts/components/govspeak-spec.js b/spec/javascripts/components/govspeak-spec.js index cb33a36cd1..46fb9b1141 100644 --- a/spec/javascripts/components/govspeak-spec.js +++ b/spec/javascripts/components/govspeak-spec.js @@ -34,7 +34,7 @@ describe('Govspeak', function () { it('allows disabling embeds of youtube videos', function () { container = document.createElement('div') container.innerHTML = - '
' + + '
' + '

Agile at GDS

' + '
' document.body.appendChild(container)