Add rounded corners with an option to customise the radius (#172)

* Add rounded corners with an option to customise the radius * Add border radius to main gallery image * Add missing border radiuses * Add full-width and centred button group options
nationalarchives · Feb 19, 2025 · 2d4cb47 · 2d4cb47
1 parent 6480e54
commit 2d4cb47
Show file tree

Hide file tree

Showing 31 changed files with 166 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Option to set underline offset for links
+- Customisable border radius added to many components and utilities
+- Plain card option to add border to a card without adding a background colour
+- Options for full-width and centred button groups
 
 ### Changed
 

diff --git a/src/nationalarchives/components/button/_button-group.scss b/src/nationalarchives/components/button/_button-group.scss
@@ -17,4 +17,24 @@
   &--small {
     gap: spacing.space(0.5);
   }
+
+  &--centred {
+    justify-content: center;
+  }
+
+  &--full {
+    justify-content: stretch;
+
+    @include media.on-mobile {
+      flex-direction: column;
+
+      align-items: stretch;
+    }
+
+    .tna-button {
+      margin: 0;
+
+      flex: 1;
+    }
+  }
 }
diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -28,6 +29,7 @@ $button-border-width: 4px !default;
   @include colour.colour-background("button-background");
 
   @include colour.colour-border("button-background", $button-border-width);
+  @include borders.rounded-border;
 
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;
@@ -68,6 +70,7 @@ $button-border-width: 4px !default;
     background-color: transparent;
 
     border-color: transparent;
+    border-radius: 0.1px;
 
     &,
     &:link,

diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss
@@ -1,7 +1,8 @@
 @use "sass:math";
 @use "../../variables/a11y" as a11yVariables;
-@use "../../variables/borders";
+@use "../../variables/borders" as bordersVars;
 @use "../../tools/a11y";
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -77,21 +78,25 @@
   flex-direction: column;
   gap: spacing.space(1);
 
+  overflow: hidden;
+
   position: relative;
 
+  @include borders.rounded-border;
+
   &:not(:has(&__image-container)) {
     padding-top: spacing.space(0.5);
 
     @include colour.thick-keyline-dark(top);
+    border-radius: 0.1px 0.1px bordersVars.$rounded-border-radius
+      bordersVars.$rounded-border-radius;
   }
 
   &__heading {
     order: 2;
   }
 
   &--full-click {
-    border-radius: 0.1px;
-
     &:hover {
       @include colour.colour-outline("keyline", 1px, solid);
       outline-offset: a11yVariables.$focus-outline-width - 1px;
@@ -132,7 +137,7 @@
 
   &--full-click:not(:has(&__image-container)) &__heading-link {
     &::before {
-      top: -#{borders.$thick-border-width};
+      top: -#{bordersVars.$thick-border-width};
     }
   }
 
@@ -180,6 +185,8 @@
   }
 
   &__actions {
+    margin-top: spacing.space(0.5);
+
     display: flex;
     gap: spacing.space(1) spacing.space(2);
   }
@@ -198,6 +205,10 @@
     padding-left: spacing.space(1);
   }
 
