Button icons, picture captions, headings (#69)

* Update button and picture elements * Fix test issues * Fix colour combinations
nationalarchives · Dec 29, 2023 · 9c7363b · 9c7363b
1 parent 2132841
commit 9c7363b
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 41 deletions.
diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
@@ -259,6 +259,12 @@
     flex-wrap: nowrap;
   }
 
+  .tna-form__group-contents,
+  .tna-form__heading {
+    font-size: 0;
+    line-height: 0;
+  }
+
   .tna-pagination {
     margin-top: 1rem;
   }

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - The default cookie banner colour is dark on light but can be changed with a `style` attribute or classes such as `tna-cookie-banner--contrast`
 - The card style of `boxed` has been changed to `contrast` in line with other components
+- Changed `tna-select--plain` to `tna-select--styled`
+- Updated button styles - icon sizes, padding and gaps on small and icon-only buttons
+- Removed slash on void elements (updating `<hr />` to `<hr>`)
+- Italicise picture element captions to distinguish from regular text
+- Use `text-wrap: pretty;` for headings
 
 ### Deprecated
 ### Removed

diff --git a/src/nationalarchives/all.scss b/src/nationalarchives/all.scss
@@ -1,13 +1,15 @@
 /*!
- * ------------------------------------------------
- * The National Archives Frontend
- * https://github.com/nationalarchives/tna-frontend
- * ------------------------------------------------
+ * ------------------------------------------
+ *
+ * TNA Frontend
+ * github.com/nationalarchives/tna-frontend
+ *
  * Explore 1,000 years of history
- * https://www.nationalarchives.gov.uk/
- * ------------------------------------------------
+ * www.nationalarchives.gov.uk
+ *
+ * ------------------------------------------
  * MIT Licence
- * ------------------------------------------------
+ * ------------------------------------------
  */
 
 @use "variables";

diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss
@@ -9,14 +9,15 @@
   padding: 0.25rem 1rem;
 
   display: inline-flex;
-  align-items: center;
+  align-items: baseline;
   justify-content: center;
-  gap: 0.5rem;
+  gap: 0.75rem;
 
+  @include typography.relative-font-size(18);
   @include typography.main-font-weight-bold;
+  line-height: #{math.div(16, 18) * 2};
   text-decoration: none;
   text-align: center;
-  line-height: #{math.div(16, 18) * 2};
   text-wrap: balance;
 
   @include colour.colour-background("button-background");
@@ -25,13 +26,6 @@
 
   cursor: pointer;
 
-  &,
-  .fa-solid,
-  .fa-brands {
-    @include typography.relative-font-size(18);
-    line-height: #{math.div(16, 18) * 2};
-  }
-
   &,
   &:link,
   &:visited {
@@ -45,6 +39,14 @@
     background: transparent;
   }
 
+  .fa-solid,
+  .fa-brands {
+    display: block;
+
+    font-size: 0.9em;
+    line-height: #{math.div(16, 18) * 2};
+  }
+
   &--plain {
     @include typography.main-font-weight;
 
@@ -83,13 +85,6 @@
     flex-direction: row-reverse;
   }
 
-  .fa-solid,
-  .fa-brands {
-    min-width: 1.25rem;
-
-    display: block;
-  }
-
   &--small,
   &-group--small & {
     padding: 0 0.5rem;
@@ -99,7 +94,6 @@
 
     .fa-solid,
     .fa-brands {
-      @include typography.relative-font-size(18);
       line-height: 2rem;
     }
   }
@@ -111,10 +105,13 @@
     gap: 0;
 
     font-size: 0;
+    line-height: 0;
 
     .fa-solid,
     .fa-brands {
       width: 2.5rem;
+
+      @include typography.relative-font-size(18);
     }
   }
 
@@ -125,6 +122,8 @@
     .fa-solid,
     .fa-brands {
       width: 2rem;
+
+      @include typography.relative-font-size(18 * 0.9);
     }
   }
 

diff --git a/src/nationalarchives/components/footer/fixtures.json b/src/nationalarchives/components/footer/fixtures.json
diff --git a/src/nationalarchives/components/footer/template.njk b/src/nationalarchives/components/footer/template.njk
@@ -104,11 +104,11 @@
         </li>
         {%- endfor -%}
       </ul>
-      <hr />
+      <hr>
     </nav>
     {%- else -%}
     <div class="tna-column--full">
-      <hr />
+      <hr>
     </div>
     {%- endif -%}
   </div>

diff --git a/src/nationalarchives/components/header/template.njk b/src/nationalarchives/components/header/template.njk
@@ -7,7 +7,7 @@
   <div class="tna-header__exit">
     <div class="tna-container">
       <div class="tna-column tna-column--full">
-        <a href="{{ params.exit.href }}" class="tna-header__exit-link"{%- if params.exit.target %} target="{{ params.exit.target }}"{%- endif -%}>
+        <a href="{{ params.exit.href }}" class="tna-header__exit-link"{%- if params.exit.target %} target="{{ params.exit.target }}"{% endif %}>
           {{ params.exit.text }}
           {%- if params.exit.target == "_blank" -%}
           <i class="fa-solid fa-arrow-up-right-from-square"></i>

diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss
@@ -47,10 +47,11 @@
   }
 
   &__caption {
-    margin: 0 2rem;
+    margin: 0 1rem;
     padding: 1rem;
 
     @include typography.relative-font-size(16);
+    font-style: italic;
 
     @include colour.colour-border("keyline", 1px, solid, bottom);
   }
@@ -79,6 +80,14 @@
       margin-right: 0;
       margin-left: 0;
     }
+
+    @if grid.$gutter-width-tiny != 1.5rem {
+      &__caption,
+      &__transcript {
+        padding-right: grid.$gutter-width-tiny;
+        padding-left: grid.$gutter-width-tiny;
+      }
+    }
   }
 
   @include colour.on-high-contrast-and-forced-colours {

diff --git a/src/nationalarchives/components/select/select.scss b/src/nationalarchives/components/select/select.scss
@@ -19,7 +19,7 @@
   @include colour.colour-border("input-border", forms.$form-field-border-width);
   border-radius: 0;
 
-  &--plain {
+  &--styled {
     padding: 0 2.5rem 0 0.75rem;
 
     appearance: none;

diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js
@@ -87,9 +87,10 @@ const Template = () => {
           </ul>
           ${TextInput({
             params: {
+              label: "Input",
               id: `name-${theme}-${block}-${accent}`,
               name: `name-${theme}-${block}-${accent}`,
-              value: `name-${theme}-${block}-${accent}`,
+              value: `Lorem ipsum`,
             },
           })}
           ${Checkboxes({
@@ -132,6 +133,7 @@ const Template = () => {
           })}
           ${Select({
             params: {
+              label: "Select",
               id: `sort-${theme}-${block}-${accent}`,
               name: `sort-${theme}-${block}-${accent}`,
               items: [

diff --git a/src/nationalarchives/templates/layouts/_generic.njk b/src/nationalarchives/templates/layouts/_generic.njk
@@ -1,13 +1,18 @@
 {# Based on https://github.com/alphagov/govuk-frontend/blob/8b6bf304b9fc891f64459c25a08f3d623f3fea72/packages/govuk-frontend/src/govuk/template.njk #}
+
 {% from "nationalarchives/components/cookie-banner/macro.njk" import tnaCookieBanner -%}
 {% from "nationalarchives/components/footer/macro.njk" import tnaFooter -%}
 {% from "nationalarchives/components/header/macro.njk" import tnaHeader -%}
 {% from "nationalarchives/components/skip-link/macro.njk" import tnaSkipLink -%}
+
+{% set siteTitle = 'The National Archives' %}
+{% set pageTitle = '' %}
+
 <!DOCTYPE html>
 <html lang="{{ htmlLang | default('en-GB') }}" class="tna-template tna-template--{{ theme | default('system') }}-theme tna-template--{{ themeAccent | default('black') }}-accent {{ htmlClasses }}">
   <head>
     <meta charset="utf-8">
-    <title>{% block pageTitle %}The National Archives{% endblock %}</title>
+    <title>{% block pageTitle %}{% if pageTitle %}{{ pageTitle }} - {{ siteTitle }}{% else %}{{ siteTitle }}{% endif %}{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <meta name="theme-color" content="{{ themeColor | default('#000000') }}">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss
@@ -208,13 +208,12 @@ small {
 
 %heading {
   @include colour.colour-font("font-dark");
+  text-wrap: pretty;
 
   &:not(.tna-heading--no-link-arrow) {
     a {
       display: inline-block;
 
-      // text-wrap: balance;
-
       &::after {
         padding-left: 0.25rem;
 
@@ -225,11 +224,11 @@ small {
         content: "\203A";
       }
 
-      // &:hover {
-      //   &::after {
-      //     padding-left: 0.5rem;
-      //   }
-      // }
+      &:hover {
+        &::after {
+          padding-left: 0.5rem;
+        }
+      }
     }
   }
 }