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: () => ,
};