Add top border to cards without images (#99)

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - The default pagination style is plain buttons but can be changed with the `solid` option
 - Added some attributes to the HTML of the headers to reduce reliance on the JavaScript
+- Cards without images now get a top border
 
 ### Deprecated
 ### Removed

src/nationalarchives/components/button/button.scss

@@ -21,8 +21,7 @@
 
   @include colour.colour-background("button-background");
 
-  @include colour.colour-border("button-background", 0.25rem);
-  // border-radius: 0.1px;
+  @include colour.colour-border("button-background", 4px);
 
   cursor: pointer;
 

src/nationalarchives/components/card/card.scss

@@ -165,6 +165,12 @@
     }
   }
 
+  &__inner:has(&__heading + &__body) {
+    padding-top: 0.5rem;
+
+    @include colour.thick-keyline-dark(top);
+  }
+
   @include colour.on-high-contrast-and-forced-colours {
     @include colour.colour-border("keyline-dark", 1px);
 

src/nationalarchives/components/card/card.stories.js

@@ -209,6 +209,17 @@ Accent.args = {
   classes: "tna-card--demo",
 };
 
+export const NoImage = Template.bind({});
+NoImage.args = {
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "s",
+  href: "#",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
 export const Horizontal = Template.bind({});
 Horizontal.args = {
   supertitle: "Card supertitle",

src/nationalarchives/components/error-summary/error-summary.scss

@@ -12,7 +12,7 @@
 
   @include colour.colour-background("page-background");
 
-  @include colour.colour-border("form-error", 0.25rem, solid);
+  @include colour.colour-border("form-error", 0.3125rem, solid);
 
   &:focus {
     outline: none;

src/nationalarchives/components/featured-records/featured-records.scss

@@ -11,7 +11,7 @@
 
   list-style: none;
 
-  @include colour.colour-border("accent-background", 0.375rem, solid, top);
+  @include colour.thick-keyline-accent(top);
 
   &__item {
     padding: 2rem;

src/nationalarchives/components/footer/footer.scss

@@ -200,7 +200,7 @@
     &__navigation {
       &-block {
         &-items {
-          @include colour.colour-border("keyline-dark", 0.25rem, solid, top);
+          @include colour.colour-border("keyline-dark", 4px, solid, top);
         }
       }
     }

src/nationalarchives/components/global-header/global-header.scss

@@ -317,8 +317,8 @@
 
       background-color: rgb(255 255 255 / 10%);
 
-      @include colour.colour-border("keyline-dark", 3px, solid, top);
-      @include colour.colour-border("keyline-dark", 3px, solid, bottom);
+      @include colour.colour-border("keyline-dark", 2px, solid, top);
+      @include colour.colour-border("keyline-dark", 2px, solid, bottom);
     }
 
     &__navigation-item {

src/nationalarchives/components/header/header.scss

@@ -383,8 +383,8 @@
 
       background-color: rgb(255 255 255 / 10%);
 
-      @include colour.colour-border("keyline-dark", 3px, solid, top);
-      @include colour.colour-border("keyline-dark", 3px, solid, bottom);
+      @include colour.colour-border("keyline-dark", 2px, solid, top);
+      @include colour.colour-border("keyline-dark", 2px, solid, bottom);
     }
 
     &__navigation-item {

src/nationalarchives/components/hero/hero.scss

@@ -50,7 +50,7 @@
 
     @include colour.accent;
 
-    @include colour.colour-border("background", 0.25rem);
+    @include colour.colour-border("background", 4px);
     border-radius: 100%;
 
     cursor: pointer;

src/nationalarchives/components/message/message.scss

@@ -13,10 +13,9 @@
 
   @include colour.accent-light;
 
-  background-color: colour.brand-colour("cream");
+  @include colour.colour-background-brand("cream");
 
-  @include colour.colour-border("keyline-dark", 0.5rem, solid, left);
-  border-left-color: colour.brand-colour("yellow");
+  @include colour.thick-keyline-brand(left, "yellow");
 
   @include media.on-tiny {
     flex-direction: column;

src/nationalarchives/components/skip-link/skip-link.scss

@@ -28,7 +28,7 @@
   &:focus {
     @include colour.colour-background("button-background", $important: true);
 
-    @include colour.colour-border("focus-outline", 0.3125rem, $important: true);
+    @include colour.colour-border("focus-outline", 5px, $important: true);
 
     outline: none !important;
   }

src/nationalarchives/tools/_colour.scss

@@ -97,6 +97,10 @@
   background-color: var(--#{$colour}) if($important, !important, null);
 }
 
+@mixin colour-background-brand($brandColour, $important: false) {
+  background-color: #{brand-colour($brandColour)} if($important, !important, null);
+}
+
 @mixin colour-border(
   $colour,
   $width: "",
@@ -159,6 +163,26 @@
   fill: var(--#{$colour}) if($important, !important, null);
 }
 
+@mixin thick-keyline($direction) {
+  @include colour-border("keyline", 5px, solid, $direction);
+}
+
+@mixin thick-keyline-dark($direction) {
+  @include colour-border("keyline-dark", 5px, solid, $direction);
+}
+
+@mixin thick-keyline-accent($direction) {
+  @include colour-border("accent-background", 5px, solid, $direction);
+}
+
+@mixin thick-keyline-error($direction) {
+  @include colour-border("form-error", 5px, solid, $direction);
+}
+
+@mixin thick-keyline-brand($direction, $brandColour) {
+  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;
+}
+
 %light {
   @include colour-css-vars("form-error");
 

src/nationalarchives/utilities/_forms.scss

@@ -17,7 +17,7 @@ select {
     &--error {
       padding-left: 1rem;
 
-      @include colour.colour-border("form-error", 0.25rem, solid, left);
+      @include colour.thick-keyline-error(left);
     }
   }
 

src/nationalarchives/utilities/_tables.scss

@@ -56,7 +56,7 @@
   }
 
   &__head &__header {
-    @include colour.colour-border("keyline-dark", 0.25rem, solid, bottom);
+    @include colour.colour-border("keyline-dark", 4px, solid, bottom);
   }
 
   p {

src/nationalarchives/utilities/_typography.scss

@@ -136,7 +136,7 @@ small {
 %chip-accent {
   @include colour.accent;
 
-  @include colour.colour-border("accent-background", 0.125rem);
+  @include colour.colour-border("accent-background", 2px);
 
   .tna-background-accent & {
     @include colour.contrast;
@@ -363,7 +363,7 @@ small {
   margin-left: 0;
   padding: 1rem 1rem 1rem 2rem;
 
-  @include colour.colour-border("accent-background", 0.375rem, solid, left);
+  @include colour.thick-keyline-accent(left);
 
   &__quote {
     font-weight: 700;