Merge pull request #1283 from dpc-sdp/release/2.14.0

Release/2.14.0
dpc-sdp · Aug 15, 2024 · b3a9e59 · b3a9e59
2 parents 3a3080b + 9454dbf
commit b3a9e59
Show file tree

Hide file tree

Showing 15 changed files with 270 additions and 45 deletions.
diff --git 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
@@ -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/jest.config.js b/jest.config.js
@@ -13,7 +13,9 @@ module.exports = {
     '^.+\\.ts$': '<rootDir>/node_modules/ts-jest',
     '.*\\.vue$': '<rootDir>/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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

diff --git a/packages/ripple-ui-maps/src/components/map/RplMap.stories.mdx b/packages/ripple-ui-maps/src/components/map/RplMap.stories.mdx
@@ -139,4 +139,26 @@ export const Template = (args) => ({
   >
     {Template.bind()}
   </Story>
+  <Story
+    name='Clustering Nearer'
+    args={{
+      id: '123',
+      features:featureData,
+      provider: 'mapbox',
+      clusteringDistance: 25
+    }}
+  >
+    {Template.bind()}
+  </Story>
+  <Story
+    name='Clustering Disabled'
+    args={{
+      id: '123',
+      features:featureData,
+      provider: 'mapbox',
+      clusteringDistance: 0
+    }}
+  >
+    {Template.bind()}
+  </Story>
 </Canvas>
diff --git a/packages/ripple-ui-maps/src/components/map/RplMap.vue b/packages/ripple-ui-maps/src/components/map/RplMap.vue
@@ -50,6 +50,7 @@ interface Props {
   hasSidePanel?: boolean
   noresults?: boolean
   getFeatureTitle?: (feature: any) => string
+  clusteringDistance?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -75,7 +76,8 @@ const props = withDefaults(defineProps<Props>(), {
     return ic
   },
   noresults: false,
-  getFeatureTitle: (feature: any) => (feature ? feature.title : '')
+  getFeatureTitle: (feature: any) => (feature ? feature.title : ''),
+  clusteringDistance: 100
 })
 
 const zoom = ref(props.initialZoom)
@@ -365,7 +367,7 @@ const noResultsRef = ref(null)
           <ol-animated-clusterlayer
             title="clusterLayer"
             :animationDuration="300"
-            :distance="100"
+            :distance="clusteringDistance"
             :zIndex="4"
           >
             <ol-source-vector :features="mapFeatures"> </ol-source-vector>