feat(@dpc-sdp/nuxt-ripple): add support for new print logo cms field

dpc-sdp · Aug 17, 2023 · e321cb6 · e321cb6
1 parent 24b64ab
commit e321cb6
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 6 deletions.
diff --git a/packages/nuxt-ripple/components/TideBaseLayout.vue b/packages/nuxt-ripple/components/TideBaseLayout.vue
@@ -13,7 +13,6 @@
       <slot name="primaryNav">
         <RplPrimaryNav
           :primaryLogo="{
-            printSrc: '/img/primary-nav-logo-primary-print.svg',
             altText: 'Victoria government logo',
             href: '/'
           }"

diff --git a/packages/nuxt-ripple/mapping/site/index.ts b/packages/nuxt-ripple/mapping/site/index.ts
@@ -21,7 +21,8 @@ export default {
         return {
           href: '/',
           src: src.field_site_logo.url,
-          altText: src.field_site_logo.meta?.alt
+          altText: src.field_site_logo.meta?.alt,
+          printSrc: getImageFromField(src, 'field_print_friendly_logo')?.src
         }
       }
 
@@ -114,6 +115,7 @@ export default {
     'field_site_main_menu',
     'field_site_footer_menu',
     'field_site_logo',
+    'field_print_friendly_logo',
     'field_top_corner_graphic',
     'field_bottom_corner_graphic',
     'field_site_footer_logos',

diff --git a/packages/ripple-tide-api/types.d.ts b/packages/ripple-tide-api/types.d.ts
@@ -23,6 +23,7 @@ export interface TideSiteData {
     href: string
     src: string
     altText: string
+    printSrc: string
   }
   showQuickExit: boolean
   cornerGraphic?: {

diff --git a/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.stories.mdx b/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.stories.mdx
@@ -56,7 +56,7 @@ export const CustomLoginButtonTemplate = (args) => ({
     primaryLogo: {
       href: '#',
       src: 'img/primary-nav-logo-primary.svg',
-      printsrc: 'img/primary-nav-logo-primary-print.svg',
+      printSrc: 'img/primary-nav-logo-primary-print.svg',
       altText: 'Primary logo alt text'
     },
     items: RplPrimaryNavItems
@@ -121,7 +121,7 @@ This example uses a supplied secondary logo.
         href: '#',
         src: 'img/primary-nav-logo-secondary.svg',
         altText: 'Secondary logo alt text',
-        printsrc: 'img/primary-nav-logo-secondary-print.svg'
+        printSrc: 'img/primary-nav-logo-secondary-print.svg'
       }
     }}
   >

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
@@ -49,6 +49,7 @@
     height: 30px;
     padding-top: var(--rpl-sp-1);
     padding-bottom: var(--rpl-sp-1);
+    fill: var(--rpl-clr-type-default);
   }
 }
 

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
@@ -81,7 +81,7 @@ const handleToggleItem = (level: number, item) => {
         <VicGovLogo
           v-if="!primaryLogo?.src"
           :aria-label="primaryLogo.altText"
-          class="rpl-primary-nav__primary-logo-image rpl-u-screen-only"
+          class="rpl-primary-nav__primary-logo-image"
         />
         <img
           v-else
@@ -90,7 +90,7 @@ const handleToggleItem = (level: number, item) => {
           :alt="primaryLogo.altText"
         />
         <img
-          v-if="primaryLogo.printSrc"
+          v-if="primaryLogo?.src && primaryLogo?.printSrc"
           class="rpl-primary-nav__primary-logo-image rpl-primary-nav__logo-alt rpl-u-print-only"
           :src="primaryLogo.printSrc"
           :alt="primaryLogo.altText"