Merge pull request #723 from dpc-sdp/feature/R20-1274-hero-headers

[R20-1274] add site wide corner graphics, remove content type headers
dpc-sdp · Jul 27, 2023 · 0e68f67 · 0e68f67
2 parents 97f04cd + d1ecffc
commit 0e68f67
Show file tree

Hide file tree

Showing 31 changed files with 178 additions and 269 deletions.
diff --git a/examples/nuxt-app/test/fixtures/landingpage/full-form.json b/examples/nuxt-app/test/fixtures/landingpage/full-form.json
@@ -24,9 +24,9 @@
   "showTopicTags": true,
   "inPageNavHeadingLevel": "h2",
   "background": "default",
-  "heroHeader": {
+  "header": {
     "title": "Testing forms",
-    "introText": "",
+    "summary": "",
     "links": {
       "title": "",
       "items": [],

diff --git a/examples/nuxt-app/test/fixtures/landingpage/home.json b/examples/nuxt-app/test/fixtures/landingpage/home.json
@@ -92,9 +92,9 @@
   "showInPageNav": true,
   "inPageNavHeadingLevel": "h3",
   "background": "default",
-  "heroHeader": {
+  "header": {
     "title": "Test landing page title",
-    "introText": "Test landing page title introduction text",
+    "summary": "Test landing page title introduction text",
     "links": {
       "title": "Want to know more about...",
       "items": [
@@ -125,14 +125,14 @@
       "height": 959
     },
     "backgroundImage": null,
-    "cornerTopImage": {
+    "cornerTop": {
       "src": "https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Parliament-of-Victoria.jpg",
       "alt": "Demo: Parliament of Victoria",
       "title": "Demo: Parliament of Victoria",
       "width": 1650,
       "height": 915
     },
-    "cornerBottomImage": {
+    "cornerBottom": {
       "src": "https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/VicFleet-Police-car-on-road.jpg",
       "alt": "Demo: VicFleet - Police car on road",
       "title": "Demo: VicFleet - Police car on road",

diff --git a/examples/nuxt-app/test/fixtures/landingpage/image-banner.json b/examples/nuxt-app/test/fixtures/landingpage/image-banner.json
@@ -100,9 +100,9 @@
   "showTopicTags": true,
   "inPageNavHeadingLevel": "h2",
   "background": "default",
-  "heroHeader": {
+  "header": {
     "title": "Demo Landing Page",
-    "introText": "Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae",
+    "summary": "Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae",
     "links": {
       "title": "Want to know more about...",
       "items": [
@@ -122,15 +122,15 @@
       "height": 650,
       "drupal_internal__target_id": 44
     },
-    "cornerTopImage": {
+    "cornerTop": {
       "src": "https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Parliament-of-Victoria.jpg",
       "alt": "Demo: Parliament of Victoria",
       "title": "Demo: Parliament of Victoria",
       "width": 1650,
       "height": 915,
       "drupal_internal__target_id": 46
     },
-    "cornerBottomImage": null,
+    "cornerBottom": null,
     "primaryAction": {
       "text": "Phasellus congue",
       "url": "https://www.vic.gov.au"

diff --git a/packages/nuxt-ripple-preview/pages/oauth/logging-in.vue b/packages/nuxt-ripple-preview/pages/oauth/logging-in.vue
@@ -31,6 +31,8 @@ onMounted(() => {
         title="Logging in..."
         :behind-nav="true"
         :breadcrumbs="hasBreadcrumbs"
+        :cornerTop="site?.cornerGraphic?.top?.src || true"
+        :cornerBottom="site?.cornerGraphic?.bottom?.src || true"
       />
     </template>
     <template #body>You will be redirected shortly</template>

diff --git a/packages/nuxt-ripple-preview/pages/oauth/success.vue b/packages/nuxt-ripple-preview/pages/oauth/success.vue
@@ -25,6 +25,8 @@ onMounted(() => {
         title="Logged in..."
         :behind-nav="true"
         :breadcrumbs="hasBreadcrumbs"
+        :cornerTop="site?.cornerGraphic?.top?.src || true"
+        :cornerBottom="site?.cornerGraphic?.bottom?.src || true"
       />
     </template>
     <template #body> Please wait </template>

diff --git a/packages/nuxt-ripple/components/TideBaseLayout.vue b/packages/nuxt-ripple/components/TideBaseLayout.vue
@@ -33,7 +33,16 @@
       </slot>
     </template>
     <template #aboveBody="{ hasBreadcrumbs }">
-      <slot name="aboveBody" :hasBreadcrumbs="hasBreadcrumbs"></slot>
+      <slot name="aboveBody" :hasBreadcrumbs="hasBreadcrumbs">
+        <TideHeroHeader
+          v-if="page.header"
+          :header="page.header"
+          :hasBreadcrumbs="hasBreadcrumbs"
+          :hideBottomCornerGraphic="!!page?.primaryCampaign"
+          :cornerTop="site?.cornerGraphic?.top"
+          :cornerBottom="site?.cornerGraphic?.bottom"
+        />
+      </slot>
     </template>
     <template #body="{ hasSidebar }">
       <slot name="body" :hasSidebar="hasSidebar"></slot>

diff --git a/packages/nuxt-ripple/components/TideHeroHeader.vue b/packages/nuxt-ripple/components/TideHeroHeader.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { TideHeroHeader } from '../types'
+import type { IRplFeatureFlags } from '@dpc-sdp/ripple-tide-api/types'
+import { TideImageField } from '@dpc-sdp/ripple-tide-api/types'
+
+interface Props {
+  header: TideHeroHeader
+  hasBreadcrumbs: boolean
+  hideBottomCornerGraphic?: boolean
+  behindNav?: boolean
+  cornerTop?: TideImageField
+  cornerBottom?: TideImageField
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  behindNav: true,
+  hideBottomCornerGraphic: false,
+  cornerTop: null,
+  cornerBottom: null
+})
+
+const cornerTop = computed(() => {
+  if (props.header?.backgroundImage) {
+    return false
+  }
+
+  return props.header?.cornerTop?.src || props.cornerTop?.src || true
+})
+
+const cornerBottom = computed(() => {
+  if (props.header?.backgroundImage || props.hideBottomCornerGraphic) {
+    return false
+  }
+
+  return props.header?.cornerBottom?.src || props.cornerBottom?.src || true
+})
+
+const secondaryAction = computed(() => {
+  if (!props.header?.secondaryAction) {
+    return null
+  }
+
+  return {
+    ...props.header.secondaryAction,
+    title: props.header?.secondaryActionLabel
+  }
+})
+
+const headerLinks = computed(() => {
+  if (!props.header?.links) {
+    return null
+  }
+
+  return {
+    title: props.header.links?.title,
+    items: props.header.links?.items,
+    more: props.header.links?.more
+  }
+})
+
+const featureFlags: IRplFeatureFlags = inject('featureFlags', {
+  headerTheme: 'default'
+})
+
+const headerTheme = computed(() => {
+  /*
+    Theme logic : Reverse and Image variants use the Neutral styling for the blocked title and introduction text.
+    The Neutral styling does not affect the ‘Default’ variant of the Header.
+  */
+  if (props.header?.backgroundImage || props.header?.theme === 'reverse') {
+    if (featureFlags?.headerTheme) {
+      return featureFlags.headerTheme
+    }
+    return props.header?.theme || 'default'
+  }
+  return props.header?.theme || 'default'
+})
+</script>
+
+<template>
+  <RplHeroHeader
+    :title="header.title"
+    :links="headerLinks"
+    :theme="headerTheme"
+    :logo="header?.logoImage"
+    :behindNav="behindNav"
+    :breadcrumbs="hasBreadcrumbs"
+    :cornerTop="cornerTop"
+    :cornerBottom="cornerBottom"
+    :background="header?.backgroundImage"
+    :primaryAction="header?.primaryAction"
+    :secondaryAction="secondaryAction"
+  >
+    {{ header.summary }}
+  </RplHeroHeader>
+</template>
diff --git a/packages/nuxt-ripple/error.vue b/packages/nuxt-ripple/error.vue
@@ -8,7 +8,10 @@
   >
     <template #breadcrumbs><span></span></template>
     <template #aboveBody>
-      <RplHeaderGraphic :image="true" placement="top" />
+      <RplHeaderGraphic
+        :image="site?.cornerGraphic?.top?.src || true"
+        placement="top"
+      />
     </template>
     <template #body>
       <RplErrorMessage
@@ -35,7 +38,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const is404 = computed(() => props.error?.statusCode === '404')
+const is404 = computed(() => props.error?.statusCode === 404)
 const title = computed(() => (is404.value ? 'Oops!' : 'Sorry!'))
 const site = is404.value ? await useTideSite() : undefined
 </script>

diff --git a/packages/nuxt-ripple/pages/sitemap.vue b/packages/nuxt-ripple/pages/sitemap.vue
@@ -22,6 +22,8 @@ const site = await useTideSite()
         title="Sitemap"
         :behind-nav="true"
         :breadcrumbs="hasBreadcrumbs"
+        :cornerTop="site?.cornerGraphic?.top?.src || true"
+        :cornerBottom="site?.cornerGraphic?.bottom?.src || true"
       />
     </template>
     <template #body>

diff --git a/packages/nuxt-ripple/types.d.ts b/packages/nuxt-ripple/types.d.ts
@@ -47,7 +47,6 @@ export interface TideLink {
   text: string
   url: string
 }
-3
 
 export interface TideMenuItem {
   text: string
@@ -74,6 +73,25 @@ export interface TideImageField {
   }
 }
 
+export interface TideHeroHeader {
+  title: string
+  summary?: string
+  links?: {
+    title: string
+    items: TideUrlField[]
+    more: TideUrlField
+  }
+  theme?: 'default' | 'reverse' | 'neutral'
+  logoImage?: TideImageField
+  backgroundImage?: TideImageField
+  backgroundImageCaption?: string
+  cornerTop?: TideImageField
+  cornerBottom?: TideImageField
+  primaryAction?: TideUrlField
+  secondaryAction?: TideUrlField
+  secondaryActionLabel?: string
+}
+
 export interface TidePageBase {
   title: string
   created: string

diff --git a/packages/ripple-tide-api/types.d.ts b/packages/ripple-tide-api/types.d.ts
@@ -25,6 +25,10 @@ export interface TideSiteData {
     altText: string
   }
   showQuickExit: boolean
+  cornerGraphic?: {
+    top?: TideImageField
+    bottom?: TideImageField
+  }
   acknowledgementHeader?: string
   acknowledgementFooter: string
   copyrightHtml: string
@@ -52,7 +56,6 @@ export interface TideLink {
   text: string
   url: string
 }
-3
 
 export interface TideMenuItem {
   text: string

diff --git a/packages/ripple-tide-event/components/TideEventHeader.vue b/packages/ripple-tide-event/components/TideEventHeader.vue
diff --git a/packages/ripple-tide-event/components/global/TideEvent.vue b/packages/ripple-tide-event/components/global/TideEvent.vue
@@ -19,10 +19,7 @@
       <slot name="breadcrumbs"></slot>
     </template>
     <template #aboveBody="{ hasBreadcrumbs }">
-      <TideEventHeader
-        :header="page.header"
-        :hasBreadcrumbs="hasBreadcrumbs"
-      ></TideEventHeader>
+      <slot name="aboveBody" :hasBreadcrumbs="hasBreadcrumbs"></slot>
     </template>
     <template #body>
       <TideEventOverview

diff --git a/packages/ripple-tide-grant/components/TideGrantHeader.vue b/packages/ripple-tide-grant/components/TideGrantHeader.vue
diff --git a/packages/ripple-tide-grant/components/global/TideGrant.vue b/packages/ripple-tide-grant/components/global/TideGrant.vue
@@ -19,10 +19,7 @@
       <slot name="breadcrumbs"></slot>
     </template>
     <template #aboveBody="{ hasBreadcrumbs }">
-      <TideGrantHeader
-        :header="page.header"
-        :hasBreadcrumbs="hasBreadcrumbs"
-      ></TideGrantHeader>
+      <slot name="aboveBody" :hasBreadcrumbs="hasBreadcrumbs"></slot>
     </template>
     <template #body>
       <TideGrantOverview :overview="page.overview"></TideGrantOverview>

diff --git a/packages/ripple-tide-landing-page/components/global/TideLandingPage.vue b/packages/ripple-tide-landing-page/components/global/TideLandingPage.vue
@@ -7,7 +7,7 @@
     :pageTitle="page.title"
     :pageLanguage="page.lang"
     :footerImageCaption="
-      page.showHeroImageCaption ? page.heroHeader.backgroundImageCaption : ''
+      page.showHeroImageCaption ? page.header?.backgroundImageCaption : ''
     "
     :topicTags="page.showTopicTags ? page.topicTags : []"
     :updatedDate="page.changed || page.created"
@@ -23,8 +23,8 @@
       <slot name="breadcrumbs"></slot>
     </template>
     <template #aboveBody="{ hasBreadcrumbs }">
-      <TideLandingPageHeroHeader
-        :header="page.heroHeader"
+      <TideHeroHeader
+        :header="page.header"
         :hasBreadcrumbs="hasBreadcrumbs"
         :hideBottomCornerGraphic="!!page.primaryCampaign"
         :cornerTop="site?.cornerGraphic?.top"