Merge branch 'SR_AT21_integration_test_config' of https://github.com/…

…Altinn/altinn-authentication-frontend into SR_AT21_integration_test_config

bff/src/Altinn.Authentication.UI/Altinn.Authentication.UI.Mocks/Altinn.Authentication.UI.Mocks.csproj

@@ -8,7 +8,7 @@
 
   <ItemGroup>
     <PackageReference Include="Altinn.App.Common" Version="6.0.2" />
-    <PackageReference Include="Altinn.Common.AccessTokenClient" Version="3.0.1" />
+    <PackageReference Include="Altinn.Common.AccessTokenClient" Version="3.0.2" />
     <PackageReference Include="Altinn.Common.PEP" Version="4.0.0" />
     <PackageReference Include="JWTCookieAuthentication" Version="4.0.1" />
   </ItemGroup>

bff/src/Altinn.Authentication.UI/Altinn.Authentication.UI.Tests/Altinn.Authentication.UI.Tests.csproj

@@ -11,11 +11,11 @@
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
-    <PackageReference Include="Microsoft.AspNetCore.Mvc.Testing" Version="8.0.3" />
+    <PackageReference Include="Microsoft.AspNetCore.Mvc.Testing" Version="8.0.4" />
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.9.0" />
     <PackageReference Include="Moq" Version="4.20.70" />
-    <PackageReference Include="xunit" Version="2.7.0" />
-    <PackageReference Include="xunit.runner.visualstudio" Version="2.5.7">
+    <PackageReference Include="xunit" Version="2.7.1" />
+    <PackageReference Include="xunit.runner.visualstudio" Version="2.5.8">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>

cypress/package.json

@@ -4,7 +4,7 @@
     "version": "1.0.0",
     "devDependencies": {
         "@testing-library/cypress": "^10.0.0",
-        "cypress": "13.7.2"
+        "cypress": "13.7.3"
     },
     "main": "index.js",
     "scripts": {

cypress/yarn.lock

@@ -422,10 +422,10 @@ cross-spawn@^7.0.0:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-[email protected].2:
-  version "13.7.2"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.7.2.tgz#61e841382abb20e0a9a063086ee0d850af3ef6bc"
-  integrity sha512-FF5hFI5wlRIHY8urLZjJjj/YvfCBrRpglbZCLr/cYcL9MdDe0+5usa8kTIrDHthlEc9lwihbkb5dmwqBDNS2yw==
+[email protected].3:
+  version "13.7.3"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.7.3.tgz#3e7dcd32e007676a6c8e972293c50d6ef329d991"
+  integrity sha512-uoecY6FTCAuIEqLUYkTrxamDBjMHTYak/1O7jtgwboHiTnS1NaMOoR08KcTrbRZFCBvYOiS4tEkQRmsV+xcrag==
   dependencies:
     "@cypress/request" "^3.0.0"
     "@cypress/xvfb" "^1.2.4"

frontend/package.json

@@ -34,20 +34,20 @@
     "@typescript-eslint/eslint-plugin": "latest",
     "@typescript-eslint/parser": "latest",
     "@vitejs/plugin-react": "^4.2.1",
-    "cypress": "13.7.2",
+    "cypress": "13.7.3",
     "cypress-real-events": "^1.12.0",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "latest",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-n": "^16.6.2 ",
+    "eslint-plugin-n": "^17.0.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-testing-library": "6.2.0",
+    "eslint-plugin-testing-library": "6.2.1",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "madge": "^6.1.0",

frontend/src/components/ActionBar/ActionBarContent.module.css

@@ -6,16 +6,16 @@
   border-bottom-right-radius: 6px;
   border-width: 1px;
   border-color: var(--border-color);
-  padding: 1.5rem;
+  padding: var(--fds-spacing-6);
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--fds-spacing-1);
 }
 
 .actionBarContent.light {
-  --border-color: #80B1DD;
+  --border-color: #80b1dd; /* not defined in designsystemet */
 }
 
 .actionBarContent.neutral {
   --border-color: var(--fds-semantic-border-neutral-subtle);
-}
+}

frontend/src/components/ActionBar/ActionBarHeader.module.css

@@ -7,23 +7,23 @@
   color: var(--fds-semantic-text-neutral-default);
   border-color: var(--border-color);
   background-color: var(--background-color);
