Adds bottom nav border in high contrast mode

package.json

@@ -87,7 +87,7 @@
     "@bbc/psammead-media-indicator": "6.1.0",
     "@bbc/psammead-media-player": "5.1.0",
     "@bbc/psammead-most-read": "6.0.29",
-    "@bbc/psammead-navigation": "9.1.1",
+    "@bbc/psammead-navigation": "9.2.0",
     "@bbc/psammead-paragraph": "4.0.16",
     "@bbc/psammead-play-button": "3.0.20",
     "@bbc/psammead-radio-schedule": "5.1.32",

packages/components/psammead-navigation/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 9.2.0 | [PR#4475](https://github.com/bbc/psammead/pull/4475) Adds bottom nav border in high contrast mode |
 | 9.1.1 | [PR#4438](https://github.com/bbc/psammead/pull/4438) add data-e2e attribute for e2e tests |
 | 9.1.0 | [PR#4437](https://github.com/bbc/psammead/pull/4437) add data-e2e attribute for e2e tests |
 | 9.0.11 | [PR#4420](https://github.com/bbc/psammead/pull/4420) bumps 3rd-party dependencies |

packages/components/psammead-navigation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-navigation",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "description": "A navigation bar to use on index pages",
   "main": "dist/index.js",
   "module": "esm/index.js",

packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap

@@ -7,6 +7,15 @@ exports[`Navigation should render correctly 1`] = `
   border-top: 0.0625rem solid #FFFFFF;
 }
 
+.emotion-0::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  border-bottom: 0.0625rem solid transparent;
+}
+
 .emotion-0 .emotion-7::after {
   left: 0;
 }
@@ -277,6 +286,15 @@ exports[`Navigation should render correctly when ampOpenClass prop is provided 1
   }
 }
 
+.emotion-0::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  border-bottom: 0.0625rem solid transparent;
+}
+
 .emotion-0 .emotion-7::after {
   left: 0;
 }
@@ -541,6 +559,15 @@ exports[`Navigation should render correctly when isOpen is true 1`] = `
   border-top: 0.0625rem solid #FFFFFF;
 }
 
+.emotion-0::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  border-bottom: 0.0625rem solid transparent;
+}
+
 .emotion-0 .emotion-7::after {
   left: 0;
 }
@@ -844,6 +871,15 @@ exports[`Scrollable Navigation should render correctly 1`] = `
   border-top: 0.0625rem solid #FFFFFF;
 }
 
+.emotion-2::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  border-bottom: 0.0625rem solid transparent;
+}
+
 .emotion-2 .emotion-9::after {
   left: 0;
 }

packages/components/psammead-navigation/src/index.jsx

@@ -247,6 +247,15 @@ const StyledNav = styled.nav`
     `}
   border-top: 0.0625rem solid ${C_WHITE};
 
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    border-bottom: 0.0625rem solid transparent;
+  }
+
   ${StyledListItem} {
     ${({ dir }) => `
       &::after {