feat(@dpc-sdp/nuxt-ripple): add default tide header, fix site data lo…

…ading on 404 pages
dpc-sdp · Jul 25, 2023 · 491b306 · 491b306
1 parent c9ec8b9
commit 491b306
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 27 deletions.
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>
@@ -89,6 +98,7 @@ import { TideTopicTag } from '../mapping/base/topic-tags/topic-tags-mapping'
 import { TideSiteSection } from '@dpc-sdp/ripple-tide-api/types'
 import hideAlertsOnLoadScript from '../utils/hideAlertsOnLoadScript.js'
 import useTidePageMeta from '../composables/use-tide-page-meta'
+import TideHeroHeader from './TideHeroHeader.vue'
 
 interface Props {
   site: TideSiteData

diff --git a/...nts/global/TideLandingPage/HeroHeader.vue → ...nuxt-ripple/components/TideHeroHeader.vue b/...nts/global/TideLandingPage/HeroHeader.vue → ...nuxt-ripple/components/TideHeroHeader.vue
@@ -1,40 +1,61 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue'
-import { ITideHeroHeader } from '../../../mapping/hero-header/hero-header-mapping'
+import { TideHeroHeader } from '../types'
 import type { IRplFeatureFlags } from '@dpc-sdp/ripple-tide-api/types'
-import { TideImageField } from '@dpc-sdp/nuxt-ripple/types'
+import { TideImageField } from '@dpc-sdp/ripple-tide-api/types'
 
-const props = defineProps<{
-  header: ITideHeroHeader
-  hideBottomCornerGraphic: boolean
+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) {
+  if (props.header?.backgroundImage) {
     return false
   }
 
-  return props.header.cornerTopImage?.src || props.cornerTop?.src || true
+  return props.header?.cornerTop?.src || props.cornerTop?.src || true
 })
 
 const cornerBottom = computed(() => {
-  if (props.header.backgroundImage || props.hideBottomCornerGraphic) {
+  if (props.header?.backgroundImage || props.hideBottomCornerGraphic) {
     return false
   }
 
-  return props.header.cornerBottomImage?.src || props.cornerBottom?.src || true
+  return props.header?.cornerBottom?.src || props.cornerBottom?.src || true
 })
 
 const secondaryAction = computed(() => {
-  if (!props.header.secondaryAction) {
+  if (!props.header?.secondaryAction) {
     return null
   }
+
   return {
     ...props.header.secondaryAction,
-    title: props.header.secondaryActionLabel
+    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
   }
 })
 
@@ -47,7 +68,7 @@ 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 (props.header?.backgroundImage || props.header?.theme === 'reverse') {
     if (featureFlags?.headerTheme) {
       return featureFlags.headerTheme
     }
@@ -59,23 +80,18 @@ const headerTheme = computed(() => {
 
 <template>
   <RplHeroHeader
-    v-if="header"
     :title="header.title"
-    :links="{
-      title: header.links?.title,
-      items: header.links?.items,
-      more: header.links?.more
-    }"
+    :links="headerLinks"
     :theme="headerTheme"
-    :logo="header.logoImage"
-    :behindNav="true"
+    :logo="header?.logoImage"
+    :behindNav="behindNav"
     :breadcrumbs="hasBreadcrumbs"
-    :background="header.backgroundImage"
     :cornerTop="cornerTop"
     :cornerBottom="cornerBottom"
-    :primaryAction="header.primaryAction"
+    :background="header?.backgroundImage"
+    :primaryAction="header?.primaryAction"
     :secondaryAction="secondaryAction"
   >
-    {{ header.introText }}
+    {{ 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
@@ -74,6 +74,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