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

Remove utilities in components / fix gray colors / fix markup render #2823

Merged
merged 11 commits into from Oct 5, 2018
Merged

Remove utilities in components / fix gray colors / fix markup render #2823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ca54559
Remove `usa-drop_text` markup that has no associated styling
thisisdano Oct 5, 2018
5ec4a41
Improve rendering of sidenav markup
thisisdano Oct 5, 2018
7ceee1f
Improve render of sidenav-compare markup
thisisdano Oct 5, 2018
3a3c122
Improve markup render of basic header
thisisdano Oct 5, 2018
bd42692
Improve render of extended nav markup
thisisdano Oct 5, 2018
054ecd3
Remove flex-justify utility from footer [changed markup]
thisisdano Oct 5, 2018
26ca56a
Swap gray-warm and gray-cool colors [bug]
thisisdano Oct 5, 2018
8833a5b
Improve render of hero markup
thisisdano Oct 5, 2018
12eb6fa
Remove shadows test file
thisisdano Oct 5, 2018
2a9b79a
Remove top margin from contact info in slim footer
thisisdano Oct 5, 2018
91f6488
Update package lock
thisisdano Oct 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 9 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/components/07-form/controls/validation.njk
View file
Open in desktop
@@ -1,6 +1,6 @@
<form class="usa-form">
<fieldset class="usa-fieldset">
<legend class="usa-legend usa-drop_text">Enter a code</legend>
<legend class="usa-legend">Enter a code</legend>
<div class="usa-alert usa-alert-info">
<div class="usa-alert-body">
<h3 class="usa-alert-heading">Code requirements</h3>
Expand Down
2 changes: 1 addition & 1 deletion src/components/07-form/templates/password-reset-form.njk
View file
Open in desktop
@@ -1,6 +1,6 @@
<form class="usa-form">
<fieldset class="usa-fieldset">
<legend class="usa-legend usa-drop_text">Reset password</legend>
<legend class="usa-legend">Reset password</legend>
<span>Please enter your new password</span>

<div class="usa-alert usa-alert-info">
Expand Down
2 changes: 1 addition & 1 deletion src/components/07-form/templates/sign-in-form.njk
View file
Open in desktop
@@ -1,6 +1,6 @@
<form class="usa-form">
<fieldset class="usa-fieldset">
<legend class="usa-legend usa-drop_text">Sign in</legend>
<legend class="usa-legend">Sign in</legend>
<span>or <a href="javascript:void(0);">create an account</a></span>

