feat(@dpc-sdp/ripple-ui-core): add default primary logo inline

dpc-sdp · Aug 15, 2023 · 7def1aa · 7def1aa
1 parent 3a58251
commit 7def1aa
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 1 deletion.
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="{
-            src: '/img/primary-nav-logo-primary.svg',
             printSrc: '/img/primary-nav-logo-primary-print.svg',
             altText: 'Victoria government logo',
             href: '/'

diff --git a/packages/ripple-ui-core/src/assets/logos/logo-vic-gov.svg b/packages/ripple-ui-core/src/assets/logos/logo-vic-gov.svg
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
@@ -67,18 +67,48 @@ export const CustomLoginButtonTemplate = (args) => ({
 
 <ArgsTable of={RplPrimaryNav} />
 
+## Default
+
+This uses the default primary SVG logo inline.
+
 <Canvas>
   <Story
     name='Default'
     play={a11yStoryCheck}
     parameters={{
       layout: 'fullscreen'
     }}
+    args={{
+      primaryLogo: {
+        href: '#',
+        altText: 'Primary logo alt text'
+      }
+    }}
   >
     {SingleTemplate.bind()}
   </Story>
 </Canvas>
 
+## With primary logo
+
+This example uses a supplied primary logo.
+
+<Canvas>
+  <Story
+    name='With primary logo'
+    play={a11yStoryCheck}
+    parameters={{
+      layout: 'fullscreen'
+    }}
+  >
+    {SingleTemplate.bind()}
+  </Story>
+</Canvas>
+
+## With secondary logo
+
+This example uses a supplied secondary logo.
+
 <Canvas>
   <Story
     name='With secondary logo'
@@ -99,6 +129,10 @@ export const CustomLoginButtonTemplate = (args) => ({
   </Story>
 </Canvas>
 
+## Default / With secondary logo
+
+This example shows the userAction slot in use.
+
 <Canvas>
   <Story
     name='With custom user action'

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
@@ -42,6 +42,7 @@
   display: block;
   width: 106px;
   height: 16px;
+  fill: var(--rpl-clr-primary-logo, var(--rpl-clr-type-primary-contrast));
 
   @media print {
     width: auto;

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
@@ -11,6 +11,7 @@ import {
   useRippleEvent,
   rplEventPayload
 } from '../../../../composables/useRippleEvent'
+import VicGovLogo from './../../../../assets/logos/logo-vic-gov.svg?component'
 
 interface Props {
   primaryLogo: IRplPrimaryNavLogo
@@ -77,7 +78,13 @@ const handleToggleItem = (level: number, item) => {
         class="rpl-primary-nav__primary-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border"
         :url="primaryLogo.href"
       >
+        <VicGovLogo
+          v-if="!primaryLogo?.src"
+          :aria-label="primaryLogo.altText"
+          class="rpl-primary-nav__primary-logo-image rpl-u-screen-only"
+        />
         <img
+          v-else
           class="rpl-primary-nav__primary-logo-image rpl-u-screen-only"
           :src="primaryLogo.src"
           :alt="primaryLogo.altText"