+  &--plain {
+    box-shadow: inset 0 0 0 1px colour.colour-var("keyline");
+  }
+
   @include colour.on-high-contrast-and-forced-colours {
     padding-bottom: spacing.space(1);
 

diff --git a/src/nationalarchives/components/card/card.stories.js b/src/nationalarchives/components/card/card.stories.js
@@ -35,7 +35,7 @@ const argTypes = {
   horizontalSmallImage: { control: "boolean" },
   style: {
     control: "inline-radio",
-    options: ["none", "contrast", "tint", "accent"],
+    options: ["none", "plain", "contrast", "tint", "accent"],
   },
   htmlElement: { control: "text" },
   classes: { control: "text" },
@@ -117,7 +117,7 @@ const Template = ({
       horizontalOnSmall,
       horizontalFlipped,
       horizontalSmallImage,
-      style,
+      style: style === "none" ? undefined : style,
       htmlElement,
       classes,
       attributes,
@@ -181,6 +181,25 @@ Meta.args = {
   classes: "tna-card--demo",
 };
 
+export const Plain = Template.bind({});
+Plain.args = {
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "m",
+  href: "#",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/2024/12/tna-building-800px.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 600,
+  imageHeight: 400,
+  label: "New",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
+  style: "plain",
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
 export const Contrast = Template.bind({});
 Contrast.args = {
   supertitle: "Card supertitle",

diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk
@@ -18,7 +18,9 @@
 {%- if params.style -%}
   {%- set containerClasses = containerClasses.concat('tna-card--padded') -%}
 {%- endif -%}
-{%- if params.style == "contrast" -%}
+{%- if params.style == "plain" -%}
+  {%- set containerClasses = containerClasses.concat('tna-card--plain') -%}
+{%- elseif params.style == "contrast" -%}
   {%- set containerClasses = containerClasses.concat('tna-background-contrast') -%}
 {%- elseif params.style == "tint" -%}
   {%- set containerClasses = containerClasses.concat('tna-background-tint') -%}

diff --git a/src/nationalarchives/components/checkboxes/checkboxes.scss b/src/nationalarchives/components/checkboxes/checkboxes.scss
@@ -1,5 +1,6 @@
 @use "../../variables/forms";
 @use "../../tools/a11y";
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -66,6 +67,7 @@
           forms.$form-field-border-width
         );
         border-radius: 0.1px;
+        @include borders.rounded-border;
       }
 
       &::after {

diff --git a/src/nationalarchives/components/date-input/date-input.scss b/src/nationalarchives/components/date-input/date-input.scss
@@ -1,4 +1,5 @@
 @use "../../variables/forms";
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/spacing";
 @use "../../tools/typography";
@@ -31,7 +32,7 @@
         "input-border",
         forms.$form-field-border-width
       );
-      border-radius: 0;
+      @include borders.rounded-border;
 
       &--wider {
         width: 4.5rem;

diff --git a/src/nationalarchives/components/date-search/date-search.scss b/src/nationalarchives/components/date-search/date-search.scss
@@ -1,4 +1,5 @@
 @use "../../variables/forms";
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/spacing";
 @use "../../tools/typography";
@@ -17,7 +18,7 @@
   @include colour.colour-background("input-background");
 
   @include colour.colour-border("input-border", forms.$form-field-border-width);
-  border-radius: 0;
+  @include borders.rounded-border;
 
   .tna-form__group--error & {
     @include colour.colour-border("form-error-border");

diff --git a/src/nationalarchives/components/error-summary/error-summary.scss b/src/nationalarchives/components/error-summary/error-summary.scss
@@ -1,4 +1,5 @@
 @use "../../tools/a11y";
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -13,7 +14,7 @@
   @include colour.colour-background("background");
 
   @include colour.colour-border("form-error-border", 0.3125rem, solid);
-  border-radius: 0.1px;
+  @include borders.rounded-border;
 
   &:focus {
     @include a11y.focus-outline;

diff --git a/src/nationalarchives/components/footer/footer.scss b/src/nationalarchives/components/footer/footer.scss
@@ -1,3 +1,4 @@
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -108,6 +109,8 @@
     @include typography.font-size(16);
 
     background-color: rgb(255 255 255 / 14%);
+
+    @include borders.rounded-border;
   }
 
   &__navigation {

diff --git a/src/nationalarchives/components/gallery/gallery.scss b/src/nationalarchives/components/gallery/gallery.scss
@@ -1,5 +1,7 @@
 @use "../../variables/a11y" as a11yVariables;
+@use "../../variables/borders" as bordersVars;
 @use "../../tools/a11y";
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -83,6 +85,8 @@
     position: relative;
 
     @include colour.contrast;
+
+    @include borders.rounded-border;
   }
 
   &__item-image {
@@ -164,6 +168,8 @@
     gap: 0.5rem;
 
     @include colour.accent;
+
+    @include borders.rounded-border;
   }
 
   &__navigation-button-icon {
@@ -219,6 +225,7 @@
     position: relative;
 
     border: none;
+    @include borders.rounded-border;
 
     cursor: pointer;
 
@@ -279,6 +286,9 @@
     @include typography.main-font-weight-bold;
 
     @include colour.colour-background("background");
+
+    // @include borders.rounded-border;
+    border-radius: 0 0 bordersVars.$rounded-border-radius 0;
   }
 
   &--interactive &__item-figure-inner {
@@ -382,6 +392,11 @@
       flex: 1;
     }
 
+    &:fullscreen &__item-figure-inner {
+      border-radius: 0 bordersVars.$rounded-border-radius
+        bordersVars.$rounded-border-radius 0;
+    }
+
     &:fullscreen &__item-description {
       margin-right: 0;
       margin-bottom: 0;

diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss
@@ -125,6 +125,7 @@
 
     border: 0 transparent solid;
     border-width: 0.25rem 0;
+    border-radius: 0.1px;
 
     cursor: pointer;
     @include typography.main-font-weight-bold;

diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss
@@ -129,6 +129,7 @@
 
     border: 0 transparent solid;
     border-width: 0.25rem 0;
+    border-radius: 0.1px;
 
     cursor: pointer;
 

diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss
@@ -1,5 +1,7 @@
 @use "sass:math";
 
+@use "../../variables/borders" as bordersVars;
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/grid";
 @use "../../tools/media";
@@ -98,6 +100,8 @@ $shift-units: 5 !default;
 
     @include typography.font-size(16);
 
+    border-bottom-left-radius: bordersVars.$rounded-border-radius;
+
     p + p {
       margin-top: spacing.space(0.5);
     }
@@ -174,6 +178,8 @@ $shift-units: 5 !default;
     padding: spacing.space(2);
 
     @include colour.colour-background("background");
+
+    @include borders.rounded-border;
   }
 
   &__heading {
@@ -265,6 +271,8 @@ $shift-units: 5 !default;
       max-width: none;
 
       left: 0;
+
+      border-bottom-left-radius: 0;
     }
 
     &__image {

diff --git a/src/nationalarchives/components/index-grid/index-grid.scss b/src/nationalarchives/components/index-grid/index-grid.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -33,6 +34,8 @@
 
     text-decoration: none;
 
+    @include borders.rounded-border;
+
     .tna-background-contrast & {
       @include colour.accent;
     }

diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss
@@ -1,4 +1,5 @@
 @use "../../tools/a11y";
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/grid";
 @use "../../tools/media";
@@ -16,6 +17,8 @@
     padding: spacing.space(1.5);
 
     position: relative;
+
+    @include borders.rounded-border;
   }
 
   &__image {