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

Add header documentation with mobile preview #418

Merged
merged 7 commits into from
Mar 7, 2024
Merged

Add header documentation with mobile preview #418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dced76c
Add header documentation with mobile preview
aduth Mar 5, 2024
7de6384
Remove stray newline
aduth Mar 6, 2024
ace14d0
Use static embed markup for mobile preview
aduth Mar 7, 2024
c9d9eb2
Re-include init in component layout
aduth Mar 7, 2024
f644d9b
Remove unused load_script option in base layout
aduth Mar 7, 2024
bdad9d2
Reuse common header and footer in layouts
aduth Mar 7, 2024
99e8ab1
Avoid extra newline
aduth Mar 7, 2024
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
5 changes: 4 additions & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,12 @@ collections:
components:
output: true
permalink: /:name/
embeds:
output: true
permalink: /:collection/:path/

defaults:
- scope:
path: ''
values:
layout: base
layout: component
113 changes: 113 additions & 0 deletions docs/_components/header.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
---
title: Header
lead: >
A header helps users identify where they are and provides a quick, organized way to reach the main sections of a website.
---

{% include helpers/base-component.html component="header" %}

## Default

{% capture example %}
<div class="usa-overlay"></div>
<div class="usa-header usa-header--extended">
<div class="usa-nav-container">
<div class="usa-navbar">
<div class="usa-logo">
<a href="{{ site.baseurl }}">
<img
src="{{ site.baseurl }}/assets/img/login-gov-logo.svg"
class="usa-logo__img"
alt="Login.gov Homepage"
width="179"
height="24"
/>
</a>
</div>

<button class="usa-menu-btn">Menu</button>
</div>

<nav class="usa-nav" aria-label="Primary links">
<div class="usa-nav__inner">
<button class="usa-nav__close" aria-label="Close">
<svg class="usa-icon usa-icon--size-3" aria-hidden="true" role="img">
<use xlink:href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
</svg>
</button>
<ul class="usa-nav__primary usa-accordion">
<li class="usa-nav__primary-item">
<a class="usa-nav__link" href="{{ site.baseurl }}">
Navigation Link
</a>
</li>
<li class="usa-nav__primary-item">
<a class="usa-nav__link usa-current" href="{{ site.baseurl }}">
Current Navigation Link
</a>
</li>
<li class="usa-nav__primary-item">
<button
type="button"
class="usa-accordion__button usa-nav__link"
aria-expanded="false"
aria-controls="nav-section"
>
<span>Section</span>
</button>
<ul id="nav-section" class="usa-nav__submenu" hidden>
<li class="usa-nav__submenu-item">
<a href="{{ site.baseurl }}">
<span>Navigation Link</span>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="{{ site.baseurl }}">
<span>Navigation Link</span>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="{{ site.baseurl }}">
<span>Navigation Link</span>
</a>
</li>
</ul>
</li>
<li class="usa-nav__primary-item">
<button
type="button"
class="usa-accordion__button usa-nav__link usa-current"
aria-expanded="false"
aria-controls="current-nav-section"
>
<span>Current Section</span>
</button>
<ul id="current-nav-section" class="usa-nav__submenu" hidden>
<li class="usa-nav__submenu-item">
<a href="{{ site.baseurl }}">
<span>Navigation Link</span>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="{{ site.baseurl }}">
<span>Navigation Link</span>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="{{ site.baseurl }}">
<span>Navigation Link</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
{% endcapture %}
{% include helpers/code-example.html code=example %}

## Mobile

{% include helpers/mobile-embed.html embed="header/mobile" %}
116 changes: 116 additions & 0 deletions docs/_embeds/header/mobile.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
---
title: Mobile Embed
layout: base
---

<div class="usa-overlay"></div>
<div class="usa-header usa-header--extended">
<div class="usa-nav-container">
<div class="usa-navbar">
<div class="usa-logo">
<a href="{{ site.baseurl }}">
<img
src="{{ site.baseurl }}/assets/img/login-gov-logo.svg"
class="usa-logo__img"
alt="Login.gov Homepage"
width="179"
height="24"
/>
</a>
</div>

<button class="usa-menu-btn">Menu</button>
</div>

