Variable scopes and colours (#112)

* Allow border width change, fix variable scopes

* Improve markup of warning component

* Fix column margin removal classes

* Update card fixtures

* Update button macro options

* Alter CSS variables, switch high contrast to media query only

* Add missing IDs to form elements

.storybook/storybook.scss

@@ -64,12 +64,26 @@
 .sb-story.sb-unstyled {
   @include colour.colour-css-vars;
 
-  @include colour.colour-background("page-background");
+  @include colour.colour-background("background");
 }
 
-.tna-template--padded {
-  > .tna-template__body {
-    padding: 16px;
+.tna-template {
+  &--high-contrast-theme {
+    @include colour.colour-css-vars-high-contrast;
+
+    * {
+      background-image: none !important;
+    }
+
+    &.tna-template--dark-theme {
+      @include colour.colour-css-vars-high-contrast-dark;
+    }
+  }
+
+  &--padded {
+    > .tna-template__body {
+      padding: 16px;
+    }
   }
 }
 

CHANGELOG.md

@@ -8,10 +8,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.50...HEAD)
 
 ### Added
+
+- "Thick" and button border widths are customisable
+
 ### Changed
+
+- Improved markup of warning component
+- `--page-background` is now `--background`
+
 ### Deprecated
+
+- Deprecated support for the `tna-template--high-contrast-theme` class - high contrast themes can be used by setting a preference for higher contrast in the operating system
+- `colour-font()` no longer has the ability to define the default palette
+
 ### Removed
+
+- Fallbacks for custom CSS properties are defined in the `var()` function rather than in a separate property - this removes any colouring support for browsers without custom CSS properties
+
 ### Fixed
+
+- Fixed column margin removal classes
+- Added missing IDs to some form elements so they can be linked top from the error summary
+
 ### Security
 
 ## [0.1.50](https://github.com/nationalarchives/tna-frontend/compare/v0.1.49...v0.1.50) - 2024-03-28

src/nationalarchives/components/button/button.scss

@@ -5,6 +5,8 @@
 @use "../../tools/typography";
 @use "button-group";
 
+$button-border-width: 4px !default;
+
 .tna-button {
   padding: spacing.space(0.25) spacing.space(1);
 
@@ -22,7 +24,7 @@
 
   @include colour.colour-background("button-background");
 
-  @include colour.colour-border("button-background", 4px);
+  @include colour.colour-border("button-background", $button-border-width);
 
   cursor: pointer;
 
@@ -144,7 +146,7 @@
     &:not(.tna-button--plain):hover {
       @include colour.colour-font("font-dark");
 
-      @include colour.colour-background("page-background");
+      @include colour.colour-background("background");
     }
   }
 
@@ -157,9 +159,9 @@
   .tna-background-accent &--accent {
     @include colour.plain;
 
-    @include colour.colour-background("page-background");
+    @include colour.colour-background("background");
 
-    @include colour.colour-border("page-background");
+    @include colour.colour-border("background");
 
     &,
     &:link,
@@ -168,7 +170,7 @@
     }
 
     &:hover {
-      @include colour.colour-font("page-background");
+      @include colour.colour-font("background");
 
       @include colour.colour-background("font-dark");
     }

src/nationalarchives/components/button/macro-options.json

@@ -3,73 +3,73 @@
     "name": "text",
     "type": "string",
     "required": true,
-    "description": ""
+    "description": "The text of the button."
   },
   {
     "name": "href",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "A URL to use as a link for the button."
   },
   {
     "name": "title",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "A title attribute for the button."
   },
   {
     "name": "icon",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "The name of a Font Awesome icon, without the prefixed `fa-`."
   },
   {
     "name": "accent",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, set the colour of the button to the page's accent colour."
   },
   {
     "name": "small",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, make the button smaller."
   },
   {
     "name": "plain",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, remove the background colour of the button and make it look more like a link."
   },
   {
     "name": "iconOnly",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, don't show the text of the button."
   },
   {
     "name": "iconOnlyOnMobile",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, show both the text and icon on larger devices but only show the icon on smaller devices."
   },
   {
     "name": "rightAlignIcon",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, align the icon to the right hand side of the button."
   },
   {
     "name": "buttonElement",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, use a `<button>` element for the button. This makes the `href` attribute redundant."
   },
   {
     "name": "buttonType",
     "type": "text",
     "required": false,
-    "description": ""
+    "description": "Set the type of button element if `buttonElement` is true."
   },
   {
     "name": "classes",

src/nationalarchives/components/card/fixtures.json

@@ -252,6 +252,30 @@
       },
       "html": "<div class=\"tna-card tna-card--horizontal\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
+    {
+      "name": "with classes for href items",
+      "options": {
+        "title": "Card title",
+        "headingLevel": 3,
+        "href": "#",
+        "body": "<p>Card body</p>",
+        "hrefClasses": "card__test-class"
+      },
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link card__test-class\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
+    },
+    {
+      "name": "with attributes for href items",
+      "options": {
+        "title": "Card title",
+        "headingLevel": 3,
+        "href": "#",
+        "body": "<p>Card body</p>",
+        "hrefAttributes": {
+          "data-testattribute": "foobar"
+        }
+      },
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\" data-testattribute=\"foobar\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
+    },
     {
       "name": "with classes",
       "options": {

src/nationalarchives/components/checkboxes/checkboxes.njk

@@ -1,5 +1,5 @@
 {%- macro tnaCheckboxesElement(params, extraAttributes) -%}
-<div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
+<div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}" id="{{ params.id }}">
   {%- for item in params.items %}
   <div class="tna-checkboxes__item">
     <input type="checkbox" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% for attribute, value in extraAttributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>