Merge branch 'feature/SD-172-captcha-support' of https://github.com/d…

…pc-sdp/ripple-framework into feature/SD-172-captcha-support
dpc-sdp · Sep 16, 2024 · e80f274 · e80f274
2 parents b615488 + 6900a3b
commit e80f274
Show file tree

Hide file tree

Showing 41 changed files with 226 additions and 124 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,40 @@
 # Changelog
 
+## v2.16.0
+
+[compare changes](https://github.com/dpc-sdp/ripple-framework/compare/2.15.0...v2.16.0)
+
+
+### 🚀 Enhancements
+
+  - **@dpc-sdp/nuxt-ripple:** Drupal supplied manifest and icons ([2188fb876](https://github.com/dpc-sdp/ripple-framework/commit/2188fb876))
+  - **@dpc-sdp/ripple-ui-maps:** Add max zoom prop ([6a82a9d13](https://github.com/dpc-sdp/ripple-framework/commit/6a82a9d13))
+  - **@dpc-sdp/ripple-ui-forms:** Add webform autocomplete attribute support ([2e21be5f7](https://github.com/dpc-sdp/ripple-framework/commit/2e21be5f7))
+  - **@dpc-sdp/ripple-tide-search:** Pass location to customQueryConfig function ([89477e9c7](https://github.com/dpc-sdp/ripple-framework/commit/89477e9c7))
+  - **@dpc-sdp/ripple-ui-core:** ✨  support html heading ([c4559b52a](https://github.com/dpc-sdp/ripple-framework/commit/c4559b52a))
+  - **@dpc-sdp/ripple-tide-landing-page:** Support new 'highlight' cms display option ([f487327ae](https://github.com/dpc-sdp/ripple-framework/commit/f487327ae))
+
+### 🩹 Fixes
+
+  - **@dpc-sdp/nuxt-ripple:** Update regex for manifest description ([f98ca7497](https://github.com/dpc-sdp/ripple-framework/commit/f98ca7497))
+  - **@dpc-sdp/ripple-ui-core:** 🐛  right align rtl accordion heading ([4f766964c](https://github.com/dpc-sdp/ripple-framework/commit/4f766964c))
+  - **@dpc-sdp/nuxt-ripple:** Minor favicon updates ([6bb9e4d22](https://github.com/dpc-sdp/ripple-framework/commit/6bb9e4d22))
+  - **@dpc-sdp/nuxt-ripple-analytics:** Switch to useRouter for routeChange tracking ([ba4124d61](https://github.com/dpc-sdp/ripple-framework/commit/ba4124d61))
+
+### 💅 Refactors
+
+  - **@dpc-sdp/nuxt-ripple:** Make image fallback to existing site assets, use merged theme ([2f820849e](https://github.com/dpc-sdp/ripple-framework/commit/2f820849e))
+  - **@dpc-sdp/ripple-tide-landing-page:** ♻️  add whitelist for reusable paragraph types ([61a5655d3](https://github.com/dpc-sdp/ripple-framework/commit/61a5655d3))
+
+### 🏡 Chore
+
+  - 🚨  suppress another sourcemap warning ([bd9e6f79f](https://github.com/dpc-sdp/ripple-framework/commit/bd9e6f79f))
+
+### ❤️  Contributors
+
+- David Featherston <david.featherstone@dpc.vic.gov.au>
+- Jason Smith <jason.smith@dpc.vic.gov.au>
+
 ## v2.15.0
 
 [compare changes](https://github.com/dpc-sdp/ripple-framework/compare/2.14.0...v2.15.0)

diff --git a/examples/nuxt-app/test/features/site/theme.feature b/examples/nuxt-app/test/features/site/theme.feature
@@ -68,3 +68,26 @@ Feature: Site theme
     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
+
+  @mockserver
+  Scenario: Favicon and app icons are set correctly
+    Given the site endpoint returns fixture "/site/reference" with status 200
+    And the page endpoint for path "/" returns fixture "/landingpage/image-banner" with status 200
+    Given I visit the page "/"
+    And the site should include the following meta tags
+      | name        | value   |
+      | theme-color | #6B19A3 |
+    And the site should include the following link tags
+      | name             | value                    |
+      | icon             | /placeholders/logo.png   |
+      | apple-touch-icon | /placeholders/medium.png |
+    And the sites manifest should include the following details
+      | key              | value              |
+      | name             | Test site          |
+      | short_name       | Testing            |
+      | description      | About my test site |
+      | theme_color      | #6B19A3            |
+      | background_color | #ffffff            |
+    And the sites manifest should include the following icons
+      | src                      | sizes |
+      | /placeholders/medium.png | any   |
diff --git a/examples/nuxt-app/test/fixtures/site/reference.json b/examples/nuxt-app/test/fixtures/site/reference.json
@@ -1,6 +1,22 @@
 {
   "name": "Test site",
+  "shortName": "Testing",
+  "slogan": "<p>About my test site</p>",
   "acknowledgementHeader": "Test hero acknowledgement",
+  "favicon": {
+    "src": "/placeholders/logo.png",
+    "alt": "",
+    "title": "",
+    "width": 192,
+    "height": 192
+  },
+  "appIcon": {
+    "src": "/placeholders/medium.png",
+    "alt": "",
+    "title": "",
+    "width": 512,
+    "height": 512
+  },
   "acknowledgementFooter": "Test footer acknowledgement",
   "socialImages": {
     "twitter": {},

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.15.0",
+  "version": "2.16.0",
   "npmClient": "pnpm",
   "exact": true,
   "command": {

diff --git a/packages/eslint-config-ripple/package.json b/packages/eslint-config-ripple/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/eslint-config-ripple",
   "description": "ESLint config for Ripple projects",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "index.js",

diff --git a/packages/nuxt-ripple-analytics/package.json b/packages/nuxt-ripple-analytics/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/nuxt-ripple-analytics",
   "description": "Nuxt module for handling event tracking.",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

diff --git a/packages/nuxt-ripple-cli/package.json b/packages/nuxt-ripple-cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/nuxt-ripple-cli",
   "description": "A CLI for simplifying common setup and scaffolding tasks",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "./dist/index.js",

diff --git a/packages/nuxt-ripple-preview/package.json b/packages/nuxt-ripple-preview/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/nuxt-ripple-preview",
   "description": "Adds support for drupal preview links in Ripple frontend sites",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

diff --git a/packages/nuxt-ripple/components/TideBaseLayout.vue b/packages/nuxt-ripple/components/TideBaseLayout.vue
@@ -172,8 +172,8 @@ const footerNav = computed(() => {
  */
 await nuxtApp.callHook('tide:page', props)
 
-useTideSiteTheme(props.site)
+const theme = useTideSiteTheme(props.site)
 useTideHideAlerts()
 useTideSiteMeta(props, nuxtApp?.$app_origin)
-useTideFavicons()
+useTideFavicons(props.site, theme)
 </script>
diff --git a/packages/nuxt-ripple/composables/use-tide-favicons.ts b/packages/nuxt-ripple/composables/use-tide-favicons.ts
@@ -1,44 +1,43 @@
-export default () => {
-  const theme = useAppConfig().ripple?.theme
+import { TideSiteData } from '../types'
 
-  useHead({
-    link: [
-      {
-        rel: 'apple-touch-icon',
-        sizes: '180x180',
-        href: '/apple-touch-icon.png'
-      },
-      {
-        rel: 'icon',
-        type: 'image/png',
-        sizes: '32x32',
-        href: '/favicon-32x32.png'
-      },
-      {
-        rel: 'icon',
-        type: 'image/png',
-        sizes: '16x16',
-        href: '/favicon-16x16.png'
-      },
-      { rel: 'manifest', href: '/site.webmanifest' },
+export default (site: TideSiteData, theme: any) => {
+  const { public: config } = useRuntimeConfig()
+
+  let link = []
+  const siteUrl = config?.siteUrl || ''
+  const themeColour = theme?.['rpl-clr-primary'] ?? '#ffffff'
+
+  const manifest = {
+    id: siteUrl,
+    name: site?.name,
+    short_name: site?.shortName || '',
+    description: site?.slogan?.replace(/<[^>]*>|<|>/g, ''),
+    start_url: siteUrl,
+    icons: [
       {
-        rel: 'mask-icon',
-        href: '/safari-pinned-tab.svg',
-        color:
-          theme && theme.hasOwnProperty('rpl-clr-primary')
-            ? theme['rpl-clr-primary']
-            : '#0054c9'
+        src: siteUrl + (site.appIcon?.src ?? '/android-chrome-512x512.png'),
+        sizes: 'any'
       }
     ],
-    meta: [
-      {
-        name: 'msapplication-TileColor',
-        content:
-          theme && theme.hasOwnProperty('rpl-clr-primary')
-            ? theme['rpl-clr-primary']
-            : '#0054c9'
-      },
-      { name: 'theme-color', content: '#ffffff' }
-    ]
+    theme_color: themeColour,
+    background_color: '#ffffff',
+    display: 'standalone'
+  }
+
+  link.push({
+    rel: 'apple-touch-icon',
+    href: site.appIcon?.src ?? '/apple-touch-icon.png'
+  })
+
+  link.push({
+    rel: 'manifest',
+    href: `data:application/manifest+json,${encodeURIComponent(JSON.stringify(manifest))}`
   })
+
+  link.push({
+    rel: 'icon',
+    href: site.favicon?.src ?? '/favicon.ico'
+  })
+
+  useHead({ link, meta: [{ name: 'theme-color', content: themeColour }] })
 }
diff --git a/packages/nuxt-ripple/composables/use-tide-site-theme.ts b/packages/nuxt-ripple/composables/use-tide-site-theme.ts
@@ -22,4 +22,6 @@ export default (site) => {
       ]
     })
   }
+
+  return siteTheme
 }
diff --git a/packages/nuxt-ripple/mapping/site/index.ts b/packages/nuxt-ripple/mapping/site/index.ts
@@ -16,9 +16,13 @@ import processSiteSocialLinks from '../utils/processSiteSocialLinks.js'
 export default {
   mapping: {
     name: 'name',
+    shortName: 'field_short_name',
     _src: (src: any) =>
       process.env.NODE_ENV === 'development' ? src : undefined,
     siteAlerts: siteAlertsMapping,
+    slogan: (src: any) => getBodyFromField(src, 'field_site_slogan'),
+    favicon: (src: any) => getImageFromField(src, 'field_site_favicon'),
+    appIcon: (src: any) => getImageFromField(src, 'field_site_app_icon'),
     siteLogo: (src: any) => {
       if (src.field_site_logo) {
         return {
@@ -121,6 +125,8 @@ export default {
   },
   includes: [
     ...siteAlertsIncludes,
+    'field_site_favicon',
+    'field_site_app_icon',
     'field_site_og_image',
     'field_site_og_image.field_media_image',
     'field_site_twitter_image',

diff --git a/packages/nuxt-ripple/package.json b/packages/nuxt-ripple/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/nuxt-ripple",
   "description": "Nuxt module for integrating Ripple and Tide",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

diff --git a/packages/nuxt-ripple/public/android-chrome-192x192.png b/packages/nuxt-ripple/public/android-chrome-192x192.png
diff --git a/packages/nuxt-ripple/public/browserconfig.xml b/packages/nuxt-ripple/public/browserconfig.xml
diff --git a/packages/nuxt-ripple/public/favicon-16x16.png b/packages/nuxt-ripple/public/favicon-16x16.png
diff --git a/packages/nuxt-ripple/public/favicon-32x32.png b/packages/nuxt-ripple/public/favicon-32x32.png
diff --git a/packages/nuxt-ripple/public/mstile-150x150.png b/packages/nuxt-ripple/public/mstile-150x150.png
diff --git a/packages/nuxt-ripple/public/safari-pinned-tab.svg b/packages/nuxt-ripple/public/safari-pinned-tab.svg
diff --git a/packages/nuxt-ripple/public/site.webmanifest b/packages/nuxt-ripple/public/site.webmanifest
diff --git a/packages/nuxt-ripple/types.d.ts b/packages/nuxt-ripple/types.d.ts
@@ -13,6 +13,8 @@ export type TideApiResponse = any
 
 export interface TideSiteData {
   name: string
+  shortName?: string
+  slogan?: string
   _src?: any
   siteAlerts: TideAlert[]
   siteLogo: {
@@ -21,6 +23,16 @@ export interface TideSiteData {
     altText: string
   }
   showQuickExit: boolean
+  favicon?: {
+    src: string
+    width: string
+    height: string
+  }
+  appIcon?: {
+    src?: string
+    apple?: string
+    android?: string
+  }
   acknowledgementHeader?: string
   acknowledgementFooter: string
   cornerGraphic?: {

diff --git a/packages/ripple-sdp-core/package.json b/packages/ripple-sdp-core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/ripple-sdp-core",
   "description": "SDP core content types",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "./nuxt.config.ts",

diff --git a/packages/ripple-storybook/package.json b/packages/ripple-storybook/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ripple-storybook",
   "description": "Ripple Storybook instance",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "license": "Apache-2.0",
   "private": true,
   "repository": "https://github.com/dpc-sdp/ripple-framework",

diff --git a/packages/ripple-test-utils/package.json b/packages/ripple-test-utils/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/ripple-test-utils",
   "description": "Test utils for Ripple sites",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/config/index.js",