Skip to content

Upgrade Login.gov Design System to v7.0.1 #1073

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

Merged
aduth merged 4 commits into from
May 8, 2023
Merged

Upgrade Login.gov Design System to v7.0.1 #1073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bfc03bd
Update identity-design-system to 7.0.1-beta.1
aduth May 2, 2023
6eb7f70
Use usa-section--dark for hero content
aduth May 2, 2023
43a391e
Fix navigation after 7.0.1 upgrade
aduth May 2, 2023
f9f3f3a
Update to 7.0.1 stable
aduth May 5, 2023
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
2 changes: 1 addition & 1 deletion _includes/header--help.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
</div>

<a
class="usa-link desktop:display-none padding-y-1 margin-y-3 text-no-underline text-bold"
class="usa-link display-block desktop:display-none padding-y-1 margin-y-3 text-no-underline text-bold"
href="{{ '/contact/' | locale_url }}"
>
{{ site.data.[page.lang].settings.nav.contact_us.title }}
Expand Down
96 changes: 49 additions & 47 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,58 +23,60 @@
</div>

<nav class="usa-nav" aria-label="{{ site.data.[page.lang].settings.accessible_labels.primary_navigation }}">
<button class="usa-nav__close">
<img src="{{ site.baseurl }}/assets/img/close.svg" alt="Close" />
</button>
<div class="usa-nav__inner">
<button class="usa-nav__close">
<img src="{{ site.baseurl }}/assets/img/close.svg" alt="Close" />
</button>

{% include sign_in.html mobile="mobile" %}
{% include sign_in.html mobile="mobile" %}

<ul class="usa-nav__primary usa-accordion">
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/what-is-login/' %}usa-current{% endif %}"
href="{{ '/what-is-login/' | locale_url }}"
>
<span class="usa-nav__link__inner">{{ site.data.[page.lang].settings.nav.what_is_login_gov }}</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/who-uses-login/' %}usa-current{% endif %}"
href="{{ '/who-uses-login/' | locale_url }}"
>
<span class="usa-nav__link__inner">{{ site.data.[page.lang].settings.nav.who_uses_login_gov }}</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/create-an-account/' %}usa-current{% endif %}"
href="{{ '/create-an-account/' | locale_url }}"
>
<span class="usa-nav__link__inner">{{ site.data.[page.lang].settings.nav.create_an_account }}</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/help/' %}usa-current{% endif %}"
href="{{ '/help/' | locale_url }}"
>
<span class="usa-nav__link__inner">{{ site.data.[page.lang].settings.nav.help_center }}</span>
</a>
</li>
</ul>
<ul class="usa-nav__primary usa-accordion">
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/what-is-login/' %}usa-current{% endif %}"
href="{{ '/what-is-login/' | locale_url }}"
>
{{ site.data.[page.lang].settings.nav.what_is_login_gov }}
</a>
</li>
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/who-uses-login/' %}usa-current{% endif %}"
href="{{ '/who-uses-login/' | locale_url }}"
>
{{ site.data.[page.lang].settings.nav.who_uses_login_gov }}
</a>
</li>
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/create-an-account/' %}usa-current{% endif %}"
href="{{ '/create-an-account/' | locale_url }}"
>
{{ site.data.[page.lang].settings.nav.create_an_account }}
</a>
</li>
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/help/' %}usa-current{% endif %}"
href="{{ '/help/' | locale_url }}"
>
{{ site.data.[page.lang].settings.nav.help_center }}
</a>
</li>
</ul>

<a
class="usa-link desktop:display-none padding-y-1 margin-y-3 text-no-underline text-bold"
href="{{ '/contact/' | locale_url }}"
>
{{ site.data.[page.lang].settings.nav.contact_us.title }}
</a>
<a
class="usa-link display-block desktop:display-none padding-y-1 margin-y-3 text-no-underline text-bold"
href="{{ '/contact/' | locale_url }}"
>
{{ site.data.[page.lang].settings.nav.contact_us.title }}
</a>

{% include search.html id="header-nav" %}
{% include search.html id="header-nav" %}

<div class="desktop:display-none margin-top-3">
{% include language_picker.html id="mobile-list" %}
<div class="desktop:display-none margin-top-3">
{% include language_picker.html id="mobile-list" %}
</div>
</div>
</nav>
</div>
Expand Down
2 changes: 1 addition & 1 deletion _includes/hero--search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<section class="hero hero--search">
<section class="usa-section--dark hero hero--search">
<div class="container display-flex flex-column flex-justify-center text-center">
<h1 class="hero__title">{{ site.data.[page.lang].settings.help_page.title }}</h1>
<div class="hero__description">{% include search.html size="big" id="help-hero" %}</div>
Expand Down
106 changes: 54 additions & 52 deletions _includes/partners/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<div class="usa-header usa-header--extended">
<div class="usa-nav-container">
<div class="usa-navbar desktop:flex-justify partners-navbar margin-bottom-4">
<div class="usa-navbar margin-bottom-3">
<div class="usa-logo partners-logo" id="extended-logo">
<a href="{{ '/partners/' | prepend: site.baseurl }}" aria-label="Home">
<img
Expand All @@ -29,66 +29,68 @@
</div>

<nav class="usa-nav" aria-label="{{ site.data.[page.lang].settings.accessible_labels.primary_navigation }}">
<button class="usa-nav__close">
<img src="{{ site.baseurl }}/assets/img/close.svg" alt="Close" />
</button>
<div class="usa-nav__inner">
<button class="usa-nav__close">
<img src="{{ site.baseurl }}/assets/img/close.svg" alt="Close" />
</button>

