Add rounded corners with an option to customise the radius

nationalarchives · Feb 19, 2025 · 9dd5b4b · 9dd5b4b
1 parent 6480e54
commit 9dd5b4b
Show file tree

Hide file tree

Showing 23 changed files with 119 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,8 @@ 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
 
 ### Changed
 

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/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 bordersVariables;
 @use "../../tools/a11y";
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -164,6 +166,8 @@
     gap: 0.5rem;
 
     @include colour.accent;
+
+    @include borders.rounded-border;
   }
 
   &__navigation-button-icon {
@@ -219,6 +223,7 @@
     position: relative;
 
     border: none;
+    @include borders.rounded-border;
 
     cursor: pointer;
 
@@ -279,6 +284,9 @@
     @include typography.main-font-weight-bold;
 
     @include colour.colour-background("background");
+
+    // @include borders.rounded-border;
+    border-radius: 0 0 bordersVariables.$rounded-border-radius 0;
   }
 
   &--interactive &__item-figure-inner {

diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss
@@ -1,5 +1,6 @@
 @use "sass:math";
 
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/grid";
 @use "../../tools/media";
@@ -174,6 +175,8 @@ $shift-units: 5 !default;
     padding: spacing.space(2);
 
     @include colour.colour-background("background");
+
+    @include borders.rounded-border;
   }
 
   &__heading {

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/search-field/search-field.scss b/src/nationalarchives/components/search-field/search-field.scss
@@ -1,3 +1,4 @@
+@use "../../variables/borders" as bordersVars;
 @use "../../variables/forms";
 @use "../../tools/colour";
 @use "../../tools/spacing";
@@ -23,7 +24,9 @@
     border-width: forms.$form-field-border-width 0
       forms.$form-field-border-width forms.$form-field-border-width;
     border-style: solid;
-    border-radius: 0.1px;
+    border-radius: bordersVars.$rounded-border-radius 0.1px 0.1px
+      bordersVars.$rounded-border-radius;
+
     flex: 1;
 
     @include colour.always-light;
@@ -70,6 +73,8 @@
   }
 
   &__button {
+    border-radius: 0.1px bordersVars.$rounded-border-radius
+      bordersVars.$rounded-border-radius 0.1px;
   }
 
   @include colour.on-forced-colours {

diff --git a/src/nationalarchives/components/select/select.scss b/src/nationalarchives/components/select/select.scss
@@ -1,4 +1,5 @@
 @use "../../variables/forms";
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/spacing";
 
@@ -16,7 +17,7 @@
   @include colour.colour-background("input-background");
 
   @include colour.colour-border("input-border", forms.$form-field-border-width);
-  border-radius: 0.1px;
+  @include borders.rounded-border;
 
   // &--styled {
   //   padding: 0 spacing.space(2.5) 0 spacing.space(0.75);

diff --git a/src/nationalarchives/components/tabs/tabs.scss b/src/nationalarchives/components/tabs/tabs.scss
@@ -1,6 +1,7 @@
 @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";
@@ -29,7 +30,7 @@
   }
 
   &__button {
-    padding: borders.$thick-border-width 0;
+    padding: bordersVars.$thick-border-width 0;
 
     position: relative;
 
@@ -42,30 +43,33 @@
     border: 1px transparent solid;
     border-bottom: none;
 
+    border-radius: bordersVars.$rounded-border-radius
+      bordersVars.$rounded-border-radius 0 0;
+
     cursor: pointer;
 
     &:active {
       @include a11y.focus-outline-without-offset;
       @include a11y.active-outline;
     }
-  }
 
-  &__button[aria-selected="true"] {
-    padding-top: 0;
+    &[aria-selected="true"] {
+      padding-top: 0;
 
-    @include colour.colour-border("keyline");
+      @include colour.colour-border("keyline");
 
-    &::after {
-      content: "";
+      &::after {
+        content: "";
 
-      height: 1px;
+        height: 1px;
 
-      position: absolute;
-      top: 100%;
-      right: 0;
-      left: 0;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        left: 0;
 
-      @include colour.colour-background("background");
+        @include colour.colour-background("background");
+      }
     }
   }
 
@@ -106,7 +110,8 @@
   }
 
   &__item {
-    border-radius: 0.1px;
+    border-radius: 0 0 bordersVars.$rounded-border-radius
+      bordersVars.$rounded-border-radius;
     // @include a11y.no-focus-outline-on-click;
 
     &:focus {

diff --git a/src/nationalarchives/components/text-input/text-input.scss b/src/nationalarchives/components/text-input/text-input.scss
@@ -1,4 +1,5 @@
 @use "../../variables/forms";
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/spacing";
 
@@ -15,7 +16,7 @@
   @include colour.colour-background("input-background");
 
   @include colour.colour-border("input-border", forms.$form-field-border-width);
-  border-radius: 0.1px;
+  @include borders.rounded-border;
 
   &,
   &-wrapper {