Merge branch 'NXSTAGE-1493-header' of...

Merge branch 'NXSTAGE-1493-header' of version.helsinki.fi:julkiset-sivut/design-system-lib into NXSTAGE-1493-header

src/components.d.ts

@@ -633,6 +633,7 @@ export namespace Components {
     isMobile: boolean;
     logoLabel?: string;
     logoUrl?: string;
+    menuLabel: string;
     siteLabel?: string;
     siteUrl?: string;
   }
@@ -2019,6 +2020,7 @@ declare namespace LocalJSX {
     isMobile?: boolean;
     logoLabel?: string;
     logoUrl?: string;
+    menuLabel?: string;
     onMobileMenuTopToggle?: (event: CustomEvent<any>) => void;
     onUniversityMainMenuToggled?: (event: CustomEvent<any>) => void;
     siteLabel?: string;

src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx

@@ -23,6 +23,7 @@ let keys = {
 })
 export class HyMenuMainGroup {
   @Element() el: HTMLElement;
+  @Prop() menuLabel: string = 'University main menu';
   @Prop() dataMainMenu: MainMenu[] | string;
   @Prop() isMobile: boolean = false;
   @Prop() logoUrl?: string;
@@ -218,7 +219,7 @@ export class HyMenuMainGroup {
           ) : (
             <hy-icon class={'toggle__caret'} icon={'hy-icon-slim-hamburger-menu'} size={8} fill={white} />
           )}
-          <span>University main menu</span>
+          <span>{this.menuLabel}</span>
         </button>
         <div
           class={{

src/components/navigation/hy-menu-main-group/readme.md

@@ -4,15 +4,16 @@
 
 ## Properties
 
-| Property       | Attribute        | Description | Type                   | Default     |
-| -------------- | ---------------- | ----------- | ---------------------- | ----------- |
-| `dataMainMenu` | `data-main-menu` |             | `MainMenu[] \| string` | `undefined` |
-| `donate`       | --               |             | `DonateLink[]`         | `undefined` |
-| `isMobile`     | `is-mobile`      |             | `boolean`              | `false`     |
-| `logoLabel`    | `logo-label`     |             | `string`               | `undefined` |
-| `logoUrl`      | `logo-url`       |             | `string`               | `undefined` |
-| `siteLabel`    | `site-label`     |             | `string`               | `undefined` |
-| `siteUrl`      | `site-url`       |             | `string`               | `undefined` |
+| Property       | Attribute        | Description | Type                   | Default                  |
+| -------------- | ---------------- | ----------- | ---------------------- | ------------------------ |
+| `dataMainMenu` | `data-main-menu` |             | `MainMenu[] \| string` | `undefined`              |
+| `donate`       | --               |             | `DonateLink[]`         | `undefined`              |
+| `isMobile`     | `is-mobile`      |             | `boolean`              | `false`                  |
+| `logoLabel`    | `logo-label`     |             | `string`               | `undefined`              |
+| `logoUrl`      | `logo-url`       |             | `string`               | `undefined`              |
+| `menuLabel`    | `menu-label`     |             | `string`               | `'University main menu'` |
+| `siteLabel`    | `site-label`     |             | `string`               | `undefined`              |
+| `siteUrl`      | `site-url`       |             | `string`               | `undefined`              |
 
 ## Events
 

src/components/site-header/site-header.tsx

@@ -59,6 +59,7 @@ export class SiteHeader {
   private donateLink: DonateLink[];
   private menuLabels: ComponentLabels[];
   private searchLabels: ComponentLabels[];
+  private groupPages: ComponentLabels[];
   private languageLabels: ComponentLabels[];
 
   @State() lastScrollTop = 0;
@@ -109,6 +110,7 @@ export class SiteHeader {
       this.menuLabels = labels.menu_labels;
       this.languageLabels = labels.language_labels;
       this.searchLabels = labels.search_labels;
+      this.groupPages = labels.group_pages;
 
       this.el.children[0].setAttribute('menu-button-breadcrumb-home', this.menuLabels['home']);
       this.el.children[0].setAttribute('menu-button-breadcrumb-main', this.menuLabels['main']);
@@ -246,7 +248,12 @@ export class SiteHeader {
                     url={this.siteUrl}
                     label={this.siteLabel}
                   />
-                  <hy-menu-main-group tabindex="0" is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
+                  <hy-menu-main-group
+                    tabindex="0"
+                    is-mobile={false}
+                    menu-label={this.groupPages['university_main_menu'] ?? null}
+                    data-main-menu={this.dataMainMenuLinks}
+                  />
                 </div>
 
                 <div class={'menu--secondary menu--secondary--group'}>
@@ -336,7 +343,11 @@ export class SiteHeader {
                     url={this.siteUrl}
                     label={this.siteLabel}
                   />
-                  <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
+                  <hy-menu-main-group
+                    is-mobile={false}
+                    menu-label={this.groupPages['university_main_menu'] ?? ''}
+                    data-main-menu={this.dataMainMenuLinks}
+                  />
                 </div>
 
                 <div class={'menu--secondary menu--secondary--group'}>

src/components/site-header/site-logo/site-logo.scss

@@ -143,16 +143,17 @@
 .hy-site-header__logo-container {
   a.group {
     @include font-size(14px, 16px);
-    @include font-weight($semibold);
+    @include font-weight($bold);
 
     color: var(--grayscale-black);
     font-family: var(--main-font-family);
-    letter-spacing: -0.8px;
+    letter-spacing: -0.5px;
     text-decoration: none;
     text-transform: uppercase;
 
     @include breakpoint($narrow) {
       @include font-size(24px, 28px);
+      letter-spacing: -0.8px;
     }
 
     @include breakpoint($xlarge) {