<label class="usa-label" for="username">Username or email address</label>
Expand Down
16 changes: 5 additions & 11 deletions src/components/08-navigation/_nav-primary.njk
View file
Open in desktop
@@ -1,13 +1,9 @@
<button class="usa-nav-close">
<img src="{{ uswds.path }}/img/close.svg" alt="close">
</button>
<button class="usa-nav-close"><img src="{{ uswds.path }}/img/close.svg" alt="close"></button>
<ul class="usa-nav-primary usa-accordion">
{%- for link in nav.links -%}
<li class="usa-nav-primary-item">
{%- if link.links -%}
<button class="usa-accordion-button usa-nav-link{% if link.is_current %} usa-current{% endif %}" aria-expanded="false" aria-controls="{{ nav.id_prefix }}{{ link.id }}">
<span>{{ link.text }}</span>
</button>
{% if link.links -%}
<button class="usa-accordion-button usa-nav-link{% if link.is_current %} usa-current{% endif %}" aria-expanded="false" aria-controls="{{ nav.id_prefix }}{{ link.id }}"><span>{{ link.text }}</span></button>
<{% if nav.mega %}div{% else %}ul{% endif %} id="{{ nav.id_prefix }}{{ link.id }}" class="usa-nav-submenu{% if nav.mega %} usa-megamenu{% endif %}">
{%- if nav.id_prefix == "basic-" or nav.id_prefix == "extended-" -%}
{%- for child in link.links -%}
Expand All @@ -34,10 +30,8 @@
{%- endif -%}
</{% if nav.mega %}div{% else %}ul{% endif %}>
{%- else -%}
<a class="usa-nav-link{% if link.current %} usa-current{% endif %}" href="{{ link.href }}">
<span>{{ link.text }}</span>
</a>
{%- endif -%}
<a class="usa-nav-link{% if link.current %} usa-current{% endif %}" href="{{ link.href }}"><span>{{ link.text }}</span></a>
{% endif -%}
</li>
{%- endfor -%}
</ul>
Expand Down
12 changes: 5 additions & 7 deletions src/components/08-navigation/_nav-secondary.njk
View file
Open in desktop
@@ -1,14 +1,12 @@
<div class="usa-nav-secondary">
<ul class="usa-nav-secondary-links">
{% for link in nav.links %}
{%- for link in nav.links -%}
<li class="usa-nav-secondary-item">
<a href="{{ link.href }}"{% if link.current %} class="usa-current"{% endif %}>
{{ link.text }}
</a>
<a href="{{ link.href }}"{% if link.current %} class="usa-current"{% endif %}>{{ link.text }}</a>
</li>
{% endfor %}
{%- endfor -%}
</ul>
{% if nav.search %}
{%- if nav.search -%}
{% render '@search--header', {search: nav.search, search_js: false, id_prefix: id_prefix} %}
{% endif %}
{%- endif -%}
</div>
6 changes: 3 additions & 3 deletions src/components/08-navigation/sidenav--compare.njk
View file
Open in desktop
@@ -1,10 +1,10 @@
<section class="grid-container">
<div class="grid-row grid-gap">
{% for nav in sidenavs %}
{%- for nav in sidenavs -%}
<div class="tablet:grid-col-4">
<h6 class="usa-heading-alt">{{ nav.title }}</h6>
{% render '@sidenav--default', {sidenav: nav} %}
{%- render '@sidenav--default', {sidenav: nav} -%}
</div>
{% endfor %}
{%- endfor -%}
</div>
</section>
16 changes: 7 additions & 9 deletions src/components/08-navigation/sidenav.njk
View file
Open in desktop
@@ -1,17 +1,15 @@
{% macro nav_list(links, subclass) %}
{% for item in links %}
{%- macro nav_list(links, subclass) -%}
{%- for item in links -%}
<li class="usa-sidenav-item">
<a href="{{ item.href }}"{% if item.current %} class="usa-current"{% endif %}>
{{ item.text }}
</a>
{% if item.links %}
<a href="{{ item.href }}"{% if item.current %} class="usa-current"{% endif %}>{{ item.text }}</a>
{%- if item.links -%}
<ul class="{{ subclass }}">
{{ nav_list(item.links, subclass) }}
</ul>
{% endif %}
{%- endif %}
</li>
{% endfor %}
{% endmacro %}
{%- endfor -%}
{%- endmacro -%}

