From c51b915aff1257816b9778b1c051d70ecd5c35bf Mon Sep 17 00:00:00 2001 From: Jon Kirwan Date: Tue, 10 Dec 2024 13:30:58 +0000 Subject: [PATCH 1/2] Update Govspeak "Warning Text" component styles --- .../components/govspeak/_warning-callout.scss | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss index 1f2bf67a7b..466085385b 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss @@ -8,29 +8,24 @@ .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 { + @import "govuk/components/warning-text/warning-text"; + .help-notice { $icon-size: 35px; - $line-height-mobile: 20px; - $line-height-tablet: 25px; + $icon-spacing: 10px; margin: 2em 0; + padding-left: calc($icon-size + $icon-spacing); + position: relative; - // Add '!' icon - background-image: url("govuk_publishing_components/icon-important.svg"); - background-size: $icon-size $icon-size; - background-repeat: no-repeat; - min-height: $icon-size; - padding-left: $icon-size; - - // Center the icon around the baseline - padding-top: calc(($icon-size - $line-height-mobile) / 2); - - @include govuk-media-query($from: tablet) { - padding-top: calc(($icon-size - $line-height-tablet) / 2); + &::before { + content: "!"; + @include govuk-typography-weight-bold($important: false); + // stylelint-disable scss/at-extend-no-missing-placeholder + @extend .govuk-warning-text__icon; } p { - margin-left: 1em; @include govuk-font($size: 19, $weight: bold); } } From 118eeb8003204b2803c8178f4a01b90ef2a7acf3 Mon Sep 17 00:00:00 2001 From: Jon Kirwan Date: Tue, 10 Dec 2024 13:33:58 +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 18b6e907bd..7fe50e0012 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ * Use component wrapper on reorderable list component ([PR #4474](https://github.com/alphagov/govuk_publishing_components/pull/4474)) * Use "button" button type for copy to clipboard component ([PR #4480](https://github.com/alphagov/govuk_publishing_components/pull/4480)) * Use component wrapper on signup link component ([PR #4481](https://github.com/alphagov/govuk_publishing_components/pull/4481)) +* Update Govspeak "Warning Text" component styles ([PR #4487](https://github.com/alphagov/govuk_publishing_components/pull/4487)) ## 46.2.0