New local list component as a wrapper for the Designsystem List (#627)

* created new local List component as a wrapper for the Designsystem List

* PR fixes

src/components/BorderedList/BorderedList.module.css

@@ -0,0 +1,16 @@
+.borderedList {
+  --borderStyle: dashed;
+  margin-bottom: 0.5rem;
+  padding-left: 0;
+  border-top-color: #bcc7cc;
+  border-top-width: 1px;
+  border-top-style: var(--borderStyle);
+}
+
+.dashed {
+  --borderStyle: dashed;
+}
+
+.solid {
+  --borderStyle: solid;
+}

src/components/BorderedList/BorderedList.tsx

@@ -0,0 +1,30 @@
+import type { ListProps } from '@digdir/design-system-react';
+import { List } from '@digdir/design-system-react';
+import cn from 'classnames';
+import * as React from 'react';
+
+import classes from './BorderedList.module.css';
+
+export type BorderedListProps = {
+  /**
+   * Style of the border separating the items
+   */
+  borderStyle?: 'solid' | 'dashed';
+} & ListProps;
+
+export const BorderedList = ({
+  borderStyle = 'dashed',
+  children,
+  className,
+  ...rest
+}: BorderedListProps) => {
+  return (
+    <List
+      className={cn(classes.borderedList, { [classes[borderStyle]]: borderStyle }, className)}
+      style={{ paddingLeft: 0 }}
+      {...rest}
+    >
+      {children}
+    </List>
+  );
+};

src/components/BorderedList/BorderedListItem/BorderedListItem.module.css

@@ -0,0 +1,15 @@
+.borderedListItem {
+  --borderStyle: dashed;
+  border-bottom-color: #bcc7cc;
+  border-bottom-width: 1px;
+  border-bottom-style: var(--borderStyle);
+  list-style: none;
+}
+
+.dashed {
+  --borderStyle: dashed;
+}
+
+.solid {
+  --borderStyle: solid;
+}

src/components/BorderedList/BorderedListItem/BorderedListItem.tsx

@@ -0,0 +1,31 @@
+import type { ListItemProps } from '@digdir/design-system-react';
+import { List } from '@digdir/design-system-react';
+import cn from 'classnames';
+import * as React from 'react';
+
+import classes from './BorderedListItem.module.css';
+
+export type BorderedListItemProps = {
+  /**
+   * Style of the border separating the items
+   */
+  borderStyle?: 'solid' | 'dashed';
+} & ListItemProps;
+
+export const BorderedListItem = ({
+  borderStyle = 'dashed',
+  children,
+  ...rest
+}: BorderedListItemProps) => {
+  return (
+    <List.Item
+      className={cn(classes.borderedListItem, { [classes[borderStyle]]: borderStyle })}
+      style={{ marginBottom: 0 }}
+      {...rest}
+    >
+      {children}
+    </List.Item>
+  );
+};
+
+BorderedListItem.displayName = 'BorderedList.Item';

src/components/BorderedList/index.ts

@@ -0,0 +1,15 @@
+import { BorderedList as BorderedListRoot } from './BorderedList';
+import { BorderedListItem } from './BorderedListItem/BorderedListItem';
+
+export type { BorderedListProps } from './BorderedList';
+export type { BorderedListItemProps } from './BorderedListItem/BorderedListItem';
+
+type BorderedListComponent = typeof BorderedListRoot & {
+  Item: typeof BorderedListItem;
+};
+
+const BorderedList = BorderedListRoot as BorderedListComponent;
+
+BorderedList.Item = BorderedListItem;
+
+export { BorderedList, BorderedListItem };

src/components/CompactDeletableListItem/CompactDeletableListItem.module.css

@@ -57,6 +57,8 @@
 
 .listItemIcon {
   margin-right: 10px;
+  display: flex;
+  justify-content: center;
 }
 
 .middleText {

src/components/CompactDeletableListItem/CompactDeletableListItem.tsx

@@ -1,11 +1,13 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
-import { Button, ListItem } from '@digdir/design-system-react';
+import { Button } from '@digdir/design-system-react';
 import { SvgIcon } from '@altinn/altinn-design-system';
 import { useTranslation } from 'react-i18next';
 import cn from 'classnames';
 import * as React from 'react';
 import { MinusCircleIcon } from '@navikt/aksel-icons';
 
+import { BorderedList } from '../BorderedList';
+
 import classes from './CompactDeletableListItem.module.css';
 
 export enum ListTextColor {
@@ -30,7 +32,7 @@ export const CompactDeletableListItem = ({
   const { t } = useTranslation('common');
 
   return (
-    <ListItem>
+    <BorderedList.Item borderStyle='dashed'>
       <div
         className={classes.compactListItem}
         data-testid='compact-list-item'
@@ -82,6 +84,6 @@ export const CompactDeletableListItem = ({
           </div>
         </div>
       </div>
-    </ListItem>
+    </BorderedList.Item>
   );
 };

src/components/DeletableListItem/DeletableListItem.test.cy.tsx

@@ -1,11 +1,10 @@
 import { Provider } from 'react-redux';
 import { mount } from 'cypress/react18';
-import { List } from '@digdir/design-system-react';
 import * as React from 'react';
 
 import type { OverviewOrg } from '@/rtk/features/apiDelegation/overviewOrg/overviewOrgSlice';
 import store from '@/rtk/app/store';
-import { DeletableListItem } from '@/components';
+import { DeletableListItem, BorderedList } from '@/components';
 
 Cypress.Commands.add('mount', (component, options = {}) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -36,14 +35,14 @@ describe('DeletableListItem', () => {
     };
 
     cy.mount(
-      <List>
+      <BorderedList>
         <DeletableListItem
           softDeleteCallback={() => null}
           softRestoreCallback={() => null}
           item={overviewOrg.apiList[0]}
           isEditable={true}
         />
-      </List>,
+      </BorderedList>,
     );
     cy.findByRole('button', { name: /delete/i }).should('exist');
   });
@@ -67,14 +66,14 @@ describe('DeletableListItem', () => {
     };
 
     cy.mount(
-      <List>
+      <BorderedList>
         <DeletableListItem
           softDeleteCallback={() => null}
           softRestoreCallback={() => null}
           item={overviewOrg.apiList[0]}
           isEditable={false}
         />
-      </List>,
+      </BorderedList>,
     );
     cy.findByRole('button', { name: /delete/i }).should('not.exist');
   });
@@ -98,14 +97,14 @@ describe('DeletableListItem', () => {
     };
 
     cy.mount(
-      <List>
+      <BorderedList>
         <DeletableListItem
           softDeleteCallback={() => null}
           softRestoreCallback={() => null}
           item={overviewOrg.apiList[0]}
           isEditable={true}
         />
-      </List>,
+      </BorderedList>,
     );
 
     cy.get('[data-testid="list-item-texts"]').should(
@@ -141,14 +140,14 @@ describe('DeletableListItem', () => {
     const softDeleteSpy = cy.spy(softDelete).as('softDeleteSpy');
 
     cy.mount(
-      <List>
+      <BorderedList>
         <DeletableListItem
           softDeleteCallback={softDeleteSpy}
           softRestoreCallback={() => null}
           item={overviewOrg.apiList[0]}
           isEditable={true}
         />
-      </List>,
+      </BorderedList>,
     );
 
     cy.findByRole('button', { name: /delete/i }).click();
@@ -180,14 +179,14 @@ describe('DeletableListItem', () => {
     const softRestoreSpy = cy.spy(softRestore).as('softRestoreSpy');
 
     cy.mount(
-      <List>
+      <BorderedList>
         <DeletableListItem
           softDeleteCallback={() => null}
           softRestoreCallback={softRestoreSpy}
           item={overviewOrg.apiList[0]}
           isEditable={true}
         />
-      </List>,
+      </BorderedList>,
     );
 
     cy.findByRole('button', { name: /undo/i }).click();

src/components/DeletableListItem/DeletableListItem.tsx

@@ -1,4 +1,4 @@
-import { Button, ListItem } from '@digdir/design-system-react';
+import { Button } from '@digdir/design-system-react';
 import cn from 'classnames';
 import { useTranslation } from 'react-i18next';
 import * as React from 'react';
@@ -7,6 +7,7 @@ import { MinusCircleIcon, ArrowUndoIcon } from '@navikt/aksel-icons';
 import type { ApiListItem } from '@/rtk/features/apiDelegation/overviewOrg/overviewOrgSlice';
 import { useMediaQuery } from '@/resources/hooks';
 
+import { BorderedList } from '../BorderedList';
 import ScopeList from '../ScopeList/ScopeList';
 
 import classes from './DeletableListItem.module.css';
@@ -58,7 +59,7 @@ export const DeletableListItem = ({
   );
 
   return (
-    <ListItem>
+    <BorderedList.Item borderStyle='solid'>
       <div className={classes.listItem}>
         <div
           data-testid='list-item-texts'
@@ -80,6 +81,6 @@ export const DeletableListItem = ({
         </div>
         {isEditable && isEditableActions}
       </div>
-    </ListItem>
+    </BorderedList.Item>
   );
 };

src/components/index.ts

@@ -13,3 +13,4 @@ export { Dialog, DialogContent, type DialogProps } from './Dialog';
 export { ProgressModal } from './ProgressModal/ProgressModal';
 export { GroupElements } from './GroupElements/GroupElements';
 export { RestartPrompter } from './RestartPrompter/RestartPrompter';
+export * from './BorderedList';

src/features/apiDelegation/components/OverviewPageContent/OrgDelegationActionBar/OrgDelegationActionBar.module.css

@@ -15,7 +15,7 @@
 }
 
 .actionBarContent {
-  padding-right: 10px;
+  padding: 10px 0 10px 10px;
 }
 
 .actionBarText__softDelete {

src/features/apiDelegation/components/OverviewPageContent/OrgDelegationActionBar/OrgDelegationActionBar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, List } from '@digdir/design-system-react';
+import { Button } from '@digdir/design-system-react';
 import cn from 'classnames';
 import { useTranslation } from 'react-i18next';
 import * as React from 'react';
@@ -8,7 +8,7 @@ import { MinusCircleIcon, ArrowUndoIcon, PlusCircleIcon } from '@navikt/aksel-ic
 import type { OverviewOrg } from '@/rtk/features/apiDelegation/overviewOrg/overviewOrgSlice';
 import { softDelete, softRestore } from '@/rtk/features/apiDelegation/overviewOrg/overviewOrgSlice';
 import { useAppDispatch } from '@/rtk/app/hooks';
-import { DeletableListItem, ActionBar } from '@/components';
+import { DeletableListItem, ActionBar, BorderedList } from '@/components';
 import { useMediaQuery } from '@/resources/hooks';
 
 import classes from './OrgDelegationActionBar.module.css';
@@ -135,7 +135,7 @@ export const OrgDelegationActionBar = ({
       }
     >
       <div className={classes.actionBarContent}>
-        <List borderStyle={'solid'}>{listItems}</List>
+        <BorderedList borderStyle={'solid'}>{listItems}</BorderedList>
       </div>
     </ActionBar>
   );

src/features/apiDelegation/offered/ChooseApiPage/ChooseApiPage.tsx

@@ -1,5 +1,5 @@
 import { SearchField } from '@altinn/altinn-design-system';
-import { Button, List, Spinner } from '@digdir/design-system-react';
+import { Button, Spinner } from '@digdir/design-system-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FilterIcon, Buldings3Icon } from '@navikt/aksel-icons';
@@ -14,6 +14,8 @@ import {
   ErrorPanel,
   GroupElements,
   RestartPrompter,
+  DelegationActionBar,
+  BorderedList,
 } from '@/components';
 import { useAppDispatch, useAppSelector } from '@/rtk/app/hooks';
 import { ApiDelegationPath } from '@/routes/paths';
@@ -32,7 +34,6 @@ import {
 } from '@/rtk/features/apiDelegation/delegableApi/delegableApiSlice';
 import type { DelegableApi } from '@/rtk/features/apiDelegation/delegableApi/delegableApiSlice';
 import { Filter, type FilterOption } from '@/components/Filter';
-import { DelegationActionBar } from '@/components/DelegationActionBar';
 
 import classes from './ChooseApiPage.module.css';
 
@@ -167,7 +168,7 @@ export const ChooseApiPage = () => {
           ) : (
             <div>
               <h3>{t('api_delegation.chosen_orgs')}:</h3>
-              <List borderStyle={'dashed'}>{chosenDelegableOrgs}</List>
+              <BorderedList borderStyle={'dashed'}>{chosenDelegableOrgs}</BorderedList>
             </div>
           )}
           <h3 className={classes.chooseApiSecondHeader}>

src/features/apiDelegation/offered/ConfirmationPage/ConfirmationPage.module.css

@@ -52,5 +52,6 @@
 }
 
 .listContainer {
-  margin-bottom: 40px;
+  margin-top: 15px;
+  margin-bottom: 30px;
 }