Tweak search field

nationalarchives · Nov 21, 2023 · 440bc08 · 440bc08
1 parent b13b278
commit 440bc08
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/src/nationalarchives/components/search-field/search-field.scss b/src/nationalarchives/components/search-field/search-field.scss
@@ -4,7 +4,7 @@
 
 .tna-search-field {
   &__fields {
-    margin-top: 1rem;
+    // margin-top: 1rem;
 
     display: flex;
     align-self: stretch;

diff --git a/src/nationalarchives/components/search-field/template.njk b/src/nationalarchives/components/search-field/template.njk
@@ -2,23 +2,30 @@
 {%- set containerClasses = [params.formGroupClasses] if params.formGroupClasses else [] -%}
 <div class="tna-search-field {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}">
-    <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
-      <label class="tna-form__label" for="tna-form__{{ params.id }}">
-        {{ params.label }}
-      </label>
-    </h{{ params.headingLevel }}>
-    {%- if params.hint %}
-    <p id="tna-form__{{ params.id }}-hint" class="tna-form__hint">
-      {{ params.hint }}
-    </p>
-    {%- endif %}
+    <div class="tna-form__group-contents">
+      <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
+        <label class="tna-form__label" for="tna-form__{{ params.id }}">
+          {{ params.label }}
+        </label>
+      </h{{ params.headingLevel }}>
+      {%- if params.hint %}
+      <p id="tna-form__{{ params.id }}-hint" class="tna-form__hint">
+        {{ params.hint }}
+      </p>
+      {%- endif %}
+    </div>
     <div class="tna-search-field__fields">
       <input type="search" id="tna-form__{{ params.id }}" class="tna-search-field__input" name="{{ params.name }}" value="{{ params.value }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}"
       {%- if params.hint %} aria-describedby="tna-form__{{ params.id }}-hint"{% endif %}
       {%- if params.maxLength %} maxlength="{{ params.maxLength }}"{% endif %}
       {%- if params.autofill %} autofill="{{ params.autofill }}"{% endif %}
       {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}>
-      <button type="submit" class="tna-button tna-search-field__button">Search</button>
+      <button type="submit" class="tna-button tna-search-field__button">
+        Search
+        <!--<i class="fa-solid fa-fw fa-magnifying-glass"></i>-->
+        <!--<i class="fa-solid fa-fw fa-chevron-right"></i>-->
+        <i class="fa-solid fa-fw fa-arrow-right"></i>
+      </button>
     </div>
   </div>
 </div>