Merge branch 'NXSTAGE-1000-upper-navigation' of...

Merge branch 'NXSTAGE-1000-upper-navigation' of version.helsinki.fi:julkiset-sivut/design-system-lib into NXSTAGE-1000-upper-navigation

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

@@ -225,4 +225,44 @@
     right: 10px;
     top: 10px;
   }
+
+  .shortcuts-panel {
+    &__title {
+      @include font-size(18px, 22px);
+      @include font-weight($bold);
+      //border-bottom: 1px solid var(--grayscale-medium-dark);
+      color: var(--grayscale-black);
+      font-family: var(--main-font-family);
+      letter-spacing: -0.56px;
+      margin-bottom: 18px;
+      text-transform: uppercase;
+    }
+    &__shortcut-item {
+      border-bottom: 1px solid var(--grayscale-medium-dark);
+      &__first {
+        border-top: 1px solid var(--grayscale-medium-dark);
+      }
+
+      a {
+        @include font-size(16px, 22px);
+        @include font-weight($semibold);
+        color: var(--grayscale-black);
+        display: flex;
+        flex-direction: row;
+        font-family: var(--main-font-family);
+        letter-spacing: -0.5px;
+        padding: 19px 0;
+        text-decoration: none;
+      }
+
+      span.shortcut-item__icon {
+        position: absolute;
+        right: 0;
+
+        svg {
+          padding: 4px;
+        }
+      }
+    }
+  }
 }

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

@@ -118,11 +118,17 @@ export class HyDesktopMenuLinks {
               </ul>
               {shortcuts.length > 0 && (
                 <ul class="shortcuts-panel">
-                  {shortcuts.map(({shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label}) => {
+                  <h2 class="shortcuts-panel__title">{'Shortcuts'}</h2>
+                  {shortcuts.map(({shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label}, index) => {
                     let target = shortcut_is_external ? '_blank' : '_self';
 
+                    let shortcutClass = [
+                      'shortcuts-panel__shortcut-item',
+                      index == 0 ? 'shortcuts-panel__shortcut-item__first' : '',
+                    ].join(' ');
+
                     return (
-                      <li class="shortcut-item">
+                      <li class={shortcutClass}>
                         <a
                           aria-current={shortcut_aria_label}
                           href={shortcut_url}
@@ -131,6 +137,9 @@ export class HyDesktopMenuLinks {
                           aria-label={shortcut_aria_label}
                         >
                           <span class="shortcut-item__label">{shortcut_title}</span>
+                          <span class="shortcut-item__icon">
+                            <hy-icon icon={'hy-icon-arrow-right'} size={24} />
+                          </span>
                         </a>
                       </li>
                     );