darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-07 03:43:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

Updating usaComponents in more places

Browse Source
This commit is contained in:
Jonathan Bobel
2023-08-31 13:24:12 -04:00
parent c19083b04e
commit f82d77cdaf
14 changed files with 28 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/templates/admin_template.html
View File

@@ -133,7 +133,7 @@
] %} #}
{% endif %}
{{ govukHeader({
{{ usaHeader({
"homepageUrl": url_for('main.show_accounts_or_dashboard'),
"productName": "Notify",
"navigation": navigation,
@@ -151,7 +151,7 @@
{% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a>' %}
{% endif %}
{{ govukFooter({
{{ usaFooter({
"classes": "js-footer",
"navigation": [
{

236
app/templates/components/components/footer/_footer.scss
View File

@@ -1,236 +0,0 @@
@import "../../settings/all";
@import "../../tools/all";
@import "../../helpers/all";
@import "../../helpers/typography";
@include govuk-exports("govuk/component/footer") {
$usa-footer-background: $govuk-canvas-background-colour;
$usa-footer-border-top: #a1acb2;
$usa-footer-border: govuk-colour("grey-2");
$usa-footer-text: #454a4c;
$usa-footer-link: $usa-footer-text;
$usa-footer-link-hover: #171819;
// Based on the govuk-crest-2x.png image dimensions.
$usa-footer-crest-image-width-2x: 250px;
$usa-footer-crest-image-height-2x: 204px;
// Half the 2x image so that it fits the regular 1x size.
$usa-footer-crest-image-width: ($usa-footer-crest-image-width-2x / 2);
$usa-footer-crest-image-height: ($usa-footer-crest-image-height-2x / 2);
.usa-footer {
@include govuk-font($size: 16);
@include govuk-responsive-padding(7, "top");
@include govuk-responsive-padding(5, "bottom");
border-top: 1px solid $usa-footer-border-top;
color: $usa-footer-text;
background: $usa-footer-background;
}
.usa-footer__link {
@include govuk-focusable-fill;
&:link,
&:visited {
color: $usa-footer-link;
}
&:hover,
&:active {
color: $usa-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;
}
}
}
.usa-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 $usa-footer-border;
}
.usa-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
}
.usa-footer__meta-item {
margin-right: $govuk-gutter-half;
margin-bottom: govuk-spacing(5);
margin-left: $govuk-gutter-half;
}
.usa-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
}
}
.usa-footer__licence-logo {
display: inline-block;
margin-right: govuk-spacing(2);
@include mq ($until: desktop) {
margin-bottom: govuk-spacing(3);
}
vertical-align: top;
}
.usa-footer__licence-description {
display: inline-block;
}
.usa-footer__copyright-logo {
display: inline-block;
min-width: $usa-footer-crest-image-width;
padding-top: ($usa-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: $usa-footer-crest-image-width $usa-footer-crest-image-height;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
.usa-footer__inline-list {
margin-top: 0;
margin-bottom: govuk-spacing(3);
padding: 0;
}
.usa-footer__meta-custom {
margin-bottom: govuk-spacing(4);
}
.usa-footer__inline-list-item {
display: inline-block;
margin-right: govuk-spacing(3);
margin-bottom: govuk-spacing(1);
}
.usa-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 $usa-footer-border;
}
.usa-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
}
.usa-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) {
.usa-footer__section:first-child {
-webkit-box-flex: 2;
-webkit-flex-grow: 2;
-ms-flex-positive: 2;
flex-grow: 2; // Support: Flexbox
}
}
.usa-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) {
.usa-footer__list--columns-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; // Support: Columns
}
.usa-footer__list--columns-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; // Support: Columns
}
}
.usa-footer__list-item {
@include govuk-responsive-margin(4, "bottom");
}
.usa-footer__list-item:last-child {
margin-bottom: 0;
}
}

2
app/templates/components/components/footer/macro.njk
View File

@@ -1,3 +1,3 @@
{% macro govukFooter(params) %}
{% macro usaFooter(params) %}
{%- include "./template.njk" -%}
{% endmacro %}

2
app/templates/components/components/header/macro.njk
View File

@@ -1,3 +1,3 @@
{% macro govukHeader(params) %}
{% macro usaHeader(params) %}
{%- include "./template.njk" -%}
{% endmacro %}

2
app/templates/components/components/input/macro.njk
View File

@@ -1,3 +1,3 @@
{% macro govukInput(params) %}
{% macro usaInput(params) %}
{%- include "./template.njk" -%}
{% endmacro %}

2
app/templates/components/components/inset-text/macro.njk
View File

@@ -1,3 +1,3 @@
{% macro govukInsetText(params) %}
{% macro usaInsetText(params) %}
{%- include './template.njk' -%}
{% endmacro %}

2
app/templates/components/components/radios/macro.njk
View File

@@ -1,3 +1,3 @@
{% macro govukRadios(params) %}
{% macro usaRadios(params) %}
{%- include "./template.njk" -%}
{% endmacro %}

8
app/templates/main_template.html
View File

@@ -1,6 +1,6 @@
{% from "./components/components/skip-link/macro.njk" import usaSkipLink -%}
{% from "./components/components/header/macro.njk" import govukHeader -%}
{% from "./components/components/footer/macro.njk" import govukFooter -%}
{% from "./components/components/header/macro.njk" import usaHeader -%}
{% from "./components/components/footer/macro.njk" import usaFooter -%}
{# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #}
{%- set assetUrl = assetUrl | default(assetPath) -%}
<!DOCTYPE html>
@@ -44,7 +44,7 @@
{% endblock %}
{% block header %}
{{ govukHeader({}) }}
{{ usaHeader({}) }}
{% endblock %}
{% block main %}
@@ -57,7 +57,7 @@
{% endblock %}
{% block footer %}
{{ govukFooter({}) }}
{{ usaFooter({}) }}
{% endblock %}
{% block bodyEnd %}{% endblock %}

8
app/templates/partials/templates/guidance-formatting-letters.html
View File

@@ -1,17 +1,17 @@
{% from "components/components/inset-text/macro.njk" import govukInsetText %}
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
<h2 class="heading-medium">Formatting</h2>
<p class="usa-body">
To put a heading in your template, use a hash:
</p>
{{ govukInsetText({
{{ usaInsetText({
"text": "# This is a heading",
"classes": ""})
}}
<p class="usa-body">
To make bullet points, use asterisks:
</p>
{{ govukInsetText({
{{ usaInsetText({
"html": "* point 1<br/>
* point 2<br/>
* point 3<br/>",
@@ -20,7 +20,7 @@
<p class="usa-body">
To insert a page break, use three asterisks:
</p>
{{ govukInsetText({
{{ usaInsetText({
"html": "Content on page 1<br/>
<br/>
***<br/>

10
app/templates/partials/templates/guidance-formatting.html
View File

@@ -1,17 +1,17 @@
{% from "components/components/inset-text/macro.njk" import govukInsetText %}
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
<h2 class="heading-medium">Formatting</h2>
<p class="bottom-gutter-1-3">
To put a title in your template, use a hash:
</p>
<div>
{{ govukInsetText({"text": "# This is a title", "classes": ""})}}
{{ usaInsetText({"text": "# This is a title", "classes": ""})}}
</div>
<p class="bottom-gutter-1-3">
To make bullet points, use asterisks:
</p>
<div>
{{ govukInsetText({
{{ usaInsetText({
"html": "* point 1<br/>
* point 2<br/>
* point 3<br/>",
@@ -22,12 +22,12 @@
To add inset text, use a caret:
</p>
<div>
{{ govukInsetText({"text": "^ You must tell us if your circumstances change", "classes": ""})}}
{{ usaInsetText({"text": "^ You must tell us if your circumstances change", "classes": ""})}}
</div>
<p class="bottom-gutter-1-3">
To add a horizontal line, use three dashes:
</p>
{{ govukInsetText({
{{ usaInsetText({
"html": '<p class="usa-body">First paragraph</p>
<p class="usa-body" style="letter-spacing: 1px;">---</p>
<p class="usa-body">Second paragraph</p>',

4
app/templates/partials/templates/guidance-links.html
View File

@@ -1,9 +1,9 @@
{% from "components/components/inset-text/macro.njk" import govukInsetText %}
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
<h2 class="font-body-lg">Links and URLs</h2>
<p class="bottom-gutter-1-3">
Always use full URLs, starting with https://. For example:
{{ govukInsetText({
{{ usaInsetText({
"text": "Apply now at https://www.usa.gov/example",
"classes": "usa-body"})
}}

4
app/templates/partials/templates/guidance-optional-content.html
View File

@@ -1,4 +1,4 @@
{% from "components/components/inset-text/macro.njk" import govukInsetText %}
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
<h2 class="font-body-lg">
Optional content
@@ -10,7 +10,7 @@
For example if you only want to show something to people who are under
18:
</p>
{{ govukInsetText({
{{ usaInsetText({
"text": "((under18??Please get your application signed by a parent or
guardian.))",
"classes": "usa-body"})

4
app/templates/partials/templates/guidance-personalisation.html
View File

@@ -1,4 +1,4 @@
{% from "components/components/inset-text/macro.njk" import govukInsetText %}
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
<h2 class="font-body-lg">
Personalization
@@ -6,7 +6,7 @@
<p class="bottom-gutter-1-3">
Use double brackets to personalize your message:
</p>
{{ govukInsetText({
{{ usaInsetText({
"text": "Hello ((first name)), your reference is ((ref number))",
"classes": ""})
}}

4
app/templates/partials/templates/guidance-send-a-document.html
View File

@@ -1,4 +1,4 @@
{% from "components/components/inset-text/macro.njk" import govukInsetText %}
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
<h2 class="heading-medium">
Send a document by email
@@ -6,7 +6,7 @@
<p class="usa-body">
Use double brackets to add a placeholder field to your template. This will contain a secure link to download the document.
</p>
{{ govukInsetText({
{{ usaInsetText({
"text": "Download your document at: ((link_to_file))",
"classes": ""})
}}