Merge pull request #1287 from dpc-sdp/feat/sd-170-nav-single-line

[SD-170] Single line primary nav
dpc-sdp · Aug 13, 2024 · 6005b29 · 6005b29
2 parents 38be17e + 9b6a42f
commit 6005b29
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 4 deletions.
diff --git a/examples/nuxt-app/test/features/site/theme.feature b/examples/nuxt-app/test/features/site/theme.feature
@@ -54,3 +54,17 @@ Feature: Site theme
     And the page endpoint for path "/" returns fixture "/landingpage/image-banner" with status 200
     Given I visit the page "/"
     Then the last updated date should not be displayed
+
+  @mockserver
+  Scenario: Default behaviour for long link titles in the primary navigation
+    Given the site endpoint returns fixture "/site/primary-nav-wrap" with status 200
+    And the page endpoint for path "/" returns fixture "/landingpage/image-banner" with status 200
+    Given I visit the page "/"
+    Then the primary nav links should wrap
+
+  @mockserver
+  Scenario: Feature flag to force multi-line links to render on a single line in the primary navigation
+    Given the site endpoint returns fixture "/site/primary-nav-nowrap" with status 200
+    And the page endpoint for path "/" returns fixture "/landingpage/image-banner" with status 200
+    Given I visit the page "/"
+    Then the primary nav links should not wrap
diff --git a/examples/nuxt-app/test/fixtures/site/primary-nav-nowrap.json b/examples/nuxt-app/test/fixtures/site/primary-nav-nowrap.json
@@ -0,0 +1,44 @@
+{
+  "name": "Test site for neutral theme",
+  "acknowledgementHeader": "Test hero acknowledgement",
+  "acknowledgementFooter": "Test footer acknowledgement",
+  "socialImages": {
+    "twitter": {},
+    "og": {}
+  },
+  "siteLogo": {
+    "href": "/",
+    "src": "https://placehold.co/140x40",
+    "altText": ""
+  },
+  "featureFlags": {
+    "primaryNavNowrap": true
+  },
+  "menus": {
+    "menuMain": [
+      {
+        "text": "This link has an excessively long title",
+        "url": "/demo-landing-page",
+        "uuid": "29bc9750-a335-455e-9e9a-4166c0bd73df",
+        "parent": null,
+        "weight": 0
+      },
+      {
+        "text": "Another random link",
+        "url": "/demo-landing-page",
+        "uuid": "04e44b77-20df-4a73-b0d1-cf2d3d614754",
+        "parent": null,
+        "weight": 0
+      }
+    ],
+    "menuFooter": [
+      {
+        "text": "Demo Landing Page",
+        "url": "/demo-landing-page",
+        "uuid": "04e44b77-20df-4a73-b0d1-cf2d3d614754",
+        "parent": null,
+        "weight": 0
+      }
+    ]
+  }
+}
diff --git a/examples/nuxt-app/test/fixtures/site/primary-nav-wrap.json b/examples/nuxt-app/test/fixtures/site/primary-nav-wrap.json
@@ -0,0 +1,41 @@
+{
+  "name": "Test site for neutral theme",
+  "acknowledgementHeader": "Test hero acknowledgement",
+  "acknowledgementFooter": "Test footer acknowledgement",
+  "socialImages": {
+    "twitter": {},
+    "og": {}
+  },
+  "siteLogo": {
+    "href": "/",
+    "src": "https://placehold.co/140x40",
+    "altText": ""
+  },
+  "menus": {
+    "menuMain": [
+      {
+        "text": "This link has an excessively long title",
+        "url": "/demo-landing-page",
+        "uuid": "29bc9750-a335-455e-9e9a-4166c0bd73df",
+        "parent": null,
+        "weight": 0
+      },
+      {
+        "text": "Another random link",
+        "url": "/demo-landing-page",
+        "uuid": "04e44b77-20df-4a73-b0d1-cf2d3d614754",
+        "parent": null,
+        "weight": 0
+      }
+    ],
+    "menuFooter": [
+      {
+        "text": "Demo Landing Page",
+        "url": "/demo-landing-page",
+        "uuid": "04e44b77-20df-4a73-b0d1-cf2d3d614754",
+        "parent": null,
+        "weight": 0
+      }
+    ]
+  }
+}
diff --git a/packages/ripple-test-utils/step_definitions/common/shared-elements.ts b/packages/ripple-test-utils/step_definitions/common/shared-elements.ts
@@ -58,6 +58,17 @@ Then('the last updated date should not be displayed', () => {
   cy.get(`[data-cy="updated-date"]`).should('not.exist')
 })
 
