From 1be305d045445dda8254d7fee81615f8b273b8b8 Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Mon, 14 Aug 2023 10:35:11 -0400 Subject: [PATCH] Reworking checkboxes to adhere to USWDS styling --- .../uswds/_uswds-theme-custom-styles.scss | 134 +++++++++++++++--- app/assets/sass/uswds/styles.scss | 2 +- app/templates/components/big-number.html | 2 +- .../components/content-metadata.html | 6 +- app/templates/components/pill.html | 2 +- app/templates/components/table.html | 20 +-- .../us_components/back-link/template.njk | 2 +- .../us_components/checkboxes/template.njk | 2 +- .../us_components/fieldset/template.njk | 6 +- .../us_components/radio-label/README.md | 15 ++ .../us_components/radio-label/_label.scss | 45 ++++++ .../radio-label/macro-options.json | 38 +++++ .../us_components/radio-label/macro.njk | 3 + .../us_components/radio-label/template.njk | 15 ++ .../forms/fields/checkboxes/template.njk | 12 +- app/templates/main_nav.html | 2 +- app/templates/service_navigation.html | 6 +- app/templates/views/activity/counts.html | 2 +- .../views/dashboard/template-statistics.html | 2 +- app/templates/views/get-started.html | 2 +- .../views/templates/_template_list.html | 46 +++--- app/templates/withnav_template.html | 6 +- tests/javascripts/support/helpers/html.js | 10 +- tests/javascripts/updateContent.test.js | 2 +- 24 files changed, 295 insertions(+), 87 deletions(-) create mode 100644 app/templates/components/us_components/radio-label/README.md create mode 100644 app/templates/components/us_components/radio-label/_label.scss create mode 100644 app/templates/components/us_components/radio-label/macro-options.json create mode 100644 app/templates/components/us_components/radio-label/macro.njk create mode 100644 app/templates/components/us_components/radio-label/template.njk diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss index d53ebe6e2..2326b92db 100644 --- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss +++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss @@ -51,16 +51,6 @@ p, font-size: size("body", 16); } -.big-number-with-status .big-number, -.big-number-with-status .big-number-smaller { - @include u-bg("primary"); -} - -.big-number-with-status .big-number-status, -.big-number-with-status .big-number-status-failing { - @include u-bg("green-cool-40v"); -} - .show-more-no-border:focus, .show-more:focus, .table-field-right-aligned a:active:before, @@ -138,22 +128,31 @@ td.table-empty-message { box-shadow: none; } -.template-list-item-without-ancestors a.template-list-folder:first-of-type { - background-image: url(../images/folder-blue-bold.svg); - background-size: 30px 30px; -} +// .template-list-item-without-ancestors a.template-list-folder:first-of-type { +// background: url(../img/material-icons/folder.svg) no-repeat; +// } .folder-heading a.folder-heading-folder, .template-list-folder { - background-image: url(../images/folder-blue-bold.svg); + background: url(../img/material-icons/folder.svg) no-repeat; + padding-left: units(4); + display: inline-block; + height: units(4); &:hover { - color: color("blue-warm-70v"); - background-image: url(../images/folder-blue-bold.svg); + background: url(../img/material-icons/folder.svg) no-repeat; } } .folder-heading-folder { - background-image: url(../images/folder-black.svg); + background: url(../img/material-icons/folder.svg) no-repeat; + padding-left: units(4); + display: inline-block; + height: units(4); +} + +.message-name-separator:before, .folder-heading-separator:before { + content: ">"; + margin: 0 units(0.5); } .folder-heading a.folder-heading-folder-truncated { @@ -162,8 +161,13 @@ td.table-empty-message { .usa-template-list-template { background: url(../img/material-icons/description.svg) no-repeat; - padding-left: 40px; - background-size: 30px 30px; + padding-left: units(4); + display: inline-flex; + height: units(4); +} + +.template-list-item-hint { + padding-left: units(4); } .js-enabled .live-search { @@ -207,7 +211,7 @@ td.table-empty-message { } .spark-bar-bar { - font-size: units(3); + font-size: units(2); background-color: transparent; } @@ -222,6 +226,92 @@ td.table-empty-message { } .navigation-service.usa-breadcrumb { - padding-bottom: 0; + -bottom: 0; } +// Dashboard + +.dashboard { + .big-number-with-status { + a { + background: color("blue-60v"); + padding: units(2); + margin-bottom: units(1); + text-decoration: none; + &:hover{ + background: color("blue-warm-70v"); + } + } + span { + color: white; + } + .big-number-smaller { + display: flex; + flex-direction: column; + .big-number-number { + font-size: units(5); + line-height: units(6); + } + .big-number-label { + font-size: units(3); + } + } + .big-number-status { + background: color("green-cool-40v"); + display: flex; + padding: units(1) units(2); + } + } + .usa-table { + width: 100%; + caption { + margin-bottom: 0; + } + .table-field-center-aligned { + text-align: center; + } + .template-statistics-table-template-name { + padding-left: units(4); + display: inline-block; + background-repeat: no-repeat; + background-image: url(../img/material-icons/description.svg); + } + } +} + +.dashboard-table { + .file-list-filename { + font-weight: bold; + } + .file-list-hint { + margin: 0; + } +} + +// Tabs + +.tabs { + .pill { + display: flex; + list-style: none; + padding: 0; + .pill-item__container { + border: 1px solid color("gray-cool-10"); + width: 25%; + display: flex; + flex-direction: column; + text-align: center; + font-size: units(2); + a { + padding: units(4); + .big-number-smaller { + font-size: units(5); + line-height: units(6); + } + &:not(.pill-item--selected):hover { + background: color("blue-warm-70v"); + } + } + } + } +} diff --git a/app/assets/sass/uswds/styles.scss b/app/assets/sass/uswds/styles.scss index 6897863e0..23bd83c6f 100644 --- a/app/assets/sass/uswds/styles.scss +++ b/app/assets/sass/uswds/styles.scss @@ -1,3 +1,3 @@ @forward "uswds-theme"; @forward "uswds"; -@forward "uswds-theme-custom-styles"; +@forward "uswds-theme-custom-styles"; \ No newline at end of file diff --git a/app/templates/components/big-number.html b/app/templates/components/big-number.html index fb4e46a5e..5bf4baa08 100644 --- a/app/templates/components/big-number.html +++ b/app/templates/components/big-number.html @@ -1,6 +1,6 @@ {% macro big_number(number, label, link=None, currency='', smaller=False, smallest=False) %} {% if link %} - + {% endif %} diff --git a/app/templates/components/content-metadata.html b/app/templates/components/content-metadata.html index 9bd4d4052..8c4d4a17d 100644 --- a/app/templates/components/content-metadata.html +++ b/app/templates/components/content-metadata.html @@ -1,11 +1,9 @@ {% macro content_metadata(data, suffix=False) %}
-
{% for key, value in data.items() %} -
{{ key }}
-
{{ value }}
+ {{ key }} + {{ value }} {% endfor %} -
{% if suffix %}

