Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove left border from the super nav menu button #4631

Merged
merged 2 commits into from
Feb 18, 2025
Merged

Remove left border from the super nav menu button #4631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6c33bb2
Remove left border from the super nav menu button
MartinJJones Feb 14, 2025
d3af7e0
Update CHANGELOG.md
MartinJJones Feb 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
## Unreleased

* Make account layout respect `for_static` ([PR #4630](https://github.com/alphagov/govuk_publishing_components/pull/4630))
* Remove left border from the super nav menu button ([PR #4631](https://github.com/alphagov/govuk_publishing_components/pull/4631))

## 51.2.1

Expand Down
7 changes: 0 additions & 7 deletions ...s/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,12 +311,10 @@ $after-button-padding-left: govuk-spacing(4);
}

.gem-c-layout-super-navigation-header__navigation-item-link-inner {
border-left: 1px solid $button-pipe-colour;
padding: govuk-spacing(1) $after-link-padding;
}

.gem-c-layout-super-navigation-header__navigation-item-link-inner--blue-background {
border-left: 0;
border-right: 1px solid $pale-blue-colour;
}

Expand Down Expand Up @@ -589,7 +587,6 @@ $after-button-padding-left: govuk-spacing(4);

.gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
display: inline-block;
border-left: 1px solid govuk-colour("white");
border-right: 1px solid govuk-colour("white");
margin: 0;
padding: govuk-spacing(1) govuk-spacing(4);
Expand All @@ -601,10 +598,6 @@ $after-button-padding-left: govuk-spacing(4);
}
}

.gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner--no-left-border {
border-left: 0;
}

// Styles for search toggle button.
.gem-c-layout-super-navigation-header__search-toggle-button {
background: none;
Expand Down
2 changes: 0 additions & 2 deletions app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
logo_text = t("components.layout_super_navigation_header.logo_text")

hide_logo_text ||= false
hide_button_left_border ||= false
blue_background ||= false
large_navbar ||= false

Expand All @@ -28,7 +27,6 @@
top_toggle_button_classes << "gem-c-layout-super-navigation-header__navigation-top-toggle-button--large-navbar" if large_navbar

top_toggle_button_inner_classes = %w(gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner)
top_toggle_button_inner_classes << "gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner--no-left-border" if hide_button_left_border
top_toggle_button_inner_classes << "gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner--blue-background" if blue_background

search_toggle_button_classes = %w(gem-c-layout-super-navigation-header__search-toggle-button)
Expand Down
8 changes: 1 addition & 7 deletions app/views/govuk_publishing_components/components/docs/layout_super_navigation_header.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,22 +39,16 @@ examples:
logo_link_title: "Go to example"
homepage:
description: |
This variant is used for the homepage. It toggles the following attributes: hide_button_left_border, hide_logo_text and blue_background
This variant is used for the homepage. It toggles the following attributes: hide_logo_text and blue_background
data:
hide_logo_text: true
hide_button_left_border: true
blue_background: true
large_navbar: true
hide_logo_text:
description: |
Logo text is shown by default. This option allows us to hide the text for the homepage.
data:
hide_logo_text: true
remove_left_button_border:
description: |
The left border for the toggle button is shown by default. This option allows us to hide the text for the homepage.
data:
hide_button_left_border: true
blue_blackground_colour:
description: |
The black background is shown by default. This option allows us to change the background colour for the homepage.
Expand Down
1 change: 0 additions & 1 deletion ...components/components/layout_for_public/_layout_super_navigation_header_homepage.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
hide_logo_text: true,
logo_link: logo_link,
blue_background: true,
hide_button_left_border: true,
large_navbar: true,
}
%>
8 changes: 0 additions & 8 deletions spec/components/layout_super_navigation_header_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,14 +112,6 @@ def component_name
assert_select "a.govuk-header__link--homepage .govuk-visually-hidden"
end

it "hides left border of button" do
render_component({
hide_button_left_border: true,
})

assert_select ".gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner--no-left-border"
end

it "allows a custom crown logo link and custom title" do
render_component({
logo_link: "https://www.example.com/",
Expand Down