+Then('the primary nav links should wrap', () => {
+  cy.get('.rpl-primary-nav__nav-bar-actions-list--nowrap').should('not.exist')
+})
+
+Then('the primary nav links should not wrap', () => {
+  cy.get('.rpl-primary-nav__nav-bar-actions-list').should(
+    'have.class',
+    'rpl-primary-nav__nav-bar-actions-list--nowrap'
+  )
+})
+
 Then(
   'the page should have the following topic tags',
   (dataTable: DataTable) => {

diff --git a/packages/ripple-tide-api/types.d.ts b/packages/ripple-tide-api/types.d.ts
@@ -264,6 +264,10 @@ export interface IRplFeatureFlags {
    * @description Option to disable the display of the search form within the primary navigation
    */
   disablePrimaryNavSearch?: boolean
+  /**
+   * @description Force multi-line links to render on a single line in the primary navigation
+   */
+  primaryNavNowrap?: boolean
   /**
    * @description Option to override the default URL the search for redirects to
    */

diff --git a/packages/ripple-ui-core/src/components/primary-nav/components/nav-bar/RplPrimaryNavBar.css b/packages/ripple-ui-core/src/components/primary-nav/components/nav-bar/RplPrimaryNavBar.css
@@ -125,6 +125,13 @@
       text-decoration-thickness: 2px;
     }
   }
+
+  &.rpl-primary-nav__nav-bar-actions-list--nowrap {
+    a,
+    button {
+      max-width: none;
+    }
+  }
 }
 
 .rpl-primary-nav__nav-bar-mobile-menu-toggle-container {

diff --git a/packages/ripple-ui-core/src/components/primary-nav/components/nav-bar/RplPrimaryNavBar.vue b/packages/ripple-ui-core/src/components/primary-nav/components/nav-bar/RplPrimaryNavBar.vue
@@ -15,9 +15,13 @@ import {
 import VicGovLogo from './../../../../assets/logos/logo-vic-gov.svg?component'
 import type { IRplFeatureFlags } from '@dpc-sdp/ripple-tide-api/types'
 
-const { disablePrimaryLogo }: IRplFeatureFlags = inject('featureFlags', {
-  disablePrimaryLogo: false
-})
+const { disablePrimaryLogo, primaryNavNowrap }: IRplFeatureFlags = inject(
+  'featureFlags',
+  {
+    disablePrimaryLogo: false,
+    primaryNavNowrap: false
+  }
+)
 
 interface Props {
   primaryLogo: IRplPrimaryNavLogo
@@ -130,7 +134,12 @@ const handleToggleItem = (level: number, item: IRplPrimaryNavItem) => {
       </RplLink>
     </div>
 
-    <ul class="rpl-primary-nav__nav-bar-actions-list">
+    <ul
+      :class="[
+        'rpl-primary-nav__nav-bar-actions-list',
+        { 'rpl-primary-nav__nav-bar-actions-list--nowrap': primaryNavNowrap }
+      ]"
+    >
       <!-- Mobile menu toggle -->
       <li class="rpl-primary-nav__nav-bar-mobile-menu-toggle-container">
         <RplPrimaryNavBarAction