-  margin-top: 0.5rem;
+  margin-top: var(--fds-spacing-2);
 }
 
 .actionBar.clickable {
   cursor: pointer;
 }
 
 .actionBar.small {
-  min-height: 30px;
+  min-height: var(--fds-sizing-8);
 }
 
 .actionBar.medium {
-  min-height: 56px;
+  min-height: var(--fds-sizing-14);
 }
 
 .actionBar.large {
-  min-height: 100px;
+  min-height: var(--fds-sizing-22);
 }
 
 .actionBar.open {
@@ -33,8 +33,8 @@
 }
 
 .actionBar.light {
-  --border-color: #80b1dd;
-  --background-color: #e6eff8;
+  --border-color: #80b1dd; /* not defined in designsystemet */
+  --background-color: var(--fds-semantic-surface-action-subtle);
 }
 .actionBar.light.clickable:hover {
   --background-color: var(--fds-semantic-surface-action-subtle-hover);
@@ -51,21 +51,20 @@
 .actionBarHeader {
   display: flex;
   align-items: center;
-  padding: 0px 4px 0px 8px;
-  flex: 1 1 auto;
+  padding: 0 var(--fds-spacing-2);
+  flex: 1;
   border-style: none;
   text-align: var(--component-actionbar_header_title-text-align);
   background-color: var(--background-color);
   font-family: inherit;
   font-size: var(--font_size-300);
   color: inherit;
-  line-height: 16px;
   word-break: break-word;
 }
 
 .actionBarHeader:focus-visible {
-  --fds-inner-focus-border-color: #1e2b3c;
-  --fds-outer-focus-border-color: #fadf4b;
+  --fds-inner-focus-border-color: var(--fds-semantic-border-focus-boxshadow);
+  --fds-outer-focus-border-color: var(--fds-semantic-border-focus-outline);
   --fds-focus-border-width: 3px;
 
   outline: var(--fds-focus-border-width) solid var(--fds-outer-focus-border-color);
@@ -82,33 +81,33 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  column-gap: 0.3rem;
+  column-gap: var(--fds-spacing-1);
   padding: 0;
   height: auto;
   cursor: pointer;
-  margin-right: 10px;
+  margin-right: var(--fds-spacing-2);
 }
 
 .actionBarSubtitle {
   font-weight: 400;
-  margin-top: 5px;
-  margin-bottom: 5px;
+  margin-top: var(--fds-spacing-1);
+  margin-bottom: var(--fds-spacing-1);
 }
 
 .actionBar.subtitle {
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding-top: var(--fds-spacing-1);
+  padding-bottom: var(--fds-spacing-1);
 }
 
 .actionBarIcon {
-  margin-right: 8px;
+  margin-right: var(--fds-spacing-2);
   display: flex;
   align-items: center;
 }
 
 .actionBarIcon.large {
-  margin-right: 16px;
-  margin-left: 8px;
+  margin-right: var(--fds-spacing-4);
+  margin-left: var(--fds-spacing-2);
 }
 
 .actionBarTexts {

frontend/src/components/ActionBar/ActionBarIcon.module.css

@@ -8,11 +8,11 @@
 }
 
 .actionBarIcon.medium {
-  height: 30px;
-  width: 30px;
+  height: var(--fds-sizing-8);
+  width: var(--fds-sizing-8);
 }
 
 .actionBarIcon.large {
-  height: 40px;
-  width: 40px;
+  height: var(--fds-sizing-10);
+  width: var(--fds-sizing-10);
 }

frontend/src/components/Page/Page.module.css

@@ -7,12 +7,12 @@
 .pageContent {
   background-color: var(--fds-semantic-background-default);
   box-sizing: inherit;
-  --component-page-content-padding: 3rem;
+  --component-page-content-padding: var(--fds-spacing-12);
   padding: var(--component-page-content-padding);
 }
 
 @media only screen and (max-width: 769px) {
   .pageContent {
-    --component-page-content-padding: 0.5rem;
+    --component-page-content-padding: var(--fds-spacing-2);
   }
 }

frontend/src/components/Page/PageHeader.module.css

@@ -1,21 +1,17 @@
 .pageHeader {
-  --page-header-height: 94px;
+  --page-header-height: var(--fds-sizing-22);
   height: var(--page-header-height);
   background-color: var(--component-page_header-background-color);
   display: flex;
-  width: 100%;
   color: var(--component-page_header-color);
-  padding-right: 2rem;
-  box-sizing: inherit;
   align-items: center;
   --page_header-title-font-size: 1rem;
   font-size: var(--page_header-title-font-size);
-  fill: var(--component-page_header-color);
-  --page-header-child-gap: 1.5rem;
-  gap: var(--page-header-child-gap);
-  --page-header-padding-left: 2rem;
-  padding-left: var(--page-header-padding-left);
-  --page-header-icon-dimension: 40px;
+  --page-header-padding: var(--fds-spacing-8);
+  padding-left: var(--page-header-padding);
+  padding-right: var(--page-header-padding);
+  gap: var(--page-header-padding);
+  --page-header-icon-dimension: var(--fds-sizing-10);
 }
 
 .pageHeader.dark {
@@ -46,14 +42,14 @@
 
 .headerText {
   font-weight: 400;
+  margin: 0;
 }
 
 @media only screen and (max-width: 769px) {
   .pageHeader {
-    --page-header-height: 56px;
-    --page-header-child-gap: 1rem;
-    --page-header-padding-left: 1.25rem;
-    --page_header-title-font-size: 0.5rem;
-    --page-header-icon-dimension: 28px;
+    --page-header-height: var(--fds-sizing-14);
+    --page-header-padding: var(--fds-spacing-5);
+    --page_header-title-font-size: 0.75rem;
+    --page-header-icon-dimension: var(--fds-sizing-7);
   }
 }

frontend/src/components/PageContainer/PageContainer.module.css

@@ -7,7 +7,7 @@
 }
 
 .closeButtonContainer {
-  margin-top: 30px;
+  margin-top: var(--fds-spacing-8);
   display: flex;
   justify-content: flex-end;
 }
@@ -16,35 +16,35 @@
   border-radius: 50%;
   background-color: var(--fds-semantic-background-default);
   border: none;
-  padding: 2px;
+  padding: var(--fds-spacing-1);
   cursor: pointer;
-  margin-bottom: 10px;
+  margin-bottom: var(--fds-spacing-2);
 }
 
 .closeButtonIcon {
-  height: 2rem;
-  width: 2rem;
+  height: var(--fds-sizing-7);
+  width: var(--fds-sizing-7);
   vertical-align: middle;
 }
 
 .closeButton:hover {
-  background-color: #d6eefd;
+  background-color: #d6eefd; /* not defined in designsystemet */
 }
 
 @media only screen and (min-width: 375px) {
   .pageMargin {
-    margin: 0 8px 8px 8px;
+    margin: var(--fds-spacing-2);
   }
 }
 
 @media only screen and (min-width: 769px) {
   .pageMargin {
-    margin: 0 16px 16px 16px;
+    margin: var(--fds-spacing-4);
   }
 }
 
 @media only screen and (min-width: 992px) {
   .pageMargin {
-    margin: 20px 40px 40px 40px;
+    margin: var(--fds-spacing-10);
   }
 }