<nav>
<ul class="usa-sidenav">
Expand Down
4 changes: 2 additions & 2 deletions src/components/09-header/header--basic.njk
View file
Open in desktop
@@ -1,9 +1,9 @@
<div class="usa-overlay"></div>
<header class="usa-header usa-header-basic{% if header.primary.mega %} usa-header-basic-megamenu{% endif %}" role="banner">
<div class="usa-nav-container">
{% render '@site-title', {header: header}, true %}
{% render '@site-title', {header: header}, true -%}
<nav role="navigation" class="usa-nav">
{% render '@nav-primary', {nav: header.primary}, true %}
{% render '@nav-primary', {nav: header.primary}, true -%}
</nav>
</div>
</header>
6 changes: 3 additions & 3 deletions src/components/09-header/header--extended.njk
View file
Open in desktop
@@ -1,10 +1,10 @@
<div class="usa-overlay"></div>
<header class="usa-header usa-header-extended" role="banner">
{% render '@site-title', {header: header}, true %}
{%- render '@site-title', {header: header}, true -%}
<nav role="navigation" class="usa-nav">
<div class="usa-nav-inner">
{% render '@nav-primary', {nav: header.primary}, true %}
{% render '@nav-secondary', {nav: header.secondary, id_prefix: header.primary.id_prefix}, true %}
{%- render '@nav-primary', {nav: header.primary}, true -%}
{%- render '@nav-secondary', {nav: header.secondary, id_prefix: header.primary.id_prefix}, true -%}
</div>
</nav>
</header>
10 changes: 3 additions & 7 deletions src/components/10-footer/footer--big.njk
View file
Open in desktop
Expand Up @@ -104,16 +104,12 @@
</div>
<h3 class="usa-footer-contact-heading">Agency Contact Center</h3>
<address class="usa-footer-address">
<div class="grid-row grid-gap mobile-lg:flex-justify-end">
<div class="usa-footer-contact_info grid-row grid-gap">
<div class="grid-col-auto">
<div class="usa-footer-contact_info">
<a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
</div>
<a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
</div>
<div class="grid-col-auto">
<div class="usa-footer-contact_info">
<a href="mailto:info@agency.gov">info@agency.gov</a>
</div>
<a href="mailto:info@agency.gov">info@agency.gov</a>
</div>
</div>
</address>
Expand Down
10 changes: 3 additions & 7 deletions src/components/10-footer/footer.njk
View file
Open in desktop
Expand Up @@ -60,16 +60,12 @@
</div>
<h3 class="usa-footer-contact-heading">Agency Contact Center</h3>
<address class="usa-footer-address">
<div class="grid-row grid-gap mobile-lg:flex-justify-end">
<div class="usa-footer-contact_info grid-row grid-gap">
<div class="grid-col-auto">
<div class="usa-footer-contact_info">
<a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
</div>
<a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
</div>
<div class="grid-col-auto">
<div class="usa-footer-contact_info">
<a href="mailto:info@agency.gov">info@agency.gov</a>
</div>
<a href="mailto:info@agency.gov">info@agency.gov</a>
</div>
</div>
</address>
Expand Down
14 changes: 6 additions & 8 deletions src/components/hero/hero.njk
View file
Open in desktop
Expand Up @@ -2,19 +2,17 @@
<div class="grid-container">
<div class="usa-hero-callout">
<h2 class="usa-hero-heading">
{% if hero.callout %}
{%- if hero.callout -%}
<span class="usa-hero-callout-alt">{{ hero.callout }}</span>
{% endif %}
{%- endif -%}
{{ hero.title }}
</h2>

{% if hero.paragraph %}
{%- if hero.paragraph -%}
<p>{{ hero.paragraph }}</p>
{% endif %}

{% if hero.button %}
{%- endif -%}
{%- if hero.button -%}
<a class="usa-button" href="{{ hero.button.href }}">{{ hero.button.text }}</a>
{% endif %}
{%- endif %}
</div>
</div>
</section>
4 changes: 1 addition & 3 deletions src/components/search/search--header.njk
View file
Open in desktop
Expand Up @@ -2,8 +2,6 @@
<div role="search">
<label class="usa-sr-only" for="{{ id_prefix }}search-field-small">Search small</label>
<input class="usa-input" id="{{ id_prefix }}search-field-small" type="search" name="search">
<button class="usa-button" type="submit">
<span class="usa-sr-only">Search</span>
</button>
<button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
</div>
</form>
8 changes: 1 addition & 7 deletions src/components/site-title/site-title.njk
View file
Open in desktop
@@ -1,12 +1,6 @@
<div class="usa-navbar">
<div class="usa-logo" id="{{ header.primary.id_prefix }}logo">
<em class="usa-logo-text">
<a href="{{ header.link.href | default('/') }}"
title="{{ header.link.title | default('Home') }}"
aria-label="{{ header.link.label | default('Home') }}">
{{ header.title | default(site.title) }}
</a>
</em>
<em class="usa-logo-text"><a href="{{ header.link.href | default('/') }}" title="{{ header.link.title | default('Home') }}" aria-label="{{ header.link.label | default('Home') }}">{{ header.title | default(site.title) }}</a></em>
</div>
<button class="usa-menu-btn">Menu</button>
</div>
19 changes: 0 additions & 19 deletions src/components/test/shadows.njk
View file
Open in desktop