<nav class="usa-nav" aria-label="Primary links">
<div class="usa-nav__inner">
<button class="usa-nav__close" aria-label="Close">
<svg class="usa-icon usa-icon--size-3" aria-hidden="true" role="img">
<use xlink:href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
</svg>
</button>
<ul class="usa-nav__primary usa-accordion">
<li class="usa-nav__primary-item">
<a class="usa-nav__link" href="{{ site.baseurl }}">
Navigation Link
</a>
</li>
<li class="usa-nav__primary-item">
<a class="usa-nav__link usa-current" href="{{ site.baseurl }}">
Current Navigation Link
</a>
</li>
<li class="usa-nav__primary-item">
<button
type="button"
class="usa-accordion__button usa-nav__link"
aria-expanded="false"
aria-controls="nav-section"
>
<span>Section</span>
</button>
<ul id="nav-section" class="usa-nav__submenu" hidden>
<li class="usa-nav__submenu-item">
<a href="{{ site.baseurl }}">
<span>Navigation Link</span>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="{{ site.baseurl }}">
<span>Navigation Link</span>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="{{ site.baseurl }}">
<span>Navigation Link</span>
</a>
</li>
</ul>
</li>
<li class="usa-nav__primary-item">
<button
type="button"
class="usa-accordion__button usa-nav__link usa-current"
aria-expanded="false"
aria-controls="current-nav-section"
>
<span>Current Section</span>
</button>
<ul id="current-nav-section" class="usa-nav__submenu" hidden>
<li class="usa-nav__submenu-item">
<a href="{{ site.baseurl }}">
<span>Navigation Link</span>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="{{ site.baseurl }}">
<span>Navigation Link</span>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="{{ site.baseurl }}">
<span>Navigation Link</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>

<style>
.usa-nav.is-visible {
animation: none !important;
}

.usa-overlay {
transition: none !important;
}
</style>
<script>
window.addEventListener('load', () => {
document.querySelector('.usa-menu-btn').click();
});
</script>
18 changes: 18 additions & 0 deletions docs/_includes/helpers/mobile-embed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div class="mobile-embed">
<iframe
title="Mobile Preview"
src="{{ site.baseurl }}/embeds/{{ include.embed }}"
width="100%"
height="100%"
frameborder="0"
class="border-y border-base-lightest"
></iframe>
</div>
<style>
.mobile-embed {
background-image: url('{{ site.baseurl }}/img/phone.svg');
width: 417px;
height: 876px;
padding: 66px 12px 95px;
}
</style>
3 changes: 3 additions & 0 deletions docs/_includes/layout/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<script src="{{ site.baseurl }}/assets/js/main.js"></script>
</body>
</html>
10 changes: 10 additions & 0 deletions docs/_includes/layout/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/styles.css">
<script src="{{ site.baseurl }}/assets/js/init.js"></script>
</head>
<body>
42 changes: 3 additions & 39 deletions docs/_layouts/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/styles.css">
<script src="{{ site.baseurl }}/assets/js/init.js"></script>
</head>
<body>
<main class="padding-y-4">
<div class="grid-container">
<div class="grid-row grid-gap">
<aside class="tablet:grid-col-3">
<nav>
<ul class="usa-sidenav">
{%
include nav/list.html
links = site.data.nav
li_class = 'usa-sidenav__item'
ul_class = 'usa-sidenav__sublist'
%}
</ul>
</nav>
</aside>
{% include layout/header.html %}

<div class="tablet:grid-col-9 usa-prose">
<h1>{{ page.title }}</h1>
{{ content }}

{% if page.lead %}
<p class="usa-intro">{{ page.lead }}</p>
{% endif %}

{{ content }}
</div>
</div>
</div>
</main>
<script src="{{ site.baseurl }}/assets/js/main.js"></script>
</body>
</html>
{% include layout/footer.html %}
32 changes: 32 additions & 0 deletions docs/_layouts/component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{% include layout/header.html %}

<main class="padding-y-4">
<div class="grid-container">
<div class="grid-row grid-gap">
<aside class="tablet:grid-col-3">
<nav>
<ul class="usa-sidenav">
{%
include nav/list.html
links = site.data.nav
li_class = 'usa-sidenav__item'
ul_class = 'usa-sidenav__sublist'
%}
</ul>
</nav>
</aside>

<div class="tablet:grid-col-9 usa-prose">
<h1>{{ page.title }}</h1>

{% if page.lead %}
<p class="usa-intro">{{ page.lead }}</p>
{% endif %}

{{ content }}
</div>
</div>
</div>
</main>

{% include layout/footer.html %}
8 changes: 3 additions & 5 deletions docs/_plugins/generate_nav_for_components.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
require 'json'

Jekyll::Hooks.register :site, :post_read do |site|
site.collections.each do |name, collection|
site.data['nav'] = collection.docs.
filter { |doc| doc.basename != 'index.md'}.
map { |doc| { 'href' => doc.url } }
end
site.data['nav'] = site.collections['components'].docs.
filter { |doc| doc.basename != 'index.md'}.
map { |doc| { 'href' => doc.url } }
end
1 change: 1 addition & 0 deletions docs/img/phone.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading