diff --git a/CHANGELOG.md b/CHANGELOG.md index cf90e04a5f..794e784d6f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ## Unreleased * Tidy up untranslated content and formatting on accordion docs ([PR #1958](https://github.com/alphagov/govuk_publishing_components/pull/1958)) PATCH * Add visual regression testing tool Percy ([PR #1013](https://github.com/alphagov/govuk_publishing_components/pull/1013)) PATCH +* Remove @extend from component Sass ([PR #2002](https://github.com/alphagov/govuk_publishing_components/pull/2002)) PATCH ## 24.9.1 diff --git a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js index 45cf204f28..926fe1dad1 100644 --- a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +++ b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js @@ -188,7 +188,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; toggleStatus.classList.add('govuk-visually-hidden', 'mc-toggle-status') toggleStatus.setAttribute('role', 'alert') - link.classList.add('mc-toggle-button') + link.classList.add('govuk-body-s', 'mc-toggle-button') link.appendChild(toggleText) link.appendChild(toggleStatus) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss b/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss index bc35de4586..9b6f497570 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss @@ -1,5 +1,3 @@ -$gem-hover-dark-background: #dddcdb; - .gem-c-action-link { display: table; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_button.scss b/app/assets/stylesheets/govuk_publishing_components/components/_button.scss index f36b30cb2b..ab022d0229 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_button.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_button.scss @@ -1,13 +1,5 @@ @import "govuk/components/button/button"; -$gem-secondary-button-colour: #00823b; -$gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%); -$gem-secondary-button-background-colour: govuk-colour("white"); -$gem-secondary-button-hover-background-colour: govuk-colour("light-grey", $legacy: "grey-4"); - -$gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1"); -$gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%); - // Because govuk-frontend adds a responsive bottom margin by default for each component // we reset it to zero so we can set it separately using `gem-c-button--bottom-margin` // If we decide to use responsive margins consistently across components we can remove this diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss b/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss index f61f8f19bc..7bbbff211b 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss @@ -6,7 +6,6 @@ $transition-campaign-dark-blue: #1e1348; } .gem-c-contextual-sidebar__brexit-heading { - @extend %govuk-heading-s; margin-top: govuk-spacing(3); margin-bottom: govuk-spacing(2); } @@ -24,7 +23,6 @@ $transition-campaign-dark-blue: #1e1348; } .gem-c-contextual-sidebar__brexit-text { - @extend %govuk-link; @include govuk-font(16); margin-top: 0; @@ -38,6 +36,8 @@ $transition-campaign-dark-blue: #1e1348; } .gem-c-contextual-sidebar__brexit-cta:focus { + box-shadow: 0 $govuk-focus-width $govuk-focus-text-colour; + .gem-c-contextual-sidebar__brexit-text { text-decoration: none; } diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss b/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss index 7dc98be6b0..a518852e20 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss @@ -50,11 +50,10 @@ } .gem-c-highlight-boxes__title { - @extend %govuk-link; @include govuk-font(19, $weight: bold); display: block; text-decoration: underline; - margin-bottom: 5px; + margin-bottom: govuk-spacing(1); } .gem-c-highlight-boxes--inverse .gem-c-highlight-boxes__title { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss b/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss index c6aea7919a..675be7ec8a 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss @@ -18,7 +18,6 @@ } .gem-c-pagination__link { - @extend %govuk-link; display: block; text-decoration: none; padding-bottom: govuk-spacing(4); diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss b/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss index bc9e70f5ba..2bb25b02e5 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss @@ -41,7 +41,6 @@ $gem-c-print-link-background-height: 18px; } .gem-c-print-link__button { - @extend %govuk-body-s; border: 1px solid $govuk-border-colour; color: $govuk-link-colour; cursor: pointer; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss b/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss index 5b86ba970e..c28a2d03bf 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss @@ -66,7 +66,6 @@ } .gem-c-related-navigation__section-link { - @extend %govuk-link; font-weight: bold; @include govuk-template-link-focus-override; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss b/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss index 115969163c..2380ae4a4f 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss @@ -20,7 +20,6 @@ $share-button-height: 32px; } .gem-c-share-links__link { - @extend %govuk-link; @include govuk-font(16, $weight: bold); margin-right: govuk-spacing(6); text-decoration: none; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss b/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss index b33a36baaf..4794c68986 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss @@ -46,7 +46,3 @@ .gem-c-step-nav-related__link-item { margin-top: govuk-spacing(3); } - -.gem-c-step-nav-related__link { - @extend %govuk-link; -} diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss b/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss index 6628ffcf7f..39a3cb242e 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss @@ -44,7 +44,6 @@ } .gem-c-subscription-links__item { - @extend %govuk-link; display: inline-block; text-decoration: none; background-repeat: no-repeat; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss b/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss index d1ee76499e..1e792573a7 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss @@ -30,10 +30,6 @@ } } -.gem-c-translation-nav__link { - @extend %govuk-link; -} - .gem-c-translation-nav--inverse { border-color: govuk-colour("white"); diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss index fe3a971326..7c1a9f45f1 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss @@ -1,7 +1,21 @@ -@import "govuk/components/button/button"; - // stylelint-disable scss/at-extend-no-missing-placeholder .gem-c-govspeak { + @import "govuk/components/button/button"; + + // Some links in Govspeak should look like buttons[1] when using: + // ``` + // {button}[Random page](https://gov.uk/random){/button} + // ```. + // + // To make sure that the link styles don't override the button styles this + // needs more specificity. + // + // Govspeak targets link by using element selectors; so the selector + // `.gem-c-govspeak a:link` will override `.govuk-button`. Extending + // `govuk-button` here gives `gem-c-govspeak .gem-c-button` and prevents the + // link-that-looks-like-a-button from being overriden. + + // [1]: https://github.com/alphagov/govspeak#button .gem-c-button { @extend .govuk-button; } diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss index 0dfd191be2..63b034d44e 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss @@ -271,7 +271,6 @@ } .mc-toggle-button { - @extend %govuk-body-s; border: 1px solid $govuk-border-colour; color: $govuk-link-colour; cursor: pointer; diff --git a/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss b/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss index f526dc5f5b..535d87c759 100644 --- a/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss +++ b/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss @@ -2,3 +2,18 @@ // It provides govuk-frontend but adds no weight to the compiled CSS @import "components/helpers/govuk-frontend-settings"; @import "govuk/base"; + +@import 'components/mixins/margins'; +// TODO: remove this focus override when govuk_template is no longer used +@import 'components/mixins/govuk-template-link-focus-override'; +@import 'components/mixins/css3'; + +$gem-secondary-button-colour: #00823b; +$gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%); +$gem-secondary-button-background-colour: govuk-colour("white"); +$gem-secondary-button-hover-background-colour: govuk-colour("light-grey", $legacy: "grey-4"); + +$gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1"); +$gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%); + +$gem-hover-dark-background: #dddcdb; diff --git a/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb b/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb index c490c66493..897ac94546 100644 --- a/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb +++ b/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb @@ -17,7 +17,7 @@ <%= link_to( content_item[:link].fetch(:text), content_item[:link].fetch(:path), - class: "gem-c-highlight-boxes__title #{"gem-c-highlight-boxes__title--featured" if content_item[:link][:featured]}", + class: "govuk-link gem-c-highlight-boxes__title #{"gem-c-highlight-boxes__title--featured" if content_item[:link][:featured]}", data: content_item[:link][:data_attributes] ) %> diff --git a/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb b/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb index 817c4580e3..322765f8c2 100644 --- a/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb +++ b/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb @@ -8,7 +8,7 @@ <% if local_assigns.include?(:previous_page) %>

  • <% end %> <%= link_to email_link_text, sl_helper.email_signup_link, { - class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link", + class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link", data: sl_helper.email_signup_link_data_attributes, lang: email_signup_link_text_locale } %> @@ -50,13 +50,13 @@ <%= sl_helper.feed_link_text %> <% end %> <%= tag.button feed_link_text, { - class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button", + class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button", data: sl_helper.feed_link_data_attributes, lang: feed_link_text_locale } if sl_helper.feed_link_box_value %> <%= link_to feed_link_text, sl_helper.feed_link, { - class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link", + class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link", data: sl_helper.feed_link_data_attributes, lang: feed_link_text_locale } unless sl_helper.feed_link_box_value %> diff --git a/app/views/govuk_publishing_components/components/_translation_nav.html.erb b/app/views/govuk_publishing_components/components/_translation_nav.html.erb index 27705164f6..9f99298a1c 100644 --- a/app/views/govuk_publishing_components/components/_translation_nav.html.erb +++ b/app/views/govuk_publishing_components/components/_translation_nav.html.erb @@ -19,7 +19,7 @@ hreflang: translation[:locale], lang: translation[:locale], rel: "alternate", - class: "gem-c-translation-nav__link #{brand_helper.color_class}", + class: "govuk-link gem-c-translation-nav__link #{brand_helper.color_class}", data: translation[:data_attributes] %> <% end %> diff --git a/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb b/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb index d5b9da5f91..f2cf1402d8 100644 --- a/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +++ b/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb @@ -16,7 +16,7 @@ data: data_attributes, aria: { label: "#{t("components.related_navigation.take_action_list.aria_label")} #{link_text}" }, lang: shared_helper.t_locale("components.related_navigation.transition.title") do %> -

    <%= t("components.related_navigation.transition.title") %>

    +

    <%= t("components.related_navigation.transition.title") %>

    • <%= image_tag 'govuk_publishing_components/take-action-red.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %> diff --git a/lib/govuk_publishing_components/presenters/related_navigation_helper.rb b/lib/govuk_publishing_components/presenters/related_navigation_helper.rb index 4ac3c88c3d..201747255b 100644 --- a/lib/govuk_publishing_components/presenters/related_navigation_helper.rb +++ b/lib/govuk_publishing_components/presenters/related_navigation_helper.rb @@ -67,6 +67,7 @@ def construct_section_heading(section_title) def section_css_class(css_class, section_title, link: {}, link_is_inline: false) css_classes = [css_class] + css_classes << "govuk-link" css_classes << "#{css_class}--#{@context}" unless @context.nil? css_classes << "#{css_class}--inline" if link_is_inline diff --git a/spec/components/step_by_step_nav_related_spec.rb b/spec/components/step_by_step_nav_related_spec.rb index dba2972a38..cbfe1fb93e 100644 --- a/spec/components/step_by_step_nav_related_spec.rb +++ b/spec/components/step_by_step_nav_related_spec.rb @@ -59,7 +59,7 @@ def two_links_with_tracking it "displays one link inside a heading" do render_component(links: one_link) - this_link = ".gem-c-step-nav-related .gem-c-step-nav-related__heading .gem-c-step-nav-related__link" + this_link = ".gem-c-step-nav-related .gem-c-step-nav-related__heading .govuk-link" assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__heading .gem-c-step-nav-related__pretitle", text: "Part of" assert_select "#{this_link}[href='/link1']", text: "Link 1" @@ -73,10 +73,10 @@ def two_links_with_tracking it "displays more than one link in a list" do render_component(links: two_links) - this_link = ".gem-c-step-nav-related .gem-c-step-nav-related__links .gem-c-step-nav-related__link[href='/link2']" + this_link = ".gem-c-step-nav-related .gem-c-step-nav-related__links .govuk-link[href='/link2']" assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__heading .gem-c-step-nav-related__pretitle", text: "Part of" - assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__links .gem-c-step-nav-related__link[href='/link1']", text: "Link 1" + assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__links .govuk-link[href='/link1']", text: "Link 1" assert_select this_link, text: "Link 2" assert_select "#{this_link}[data-track-category='stepNavPartOfClicked']" assert_select "#{this_link}[data-track-action='Part of']" @@ -89,26 +89,26 @@ def two_links_with_tracking render_component(links: one_link, pretitle: "Moo") assert_select ".gem-c-step-nav-related__pretitle", text: "Moo" - assert_select ".gem-c-step-nav-related__link[data-track-action='Moo']" + assert_select ".govuk-link[data-track-action='Moo']" end it "adds a tracking id to one link" do render_component(links: one_link_with_tracking) - assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__link[data-track-options='{\"dimension96\" : \"peter\" }']" + assert_select ".gem-c-step-nav-related .govuk-link[data-track-options='{\"dimension96\" : \"peter\" }']" end it "adds a tracking id to every link when there are more than one" do render_component(links: two_links_with_tracking) - assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__link-item:nth-child(1) .gem-c-step-nav-related__link[data-track-options='{\"dimension96\" : \"peter\" }']" - assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__link-item:nth-child(2) .gem-c-step-nav-related__link[data-track-options='{\"dimension96\" : \"paul\" }']" + assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__link-item:nth-child(1) .govuk-link[data-track-options='{\"dimension96\" : \"peter\" }']" + assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__link-item:nth-child(2) .govuk-link[data-track-options='{\"dimension96\" : \"paul\" }']" end it "displays as a list when always_display_as_list is passed in" do render_component(links: one_link, always_display_as_list: true) assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__heading .gem-c-step-nav-related__pretitle", text: "Part of" - assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__links .gem-c-step-nav-related__link[href='/link1']", text: "Link 1" + assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__links .govuk-link[href='/link1']", text: "Link 1" end end diff --git a/spec/features/step_nav_helper_spec.rb b/spec/features/step_nav_helper_spec.rb index 8846c4934c..5292be2b2e 100644 --- a/spec/features/step_nav_helper_spec.rb +++ b/spec/features/step_nav_helper_spec.rb @@ -28,7 +28,7 @@ expect(page).to have_selector(".gem-c-step-nav-related") within(".gem-c-step-nav-related") do - expect(page).to have_selector(".gem-c-step-nav-related__link", count: 1) + expect(page).to have_selector(".govuk-link", count: 1) expect(page).to have_link("Learn to spacewalk: small step by giant leap", href: "/learn-to-spacewalk") end end @@ -58,7 +58,7 @@ expect(page).to have_selector(".gem-c-step-nav-related") within(".gem-c-step-nav-related") do - expect(page).to have_selector(".gem-c-step-nav-related__link", count: 1) + expect(page).to have_selector(".govuk-link", count: 1) expect(page).to have_link("Learn to spacewalk: small step by giant leap", href: "/learn-to-spacewalk") end end