{{ suffix }}

{% endif %} diff --git a/app/templates/components/pill.html b/app/templates/components/pill.html index c4db0804c..bb1bb033a 100644 --- a/app/templates/components/pill.html +++ b/app/templates/components/pill.html @@ -11,7 +11,7 @@ {% for label, option, link, count in items %}
  • {% if current_value == option %} - + {% else %} {% endif %} diff --git a/app/templates/components/table.html b/app/templates/components/table.html index 9a02845fc..3b9b70570 100644 --- a/app/templates/components/table.html +++ b/app/templates/components/table.html @@ -1,6 +1,6 @@ {% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%} - -
    + + @@ -10,7 +10,7 @@ {% if field_headings_visible %} {{ field_heading }} {% else %} - {{ field_heading }} + {{ field_heading }} {% endif %} {% endfor %} @@ -65,7 +65,11 @@ {% macro field(align='left', status='', border=True, colspan=None, wrap=False) -%} - {% set field_alignment = 'table-field-right-aligned' if align == 'right' else 'table-field-left-aligned' %} + {% set field_alignment = + 'table-field-right-aligned' if align == 'right' else + 'table-field-center-aligned' if align == 'center' else + 'table-field-left-aligned' + %} {% set border = '' if border else 'table-field-noborder' %} {% set wrap = 'table-field-wrap-text' if wrap else '' %} @@ -165,12 +169,12 @@ {% if notification.status|format_notification_status_as_url(notification.notification_type) %} {% endif %} - +

    {{ notification.status|format_notification_status_as_time( notification.created_at|format_datetime_short, (notification.updated_at or notification.created_at)|format_datetime_short ) }} - +

    {% if displayed_on_single_line %}    {% endif %} {% endcall %} {% endif %} @@ -186,11 +190,11 @@ {{ '{:,.0f}'.format(count) }} - {% if count == 1 -%} + {% endcall %} diff --git a/app/templates/components/us_components/back-link/template.njk b/app/templates/components/us_components/back-link/template.njk index 21f0078b4..25e611b06 100644 --- a/app/templates/components/us_components/back-link/template.njk +++ b/app/templates/components/us_components/back-link/template.njk @@ -1,2 +1,2 @@ -{{ (params.html | safe if params.html else (params.text if params.text else 'Back')) }} diff --git a/app/templates/components/us_components/checkboxes/template.njk b/app/templates/components/us_components/checkboxes/template.njk index 9a12be65c..e15bc8b1f 100644 --- a/app/templates/components/us_components/checkboxes/template.njk +++ b/app/templates/components/us_components/checkboxes/template.njk @@ -49,7 +49,7 @@ visuallyHiddenText: params.errorMessage.visuallyHiddenText }) | indent(2) | trim }} {% endif %} -
    {% for item in params.items %} diff --git a/app/templates/components/us_components/fieldset/template.njk b/app/templates/components/us_components/fieldset/template.njk index 5388e06a8..92f398233 100644 --- a/app/templates/components/us_components/fieldset/template.njk +++ b/app/templates/components/us_components/fieldset/template.njk @@ -1,11 +1,11 @@ -
    {% if params.legend.html or params.legend.text %} - + {% if params.legend.isPageHeading %} -

    +

    {{ params.legend.html | safe if params.legend.html else params.legend.text }}

    {% else %} diff --git a/app/templates/components/us_components/radio-label/README.md b/app/templates/components/us_components/radio-label/README.md new file mode 100644 index 000000000..0fa9beef8 --- /dev/null +++ b/app/templates/components/us_components/radio-label/README.md @@ -0,0 +1,15 @@ +# Label + +## 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 + +The radio label component is used in other input components, to see an example of it in use see the [text input component](https://design-system.service.gov.uk/components/text-input/). + +## 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/file-upload/#options-example-default--label) for details. \ No newline at end of file diff --git a/app/templates/components/us_components/radio-label/_label.scss b/app/templates/components/us_components/radio-label/_label.scss new file mode 100644 index 000000000..bfe400e57 --- /dev/null +++ b/app/templates/components/us_components/radio-label/_label.scss @@ -0,0 +1,45 @@ +@import "../../settings/all"; +@import "../../tools/all"; +@import "../../helpers/all"; + +@include govuk-exports("govuk/component/label") { + .govuk-label { + @include govuk-font($size: 19); + @include govuk-text-colour; + + display: block; + + margin-bottom: govuk-spacing(1); + } + + // Modifiers that make labels look more like their equivalent headings + + .govuk-label--xl { + @include govuk-font($size: 48, $weight: bold); + margin-bottom: govuk-spacing(3); + } + + .govuk-label--l { + @include govuk-font($size: 36, $weight: bold); + margin-bottom: govuk-spacing(3); + } + + .govuk-label--m { + @include govuk-font($size: 24, $weight: bold); + margin-bottom: govuk-spacing(2); + } + + .govuk-label--s { + @include govuk-font($size: 19, $weight: bold); + } + + // When the label is nested inside a heading, override the heading so that it + // does not have a margin. Effectively we want to be able to treat the heading + // as if it is not there. + // + // This breaks BEM conventions because it exists as a parent of the 'block', + // so we can't really consider an element. + .govuk-label-wrapper { + margin: 0; + } +} diff --git a/app/templates/components/us_components/radio-label/macro-options.json b/app/templates/components/us_components/radio-label/macro-options.json new file mode 100644 index 000000000..2b40a9577 --- /dev/null +++ b/app/templates/components/us_components/radio-label/macro-options.json @@ -0,0 +1,38 @@ +[ + { + "name": "text", + "type": "string", + "required": true, + "description": "If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored." + }, + { + "name": "html", + "type": "string", + "required": true, + "description": "If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored." + }, + { + "name": "for", + "type": "string", + "required": true, + "description": "The value of the for attribute, the id of the input the label is associated with." + }, + { + "name": "isPageHeading", + "type": "boolean", + "required": false, + "description": "Whether the label also acts as the heading for the page." + }, + { + "name": "classes", + "type": "string", + "required": false, + "description": "Classes to add to the label tag." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes (for example data attributes) to add to the label tag." + } +] \ No newline at end of file diff --git a/app/templates/components/us_components/radio-label/macro.njk b/app/templates/components/us_components/radio-label/macro.njk new file mode 100644 index 000000000..43d2cabf2 --- /dev/null +++ b/app/templates/components/us_components/radio-label/macro.njk @@ -0,0 +1,3 @@ +{% macro usaRadioLabel(params) %} + {%- include "./template.njk" -%} +{% endmacro %} diff --git a/app/templates/components/us_components/radio-label/template.njk b/app/templates/components/us_components/radio-label/template.njk new file mode 100644 index 000000000..855b1d349 --- /dev/null +++ b/app/templates/components/us_components/radio-label/template.njk @@ -0,0 +1,15 @@ +{% if params.html or params.text %} +{% set labelHtml %} + +{% endset %} + +{% if params.isPageHeading %} +

    {{ labelHtml | safe | indent(2) }}

    +{% else %} +{{ labelHtml | safe }} +{% endif %} +{% endif %} diff --git a/app/templates/forms/fields/checkboxes/template.njk b/app/templates/forms/fields/checkboxes/template.njk index e081ccd4b..7e2ccd927 100644 --- a/app/templates/forms/fields/checkboxes/template.njk +++ b/app/templates/forms/fields/checkboxes/template.njk @@ -1,7 +1,7 @@ {% from "components/us_components/error-message/macro.njk" import govukErrorMessage -%} {% from "components/us_components/fieldset/macro.njk" import govukFieldset %} {% from "components/us_components/hint/macro.njk" import govukHint %} -{% from "components/us_components/label/macro.njk" import govukLabel %} +{% from "components/us_components/radio-label/macro.njk" import usaRadioLabel %} {#- Copied from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/checkboxes/template.njk @@ -73,7 +73,7 @@ visuallyHiddenText: params.errorMessage.visuallyHiddenText }) | indent(2) | trim }} {% endif %} - <{{ groupElement }} class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}" + <{{ groupElement }} class="{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} {%- if isConditional %} data-module="checkboxes"{% endif -%}> {% for item in params.items %} @@ -84,18 +84,18 @@ {% set itemHintId = id + "-item-hint" if hasHint else "" %} {% set itemDescribedBy = describedBy if not hasFieldset else "" %} {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %} - <{{ groupItemElement }} class="govuk-checkboxes__item {%- if item.classes %} {{ item.classes }}{% endif %}"> + <{{ groupItemElement }} class="usa-checkbox {%- if item.classes %} {{ item.classes }}{% endif %}"> {%- if item.before %}{{ item.before }}{% endif -%} - - {{ govukLabel({ + {{ usaRadioLabel({ html: item.html, text: item.text, - classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes), + classes: (' ' + item.label.classes if item.label.classes), attributes: item.label.attributes, for: id }) | indent(6) | trim }} diff --git a/app/templates/main_nav.html b/app/templates/main_nav.html index c479f4945..75ca2a318 100644 --- a/app/templates/main_nav.html +++ b/app/templates/main_nav.html @@ -1,7 +1,7 @@ {% if help %} {% include 'partials/tour.html' %} {% else %} -
    {{ caption }}