Refactor CSS styles for search results and resource list; update comp…

…onent imports and fix optional chaining for resource owner names.
Altinn · Jan 8, 2025 · 8ec05c5 · 8ec05c5
1 parent 7d537f7
commit 8ec05c5
Show file tree

Hide file tree

Showing 10 changed files with 95 additions and 153 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@altinn/altinn-components": "^0.10.0",
+    "@altinn/altinn-components": "^0.12.0",
     "@cypress/react18": "^2.0.0",
     "@digdir/designsystemet-css": "1.0.0-next.35",
     "@digdir/designsystemet-react": "1.0.0-next.35",
@@ -66,7 +66,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^7.0.0",
     "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint-plugin-storybook": "^0.11.2",
     "husky": "^9.0.0",
     "lint-staged": "^15.0.0",
     "madge": "^8.0.0",

diff --git a/src/features/amUI/common/Snackbar/Snackbar.tsx b/src/features/amUI/common/Snackbar/Snackbar.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Snackbar } from '@altinn/altinn-components';
-import cx from 'classnames';
+import { SnackbarItem } from '@altinn/altinn-components';
 
 import styles from './snackbar.module.css';
 import { useSnackbar } from './SnackbarProvider';
@@ -19,10 +18,8 @@ export const SnackbarContainer = (): JSX.Element | null => {
       aria-live='assertive'
     >
       {(storedMessages || []).map((item) => (
-        <Snackbar
-          className={cx(styles.snackbarItem, styles.bottomLeft, styles[item.variant])}
+        <SnackbarItem
           key={item.id}
-          id={item.id}
           as='div'
           color={item.variant}
           message={item.message}

diff --git a/src/features/amUI/userRightsPage/AccessPackageSection/ActiveDelegations.tsx b/src/features/amUI/userRightsPage/AccessPackageSection/ActiveDelegations.tsx
@@ -128,7 +128,6 @@ export const ActiveDelegations = ({ toParty }: { toParty: Party }) => {
                         setModalItem(pack);
                         modalRef.current?.showModal();
                       }}
-                      toParty={toParty}
                       onDelegate={onDelegate}
                       onRevoke={onRevoke}
                     />

diff --git a/src/features/amUI/userRightsPage/AccessPackageSection/DelegatedPackagesList.tsx b/src/features/amUI/userRightsPage/AccessPackageSection/DelegatedPackagesList.tsx
@@ -4,7 +4,6 @@ import { Button } from '@altinn/altinn-components';
 import { AccessPackageList } from '@altinn/altinn-components';
 
 import { type AccessPackage, type AccessPackageDelegation } from '@/rtk/features/accessPackageApi';
-import type { Party } from '@/rtk/features/lookupApi';
 
 import classes from './AccessPackageSection.module.css';
 

diff --git a/src/features/amUI/userRightsPage/DelegationModal/AccessPackages/PackageSearch.module.css b/src/features/amUI/userRightsPage/DelegationModal/AccessPackages/PackageSearch.module.css
@@ -11,7 +11,7 @@
 
 .searchResults {
   display: flex;
-  gap: 1rem;
+  gap: 0.5rem;
   min-height: 500px;
 }
 

diff --git a/src/features/amUI/userRightsPage/DelegationModal/SingleRights/ResourceInfo.tsx b/src/features/amUI/userRightsPage/DelegationModal/SingleRights/ResourceInfo.tsx
@@ -297,7 +297,7 @@ export const ResourceInfo = ({ resource, toParty, onDelegate }: ResourceInfoProp
               size='lg'
               type='company'
               imageUrl={resource.resourceOwnerLogoUrl}
-              name={resource.resourceOwnerName}
+              name={resource.resourceOwnerName ?? ''}
             />
             <div className={classes.resource}>
               <Heading

diff --git a/src/features/amUI/userRightsPage/DelegationModal/SingleRights/ResourceSearch.module.css b/src/features/amUI/userRightsPage/DelegationModal/SingleRights/ResourceSearch.module.css
@@ -41,6 +41,9 @@
 
 .resourceList {
   padding-top: 5px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
 }
 
 .resourceItem {

diff --git a/src/features/amUI/userRightsPage/DelegationModal/SingleRights/ResourceSearch.tsx b/src/features/amUI/userRightsPage/DelegationModal/SingleRights/ResourceSearch.tsx
@@ -3,7 +3,7 @@ import { Alert, Chip, Heading, Paragraph, Search, Spinner } from '@digdir/design
 import { Trans, useTranslation } from 'react-i18next';
 import { FilterIcon } from '@navikt/aksel-icons';
 import { useParams } from 'react-router-dom';
-import { ListItem } from '@altinn/altinn-components';
+import { ResourceListItem } from '@altinn/altinn-components';
 
 import type { ServiceResource } from '@/rtk/features/singleRights/singleRightsApi';
 import {
@@ -155,18 +155,15 @@ export const ResourceSearch = ({ onSelection, toParty }: ResourceSearchProps) =>
         key={resource.identifier ?? index}
         className={classes.resourceItem}
       >
-        <ListItem
+        <ResourceListItem
+          id={resource.identifier}
+          ownerName={resource.resourceOwnerName ?? ''}
+          resourceName={resource.title}
+          ownerLogoUrl={resource.resourceOwnerLogoUrl}
+          ownerLogoUrlAlt={resource.resourceOwnerName}
           onClick={() => onSelection(resource)}
-          linkIcon='chevron-right'
-          size='md'
-          title={resource.title}
-          description={resource.resourceOwnerName}
-          avatar={{
-            type: 'company',
-            imageUrl: resource.resourceOwnerLogoUrl,
-            name: resource.resourceOwnerName ?? '',
-          }}
         />
+
         {!!delegatedResources &&
           delegatedResources.some(
             (delegation) => delegation.resource?.identifier === resource.identifier,

diff --git a/src/features/amUI/userRightsPage/SingleRightsSection/SingleRightItem.tsx b/src/features/amUI/userRightsPage/SingleRightsSection/SingleRightItem.tsx
@@ -26,7 +26,7 @@ const SingleRightItem: FC<SingleRightItemProps> = ({ resource, toParty }) => {
       <li className={classes.singleRightItem}>
         <ResourceListItem
           resourceName={resource.title}
-          ownerName={resource.resourceOwnerName}
+          ownerName={resource.resourceOwnerName ?? ''}
           ownerLogoUrl={resource.resourceOwnerLogoUrl}
           id={resource.identifier}
           size='lg'