Skip to content

Commit

Permalink
Remove brand colour link class and make branded share icons black
Browse files Browse the repository at this point in the history
Share links need to have a black icon with blue links, but the no 10 page needs to retain black links.
  • Loading branch information
AshGDS committed Oct 21, 2024
1 parent dd823ab commit 4050c3e
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 44 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -115,3 +115,15 @@ $column-width: 9.5em;
@include govuk-font(19, $weight: bold);
}
}

.gem-c-share-links--black-icons {
.gem-c-share-links__link-icon {
color: govuk-colour("black");
}
}

.gem-c-share-links--black-links {
.gem-c-share-links__label {
color: govuk-colour("black");
}
}
Original file line number Diff line number Diff line change
@@ -1,21 +1,6 @@
@mixin organisation-brand-colour {
@each $organisation in map-keys($govuk-colours-organisations) {
.brand--#{$organisation} {
.brand__color {
color: govuk-organisation-colour($organisation);

&:link,
&:visited,
&:active {
color: govuk-organisation-colour($organisation);
}

&:hover,
&:focus {
color: $govuk-focus-text-colour;
}
}

// the & declaration allows border-color to also be applied to the parent
// element as required by the heading component, adds 2KB to the CSS
&.brand__border-color,
Expand All @@ -32,21 +17,6 @@
// the "the" prefix was dropped, this is maintained here for backwards
// compatibility
.brand--the-office-of-the-leader-of-the-house-of-commons {
.brand__color {
color: govuk-organisation-colour("office-of-the-leader-of-the-house-of-commons");

&:link,
&:visited,
&:active {
color: govuk-organisation-colour("office-of-the-leader-of-the-house-of-commons");
}

&:hover,
&:focus {
color: $govuk-focus-text-colour;
}
}

&.brand__border-color,
.brand__border-color {
border-color: govuk-organisation-colour("office-of-the-leader-of-the-house-of-commons", $contrast-safe: false);
Expand All @@ -57,8 +27,6 @@

.brand--prime-ministers-office-10-downing-street {
.brand__color {
color: govuk-colour("black");

&:link,
&:visited,
&:active {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@
columns ||= false
square_icons ||= false

brand ||= false
brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
black_icons ||= false
black_links ||= false

classes = %w(gem-c-share-links govuk-!-display-none-print)
classes << "gem-c-share-links--stacked" if stacked
classes << "gem-c-share-links--columns" if columns
classes << "gem-c-share-links--square-icons" if square_icons

classes << brand_helper.brand_class
classes << "gem-c-share-links--black-icons" if black_icons
classes << "gem-c-share-links--black-links" if black_links

data_attributes ||= {}
((data_attributes[:module] ||= "") << " " << "ga4-link-tracker").strip! if track_as_sharing || track_as_follow
Expand Down Expand Up @@ -74,7 +74,7 @@
target: "_blank",
rel: "noopener noreferrer external",
data: data_attributes,
class: "govuk-link govuk-link--no-underline gem-c-share-links__link #{brand_helper.color_class}" do %>
class: "govuk-link govuk-link--no-underline gem-c-share-links__link" do %>
<span class="gem-c-share-links__link-icon">
<% if link[:icon] == 'facebook' %>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,20 @@ examples:
icon: 'facebook'
}
]
with_branding:
description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component_branding.md) can be added to the component as shown.
with_black_icons:
data:
brand: 'attorney-generals-office'
black_icons: true
links: [
{
href: 'share',
text: 'Follow the Attorney General on Twitter',
hidden_text: '',
icon: 'twitter'
}
]
with_black_links:
data:
black_links: true
links: [
{
href: 'share',
Expand Down Expand Up @@ -208,7 +218,6 @@ examples:
with_all_icons:
data:
stacked: true
brand: 'hm-treasury'
links: [
{
href: '/facebook-share-link',
Expand Down
21 changes: 18 additions & 3 deletions spec/components/share_links_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,24 @@ def links
assert_select '.gem-c-share-links__link[data-ga4-link="{\"event_name\":\"navigation\",\"type\":\"overwritten type 2\",\"index_link\":1,\"index_total\":1,\"section\":\"This is another section\"}"]'
end

it "adds branding correctly" do
render_component(links: [links[0]], brand: "attorney-generals-office")
assert_select ".gem-c-share-links.brand--attorney-generals-office .gem-c-share-links__link.brand__color"
it "adds black links correctly" do
render_component(links: [links[0]], black_links: true)
assert_select ".gem-c-share-links.gem-c-share-links--black-links"
end

it "has no black links by default" do
render_component(links: [links[0]])
assert_select ".gem-c-share-links.gem-c-share-links--black-links", false
end

it "adds black icons correctly" do
render_component(links: [links[0]], black_icons: true)
assert_select ".gem-c-share-links.gem-c-share-links--black-icons"
end

it "has no black icons by default" do
render_component(links: [links[0]])
assert_select ".gem-c-share-links.gem-c-share-links--black-icons", false
end

it "arranges in columns" do
Expand Down

0 comments on commit 4050c3e

Please sign in to comment.