Skip to content

Commit

Permalink
Move service name and navigation into section
Browse files Browse the repository at this point in the history
  • Loading branch information
@domoscargin
domoscargin committed Jun 19, 2024
1 parent c54917e commit 55b5653
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 53 deletions.
7 changes: 2 additions & 5 deletions packages/govuk-frontend/src/govuk/components/service-header/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,11 @@
$govuk-service-header-border-color: $govuk-border-colour;
$govuk-service-header-active-link-border-width: govuk-spacing(1);

.govuk-service-header {
border-bottom: 1px solid $govuk-service-header-border-color;
background-color: $govuk-service-header-background;
}

.govuk-service-header__container {
display: flex;
padding-top: $govuk-service-header-active-link-border-width;
border-bottom: 1px solid $govuk-service-header-border-color;
background-color: $govuk-service-header-background;

@include govuk-media-query($until: tablet) {
flex-direction: column;
Expand Down
27 changes: 27 additions & 0 deletions packages/govuk-frontend/src/govuk/components/service-header/service-header.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,3 +290,30 @@ examples:
end: '<div>[end]</div>'
navigationStart: '<li>[navigation start]</li>'
navigationEnd: '<li>[navigation end]</li>'
- name: with phase banner
hidden: true
options:
serviceName: Apply for a juggling license
serviceUrl: '#/'
navigation:
- href: '#/1'
text: Navigation item 1
- href: '#/2'
text: Navigation item 2
active: true
- href: '#/3'
text: Navigation item 3
- href: '#/4'
text: Navigation item 4
slots:
end: |
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
Alpha
</strong>
<span class="govuk-phase-banner__text">
This is a new service. Help us improve it and <a class="govuk-link" href="#">give your feedback by email</a>.
</span>
</p>
</div>
98 changes: 50 additions & 48 deletions packages/govuk-frontend/src/govuk/components/service-header/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,64 +5,66 @@

{% if params.serviceName or params.navigation | length %}
<div class="govuk-service-header {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="govuk-service-header"
{{- govukAttributes(params.attributes) }}>
<div class="govuk-service-header__container govuk-width-container">
aria-label="Service information and navigation" {{- govukAttributes(params.attributes) }}>
<div class="govuk-width-container">

{# Slot: start #}
{%- if params.slots.start %}{{ params.slots.start | safe }}{% endif -%}

{# Service name #}
{% if params.serviceName %}
<span class="govuk-service-header__service-name">
{% if params.serviceUrl %}
<a href="{{ params.serviceUrl }}" class="govuk-service-header__link govuk-service-header__link--service-name">
{{ params.serviceName }}
</a>
{% else %}
{{- params.serviceName -}}
{% endif %}
</span>
{% endif %}
<section class="govuk-service-header__container">
{# Service name #}
{% if params.serviceName %}
<span class="govuk-service-header__service-name">
{% if params.serviceUrl %}
<a href="{{ params.serviceUrl }}" class="govuk-service-header__link govuk-service-header__link--service-name">
{{ params.serviceName }}
</a>
{% else %}
{{- params.serviceName -}}
{% endif %}
</span>
{% endif %}

{# Navigation #}
{% if params.navigation | length %}
<nav aria-label="{{ params.navigationLabel | default(menuButtonText, true) }}" class="govuk-service-header__navigation {%- if params.navigationClasses %} {{ params.navigationClasses }}{% endif %}">
<button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="{{ navigationId }}" {%- if params.menuButtonLabel and params.menuButtonLabel != menuButtonText %} aria-label="{{ params.menuButtonLabel }}"{% endif %} hidden>
{{ menuButtonText }}
</button>
{# Navigation #}
{% if params.navigation | length %}
<nav aria-label="{{ params.navigationLabel | default(menuButtonText, true) }}" class="govuk-service-header__navigation {%- if params.navigationClasses %} {{ params.navigationClasses }}{% endif %}">
<button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="{{ navigationId }}" {%- if params.menuButtonLabel and params.menuButtonLabel != menuButtonText %} aria-label="{{ params.menuButtonLabel }}"{% endif %} hidden>
{{ menuButtonText }}
</button>

<ul class="govuk-service-header__navigation-list" id="{{ navigationId }}" >
<ul class="govuk-service-header__navigation-list" id="{{ navigationId }}" >

{# Slot: navigationStart #}
{%- if params.slots.navigationStart %}{{ params.slots.navigationStart | safe }}{% endif -%}
{# Slot: navigationStart #}
{%- if params.slots.navigationStart %}{{ params.slots.navigationStart | safe }}{% endif -%}

{% for item in params.navigation %}
<li class="govuk-service-header__navigation-item {%- if item.active or item.current %} govuk-service-header__navigation-item--active{% endif %}">
{% if item.href %}
<a class="govuk-service-header__link" href="{{ item.href }}"
{%- if item.active or item.current %} aria-current="{{ 'page' if item.current else 'true' }}"{% endif %}
{{- govukAttributes(item.attributes) -}}>
{# We wrap active links in strong tags so that users who override colours or
styles will still have some indicator of the current nav item. #}
{% if item.active or item.current %}
<strong class="govuk-service-header__active-fallback">{{- item.html | safe if item.html else item.text -}}</strong>
{% else %}
{% for item in params.navigation %}
<li class="govuk-service-header__navigation-item {%- if item.active or item.current %} govuk-service-header__navigation-item--active{% endif %}">
{% if item.href %}
<a class="govuk-service-header__link" href="{{ item.href }}"
{%- if item.active or item.current %} aria-current="{{ 'page' if item.current else 'true' }}"{% endif %}
{{- govukAttributes(item.attributes) -}}>
{# We wrap active links in strong tags so that users who override colours or
styles will still have some indicator of the current nav item. #}
{% if item.active or item.current %}
<strong class="govuk-service-header__active-fallback">{{- item.html | safe if item.html else item.text -}}</strong>
{% else %}
{{- item.html | safe if item.html else item.text -}}
{% endif %}
</a>
{% elif item.html or item.text %}
<span class="govuk-service-header__navigation-text">
{{- item.html | safe if item.html else item.text -}}
{% endif %}
</a>
{% elif item.html or item.text %}
<span class="govuk-service-header__navigation-text">
{{- item.html | safe if item.html else item.text -}}
</span>
{% endif %}
</li>
{% endfor %}
</span>
{% endif %}
</li>
{% endfor %}

{# Slot: navigationEnd #}
{%- if params.slots.navigationEnd %}{{ params.slots.navigationEnd | safe }}{% endif -%}
</ul>
</nav>
{% endif %}
{# Slot: navigationEnd #}
{%- if params.slots.navigationEnd %}{{ params.slots.navigationEnd | safe }}{% endif -%}
</ul>
</nav>
{% endif %}
</section>

{# Slot: end #}
{%- if params.slots.end %}{{ params.slots.end | safe }}{% endif -%}
Expand Down

0 comments on commit 55b5653

Please sign in to comment.