<ul class="usa-nav__primary usa-accordion">
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/our-services' %}usa-current{% endif %}"
href="{{ '/partners/our-services/' | locale_url }}"
>
<span class="usa-nav__link__inner">Our services</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/impact-stories' %}usa-current{% endif %}"
href="{{ '/partners/impact-stories/' | locale_url }}"
>
<span class="usa-nav__link__inner">Impact stories</span>
</a>
</li>
<li class="usa-nav__primary-item">
<ul class="usa-nav__primary usa-accordion">
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/our-services' %}usa-current{% endif %}"
href="{{ '/partners/our-services/' | locale_url }}"
>
Our services
</a>
</li>
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/impact-stories' %}usa-current{% endif %}"
href="{{ '/partners/impact-stories/' | locale_url }}"
>
Impact stories
</a>
</li>
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/security-experience' %}usa-current{% endif %}"
href="{{ '/partners/security-experience/' | locale_url }}"
>
Security experience
</a>
</li>
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/faq' %}usa-current{% endif %}"
href="{{ '/partners/faq/' | locale_url }}"
>
FAQ
</a>
</li>
</ul>

<div class="partners-actions">
<a
class="usa-nav__link {% if page.url contains '/security-experience' %}usa-current{% endif %}"
href="{{ '/partners/security-experience/' | locale_url }}"
class="{{include.mobile}} usa-button usa-button--outline {% if page.url contains '/state-and-local' %}partners-usa-button--active{% endif %}"
href="{{ site.baseurl }}/partners/state-and-local/"
>State and local</a
>
<span class="usa-nav__link__inner">Security experience</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a
class="usa-nav__link {% if page.url contains '/faq' %}usa-current{% endif %}"
href="{{ '/partners/faq/' | locale_url }}"
class="{{include.mobile}} usa-button {% if page.url contains '/get-started' %}usa-button--active{% endif %}"
href="{{ site.baseurl }}/partners/get-started/"
>Get started</a
>
<span class="usa-nav__link__inner">FAQ</span>
</a>
</li>
</ul>
</div>

<div class="partners-actions">
<a
class="{{include.mobile}} usa-button usa-button--outline {% if page.url contains '/state-and-local' %}partners-usa-button--active{% endif %}"
href="{{ site.baseurl }}/partners/state-and-local/"
>State and local</a
>
<a
class="{{include.mobile}} usa-button {% if page.url contains '/get-started' %}usa-button--active{% endif %}"
href="{{ site.baseurl }}/partners/get-started/"
>Get started</a
class="usa-link display-block desktop:display-none padding-y-1 margin-y-3 text-no-underline text-bold"
href="{{ site.baseurl }}/partners/business-inquiries/"
>
</div>

<a
class="usa-link desktop:display-none padding-y-1 margin-y-3 text-no-underline text-bold"
href="{{ site.baseurl }}/partners/business-inquiries/"
>
{{ site.data.[page.lang].settings.nav.business_inquiries.title }}
</a>
{{ site.data.[page.lang].settings.nav.business_inquiries.title }}
</a>

<div class="desktop:display-none">{% include search.html id="mobile" %}</div>
<div class="desktop:display-none">{% include search.html id="mobile" %}</div>
</div>
</nav>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion _layouts/landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
{% include header.html %}
</header>
<main id="main-content">
{% include hero.html class=page.class heading=page.title text=page.description %}
{% assign hero_class = page.class | default: '' | append: ' usa-section--dark' %}
{% include hero.html class=hero_class heading=page.title text=page.description %}

{% if page.class == 'what-is-login' %}
{% include components/2-col.html class=page.class col1=page.component.col1 bannertext=page.component.bannertext bannercol1=page.component.bannercol1 bannercol2=page.component.bannercol2 col2=page.component.col2 image=page.component.image %}
Expand Down
2 changes: 1 addition & 1 deletion _layouts/sidenav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
{{ page.title }}
{% endcapture %}

{% include hero.html heading=heading class="bg-none" %}
{% include hero.html heading=heading class="usa-section--dark bg-none" %}

<div class="container">
<div class="page-content container--mod grid-row">
Expand Down
7 changes: 0 additions & 7 deletions _sass/components/_hero.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
@use '../variables' as *;

.hero {
background-color: $navy;
color: $white;
padding-top: $container-spacing-sm;
padding-bottom: $container-spacing-sm;

Expand Down Expand Up @@ -32,11 +30,6 @@
font-size: 1.25rem; // 20px
}
}

&.partners {
background-color: color('white');
color: color('ink');
}
}

.hero--search {
Expand Down
34 changes: 3 additions & 31 deletions _sass/components/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,6 @@ article.container,
}
}

.usa-nav__primary {
order: 0;

@include at-media-max('desktop') {
margin-top: 0;
}
}

.usa-header .usa-nav {
.usa-search {
flex-shrink: 0;
Expand All @@ -51,28 +43,6 @@ article.container,
}
}

.usa-nav__primary {
> .usa-nav__primary-item {
> a {
line-height: 1.5em;
font-size: 0.875rem;
}
> .usa-nav__link {
position: relative;
padding: 0;

&:hover,
&.usa-current {
box-shadow: inset 0 -4px 0 0 $red;

&::after {
display: none;
}
}
}
}
}

.one-account-for-govt {
.container {
padding-left: 1.5rem;
Expand All @@ -81,11 +51,13 @@ article.container,
}
}

.usa-header .usa-navbar {
.usa-header--extended .usa-navbar,
.usa-header--extended .usa-nav__inner {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
max-width: none;
}

@include at-media('desktop-lg') {
Expand Down
Loading