mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-09 14:29:49 -04:00
move vendored uk components to templates
This commit is contained in:
stvnrlly
15
app/templates/components/uk_components/footer/README.md
Normal file
15
app/templates/components/uk_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 customise the appearance, content and behaviour 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/uk_components/footer/_footer.scss
Normal file
236
app/templates/components/uk_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/uk_components/footer/macro-options.json
Normal file
115
app/templates/components/uk_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/uk_components/footer/macro.njk
Normal file
3
app/templates/components/uk_components/footer/macro.njk
Normal file
@@ -0,0 +1,3 @@
|
||||
{% macro govukFooter(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
87
app/templates/components/uk_components/footer/template.njk
Normal file
87
app/templates/components/uk_components/footer/template.njk
Normal file
@@ -0,0 +1,87 @@
|
||||
<footer class="govuk-footer {{ params.classes if params.classes }}" role="contentinfo"
|
||||
{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
||||
<div class="govuk-width-container {{ params.containerClasses if params.containerClasses }}">
|
||||
{% if params.navigation %}
|
||||
<div class="govuk-footer__navigation">
|
||||
{% for nav in params.navigation %}
|
||||
<div class="govuk-footer__section">
|
||||
<h2 class="govuk-footer__heading govuk-heading-m">{{ nav.title }}</h2>
|
||||
{% if nav.items %}
|
||||
{% set listClasses %}
|
||||
{% if nav.columns %}
|
||||
govuk-footer__list--columns-{{ nav.columns }}
|
||||
{% endif %}
|
||||
{% endset %}
|
||||
<ul class="govuk-footer__list {{ listClasses | trim }}">
|
||||
{% for item in nav.items %}
|
||||
{% if item.href and item.text %}
|
||||
<li class="govuk-footer__list-item">
|
||||
<a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
||||
{{ item.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<hr class="govuk-footer__section-break">
|
||||
{% endif %}
|
||||
<div class="govuk-footer__meta">
|
||||
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
|
||||
{% if params.meta %}
|
||||
<h2 class="govuk-visually-hidden">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
|
||||
{% if params.meta.items %}
|
||||
<ul class="govuk-footer__inline-list">
|
||||
{% for item in params.meta.items %}
|
||||
<li class="govuk-footer__inline-list-item">
|
||||
<a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
||||
{{ item.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% if params.meta.text or params.meta.html %}
|
||||
<div class="govuk-footer__meta-custom">
|
||||
{{ params.meta.html | safe if params.meta.html else params.meta.text }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{#- The SVG needs `focusable="false"` so that Internet Explorer does not
|
||||
treat it as an interactive element - without this it will be
|
||||
'focusable' when using the keyboard to navigate. #}
|
||||
<svg
|
||||
role="presentation"
|
||||
focusable="false"
|
||||
class="govuk-footer__licence-logo"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewbox="0 0 483.2 195.7"
|
||||
height="17"
|
||||
width="41"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
|
||||
/>
|
||||
</svg>
|
||||
<span class="govuk-footer__licence-description">
|
||||
All content is available under the
|
||||
<a
|
||||
class="govuk-footer__link"
|
||||
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
|
||||
rel="license"
|
||||
>Open Government Licence v3.0</a>, except where otherwise stated
|
||||
</span>
|
||||
</div>
|
||||
<div class="govuk-footer__meta-item">
|
||||
<a
|
||||
class="govuk-footer__link govuk-footer__copyright-logo"
|
||||
href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
|
||||
>© Crown copyright</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
Reference in New Issue
Block a user