frontend/src/components/UserInfoBar/UserInfoBar.module.css

@@ -1,28 +1,22 @@
 .userInfoBar {
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 1rem;
   display: flex;
+  justify-content: space-between;
 }
 
 .userInfoContent {
-  flex: 1;
   display: flex;
-  justify-content: flex-end;
-  margin-right: 4px;
+  align-items: center;
+  gap: var(--fds-spacing-1);
+  margin-right: var(--fds-spacing-1);
 }
 
 .userInfoText {
   font-weight: 500;
-  margin: 0;
-  margin-right: 1rem;
-  margin-left: 1rem;
+  font-size: 0.875rem;
   text-align: right;
-  word-break: break-word;
 }
 
 .companyIcon {
-  align-self: center;
-  width: 28px;
-  height: 28px;
+  width: var(--fds-sizing-7);
+  height: var(--fds-sizing-7);
 }

frontend/src/components/UserInfoBar/UserInfoBar.tsx

@@ -15,9 +15,9 @@ export const UserInfoBar = () => {
         </div>
         <div className={classes.userInfoContent}>
           <div>
-            {userInfo?.userName && <h5 className={classes.userInfoText}>{userInfo.userName}</h5>}
+            {userInfo?.userName && <div className={classes.userInfoText}>{userInfo.userName}</div>}
             {userInfo?.organizationName && (
-              <h5 className={classes.userInfoText}>for {userInfo.organizationName}</h5>
+              <div className={classes.userInfoText}>for {userInfo.organizationName}</div>
             )}
           </div>
           <Buildings3FillIcon className={classes.companyIcon} />

frontend/src/features/confirmationpage/ConfirmationPageContent.module.css

@@ -1,5 +1,5 @@
 .buttonContainer {
   display: flex;
-  margin-top: 6rem;
-  gap: 1rem;
+  margin-top: var(--fds-spacing-22);
+  gap: var(--fds-spacing-4);
 }