Integrate new navigation

a11y.js

@@ -30,9 +30,19 @@ const getUrls = pageType =>
 // '//div[@id='root']/main/div/div/div/div/iframe' Added to hide
 // iframe errors to be fixed in https://github.com/bbc/bbc-a11y/issues/298
 
+// '//div[@id='root']/header/nav/div/div[1]/div/ul' Added to hide
+// errors in scrollable navigation for RTL languages to be fixed in
+// https://github.com/bbc/simorgh/issues/5222
+
 const pageTypes = {
-  frontPage: ['/html/head/iframe'],
-  articles: ['/html/head/iframe'],
+  frontPage: [
+    '/html/head/iframe',
+    "//div[@id='root']/header/nav/div/div[1]/div/ul",
+  ],
+  articles: [
+    '/html/head/iframe',
+    "//div[@id='root']/header/nav/div/div[1]/div/ul",
+  ],
   liveRadio: [
     '/html/head/iframe',
     "//div[@id='root']/main/div/div/div/div/iframe",

cypress/integration/pages/testsForAllPages.js

@@ -10,7 +10,7 @@ export const testsThatAlwaysRunForAllPages = ({ service, pageType }) => {
   describe(`No testsToAlwaysRunForAllPages to run for ${service} ${pageType}`, () => {});
 };
 
-// For testing feastures that may differ across services but share a common logic e.g. translated strings.
+// For testing features that may differ across services but share a common logic e.g. translated strings.
 export const testsThatFollowSmokeTestConfigforAllPages = ({
   service,
   pageType,
@@ -303,7 +303,7 @@ export const testsThatFollowSmokeTestConfigforAllPages = ({
         });
       }
 
-      it('should have a visible banner', () => {
+      it('should have a visible banner, with a skip to content link', () => {
         cy.get('header')
           .should('have.lengthOf', 1)
           .find('div[class^="Banner"]')
@@ -313,21 +313,35 @@ export const testsThatFollowSmokeTestConfigforAllPages = ({
           .should('have.attr', 'href', `/${config[service].name}`)
           .find('svg')
           .should('be.visible');
+        cy.get('div[class^="Banner"]')
+          .find('a[class^="SkipLink"]')
+          .should('have.attr', 'href', '#content');
       });
 
+      if (variant === 'default') {
+        it('should not render a script switch component if the default variant', () => {
+          cy.get('header')
+            .find('a[data-variant]')
+            .should('have.lengthOf', 0);
+        });
+      } else {
+        it('should render a script switch component if not the default variant', () => {
+          cy.get('header')
+            .find('a[data-variant]')
+            .should('have.lengthOf', 1);
+        });
+      }
+
       if (appConfig[config[service].name][variant].navigation) {
         if (
           pageType !== 'articles' ||
           (pageType === 'articles' && useAppToggles.navOnArticles.enabled)
         ) {
-          it('should have one visible navigation with a skiplink to h1', () => {
+          it('should have one visible navigation', () => {
             cy.get('nav')
               .should('have.lengthOf', 1)
               .should('be.visible')
-              .find('a[class^="SkipLink"]')
-              .should('have.lengthOf', 1)
-              .should('have.attr', 'href', '#content');
-            cy.get('nav a[class^="StyledLink"]')
+              .find('a[class^="StyledLink"]')
               .should(
                 'have.attr',
                 'href',
@@ -341,6 +355,34 @@ export const testsThatFollowSmokeTestConfigforAllPages = ({
               .should('have.lengthOf', 1)
               .should('have.attr', 'id', 'content');
           });
+
+          const serviceName = config[service].name;
+          // limit number of tests to 2 services for navigation toggling
+          const testMobileNav =
+            serviceName === 'ukchina' || serviceName === 'persian';
+
+          if (testMobileNav) {
+            it('should show dropdown menu and hide scrollable menu when menu button is clicked', () => {
+              cy.viewport(320, 480);
+              cy.get('nav')
+                .find('div[class^="StyledScrollableNav"]')
+                .should('be.visible');
+
+              cy.get('nav')
+                .find('ul[class^="DropdownUl"]')
+                .should('not.be.visible');
+
+              cy.get('nav button').click();
+
+              cy.get('nav')
+                .find('div[class^="StyledScrollableNav"]')
+                .should('not.be.visible');
+
+              cy.get('nav')
+                .find('ul[class^="DropdownUl"]')
+                .should('be.visible');
+            });
+          }
         }
       }
     });

package.json

@@ -56,11 +56,11 @@
   },
   "homepage": "https://github.com/bbc/simorgh#readme",
   "dependencies": {
-    "@bbc/gel-foundations": "^3.4.2",
+    "@bbc/gel-foundations": "^3.4.3",
     "@bbc/moment-timezone-include": "^1.1.2",
     "@bbc/psammead-amp-geo": "^1.1.2",
-    "@bbc/psammead-assets": "^2.10.3",
-    "@bbc/psammead-brand": "^5.0.11",
+    "@bbc/psammead-assets": "^2.11.0",
+    "@bbc/psammead-brand": "^5.1.7",
     "@bbc/psammead-bulleted-list": "1.0.1",
     "@bbc/psammead-bulletin": "^1.0.0",
     "@bbc/psammead-calendars": "^2.0.5",
@@ -76,9 +76,10 @@
     "@bbc/psammead-locales": "^4.1.1",
     "@bbc/psammead-media-indicator": "^2.6.19",
     "@bbc/psammead-media-player": "^2.4.1",
-    "@bbc/psammead-navigation": "^3.0.5",
+    "@bbc/psammead-navigation": "^6.0.0-alpha.22",
     "@bbc/psammead-paragraph": "^2.2.20",
     "@bbc/psammead-rich-text-transforms": "^2.0.0",
+    "@bbc/psammead-script-link": "^1.0.3",
     "@bbc/psammead-section-label": "^3.0.8",
     "@bbc/psammead-sitewide-links": "^4.0.2",
     "@bbc/psammead-story-promo": "^2.7.18",

scripts/bundleSizeConfig.js

@@ -1,6 +1,6 @@
 module.exports = {
   // Size limit for all bundles used by each service (K)
   // Keep these +/- 5K and update frequently!
-  MIN_SIZE: 629,
-  MAX_SIZE: 681,
+  MIN_SIZE: 641,
+  MAX_SIZE: 692,
 };