New navigation

[bjosttveit]

Early testing

Example app: https://ttd.apps.tt02.altinn.no/ttd/navigation-test/
Latest version: 4.15.1.navigation.526e4373

Changelog

[17.01.25]
Version: 4.15.1.navigation.526e4373
Description: Add support for info groups and single page groups

[16.01.25]
Version: 4.15.1.navigation.ce3a5035
Description: Small tweaks

[09.01.25]
Version: 4.14.1.navigation.252436e9
Description: Moved language selector, improved responsiveness on mobile, better scaling with more text.

[03.01.25]
Version: 4.13.0-preview.1.navigation.c84f65b3
Description: Fixed component duplication bug, merged from main

[20.12.24]:
Version: 4.13.0-preview.1.navigation.4fcabad5
Description: Added aria-attributes

[18.12.24]:
Version: 4.13.0-preview.1.navigation.f6f45827
Description: Initial preview version

Configuration

To structure pages into groups, replace order with the new groups property in Settings.json.
Example:

// Settings.json
{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4.15.1.navigation.526e4373/schemas/json/layout/layoutSettings.schema.v1.json",
  "pages": {    
    "groups": [
      {
        "name": "group.info",
        "type": "info",
        "order": ["info1", "info2"]
      },
      {
        "name": "group.form",
        "order": [
          "firstname",
          "lastname",
          "age",
          "birthday",
          "emails",
          "cars",
          "extra"
        ]
      },
      {
        "single": true,
        "type": "info",
        "order": ["important"]
      },
      {
        "name": "group.summary",
        "order": ["feedback", "summary"]
      }
    ]
  }
}

To show process steps like confirmation, signing, and receipt. Add a taskNavigation property under uiSettings in layout-sets.json.
Example:

// layout-sets.json
{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4.15.1.navigation.526e4373/schemas/json/layout/layout-sets.schema.v1.json",
  "sets": [
    {
      "id": "form",
      "dataType": "model",
      "tasks": ["Task_1"]
    }
  ],
  "uiSettings": {
    "taskNavigation": [
      {
        "name": "tasks.form",
        "taskId": "Task_1"
      },
      {
        "taskId": "Task_Confirm"
      },
      {
        "type": "receipt"
      }
    ]
  }
}

Description

Related Issue(s)

• closes Implement new navigation component #2611
• closes App header does not not fit logo and username on mobile devices #125
• Support getting page order from navigation groups app-lib-dotnet#1005

Verification/QA

• Manual functionality testing
  • I have tested these changes manually
  • Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
  • No testing done/necessary
• Automated tests
  • Unit test(s) have been added/updated
  • Cypress E2E test(s) have been added/updated
  • No automatic tests are needed here (no functional changes/additions)
  • I want someone to help me make some tests
• UU/WCAG (follow these guidelines until we have our own)
  • I have tested with a screen reader/keyboard navigation/automated wcag validator
  • No testing done/necessary (no DOM/visual changes)
  • I want someone to help me perform accessibility testing
• User documentation @ altinn-studio-docs
  • Has been added/updated
  • No functionality has been changed/added, so no documentation is needed
  • I will do that later/have created an issue
• Support in Altinn Studio
  • Issue(s) created for support in Studio
  • This change/feature does not require any changes to Altinn Studio
• Sprint board
  • The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
  • I don't have permissions to do that, please help me out
• Labels
  • I have added a kind/* label to this PR for proper release notes grouping
  • I don't have permissions to add labels, please help me out

[bjosttveit]

/publish

[github-actions]

Published PR packages:

• <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.15.1.navigation.d40b03d0/altinn-app-frontend.css">
• <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.15.1.navigation.d40b03d0/altinn-app-frontend.js"></script>

[bjosttveit]

/publish

[github-actions]

Published PR packages:

• <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.15.1.navigation.ce3a5035/altinn-app-frontend.css">
• <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.15.1.navigation.ce3a5035/altinn-app-frontend.js"></script>

[bjosttveit]

/publish

[github-actions]

Published PR packages:

• <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.15.1.navigation.526e4373/altinn-app-frontend.css">
• <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.15.1.navigation.526e4373/altinn-app-frontend.js"></script>

[martinothamar]

/publish

[github-actions]

PR release:

• <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/v4.15.1-pr.345.navigation.526e4373/altinn-app-frontend.css">
• <script src="https://altinncdn.no/toolkits/altinn-app-frontend/v4.15.1-pr.345.navigation.526e4373/altinn-app-frontend.js"></script>

⚙️ Building...
✅ Done!

[martinothamar]

/publish

[github-actions]

PR release:

• <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.15.1-pr.346.navigation.526e4373/altinn-app-frontend.css">
• <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.15.1-pr.346.navigation.526e4373/altinn-app-frontend.js"></script>

⚙️ Building...
✅ Done!

[sonarqubecloud]

Quality Gate passed

Issues
32 New issues
0 Accepted issues

Measures
0 Security Hotspots
55.8% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud