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

Jump to bottom

RFC: Combine service and transactionalService header options and remove layout modifiers #1000

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+236 −576
Open

RFC: Combine service and transactionalService header options and remove layout modifiers #1000

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions ...der/header-transactional-service-name.njk → ...nents/header/header-service-name-long.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{% set html_style = 'background-color: #f0f4f5;' %}
{% set title = 'Header transactional with service name' %}
{% set title = 'Header transactional with a long service name' %}
{% from 'components/header/macro.njk' import header %}
{% extends 'layout.njk' %}

{% block body %}

{{ header({
"transactionalService": {
"name": "Find your NHS number"
"service": {
"name": "Find your really long service name in England"
},
"showNav": "false",
"showSearch": "false"
Expand Down
2 changes: 1 addition & 1 deletion app/components/header/header-service-name-with-nav.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

{{ header({
"service": {
"name": "Digital service manual"
"name": "Find your really long service name in England"
},
"showNav": "true",
"showSearch": "true",
Expand Down
2 changes: 1 addition & 1 deletion app/pages/examples.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,8 @@
<li><a href="../components/header/header-search.html">Header with search</a></li>
<li><a href="../components/header/header-logo.html">Header with logo only</a></li>
<li><a href="../components/header/header-service-name.html">Header with a service name</a></li>
<li><a href="../components/header/header-service-name-long.html">Header with a long service name</a></li>
<li><a href="../components/header/header-service-name-with-nav.html">Header with a service name, search and navigation</a></li>
<li><a href="../components/header/header-transactional-service-name.html">Header transactional with service name</a></li>
<li><a href="../components/header/header-org.html">Header organisational</a></li>
<li><a href="../components/header/header-org-white.html">Header organisational with white header</a></li>
<li><a href="../components/header/header-org-white-nav.html">Header organisational with white header and navigation</a></li>
Expand Down
189 changes: 89 additions & 100 deletions packages/components/header/README.md
View file
Open in desktop

Large diffs are not rendered by default.

44 changes: 6 additions & 38 deletions packages/components/header/_header-organisation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,15 @@
/**
* These are the styles for the organisation header variants.
*/
* Organisation header variant.
*/

.nhsuk-header--organisation {
.nhsuk-header__link {
height: auto;
text-decoration: none;
width: auto;

&:hover {
color: $color_nhsuk-white;
text-decoration: underline;

.nhsuk-logo {
box-shadow: none;
}
}

&:focus {
background: $nhsuk-focus-color;
box-shadow:
0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;

.nhsuk-organisation-name,
.nhsuk-organisation-descriptor {
color: $nhsuk-focus-text-color;
}

.nhsuk-logo {
box-shadow: none;
}

&:hover {
text-decoration: none;
}
}
.nhsuk-header__link:hover {
box-shadow: none;
}

.nhsuk-header__logo .nhsuk-logo {
.nhsuk-logo {
@include nhsuk-logo-size-small;
display: inline-block;

@media (max-width: 450px) {
height: nhsuk-spacing(4);
Expand All @@ -58,7 +28,6 @@
}

.nhsuk-organisation-name {
color: $color_nhsuk-white;
display: block;
font-size: 22px;
font-weight: bold;
Expand Down Expand Up @@ -87,7 +56,6 @@
}

.nhsuk-organisation-descriptor {
color: $color_nhsuk-white;
display: block;
font-size: 15px;
font-weight: bold;
Expand Down
59 changes: 0 additions & 59 deletions packages/components/header/_header-service.scss
View file
Open in desktop

This file was deleted.

61 changes: 0 additions & 61 deletions packages/components/header/_header-transactional.scss
View file
Open in desktop

This file was deleted.

81 changes: 32 additions & 49 deletions packages/components/header/_header-white.scss
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Possibly one for a follow-up, but perhaps it would now make sense to recombine all the header CSS into a single file?

Original file line number Diff line number Diff line change
@@ -1,45 +1,49 @@
/**
* These are the styles for the white header variants.
*/
* White header variant.
*/

.nhsuk-header--white {
background-color: $color_nhsuk-white;

.nhsuk-header__search-wrap {
margin-bottom: nhsuk-spacing(3);
.nhsuk-header__link {
@include nhsuk-link-style-no-visited-state;

@include mq($until: tablet) {
&::after {
background: $color_nhsuk-white;
&:focus {
.nhsuk-logo,
.nhsuk-organisation-descriptor {
color: inherit;
}
}
}

.nhsuk-navigation-container {
background-color: $color_nhsuk-blue;
}
&:hover {
color: $nhsuk-text-color;

.nhsuk-logo {
.nhsuk-logo__background {
fill: $color_nhsuk-blue;
.nhsuk-organisation-descriptor {
color: $nhsuk-text-color;
}
}
}

.nhsuk-logo__text {
fill: $color_nhsuk-white;
}
.nhsuk-logo {
color: $color_nhsuk-blue;
}

.nhsuk-header__link {
&:hover {
color: $nhsuk-text-color;
text-decoration: underline;
.nhsuk-organisation-name {
color: $color_nhsuk-black;
}

.nhsuk-organisation-descriptor {
color: $nhsuk-text-color;
.nhsuk-header__search-wrap {
@include mq($until: tablet) {
&::after {
background-color: $color_nhsuk-white;
}
}
}

.nhsuk-navigation-container {
background-color: $color_nhsuk-blue;
}

.nhsuk-search__submit {
background-color: $color_nhsuk-blue;

Expand All @@ -62,49 +66,28 @@
}

.nhsuk-search__input {
border: 1px solid $color_nhsuk-grey-3;
border-color: $color_nhsuk-grey-3;

&:focus {
border: 2px solid $nhsuk-focus-text-color;
border-color: $nhsuk-focus-text-color;

@include mq($until: tablet) {
border: $nhsuk-focus-width solid $nhsuk-focus-text-color;
border-color: $nhsuk-focus-text-color;
}
}
}

.nhsuk-header__search-form {
@include mq($until: tablet) {
padding-top: 0;
}
}

.nhsuk-organisation-name {
color: shade($color_nhsuk-black, 100%);
}

.nhsuk-organisation-descriptor {
color: $color_nhsuk-blue;
}

.nhsuk-header__transactional-service-name--link {
color: $color_nhsuk-black;
}

.nhsuk-header__service-name {
color: $nhsuk-text-color;
}
}

.nhsuk-header--white-nav {
.nhsuk-navigation-container {
background-color: $color_nhsuk-white;
}

.nhsuk-navigation {
background-color: $color_nhsuk-white;

.nhsuk-header__navigation-list {
border-top: 1px solid $color_nhsuk-grey-5;
border-top-color: $color_nhsuk-grey-5;
}

.nhsuk-header__navigation-link {
Expand Down
Loading
Loading