This file was deleted.

28 changes: 14 additions & 14 deletions src/data/colors/gray-cool.json
View file
Open in desktop
Expand Up @@ -6,20 +6,20 @@
{
"name": "gray-cool",
"value": [
{ "name": "1", "value": "#fcfcfb" },
{ "name": "2", "value": "#f9f9f7" },
{ "name": "3", "value": "#f6f6f2" },
{ "name": "4", "value": "#f5f5f0" },
{ "name": "5", "value": "#f0f0ec" },
{ "name": "10", "value": "#e6e6e2" },
{ "name": "20", "value": "#cac9c0" },
{ "name": "30", "value": "#afaea2" },
{ "name": "40", "value": "#929285" },
{ "name": "50", "value": "#76766a" },
{ "name": "60", "value": "#5d5d52" },
{ "name": "70", "value": "#454540" },
{ "name": "80", "value": "#2e2e2a" },
{ "name": "90", "value": "#171716" }
{ "name": "1", "value": "#fbfcfd" },
{ "name": "2", "value": "#f7f9fa" },
{ "name": "3", "value": "#f5f6f7" },
{ "name": "4", "value": "#f1f3f6" },
{ "name": "5", "value": "#edeff0" },
{ "name": "10", "value": "#dbdee1" },
{ "name": "20", "value": "#c6cace" },
{ "name": "30", "value": "#a9aeb1" },
{ "name": "40", "value": "#8d9297" },
{ "name": "50", "value": "#71767a" },
{ "name": "60", "value": "#585c62" },
{ "name": "70", "value": "#424549" },
{ "name": "80", "value": "#2d2e2f" },
{ "name": "90", "value": "#1c1d1f" }
]
}
],
Expand Down
28 changes: 14 additions & 14 deletions src/data/colors/gray-warm.json
View file
Open in desktop
Expand Up @@ -6,20 +6,20 @@
{
"name": "gray-warm",
"value": [
{ "name": "1", "value": "#fbfcfd" },
{ "name": "2", "value": "#f7f9fa" },
{ "name": "3", "value": "#f5f6f7" },
{ "name": "4", "value": "#f1f3f6" },
{ "name": "5", "value": "#edeff0" },
{ "name": "10", "value": "#dbdee1" },
{ "name": "20", "value": "#c6cace" },
{ "name": "30", "value": "#a9aeb1" },
{ "name": "40", "value": "#8d9297" },
{ "name": "50", "value": "#71767a" },
{ "name": "60", "value": "#585c62" },
{ "name": "70", "value": "#424549" },
{ "name": "80", "value": "#2d2e2f" },
{ "name": "90", "value": "#1c1d1f" }
{ "name": "1", "value": "#fcfcfb" },
{ "name": "2", "value": "#f9f9f7" },
{ "name": "3", "value": "#f6f6f2" },
{ "name": "4", "value": "#f5f5f0" },
{ "name": "5", "value": "#f0f0ec" },
{ "name": "10", "value": "#e6e6e2" },
{ "name": "20", "value": "#cac9c0" },
{ "name": "30", "value": "#afaea2" },
{ "name": "40", "value": "#929285" },
{ "name": "50", "value": "#76766a" },
{ "name": "60", "value": "#5d5d52" },
{ "name": "70", "value": "#454540" },
{ "name": "80", "value": "#2e2e2a" },
{ "name": "90", "value": "#171716" }
]
}
],
Expand Down
6 changes: 6 additions & 0 deletions src/stylesheets/components/_footer.scss
View file
Open in desktop
Expand Up @@ -80,6 +80,11 @@
&:hover {
text-decoration: underline;
}

@include at-media('mobile-lg') {
@include u-flex('justify-end');
margin-top: units(1);
}
}

.usa-footer-primary-content {
Expand Down Expand Up @@ -230,6 +235,7 @@
.usa-footer-contact_info {
@include at-media('mobile-lg') {
@include u-padding-y(units(2));
margin-top: 0;
}
}
}
Expand Down