Add margin_top_until_tablet option to chat entry component

I haven't used the margin helper here as 35px isn't supported by the design system's margin top override classes and I also want the margin top applied only up until tablet
alphagov · Nov 20, 2024 · 1f2566e · 1f2566e
1 parent c0a6e51
commit 1f2566e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 0 deletions.
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_chat-entry.scss b/app/assets/stylesheets/govuk_publishing_components/components/_chat-entry.scss
@@ -7,6 +7,12 @@
   padding: govuk-spacing(4);
 }
 
+.gem-c-chat-entry--margin-top-until-tablet {
+  @include govuk-media-query($until: tablet) {
+    margin-top: 35px;
+  }
+}
+
 .gem-c-chat-entry--border-top {
   border-top: 2px solid govuk-colour("blue");
   padding-top: govuk-spacing(5);

diff --git a/app/views/govuk_publishing_components/components/_chat_entry.html.erb b/app/views/govuk_publishing_components/components/_chat_entry.html.erb
@@ -8,11 +8,13 @@
   border_top ||= false
   border_bottom ||= false
   disable_ga4 ||= false
+  margin_top_until_tablet ||= false
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-chat-entry")
   component_helper.add_class("gem-c-chat-entry--border-top") if border_top
   component_helper.add_class("gem-c-chat-entry--border-bottom") if border_bottom
+  component_helper.add_class("gem-c-chat-entry--margin-top-until-tablet") if margin_top_until_tablet
   component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
 

diff --git a/app/views/govuk_publishing_components/components/docs/chat_entry.yml b/app/views/govuk_publishing_components/components/docs/chat_entry.yml
@@ -34,6 +34,10 @@ examples:
   with_margin_bottom:
     data:
       margin_bottom: 3
+  with_margin_top_until_tablet:
+    description: Adds a `.gem-c-chat-entry--margin-top-until-tablet` class that applies `margin-top:35px` on smaller screen sizes (i.e. tablets and below)
+    data:
+      margin_top_until_tablet: true
   without_ga4_tracking:
     description: |
       Disables GA4 tracking on the component. Tracking is enabled by default. This adds a data module and data-attributes with JSON data. See the [ga4-link-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.

diff --git a/spec/components/chat_entry_spec.rb b/spec/components/chat_entry_spec.rb
@@ -73,4 +73,12 @@ def component_name
     assert_select '.gem-c-chat-entry[data-module="ga4-link-tracker"]', false
     assert_select ".gem-c-chat-entry[data-ga4-link]", false
   end
+
+  it "renders the chat entry component with a margin-top-until-tablet class" do
+    render_component({
+      margin_top_until_tablet: true,
+    })
+
+    assert_select ".gem-c-chat-entry.gem-c-chat-entry--margin-top-until-tablet"
+  end
 end