mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-25 00:33:58 -04:00
- Removed links to the gov uk stylesheets
- Deleted /stylesheets folder - Removed sass build from gulpfile - Changed gov links to usa links - Changed other govuk styles, like breadcrumbs - Changed name of uk_components file to us_components - Fixed a few tests that broke on account of the changes
This commit is contained in:
Jonathan Bobel
15
app/templates/components/us_components/footer/README.md
Normal file
15
app/templates/components/us_components/footer/README.md
Normal file
@@ -0,0 +1,15 @@
|
||||
# Footer
|
||||
|
||||
## Installation
|
||||
|
||||
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
|
||||
|
||||
## Guidance and Examples
|
||||
|
||||
Find out when to use the footer component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/footer).
|
||||
|
||||
## Component options
|
||||
|
||||
Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text.
|
||||
|
||||
See [options table](https://design-system.service.gov.uk/components/footer/#options-example-default) for details.
|
||||
236
app/templates/components/us_components/footer/_footer.scss
Normal file
236
app/templates/components/us_components/footer/_footer.scss
Normal file
@@ -0,0 +1,236 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@import "../../helpers/typography";
|
||||
|
||||
@include govuk-exports("govuk/component/footer") {
|
||||
|
||||
$govuk-footer-background: $govuk-canvas-background-colour;
|
||||
$govuk-footer-border-top: #a1acb2;
|
||||
$govuk-footer-border: govuk-colour("grey-2");
|
||||
$govuk-footer-text: #454a4c;
|
||||
$govuk-footer-link: $govuk-footer-text;
|
||||
$govuk-footer-link-hover: #171819;
|
||||
|
||||
// Based on the govuk-crest-2x.png image dimensions.
|
||||
$govuk-footer-crest-image-width-2x: 250px;
|
||||
$govuk-footer-crest-image-height-2x: 204px;
|
||||
// Half the 2x image so that it fits the regular 1x size.
|
||||
$govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2);
|
||||
$govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
|
||||
|
||||
.govuk-footer {
|
||||
@include govuk-font($size: 16);
|
||||
@include govuk-responsive-padding(7, "top");
|
||||
@include govuk-responsive-padding(5, "bottom");
|
||||
|
||||
border-top: 1px solid $govuk-footer-border-top;
|
||||
color: $govuk-footer-text;
|
||||
background: $govuk-footer-background;
|
||||
}
|
||||
|
||||
.govuk-footer__link {
|
||||
@include govuk-focusable-fill;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $govuk-footer-link;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $govuk-footer-link-hover;
|
||||
}
|
||||
|
||||
// When focussed, the text colour needs to be darker to ensure that colour
|
||||
// contrast is still acceptable
|
||||
&:focus {
|
||||
color: $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
// alphagov/govuk_template includes a specific a:link:focus selector
|
||||
// designed to make unvisited links a slightly darker blue when focussed, so
|
||||
// we need to override the text colour for that combination of selectors.
|
||||
@include govuk-compatibility(govuk_template) {
|
||||
&:link:focus {
|
||||
@include govuk-text-colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-footer__section-break {
|
||||
margin: 0; // Reset `<hr>` default margins
|
||||
@include govuk-responsive-margin(8, "bottom");
|
||||
border: 0; // Reset `<hr>` default borders
|
||||
border-bottom: 1px solid $govuk-footer-border;
|
||||
}
|
||||
|
||||
.govuk-footer__meta {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex; // Support: Flexbox
|
||||
margin-right: -$govuk-gutter-half;
|
||||
margin-left: -$govuk-gutter-half;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap; // Support: Flexbox
|
||||
-webkit-box-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end; // Support: Flexbox
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center; // Support: Flexbox
|
||||
}
|
||||
|
||||
.govuk-footer__meta-item {
|
||||
margin-right: $govuk-gutter-half;
|
||||
margin-bottom: govuk-spacing(5);
|
||||
margin-left: $govuk-gutter-half;
|
||||
}
|
||||
|
||||
.govuk-footer__meta-item--grow {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1; // Support: Flexbox
|
||||
@include mq ($until: tablet) {
|
||||
-webkit-flex-basis: 320px;
|
||||
-ms-flex-preferred-size: 320px;
|
||||
flex-basis: 320px; // Support: Flexbox
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-footer__licence-logo {
|
||||
display: inline-block;
|
||||
margin-right: govuk-spacing(2);
|
||||
@include mq ($until: desktop) {
|
||||
margin-bottom: govuk-spacing(3);
|
||||
}
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.govuk-footer__licence-description {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.govuk-footer__copyright-logo {
|
||||
display: inline-block;
|
||||
min-width: $govuk-footer-crest-image-width;
|
||||
padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
|
||||
background-image: govuk-image-url("govuk-crest.png");
|
||||
@include govuk-device-pixel-ratio {
|
||||
background-image: govuk-image-url("govuk-crest-2x.png");
|
||||
}
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 0%;
|
||||
background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.govuk-footer__inline-list {
|
||||
margin-top: 0;
|
||||
margin-bottom: govuk-spacing(3);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.govuk-footer__meta-custom {
|
||||
margin-bottom: govuk-spacing(4);
|
||||
}
|
||||
|
||||
.govuk-footer__inline-list-item {
|
||||
display: inline-block;
|
||||
margin-right: govuk-spacing(3);
|
||||
margin-bottom: govuk-spacing(1);
|
||||
}
|
||||
|
||||
.govuk-footer__heading {
|
||||
@include govuk-responsive-margin(7, "bottom");
|
||||
padding-bottom: govuk-spacing(4);
|
||||
@include mq ($until: tablet) {
|
||||
padding-bottom: govuk-spacing(2);
|
||||
}
|
||||
border-bottom: 1px solid $govuk-footer-border;
|
||||
}
|
||||
|
||||
.govuk-footer__navigation {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex; // Support: Flexbox
|
||||
margin-right: -$govuk-gutter-half;
|
||||
margin-left: -$govuk-gutter-half;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap; // Support: Flexbox
|
||||
}
|
||||
|
||||
.govuk-footer__section {
|
||||
display: inline-block;
|
||||
margin-right: $govuk-gutter-half;
|
||||
margin-bottom: $govuk-gutter;
|
||||
margin-left: $govuk-gutter-half;
|
||||
vertical-align: top;
|
||||
// Ensure columns take up equal width (typically one-half:one-half)
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1; // Support: Flexbox
|
||||
-webkit-flex-shrink: 1;
|
||||
-ms-flex-negative: 1;
|
||||
flex-shrink: 1; // Support: Flexbox
|
||||
@include mq ($until: desktop) {
|
||||
// Make sure columns do not drop below 200px in width
|
||||
// Will typically result in wrapping, and end up in a single column on smaller screens.
|
||||
-webkit-flex-basis: 200px;
|
||||
-ms-flex-preferred-size: 200px;
|
||||
flex-basis: 200px; // Support: Flexbox
|
||||
}
|
||||
}
|
||||
|
||||
// Sections two-third:one-third on desktop
|
||||
@include mq ($from: desktop) {
|
||||
.govuk-footer__section:first-child {
|
||||
-webkit-box-flex: 2;
|
||||
-webkit-flex-grow: 2;
|
||||
-ms-flex-positive: 2;
|
||||
flex-grow: 2; // Support: Flexbox
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-footer__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
-webkit-column-gap: $govuk-gutter;
|
||||
-moz-column-gap: $govuk-gutter;
|
||||
column-gap: $govuk-gutter; // Support: Columns
|
||||
}
|
||||
|
||||
@include mq ($from: desktop) {
|
||||
.govuk-footer__list--columns-2 {
|
||||
-webkit-column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
column-count: 2; // Support: Columns
|
||||
}
|
||||
|
||||
.govuk-footer__list--columns-3 {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3; // Support: Columns
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-footer__list-item {
|
||||
@include govuk-responsive-margin(4, "bottom");
|
||||
}
|
||||
|
||||
.govuk-footer__list-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
115
app/templates/components/us_components/footer/macro-options.json
Normal file
115
app/templates/components/us_components/footer/macro-options.json
Normal file
@@ -0,0 +1,115 @@
|
||||
[
|
||||
{
|
||||
"name": "meta",
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Object containing options for the meta navigation.",
|
||||
"params": [
|
||||
{
|
||||
"name": "visuallyHiddenTitle",
|
||||
"type": "string",
|
||||
"description": "Title for a meta item section, which defaults to Support links"
|
||||
},
|
||||
{
|
||||
"name": "html",
|
||||
"type": "string",
|
||||
"description": "HTML to add to the meta section of the footer, which will appear below any links specified using meta.items."
|
||||
},
|
||||
{
|
||||
"name": "text",
|
||||
"type": "string",
|
||||
"description": "Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored."
|
||||
},
|
||||
{
|
||||
"name": "items",
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Array of items for use in the meta section of the footer.",
|
||||
"params": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "List item text in the meta section of the footer."
|
||||
},
|
||||
{
|
||||
"name": "href",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "List item href attribute in the meta section of the footer."
|
||||
},
|
||||
{
|
||||
"name": "attributes",
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "HTML attributes (for example data attributes) to add to the anchor in the footer meta section."
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "navigation",
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Array of items for use in the navigation section of the footer.",
|
||||
"params": [
|
||||
{
|
||||
"name": "title",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Title for a section"
|
||||
},
|
||||
{
|
||||
"name": "columns",
|
||||
"type": "integer",
|
||||
"required": false,
|
||||
"description": "Amount of columns to display items in navigation section of the footer."
|
||||
},
|
||||
{
|
||||
"name": "items",
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Array of items to display in the list in navigation section of the footer.",
|
||||
"params": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "List item text in the navigation section of the footer."
|
||||
},
|
||||
{
|
||||
"name": "href",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link."
|
||||
},
|
||||
{
|
||||
"name": "attributes",
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "HTML attributes (for example data attributes) to add to the anchor in the footer navigation section."
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "containerClasses",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Classes that can be added to the inner container, useful if you want to make the footer full width."
|
||||
},
|
||||
{
|
||||
"name": "classes",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Classes to add to the footer component container."
|
||||
},
|
||||
{
|
||||
"name": "attributes",
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "HTML attributes (for example data attributes) to add to the footer component container."
|
||||
}
|
||||
]
|
||||
3
app/templates/components/us_components/footer/macro.njk
Normal file
3
app/templates/components/us_components/footer/macro.njk
Normal file
@@ -0,0 +1,3 @@
|
||||
{% macro govukFooter(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
117
app/templates/components/us_components/footer/template.njk
Normal file
117
app/templates/components/us_components/footer/template.njk
Normal file
@@ -0,0 +1,117 @@
|
||||
<footer class="usa-footer usa-footer--big">
|
||||
{# <div class="grid-container usa-footer__return-to-top">
|
||||
<a href="#">Return to top</a>
|
||||
</div> #}
|
||||
<div class="usa-footer__primary-section">
|
||||
<div class="grid-container">
|
||||
<div class="grid-row">
|
||||
<div class="grid-col">
|
||||
{# {% if params.navigation %}
|
||||
<nav class="usa-footer__nav" aria-label="Footer navigation,,">
|
||||
<div class="grid-row grid-gap-2">
|
||||
{% for nav in params.navigation %}
|
||||
<div class="mobile-lg:grid-col-6 desktop:grid-col-4">
|
||||
<section class="
|
||||
usa-footer__primary-content
|
||||
usa-footer__primary-content--collapsible
|
||||
">
|
||||
<h4 class="usa-footer__primary-link">{{ nav.title }}</h4>
|
||||
<ul class="usa-list usa-list--unstyled">
|
||||
{% for item in nav.items %}
|
||||
{% if item.href and item.text %}
|
||||
<li class="usa-footer__secondary-link">
|
||||
<a href="{{ item.href }}" {% for attribute, value in item.attributes %}
|
||||
{{attribute}}="{{value}}" {% endfor %}>
|
||||
{{ item.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %} #}
|
||||
</div>
|
||||
</div>
|
||||
<div class="padding-y-1">
|
||||
{% if params.meta %}
|
||||
<h2 class="usa-sr-only">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
|
||||
{% if params.meta.items %}
|
||||
{% for item in params.meta.items %}
|
||||
<a class="govuk-footer__link" href="{{ item.href }}" {% for attribute, value in item.attributes %}
|
||||
{{attribute}}="{{value}}" {% endfor %}>
|
||||
{{ item.text }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if params.meta.text or params.meta.html %}
|
||||
<div>
|
||||
{{ params.meta.html | safe if params.meta.html else params.meta.text }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="usa-identifier site-identifier">
|
||||
<section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier,,,,,,">
|
||||
<div class="usa-identifier__container">
|
||||
<div class="usa-identifier__logos"><a href="javascript:void(0);" class="usa-identifier__logo">
|
||||
<img class="usa-identifier__logo-img" src="{{ params.assetsPath | default('/static/images') }}/gsa-logo.svg" alt="GSA Logo" role="img" width="48"
|
||||
height="48">
|
||||
</a></div>
|
||||
<section class="usa-identifier__identity" aria-label="Agency description">
|
||||
<p class="usa-identifier__identity-domain">beta.notify.gov</p>
|
||||
<p class="usa-identifier__identity-disclaimer">An official website of the <a href="https://gsa.gov">General
|
||||
Services Administration</a></p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links">
|
||||
<div class="usa-identifier__container">
|
||||
<ul class="usa-identifier__required-links-list">
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link">About GSA</a>
|
||||
</li>
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsa.gov/website-information/accessibility-aids"
|
||||
class="usa-identifier__required-link">Accessibility support</a>
|
||||
</li>
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsa.gov/reference/freedom-of-information-act-foia"
|
||||
class="usa-identifier__required-link">FOIA requests</a>
|
||||
</li>
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002"
|
||||
class="usa-identifier__required-link">No FEAR Act data</a>
|
||||
</li>
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsaig.gov/" class="usa-identifier__required-link">Office of the Inspector General</a>
|
||||
</li>
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsa.gov/reference/reports/budget-performance"
|
||||
class="usa-identifier__required-link">Performance reports</a>
|
||||
</li>
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsa.gov/website-information/website-policies"
|
||||
class="usa-identifier__required-link">Privacy policy</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="usa-identifier__section usa-identifier__section--usagov"
|
||||
aria-label="Government information and services">
|
||||
<div class="usa-identifier__container">
|
||||
<div class="usa-identifier__usagov-description">
|
||||
Looking for U.S. government information and services?
|
||||
</div>
|
||||
<a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
Reference in New Issue
Block a user