Merge pull request #888 from dpc-sdp/fix/r20-1565-hanging-icon

[R20-1565] Prevent hanging icon in header journey links
dpc-sdp · Oct 15, 2023 · 704b024 · 704b024
2 parents 7c8bc57 + f31659f
commit 704b024
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/ripple-ui-core/src/components/header/RplHeaderLinks.css b/packages/ripple-ui-core/src/components/header/RplHeaderLinks.css
@@ -52,10 +52,14 @@
 }
 
 .rpl-header-links__item .rpl-list__link {
+  margin-right: calc(-1 * var(--rpl-sp-6));
+  padding-right: var(--rpl-sp-6);
+
   .rpl-icon {
     --rpl-icon-size: var(--rpl-sp-3);
 
-    margin-left: var(--rpl-sp-2);
+    margin-right: calc(-1 * var(--rpl-sp-4));
+    padding-left: var(--rpl-sp-2);
     transition: transform ease-out var(--rpl-motion-speed-3);
 
     @media (--rpl-bp-l) {

diff --git a/packages/ripple-ui-core/src/components/header/RplHeroHeader.stories.mdx b/packages/ripple-ui-core/src/components/header/RplHeroHeader.stories.mdx
@@ -134,11 +134,13 @@ This is an example header with journey links
     play={a11yStoryCheck}
     args={{
       links: {
-        title: 'Want to know more',
+        title: 'Popular searches',
         items: [
-          {text: 'First links', url: '#first'},
-          {text: 'Second link', url: '#second'},
-          {text: 'A third link', url: '#third'},
+          {text: 'Jobs and careers', url: '#first'},
+          {text: 'Working with Children Check', url: '#second'},
+          {text: 'NDIS Worker Screening Check', url: '#third'},
+          {text: 'Coronavirus: latest information', url: '#fourth'},
+          {text: 'Contact the Victorian Government', url: '#fifth'}
         ]
       }
     }}