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) => { 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) => { -