diff --git a/packages/header/src/Header.jsx b/packages/header/src/Header.jsx index 5bcf4d9a..f0661f68 100644 --- a/packages/header/src/Header.jsx +++ b/packages/header/src/Header.jsx @@ -56,8 +56,13 @@ const Header = ({ className, children, links = [] }) => { key={i} className="flex items-center justify-between p-1 text-sm text-slate-500 hover:text-slate-600 dark:text-slate-300" > - {link.title}{' '} - + {link.title} + {link.actionUrl.url.toLowerCase().startsWith('https') ? ( + <> + {' '} + + + ) : null} ))} diff --git a/packages/header/src/Header.stories.jsx b/packages/header/src/Header.stories.jsx index 2da49a81..bb44f661 100644 --- a/packages/header/src/Header.stories.jsx +++ b/packages/header/src/Header.stories.jsx @@ -4,6 +4,27 @@ export default { component: Header, }; +const links = [ + { + title: 'Getting Started Guide', + actionUrl: { + url: 'https://gis.utah.gov', + }, + }, + { + title: 'Documentation', + actionUrl: { + url: '/docs', + }, + }, + { + title: 'Privacy Policy', + actionUrl: { + url: '/privacy', + }, + }, +]; + export const DefaultHeader = { - render: () =>
, + render: () =>
, };