feat: o-header subnav primary styles

The App has a requirement to have a sub navigation where link items
have 'primary' styles and are capitalised with font weight 600. The
navigation also requires the background image to use `paper` colour
instead of the current default `white-60`. Esentially we want the sub
navigation to look like a primary navigation.

This introduces `o-header__subnav--primary` modifier which will provide
the required style modifications for background colour and text style.

Additionally since the text styles are now being using in two places, I've
extracted these out to the `_oHeaderPrimaryLink` mixin.

components/o-header/src/scss/_mixins.scss

@@ -129,4 +129,12 @@
 		content: '';
 		margin: -10px; // Undo in-built icon whitespace.
 	}
-}
+}
+
+@mixin _oHeaderPrimaryLink() {
+	font-weight: 600;
+	text-transform: uppercase;
+	// sass-lint:disable no-vendor-prefixes
+	-webkit-font-smoothing: antialiased;
+	// sass-lint:enable no-vendor-prefixes
+}

components/o-header/src/scss/features/_nav.scss

@@ -80,10 +80,6 @@
 	}
 
 	.o-header__nav-link--primary {
-		font-weight: 600;
-		text-transform: uppercase;
-		// sass-lint:disable no-vendor-prefixes
-		-webkit-font-smoothing: antialiased;
-		// sass-lint:enable no-vendor-prefixes
+		@include _oHeaderPrimaryLink;
 	}
 }

components/o-header/src/scss/features/_subnav.scss

@@ -5,6 +5,14 @@
 		border-bottom: 1px solid _oHeaderGet('subnav-border');
 	}
 
+	.o-header__subnav--primary {
+		background-color: _oHeaderGet('header-background');
+
+		.o-header__subnav-link {
+			@include _oHeaderPrimaryLink;
+		}
+	}
+
 	.o-header__subnav-wrap-outside {
 		margin-left: -$_o-header-sub-header-focus-margin;
 		margin-right: -$_o-header-sub-header-focus-margin;
@@ -53,21 +61,24 @@
 		// to avoid positioning subnavs relative. This is so absolute children of the subnav are
 		// positioned relative to their closest positioned ancestor `o-header__container`.
 		// An example benefit is o-tooltip support against sub nav items.
-		&+&:not(.o-header__subnav-list--right) .o-header__subnav-item {
+		& + &:not(.o-header__subnav-list--right) .o-header__subnav-item {
 			&:first-child {
 				@include _oHeaderItemSeparatorContent();
-
 			}
 
 			&:first-child:before {
 				top: 50%;
-				margin-top: - $_o-header-subnav-height-base * div($_o-header-item-separator-percentage-height, 2);
-				height: $_o-header-subnav-height-base * $_o-header-item-separator-percentage-height;
+				margin-top: -$_o-header-subnav-height-base *
+					div($_o-header-item-separator-percentage-height, 2);
+				height: $_o-header-subnav-height-base *
+					$_o-header-item-separator-percentage-height;
 
 				@include oGridRespondTo('M') {
 					// stylelint-disable-line max-nesting-depth
-					margin-top: - $_o-header-subnav-height-medium * div($_o-header-item-separator-percentage-height, 2);
-					height: $_o-header-subnav-height-medium * $_o-header-item-separator-percentage-height;
+					margin-top: -$_o-header-subnav-height-medium *
+						div($_o-header-item-separator-percentage-height, 2);
+					height: $_o-header-subnav-height-medium *
+						$_o-header-item-separator-percentage-height;
 				}
 			}
 		}
@@ -86,14 +97,19 @@
 			padding-left: 16px;
 		}
 
-		.o-header__subnav-list--children:not(.o-header__subnav-list--right) &:first-child {
+		.o-header__subnav-list--children:not(.o-header__subnav-list--right)
+			&:first-child {
 			// align left side correctly
 			padding-left: 0;
 		}
 
 		.o-header__subnav-list--breadcrumb & {
 			&:before {
-				@include oIconsContent('arrow-right', _oHeaderGet('link-highlight-text'), $size: $_o-header-icon-size-small);
+				@include oIconsContent(
+					'arrow-right',
+					_oHeaderGet('link-highlight-text'),
+					$size: $_o-header-icon-size-small
+				);
 				content: '';
 				position: relative;
 				top: 0.125em;
@@ -106,12 +122,10 @@
 		}
 	}
 
-
 	.o-header__subnav-list--children.o-header__subnav-list--right {
 		margin-left: auto;
 	}
 
-
 	.o-header__subnav-link {
 		@include _oHeaderLink;
 		@include _oHeaderFancyLink;
@@ -140,7 +154,11 @@
 	}
 
 	.o-header__subnav-button {
-		@include oIconsContent('arrow-left', _oHeaderGet('subnav-button-text'), $size: null);
+		@include oIconsContent(
+			'arrow-left',
+			_oHeaderGet('subnav-button-text'),
+			$size: null
+		);
 		background-color: _oHeaderGet('subnav-button-background');
 		position: absolute;
 		top: 0;
@@ -173,4 +191,4 @@
 		// don't download another icon...
 		transform: rotate(180deg);
 	}
-}
+}