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

@@ -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))

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()
     }
 

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;
       }

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;
   }

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 {

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 {

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) {

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 %>

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:

spec/components/govspeak_html_publication_spec.rb

@@ -18,7 +18,7 @@ def component_name
       content: "<h2>right to left</h2>".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: "<h2>youtube</h2>".html_safe,
     )
 
-    assert_select ".disable-youtube h2", text: "youtube"
+    assert_select ".js-disable-youtube h2", text: "youtube"
   end
 
   it "accepts a block" do

spec/components/govspeak_spec.rb

@@ -27,7 +27,7 @@ def component_name
       content: "<h2>right to left</h2>".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: "<h2>youtube</h2>".html_safe,
     )
 
-    assert_select ".disable-youtube h2", text: "youtube"
+    assert_select ".js-disable-youtube h2", text: "youtube"
   end
 
   it "accepts a block" do

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 =
-        '<div class="gem-c-govspeak govuk-govspeak disable-youtube" data-module="govspeak">' +
+        '<div class="gem-c-govspeak govuk-govspeak js-disable-youtube" data-module="govspeak">' +
           '<p><a href="https://www.youtube.com/watch?v=0XpAtr24uUQ">Agile at GDS</a></p>' +
         '<div>'
       document.body.appendChild(container)