diff --git a/docs/content/framework/4.core-modules.md b/docs/content/framework/4.core-modules.md index 292a9c1411..dbcccdbf8e 100644 --- a/docs/content/framework/4.core-modules.md +++ b/docs/content/framework/4.core-modules.md @@ -4,37 +4,48 @@ description: A listing of all current core Ripple layers and packages layout: page --- -View each package on NPM for their individual READMEs. +View each package on GitHub package registry for their individual READMEs. ## Core UI Libraries -- [`ripple-ui-core`](https://www.npmjs.com/package/@dpc-sdp/ripple-ui-core) -- [`ripple-ui-forms`](https://www.npmjs.com/package/@dpc-sdp/ripple-ui-forms) +- [`ripple-ui-core`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-ui-core) +- [`ripple-ui-forms`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-ui-forms) +- [`ripple-ui-maps`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-ui-maps) ## Tide API -- [`ripple-tide-api`](https://www.npmjs.com/package/@dpc-sdp/ripple-tide-api) +- [`ripple-tide-api`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-tide-api) ## Nuxt-ripple base layer -- [`nuxt-ripple`](https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple) +- [`nuxt-ripple`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/nuxt-ripple) ## Core content types -- [`ripple-tide-landing-page`](https://www.npmjs.com/package/@dpc-sdp/ripple-tide-landing-page) -- [`ripple-tide-event`](https://www.npmjs.com/package/@dpc-sdp/ripple-tide-event) -- [`ripple-tide-grant`](https://www.npmjs.com/package/@dpc-sdp/ripple-tide-grant) -- [`ripple-tide-media`](https://www.npmjs.com/package/@dpc-sdp/ripple-tide-media) -- [`ripple-tide-news`](https://www.npmjs.com/package/@dpc-sdp/ripple-tide-news) -- [`ripple-tide-publication`](https://www.npmjs.com/package/@dpc-sdp/ripple-tide-publication) +All core content types (and content related packages) are added through the `ripple-sdp-core` package + +- [`ripple-sdp-core`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-sdp-core) + +Below are the individual content type packages that are included in `ripple-sdp-core`: + +- [`ripple-tide-search`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-tide-search) +- [`ripple-tide-webform`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-tide-webform) +- [`ripple-tide-topic`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-tide-topic) +- [`ripple-tide-landing-page`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-tide-landing-page) +- [`ripple-tide-event`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-tide-event) +- [`ripple-tide-grant`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-tide-grant) +- [`ripple-tide-media`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-tide-media) +- [`ripple-tide-news`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-tide-news) +- [`ripple-tide-publication`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-tide-publication) ## Other core modules -- [`ripple-tide-search`](https://www.npmjs.com/package/@dpc-sdp/ripple-tide-search) -- [`nuxt-ripple-analytics`](https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-analytics) -- [`nuxt-ripple-preview`](https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-preview) +- [`nuxt-ripple-analytics`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/nuxt-ripple-analytics) +- [`nuxt-ripple-preview`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/nuxt-ripple-preview) ## Scaffolding, testing and supporting packages -- [`nuxt-ripple-cli`](https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-cli) -- [`ripple-test-utils`](https://www.npmjs.com/package/@dpc-sdp/ripple-test-utils) +- [`nuxt-ripple-cli`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/nuxt-ripple-cli) +- [`ripple-test-utils`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/ripple-test-utils) +- [`eslint-config-ripple`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/eslint-config-ripple) +- [`stylelint-config-ripple`](https://github.com/dpc-sdp/ripple-framework/pkgs/npm/stylelint-config-ripple) 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/jest.config.js b/jest.config.js index 4729fb4e4a..eac7da33c3 100644 --- a/jest.config.js +++ b/jest.config.js @@ -13,7 +13,9 @@ module.exports = { '^.+\\.ts$': '/node_modules/ts-jest', '.*\\.vue$': '/node_modules/@vue/vue3-jest' }, - transformIgnorePatterns: ['node_modules/(?!.pnpm)(?!(ripple-*|lodash-es)/)'], + transformIgnorePatterns: [ + 'node_modules/(?!.pnpm)(?!(ripple-*|lodash-es|cheerio)/)' + ], extensionsToTreatAsEsm: ['.ts'], moduleNameMapper: { '^(\\.{1,2}/.*)\\.js$': '$1', diff --git a/packages/nuxt-ripple/server/plugins/prefetch.ts b/packages/nuxt-ripple/server/plugins/prefetch.ts index d1d9f851f0..edc060719a 100644 --- a/packages/nuxt-ripple/server/plugins/prefetch.ts +++ b/packages/nuxt-ripple/server/plugins/prefetch.ts @@ -1,4 +1,4 @@ -import * as cheerio from 'cheerio' +import { load } from 'cheerio' import type { NitroApp } from 'nitropack' // fix type stub - See https://github.com/nuxt/nuxt/issues/18556 @@ -17,7 +17,7 @@ export default defineNitroPlugin((nitroApp) => { // https://github.com/nuxt/nuxt/issues/18376 html.head = html.head.map((head) => { - const $ = cheerio.load(head) + const $ = load(head) $('link[rel=prefetch]').each(function () { $(this).remove() }) 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/package.json b/packages/ripple-tide-api/package.json index 17c097757f..d61082c2a1 100644 --- a/packages/ripple-tide-api/package.json +++ b/packages/ripple-tide-api/package.json @@ -26,7 +26,7 @@ "@nuxt/kit": "3.11.2", "axios": "^1.3.4", "change-case": "^4.1.2", - "cheerio": "^1.0.0-rc.10", + "cheerio": "^1.0.0", "h3": "^1.9.0", "js-yaml": "^4.1.0", "jsonapi-parse": "^2.0.1", @@ -41,7 +41,7 @@ }, "devDependencies": { "@nuxt/schema": "3.11.2", - "@types/cheerio": "^0.22.31", + "@types/cheerio": "^0.22.35", "axios-mock-adapter": "^1.21.3", "defu": "^6.1.2", "rimraf": "^4.4.1" diff --git a/packages/ripple-tide-api/src/utils/markup-transpiler/index.ts b/packages/ripple-tide-api/src/utils/markup-transpiler/index.ts index 0951befc75..6da8b383c4 100644 --- a/packages/ripple-tide-api/src/utils/markup-transpiler/index.ts +++ b/packages/ripple-tide-api/src/utils/markup-transpiler/index.ts @@ -1,4 +1,4 @@ -import cheerio from 'cheerio' +import { load } from 'cheerio' import defaultPlugins from './default-plugins.js' // A markup transpiler for converting HTML into Vue template by giving plugins. @@ -10,7 +10,7 @@ const markupTranspiler = ( if (!html) { return '' } - const $ = cheerio.load(html, options) + const $ = load(html, options) const $body = $('body') let markupData = {} 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) => { -