From 68d49fc8dd7b06aaa3e912bde6cf50580177ff56 Mon Sep 17 00:00:00 2001
From: Jonathan Bobel <jbobel@flexion.us>
Date: Mon, 14 Aug 2023 14:30:57 -0400
Subject: [PATCH] More updates to checkboxes and radio buttons

---
 .../uswds/_uswds-theme-custom-styles.scss     | 33 +++++++++----------
 app/templates/components/select-input.html    | 12 +++----
 .../us_components/fieldset/template.njk       |  2 +-
 .../views/templates/_template_list.html       |  8 ++---
 app/templates/views/templates/choose.html     |  2 +-
 5 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index 2326b92db..368d4d22d 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -128,26 +128,20 @@ td.table-empty-message {
    box-shadow: none;
 }
 
-// .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: url(../img/material-icons/folder.svg) no-repeat;
    padding-left: units(4);
    display: inline-block; 
-   height: units(4);
-   &:hover {
-      background: url(../img/material-icons/folder.svg) no-repeat;
-   }
+   background-position: 0;
 }
 
 .folder-heading-folder {
-   background: url(../img/material-icons/folder.svg) no-repeat;
+   background: url(../img/material-icons/folder_open.svg) no-repeat;
    padding-left: units(4);
    display: inline-block;
-   height: units(4);
+   background-size: units(3) units(3);
+   background-position: 0;
 }
 
 .message-name-separator:before, .folder-heading-separator:before {
@@ -155,15 +149,10 @@ td.table-empty-message {
    margin: 0 units(0.5);
 }
 
-.folder-heading a.folder-heading-folder-truncated {
-   background-position: 0;
-}
-
 .usa-template-list-template {
    background: url(../img/material-icons/description.svg) no-repeat;
    padding-left: units(4);
    display: inline-flex; 
-   height: units(4);
 }
 
 .template-list-item-hint {
@@ -187,10 +176,8 @@ td.table-empty-message {
 }
 
 .js-stick-at-bottom-when-scrolling {
-   margin: 0 0 units(5);
-   padding: units(2) 0;
    display: flex;
-   align-items: center;
+   align-items: flex-end;
    justify-content: space-between;
    overflow: visible;
    button {
@@ -280,6 +267,9 @@ td.table-empty-message {
 }
 
 .dashboard-table {
+   table {
+      width: 100%; 
+   }
    .file-list-filename {
       font-weight: bold;
    }
@@ -288,6 +278,13 @@ td.table-empty-message {
    }
 }
 
+#template-list {
+   max-height: 500px;
+   overflow-y: auto;
+   padding-left: units(1);
+   margin: units(2) 0; 
+}
+
 // Tabs
 
 .tabs {
diff --git a/app/templates/components/select-input.html b/app/templates/components/select-input.html
index ce2df8897..47ec19c5d 100644
--- a/app/templates/components/select-input.html
+++ b/app/templates/components/select-input.html
@@ -41,8 +41,8 @@
     {% if is_collapsible %}
     <div class="selection-summary" role="region" aria-live="polite"></div>
     {% endif %}
-    <fieldset id="{{ field.id }}" {% if inline %}class="inline"{% endif %}>
-      <legend class="{{ 'form-label' if not hide_legend else '' }}{% if legend_style != 'text' %} {{ legend_style }}{% endif %}">
+    <fieldset id="{{ field.id }}" class="usa-fieldset" {% if inline %}class="inline"{% endif %}>
+      <legend class="{{ 'usa-legend' if not hide_legend else '' }}{% if legend_style != 'text' %} {{ legend_style }}{% endif %}">
         {% if hide_legend %}<span class="usa-sr-only">{% endif %}
           {{ field.label.text|safe }}
         {% if hide_legend %}</span>{% endif %}
@@ -64,12 +64,12 @@
 
 {% macro select_input(option, disable=[], option_hints={}, data_target=None, as_list_item=False, input="radio") %}
   {% if as_list_item %}
-  <li class="multiple-choice" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
+  <li class="multiple-choice test-one" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
   {% else %}
-  <div class="multiple-choice" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
+  <div class="usa-radio" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
   {% endif %}
     <input
-      id="{{ option.id }}" name="{{ option.name }}" type="{{ input }}" value="{{ option.data }}"
+      id="{{ option.id }}" class="usa-radio__input" name="{{ option.name }}" type="{{ input }}" value="{{ option.data }}"
       {% if option.data in disable %}
         disabled
       {% endif %}
@@ -77,7 +77,7 @@
         checked
       {% endif %}
     >
-    <label class="block-label" for="{{ option.id }}">
+    <label class="usa-radio__label" for="{{ option.id }}">
       {{ option.label.text }}
       {% if option_hints[option.data] %}
         <div class="block-label-hint">
diff --git a/app/templates/components/us_components/fieldset/template.njk b/app/templates/components/us_components/fieldset/template.njk
index 92f398233..9ca89387b 100644
--- a/app/templates/components/us_components/fieldset/template.njk
+++ b/app/templates/components/us_components/fieldset/template.njk
@@ -1,4 +1,4 @@
-<fieldset class="usa-fieldset margin-y-5
+<fieldset class="usa-fieldset
   {%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- if params.describedBy %} aria-describedby="{{ params.describedBy }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
diff --git a/app/templates/views/templates/_template_list.html b/app/templates/views/templates/_template_list.html
index 879579f38..40f8a8bf1 100644
--- a/app/templates/views/templates/_template_list.html
+++ b/app/templates/views/templates/_template_list.html
@@ -57,13 +57,11 @@
             </span>
           </a>
           {% endif %}
+          <span id="{{ item.id }}-item-hint" class="usa-checkbox__label-description template-list-item-hint">
+            {{ item.hint }}
+          </span>
       {% endset %}
 
-      {% set item_meta %}
-        <span id="{{ item.id }}-item-hint" class="usa-hint template-list-item-hint">
-          {{ item.hint }}
-        </span>
-      {% endset %}
 
       {# create the item config now to include the label content -#}
       {# TODO: "attributes": { "aria-describedby": item.id ~ "-hint" } needs to be added but govuk-frontend-jinja doesn't currently support this -#}
diff --git a/app/templates/views/templates/choose.html b/app/templates/views/templates/choose.html
index ffb055a74..7dc5e946f 100644
--- a/app/templates/views/templates/choose.html
+++ b/app/templates/views/templates/choose.html
@@ -34,7 +34,7 @@
 
     <div class="govuk-grid-row">
       <div class="{% if current_user.has_permissions('manage_templates') %} govuk-grid-column-five-sixths {% else %} govuk-grid-column-full {% endif %}">
-        <div class="usa-alert usa-alert--info usa-alert--slim margin-y-5">
+        <div class="usa-alert usa-alert--info usa-alert--slim">
           <div class="usa-alert__body">
             <p class="usa-alert__text">
               Every message starts with a template. To send, choose or create a template.