upgrade designsystem & fix breaking changes (#434)

Altinn · Nov 27, 2024 · 90014ff · 90014ff
1 parent 6863ff5
commit 90014ff
Show file tree

Hide file tree

Showing 17 changed files with 127 additions and 122 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,20 +1,16 @@
-<!DOCTYPE html>
-<html lang="no" style="background-color: #1EADF7;">
+<!doctype html>
+<html lang="no">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/altinn-logo.svg" 
-   />
-   <link rel="preconnect" href='https://github.com/Altinn/altinn-cdn'>
-   <link
-     rel="stylesheet"
-     href="https://altinncdn.no/fonts/inter/inter.css"
-   />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/altinn-logo.svg" />
+    <link rel="preconnect" href="https://github.com/Altinn/altinn-cdn" />
+    <link rel="stylesheet" href="https://altinncdn.no/fonts/inter/inter.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Altinn API">
-    <meta name="keywords" content="Altinn Profile API">
+    <meta name="description" content="Altinn API" />
+    <meta name="keywords" content="Altinn Profile API" />
     <title>Altinn</title>
   </head>
-  <body>
+  <body style="background-color: #1eadf7">
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>

diff --git a/frontend/package.json b/frontend/package.json
@@ -9,9 +9,9 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@digdir/designsystemet-css": "1.0.0-next.34",
-    "@digdir/designsystemet-react": "1.0.0-next.34",
-    "@digdir/designsystemet-theme": "1.0.0-next.34",
+    "@digdir/designsystemet-css": "1.0.0-next.39",
+    "@digdir/designsystemet-react": "1.0.0-next.39",
+    "@digdir/designsystemet-theme": "1.0.0-next.39",
     "@navikt/aksel-icons": "^7.0.0",
     "@reduxjs/toolkit": "^2.1.0",
     "classnames": "^2.5.1",

diff --git a/frontend/src/components/ActionBar/ActionBarHeader.tsx b/frontend/src/components/ActionBar/ActionBarHeader.tsx
@@ -33,11 +33,11 @@ export const ActionBarHeader = forwardRef<HTMLHeadingElement, ActionBarHeaderPro
       <div className={classes.titleWrapper}>
         {icon}
         <div>
-          <Paragraph size={headingSize} className={classes.title}>
+          <Paragraph data-size={headingSize} className={classes.title}>
             {title}
           </Paragraph>
           {subtitle && (
-            <Paragraph size='xs' className={classes.subtitle}>
+            <Paragraph data-size='xs' className={classes.subtitle}>
               {subtitle}
             </Paragraph>
           )}

diff --git a/frontend/src/components/PageContainer/PageContainer.tsx b/frontend/src/components/PageContainer/PageContainer.tsx
@@ -30,7 +30,7 @@ export const PageContainer = ({ backUrl, children }: PageContainerProps) => {
               title={t('common.back')}
               variant='tertiary'
               className={classes.buttonContainerButton}
-              size='sm'
+              data-size='sm'
               asChild
             >
               <RouterLink to={backUrl}>
@@ -42,7 +42,7 @@ export const PageContainer = ({ backUrl, children }: PageContainerProps) => {
             icon={true}
             title={t('common.close')}
             className={classes.buttonContainerButton}
-            size='sm'
+            data-size='sm'
             asChild
           >
             <a href={profileUrl}>

diff --git a/frontend/src/components/SystemUserActionBar/SystemUserActionBar.tsx b/frontend/src/components/SystemUserActionBar/SystemUserActionBar.tsx
@@ -36,7 +36,7 @@ export const SystemUserActionBar = ({
     >
       <div>
         <div className={classes.rightsHeader}>
-          <Heading level={3} size='2xs' spacing>
+          <Heading level={3} data-size='2xs'>
             {!systemUser?.resources.length
               ? t('authent_overviewpage.system_user_no_rights')
               : t('authent_overviewpage.system_rights_header')}

diff --git a/frontend/src/features/creationpage/CreationPageContent.tsx b/frontend/src/features/creationpage/CreationPageContent.tsx
@@ -42,12 +42,10 @@ export const CreationPageContent = () => {
   return (
     <div className={classes.creationPageContainer}>
       <div>
-        <Heading level={2} size='sm' spacing>
+        <Heading level={2} data-size='sm'>
           {t('authent_creationpage.sub_title')}
         </Heading>
-        <Paragraph size='sm' spacing>
-          {t('authent_creationpage.content_text1')}
-        </Paragraph>
+        <Paragraph data-size='sm'>{t('authent_creationpage.content_text1')}</Paragraph>
       </div>
       <div className={classes.inputContainer}>
         <Combobox
@@ -91,19 +89,19 @@ export const CreationPageContent = () => {
           })}
         </Combobox>
         {isLoadVendorError && (
-          <Alert color='danger'>{t('authent_creationpage.load_vendors_error')}</Alert>
+          <Alert data-color='danger'>{t('authent_creationpage.load_vendors_error')}</Alert>
         )}
       </div>
       <div className={classes.buttonContainer}>
         <Button
           variant='primary'
-          size='sm'
+          data-size='sm'
           onClick={handleConfirm}
           disabled={!integrationTitle.trim() || !selectedSystemType}
         >
           {t('authent_creationpage.confirm_button')}
         </Button>
-        <Button variant='tertiary' size='sm' onClick={handleCancel}>
+        <Button variant='tertiary' data-size='sm' onClick={handleCancel}>
           {t('common.cancel')}
         </Button>
       </div>

diff --git a/frontend/src/features/detailpage/DetailPage.module.css b/frontend/src/features/detailpage/DetailPage.module.css
@@ -7,8 +7,6 @@
 .buttonContainer {
   display: flex;
   align-items: flex-start;
-  margin-top: var(--ds-spacing-12);
-  margin-bottom: var(--ds-spacing-4);
   gap: var(--ds-spacing-4);
 }
 

diff --git a/frontend/src/features/detailpage/DetailPage.tsx b/frontend/src/features/detailpage/DetailPage.tsx
@@ -21,9 +21,9 @@ export const DetailPage = (): React.ReactNode => {
   return (
     <PageContainer backUrl={AuthenticationRoute.Overview}>
       <Page color='dark' icon={<ApiIcon />} title={t('authent_detailpage.edit_systemuser')}>
-        {isLoadingSystemUser && <Spinner title={t('authent_detailpage.loading_systemuser')} />}
+        {isLoadingSystemUser && <Spinner aria-label={t('authent_detailpage.loading_systemuser')} />}
         {isLoadSystemUserError && (
-          <Alert color='danger'>{t('authent_detailpage.load_systemuser_error')}</Alert>
+          <Alert data-color='danger'>{t('authent_detailpage.load_systemuser_error')}</Alert>
         )}
         {systemUser && <DetailPageContent systemUser={systemUser} />}
       </Page>

diff --git a/frontend/src/features/detailpage/DetailPageContent.tsx b/frontend/src/features/detailpage/DetailPageContent.tsx
@@ -33,48 +33,50 @@ export const DetailPageContent = ({ systemUser }: DetailPageContentProps) => {
 
   return (
     <div className={classes.detailPageContent}>
-      <Modal.Dialog ref={deleteModalRef}>
-        <Modal.Header>{t('authent_detailpage.delete_systemuser_header')}</Modal.Header>
-        <Modal.Content>
+      <Modal ref={deleteModalRef}>
+        <Modal.Block>
+          <Heading level={2}>{t('authent_detailpage.delete_systemuser_header')}</Heading>
+        </Modal.Block>
+        <Modal.Block>
           {t('authent_detailpage.delete_systemuser_body', {
             title: systemUser.integrationTitle,
           })}
-        </Modal.Content>
+        </Modal.Block>
         {isDeleteError && (
-          <Alert color='danger' role='alert'>
+          <Alert data-color='danger' role='alert'>
             {t('authent_detailpage.delete_systemuser_error')}
           </Alert>
         )}
-        <Modal.Footer>
-          <Button
-            color='danger'
-            disabled={isDeletingSystemUser}
-            onClick={() =>
-              deleteSystemUser(systemUser.id)
-                .unwrap()
-                .then(() => navigate(AuthenticationRoute.Overview))
-            }
-          >
-            {t('authent_detailpage.delete_systemuser')}
-          </Button>
-          <Button variant='tertiary' onClick={() => deleteModalRef.current?.close()}>
-            {t('common.cancel')}
-          </Button>
-        </Modal.Footer>
-      </Modal.Dialog>
+        <Modal.Block>
+          <div className={classes.buttonContainer}>
+            <Button
+              data-color='danger'
+              disabled={isDeletingSystemUser}
+              onClick={() =>
+                deleteSystemUser(systemUser.id)
+                  .unwrap()
+                  .then(() => navigate(AuthenticationRoute.Overview))
+              }
+            >
+              {t('authent_detailpage.delete_systemuser')}
+            </Button>
+            <Button variant='tertiary' onClick={() => deleteModalRef.current?.close()}>
+              {t('common.cancel')}
+            </Button>
+          </div>
+        </Modal.Block>
+      </Modal>
       <div>
-        <Heading level={2} size='md'>
+        <Heading level={2} data-size='md'>
           {systemUser.integrationTitle || t('authent_detailpage.no_name')}
         </Heading>
-        <Paragraph size='sm' spacing>
-          {systemUser.supplierName?.toUpperCase()}
-        </Paragraph>
+        <Paragraph data-size='sm'>{systemUser.supplierName?.toUpperCase()}</Paragraph>
       </div>
       {IS_EDIT_NAME_ENABLED && (
         <Textfield
           label={t('authent_detailpage.edit_systemuser_name')}
           className={classes.nameField}
-          size='sm'
+          data-size='sm'
           value={name}
           onChange={(event) => setName(event.target.value)}
           error={
@@ -83,7 +85,7 @@ export const DetailPageContent = ({ systemUser }: DetailPageContentProps) => {
         />
       )}
       {isUpdateError && (
-        <Alert color='danger' role='alert'>
+        <Alert data-color='danger' role='alert'>
           {t('authent_detailpage.update_systemuser_error')}
         </Alert>
       )}
@@ -108,7 +110,7 @@ export const DetailPageContent = ({ systemUser }: DetailPageContentProps) => {
         )}
         <Button
           variant='tertiary'
-          color='danger'
+          data-color='danger'
           onClick={() => deleteModalRef.current?.showModal()}
         >
           <TrashIcon />

diff --git a/frontend/src/features/overviewpage/OverviewPageContent.tsx b/frontend/src/features/overviewpage/OverviewPageContent.tsx
@@ -45,17 +45,17 @@ export const OverviewPageContent = () => {
     [...systemUsers].reverse().filter((systemUser) => systemUser.id !== newlyCreatedId);
 
   if (isLoadingUserInfo || isLoadingSystemUsers) {
-    return <Spinner title={t('authent_overviewpage.loading_systemusers')} />;
+    return <Spinner aria-label={t('authent_overviewpage.loading_systemusers')} />;
   }
 
   return (
     <div>
       {(!userCanCreateSystemUser || (systemUsers && systemUsers.length === 0)) && (
         <>
-          <Heading level={2} size='xs' spacing>
+          <Heading level={2} data-size='xs'>
             {t('authent_overviewpage.sub_title')}
           </Heading>
-          <Paragraph spacing>{t('authent_overviewpage.sub_title_text')}</Paragraph>
+          <Paragraph>{t('authent_overviewpage.sub_title_text')}</Paragraph>
         </>
       )}
       <div>
@@ -72,19 +72,19 @@ export const OverviewPageContent = () => {
       </div>
       {!userCanCreateSystemUser && <RightsError />}
       {isLoadSystemUsersError && (
-        <Alert color='danger'>{t('authent_overviewpage.systemusers_load_error')}</Alert>
+        <Alert data-color='danger'>{t('authent_overviewpage.systemusers_load_error')}</Alert>
       )}
       {newlyCreatedItem && (
         <div>
-          <Heading level={2} size='xs' spacing className={classes.systemUserHeader}>
+          <Heading level={2} data-size='xs' className={classes.systemUserHeader}>
             {t('authent_overviewpage.created_system_user_title')}
           </Heading>
           <SystemUserActionBar systemUser={newlyCreatedItem} defaultOpen />
         </div>
       )}
       {systemUsersWithoutCreatedItem && systemUsersWithoutCreatedItem.length > 0 && (
         <>
-          <Heading level={2} size='xs' spacing className={classes.systemUserHeader}>
+          <Heading level={2} data-size='xs' className={classes.systemUserHeader}>
             {newlyCreatedItem
               ? t('authent_overviewpage.existing_earlier_system_users_title')
               : t('authent_overviewpage.existing_system_users_title')}

diff --git a/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.module.css b/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.module.css
@@ -8,3 +8,9 @@
 .successButton {
   background-color: var(--ds-color-success-base-default);
 }
+
+.rightsIncludedWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-1);
+}
diff --git a/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.tsx b/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.tsx
@@ -64,36 +64,36 @@ export const RightsIncludedPageContent = () => {
   };
 
   if (isLoadingRights) {
-    return <Spinner title={t('authent_includedrightspage.loading_rights')} />;
+    return <Spinner aria-label={t('authent_includedrightspage.loading_rights')} />;
   }
 
   return (
-    <div>
-      <Heading level={2} size='sm' spacing>
+    <div className={classes.rightsIncludedWrapper}>
+      <Heading level={2} data-size='sm'>
         {rights?.length === 1
           ? t('authent_includedrightspage.sub_title_single')
           : t('authent_includedrightspage.sub_title')}
       </Heading>
-      <Paragraph size='sm' spacing>
+      <Paragraph data-size='sm'>
         {rights?.length === 1
           ? t('authent_includedrightspage.content_text_single')
           : t('authent_includedrightspage.content_text')}
       </Paragraph>
       <div>
         <RightsList resources={rights ?? []} />
         {isCreateSystemUserError && (
-          <Alert color='danger' role='alert'>
+          <Alert data-color='danger' role='alert'>
             {t('authent_includedrightspage.create_systemuser_error')}
           </Alert>
         )}
         {isLoadRightsError && (
-          <Alert color='danger' role='alert'>
+          <Alert data-color='danger' role='alert'>
             {t('authent_includedrightspage.load_rights_error')}
           </Alert>
         )}
         <div className={classes.buttonContainer}>
           <Button
-            size='sm'
+            data-size='sm'
             variant='primary'
             onClick={handleConfirm}
             disabled={isCreatingSystemUser || isLoadRightsError}
@@ -104,7 +104,7 @@ export const RightsIncludedPageContent = () => {
               ? t('authent_includedrightspage.creating_systemuser')
               : t('authent_includedrightspage.confirm_button')}
           </Button>
-          <Button variant='tertiary' size='sm' onClick={handleReject}>
+          <Button variant='tertiary' data-size='sm' onClick={handleReject}>
             {t('common.cancel')}
           </Button>
         </div>

diff --git a/frontend/src/features/vendorRequestPage/VendorRequestPage.tsx b/frontend/src/features/vendorRequestPage/VendorRequestPage.tsx
@@ -40,16 +40,16 @@ export const VendorRequestPage = () => {
           )}
         </div>
         {!requestId && (
-          <Alert color='danger'>{t('vendor_request.load_creation_request_no_id')}</Alert>
+          <Alert data-color='danger'>{t('vendor_request.load_creation_request_no_id')}</Alert>
         )}
         {(isLoadingCreationRequestError || (creationRequest && !creationRequest.system)) && (
-          <Alert color='danger'>{t('vendor_request.load_creation_request_error')}</Alert>
+          <Alert data-color='danger'>{t('vendor_request.load_creation_request_error')}</Alert>
         )}
         {isLoadUserInfoError && (
-          <Alert color='danger'>{t('vendor_request.load_user_info_error')}</Alert>
+          <Alert data-color='danger'>{t('vendor_request.load_user_info_error')}</Alert>
         )}
         {(isLoadingUserInfo || isLoadingCreationRequest) && (
-          <Spinner title={t('vendor_request.loading')} />
+          <Spinner aria-label={t('vendor_request.loading')} />
         )}
         {creationRequest && creationRequest.system && userInfo && (
           <VendorRequestPageContent request={creationRequest} userInfo={userInfo} />