From f31659fe230f6c7d8dfc481f54f26b1cfa8d2aee Mon Sep 17 00:00:00 2001 From: Jason Smith Date: Fri, 6 Oct 2023 17:52:38 +1100 Subject: [PATCH] fix(@dpc-sdp/ripple-ui-core): :lipstick: prevent hanging icon --- .../src/components/header/RplHeaderLinks.css | 6 +++++- .../src/components/header/RplHeroHeader.stories.mdx | 10 ++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/ripple-ui-core/src/components/header/RplHeaderLinks.css b/packages/ripple-ui-core/src/components/header/RplHeaderLinks.css index a728b3e700..0ecefa4e9f 100644 --- 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 index 1b7aa22a27..00ae7cb784 100644 --- 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'} ] } }}