Merge branch 'development' into NXSTAGE-1338-top-nav

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss

@@ -274,9 +274,8 @@
           }
         }
 
-        // menu item links
+        // Second level menu item links
         &__second-level-menu {
-          //background-color: var(--grayscale-background-box);
           background-color: var(--grayscale-white);
           list-style: none;
           margin: 0;
@@ -316,12 +315,18 @@
               &:hover,
               &:focus {
                 color: var(--link-blue);
+
+                span.external-icon {
+                  svg {
+                    fill: var(--link-blue);
+                  }
+                }
               }
 
               .label {
                 @include breakpoint($extrawide) {
                   border: none;
-                  margin-left: 12px;
+                  margin: 0 5px 0 12px;
                   padding-top: 12px;
                   padding-bottom: 12px;
                 }
@@ -335,6 +340,18 @@
                   }
                 }
               }
+
+              span.external-icon {
+                svg {
+                  fill: var(--brand-main-nearly-black);
+                  transform: rotate(-45deg);
+
+                  &:hover,
+                  &:focus {
+                    fill: var(--link-blue);
+                  }
+                }
+              }
             }
           }
         }

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx

@@ -11,6 +11,7 @@ export interface DesktopLinks {
   url: string;
   description: string;
   menuLinkId: string;
+  isExternal: string;
   isActive: string;
   shortcutsTitle: string;
   closeButtonTitle: string;
@@ -331,6 +332,7 @@ export class HyDesktopMenuLinks {
           description,
           label,
           labelExtra,
+          isExternal,
           isActive,
           shortcutsTitle,
           closeButtonTitle,
@@ -343,6 +345,7 @@ export class HyDesktopMenuLinks {
             'desktop-menu-link__label',
             isActive === 'true' ? 'desktop-menu-link__label--is-active-trail' : '',
           ].join(' ');
+          let target = isExternal ? '_blank' : '_self';
 
           menuLinkItems.push(
             <li>
@@ -365,6 +368,7 @@ export class HyDesktopMenuLinks {
                     <a
                       aria-current={label}
                       href={url}
+                      target={target}
                       class="hy-desktop-menu-panel__desktop-menu__first-level-menu-item"
                       menu-link-id={id}
                     >
@@ -375,16 +379,24 @@ export class HyDesktopMenuLinks {
                       {description && <span class="description">{description}</span>}
                     </a>
                     <ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
-                      {items.map(({label, url}) => (
-                        <li>
-                          <a href={url}>
-                            <span class="heading-icon">
-                              <hy-icon icon={'hy-icon-caret-right'} size={12} />
-                            </span>
-                            <span class="label">{label}</span>
-                          </a>
-                        </li>
-                      ))}
+                      {items.map(({label, url, isExternal}) => {
+                        let subitemTarget = isExternal ? '_blank' : '_self';
+                        return (
+                          <li>
+                            <a href={url} target={subitemTarget}>
+                              <span class="heading-icon">
+                                <hy-icon icon={'hy-icon-caret-right'} size={12} />
+                              </span>
+                              <span class="label">{label}</span>
+                              {isExternal && (
+                                <span class="external-icon">
+                                  <hy-icon icon={'hy-icon-arrow-right'} size={12} />
+                                </span>
+                              )}
+                            </a>
+                          </li>
+                        );
+                      })}
                     </ul>
                   </div>
                   {shortcuts.length > 0 && (