feat/SW-3108 external links

* feat(SW-3108): Added external link options to shortcuts
* feat(SW-3108): Added external link options to header

Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx

@@ -24,7 +24,7 @@ export default function ShortcutsListItems({
             className={styles.link}
           >
             <Typography variant="Body/Paragraph/mdBold">
-              <span>{shortcut.text || shortcut.title}</span>
+              <span>{shortcut.text}</span>
             </Typography>
             <MaterialIcon color="CurrentColor" icon="arrow_forward" />
           </Link>

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -56,9 +56,9 @@ export default function MegaMenu({
         ) : null}
         <div className={styles.megaMenuContent}>
           <div className={styles.seeAllLink}>
-            {seeAllLink?.link ? (
+            {seeAllLink?.url ? (
               <Link
-                href={seeAllLink.link.url}
+                href={seeAllLink.url}
                 variant="icon"
                 weight="bold"
                 onClick={handleNavigate}
@@ -75,11 +75,11 @@ export default function MegaMenu({
                   <span className={styles.submenuTitle}>{item.title}</span>
                 </Typography>
                 <ul className={styles.submenu}>
-                  {item.links.map(({ title, link }) =>
-                    link ? (
+                  {item.links.map(({ title, url }) =>
+                    url ? (
                       <li key={title} className={styles.submenuItem}>
                         <Link
-                          href={link.url}
+                          href={url}
                           variant="menu"
                           className={styles.link}
                           onClick={handleNavigate}

apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx

@@ -42,52 +42,58 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
     }
   }
 
-  return submenu.length ? (
-    <>
-      <MainMenuButton
-        onClick={() => toggleMegaMenu(megaMenuTitle)}
+  if (submenu.length) {
+    return (
+      <>
+        <MainMenuButton
+          onClick={() => toggleMegaMenu(megaMenuTitle)}
+          className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : ""}`}
+        >
+          {title}
+          {isMobile ? (
+            <MaterialIcon
+              icon="arrow_forward_ios"
+              size={20}
+              className={`${styles.chevron}`}
+              color="Icon/Interactive/Accent"
+            />
+          ) : (
+            <MaterialIcon
+              icon="keyboard_arrow_down"
+              size={20}
+              className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
+              color="Icon/Interactive/Accent"
+            />
+          )}
+        </MainMenuButton>
+        <div
+          ref={megaMenuRef}
+          className={`${styles.dropdown} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
+        >
+          <MegaMenu
+            isMobile={isMobile}
+            title={title}
+            seeAllLink={seeAllLink}
+            submenu={submenu}
+            card={card}
+            isOpen={isMegaMenuOpen}
+          />
+        </div>
+      </>
+    )
+  } else if (link?.url) {
+    return (
+      <Link
         className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : ""}`}
+        variant="navigation"
+        weight="bold"
+        onClick={handleNavigate}
+        href={link.url}
       >
         {title}
-        {isMobile ? (
-          <MaterialIcon
-            icon="arrow_forward_ios"
-            size={20}
-            className={`${styles.chevron}`}
-            color="Icon/Interactive/Accent"
-          />
-        ) : (
-          <MaterialIcon
-            icon="keyboard_arrow_down"
-            size={20}
-            className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
-            color="Icon/Interactive/Accent"
-          />
-        )}
-      </MainMenuButton>
-      <div
-        ref={megaMenuRef}
-        className={`${styles.dropdown} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
-      >
-        <MegaMenu
-          isMobile={isMobile}
-          title={title}
-          seeAllLink={seeAllLink}
-          submenu={submenu}
-          card={card}
-          isOpen={isMegaMenuOpen}
-        />
-      </div>
-    </>
-  ) : (
-    <Link
-      className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : ""}`}
-      variant="navigation"
-      weight="bold"
-      onClick={handleNavigate}
-      href={link!.url}
-    >
-      {title}
-    </Link>
-  )
+      </Link>
+    )
+  }
+
+  return null
 }

apps/scandic-web/components/Header/TopLink/index.tsx

@@ -11,13 +11,13 @@ export default function TopLink({
 }: TopLinkProps) {
   const linkData = isLoggedIn ? topLink.logged_in : topLink.logged_out
 
-  if (!linkData?.link?.url || !linkData?.title) {
+  if (!linkData?.url || !linkData?.title) {
     return null
   }
 
   return (
     <HeaderLink
-      href={linkData.link.url}
+      href={linkData.url}
       iconName={linkData.icon || IconName.Gift}
       iconSize={iconSize}
     >