fix(header): hide external link icon for relative links

agrc · May 21, 2024 · c2cd87c · c2cd87c
1 parent 322a57c
commit c2cd87c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git 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}{' '}
-                    <ArrowTopRightOnSquareIcon className="ml-1 w-4 text-slate-500 dark:text-slate-300" />
+                    {link.title}
+                    {link.actionUrl.url.toLowerCase().startsWith('https') ? (
+                      <>
+                        {' '}
+                        <ArrowTopRightOnSquareIcon className="ml-1 w-4 text-slate-500 dark:text-slate-300" />
+                      </>
+                    ) : null}
                   </a>
                 ))}
               </div>

diff --git 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: () => <Header />,
+  render: () => <Header links={links} />,
 };