From 1f2566efe602aa1d00bb2f0b2e18635fb8571e1b Mon Sep 17 00:00:00 2001 From: James Chan Date: Tue, 19 Nov 2024 18:30:31 +0000 Subject: [PATCH 1/2] 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 --- .../components/_chat-entry.scss | 6 ++++++ .../components/_chat_entry.html.erb | 2 ++ .../components/docs/chat_entry.yml | 4 ++++ spec/components/chat_entry_spec.rb | 8 ++++++++ 4 files changed, 20 insertions(+) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_chat-entry.scss b/app/assets/stylesheets/govuk_publishing_components/components/_chat-entry.scss index dd5e94e4ae..e53dda7d0d 100644 --- 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 index b494838d7c..81055461a4 100644 --- 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 index dd6edb99dd..48ec66e120 100644 --- 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 index a6e892d2f0..bec94aca8c 100644 --- 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 From bb5568a4dfb280dd81b8186ec7b00af620dc9f0d Mon Sep 17 00:00:00 2001 From: James Chan Date: Wed, 20 Nov 2024 10:06:33 +0000 Subject: [PATCH 2/2] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4de0c303df..a0fc285f6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ## Unreleased * Fix yellow focus colour overspill ([PR #4418](https://github.com/alphagov/govuk_publishing_components/pull/4418)) +* Add margin_top_until_tablet option to chat entry component ([PR #4417](https://github.com/alphagov/govuk_publishing_components/pull/4417)) ## 45.5.0