From b67cab7663229e4085d1dc2826a790cc94861fab Mon Sep 17 00:00:00 2001
From: Jason Smith <jason.smith@dpc.vic.gov.au>
Date: Mon, 12 Aug 2024 17:33:11 +1000
Subject: [PATCH 1/2] feat(@dpc-sdp/ripple-ui-core): :sparkles: feature flag
 for long menu titles

---
 packages/ripple-tide-api/types.d.ts             |  4 ++++
 .../components/nav-bar/RplPrimaryNavBar.css     |  7 +++++++
 .../components/nav-bar/RplPrimaryNavBar.vue     | 17 +++++++++++++----
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/ripple-tide-api/types.d.ts b/packages/ripple-tide-api/types.d.ts
index 089cb4cea8..fbdfd86eaf 100644
--- 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
index 102c5d15e5..d340789899 100644
--- 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
index 16f239358e..ed6241d140 100644
--- 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

From 9b6a42fed9d8d3f8f44dd403bc9d217460f271b0 Mon Sep 17 00:00:00 2001
From: Jason Smith <jason.smith@dpc.vic.gov.au>
Date: Mon, 12 Aug 2024 17:34:03 +1000
Subject: [PATCH 2/2] test: :white_check_mark: long menu title feature flag

---
 .../nuxt-app/test/features/site/theme.feature | 14 ++++++
 .../fixtures/site/primary-nav-nowrap.json     | 44 +++++++++++++++++++
 .../test/fixtures/site/primary-nav-wrap.json  | 41 +++++++++++++++++
 .../common/shared-elements.ts                 | 11 +++++
 4 files changed, 110 insertions(+)
 create mode 100644 examples/nuxt-app/test/fixtures/site/primary-nav-nowrap.json
 create mode 100644 examples/nuxt-app/test/fixtures/site/primary-nav-wrap.json

diff --git a/examples/nuxt-app/test/features/site/theme.feature b/examples/nuxt-app/test/features/site/theme.feature
index c87c36d2da..45410946ba 100644
--- 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
new file mode 100644
index 0000000000..0d8cffdf35
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..0d133a87fe
--- /dev/null
+++ 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
index 5ca9672a9a..c0a041b15b 100644
--- 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) => {