Merge pull request #939 from navikt/listPages

List pages

apps/frontend/src/components/common/AlphabeticList.tsx

@@ -1,8 +1,5 @@
-import { FlexGrid, FlexGridItem } from 'baseui/flex-grid'
-import { LabelLarge } from 'baseui/typography'
-import { theme } from '../../util'
+import { BodyShort, Box, HGrid } from '@navikt/ds-react'
 import RouteLink from './RouteLink'
-import { margin } from './Style'
 
 type TOpt = { id: string; label: string }
 
@@ -29,35 +26,20 @@ const AlphabeticList = (props: IAlphabeticListProps) => {
         <div className="mb-12" key={letter}>
           <div className="flex items-center mb-6">
             <div className="w-8 h-8 bg-[#C1DBF2] rounded-[50%] flex items-center justify-center">
-              <LabelLarge $style={{ fontSize: '1.2em' }}>{letter}</LabelLarge>
+              <BodyShort size="large" weight="semibold">
+                {letter}
+              </BodyShort>
             </div>
-
-            <div className="mb-6 mr-2.5" />
             <div className="w-full border-b-2 border-[#CBCBCB] border-solid" />
           </div>
 
-          <FlexGrid
-            flexGridRowGap={theme.sizing.scale600}
-            flexGridColumnGap={theme.sizing.scale600}
-            flexGridColumnCount={4}
-          >
+          <HGrid gap="4" columns={4}>
             {items[letter].map((item: TOpt) => (
-              <FlexGridItem
-                key={item.id}
-                minWidth={'fit-content'}
-                overrides={{
-                  Block: {
-                    style: {
-                      ...margin('10px', '0'),
-                      maxWidth: '25%',
-                    },
-                  },
-                }}
-              >
+              <Box key={item.id}>
                 <RouteLink href={`${baseUrl}${item.id}`}>{item.label}</RouteLink>
-              </FlexGridItem>
+              </Box>
             ))}
-          </FlexGrid>
+          </HGrid>
         </div>
       ))}
     </>

apps/frontend/src/pages/ListSearchPage.tsx

@@ -1,5 +1,4 @@
-import { Spinner } from 'baseui/spinner'
-import { HeadingMedium } from 'baseui/typography'
+import { Heading, Loader } from '@navikt/ds-react'
 import { useEffect, useState } from 'react'
 import AlphabeticList from '../components/common/AlphabeticList'
 import { ampli } from '../service/Amplitude'
@@ -37,8 +36,8 @@ const CodelistPage = (props: ICodeListPageProps) => {
 
   return (
     <>
-      {title && <HeadingMedium>{title}</HeadingMedium>}
-      {isLoading && <Spinner />}
+      {title && <Heading size="large">{title}</Heading>}
+      {isLoading && <Loader size="large" />}
       {!!codes.length && (
         <AlphabeticList
           items={codes.map((code: ICode) => ({ id: code.code, label: code.shortName }))}

apps/frontend/src/pages/ProcessorListPage.tsx

@@ -1,6 +1,6 @@
 import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { HeadingMedium, LabelLarge } from 'baseui/typography'
+import { Button, Heading, Loader } from '@navikt/ds-react'
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { getAll } from '../api/GetAllApi'
@@ -11,12 +11,9 @@ import {
 } from '../api/ProcessorApi'
 import ProcessorModal from '../components/Processor/ProcessorModal'
 import AlphabeticList from '../components/common/AlphabeticList'
-import Button from '../components/common/Button/CustomButton'
-import { Spinner } from '../components/common/Spinner'
 import { IProcessor, IProcessorFormValues } from '../constants'
 import { ampli } from '../service/Amplitude'
 import { user } from '../service/User'
-import { theme } from '../util'
 
 export const ProcessorListPage = () => {
   const [processors, setProcessors] = useState<IProcessor[]>([])
@@ -58,18 +55,14 @@ export const ProcessorListPage = () => {
 
   return (
     <>
-      {isLoading && <Spinner size={theme.sizing.scale1200} />}
+      {isLoading && <Loader size="large" />}
       {!isLoading && (
         <>
-          <HeadingMedium>Databehandlere</HeadingMedium>
-          <div className="flex w-full justify-between">
-            <div>
-              <LabelLarge>Databehandlere</LabelLarge>
-            </div>
-
+          <Heading size="large">Databehandlere</Heading>
+          <div className="flex w-full justify-end">
             <div className="mt-auto">
               {hasAccess() && (
-                <Button kind="outline" onClick={() => setShowCreateProcessorModal(true)}>
+                <Button variant="secondary" onClick={() => setShowCreateProcessorModal(true)}>
                   <FontAwesomeIcon icon={faPlusCircle} />
                   &nbsp;Opprett ny databehandler
                 </Button>

apps/frontend/src/pages/PurposeListPage.tsx

@@ -1,8 +1,6 @@
-import { faFileWord } from '@fortawesome/free-solid-svg-icons'
-import { Modal } from '@navikt/ds-react'
-import { Plus } from 'baseui/icon'
-import { StyledLink } from 'baseui/link'
-import { HeadingXXLarge, LabelLarge } from 'baseui/typography'
+import { faFileWord, faPlusCircle } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { BodyShort, Button, Heading, Link, Modal } from '@navikt/ds-react'
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import {
@@ -12,7 +10,6 @@ import {
   updateDisclosure,
 } from '../api/GetAllApi'
 import ModalProcess from '../components/Process/Accordion/ModalProcess'
-import Button from '../components/common/Button/CustomButton'
 import { IProcessFormValues } from '../constants'
 import { ampli } from '../service/Amplitude'
 import { CodelistService } from '../service/Codelist'
@@ -62,38 +59,28 @@ export const PurposeListPage = () => {
   return (
     <div role="main">
       <>
-        <HeadingXXLarge>Behandlingsaktiviteter</HeadingXXLarge>
-
+        <Heading size="xlarge">Behandlingsaktiviteter</Heading>
         <div className="flex w-full justify-between">
           <div>
-            <LabelLarge>Velg overordnet behandlingsaktivitet</LabelLarge>
+            <BodyShort>Velg overordnet behandlingsaktivitet</BodyShort>
           </div>
 
           <div className="mt-auto flex items-center">
             {hasAccess() && (
               <Button
+                className="mr-4"
+                variant="secondary"
                 onClick={() => setIsExportModalOpen(true)}
-                kind="outline"
-                size="xsmall"
-                icon={faFileWord}
-                marginRight
               >
-                Eksportér alle behandlinger
+                <FontAwesomeIcon icon={faFileWord} />
+                &nbsp;Eksportér alle behandlinger
               </Button>
             )}
 
             {hasAccess() && (
-              <Button
-                size="xsmall"
-                kind={'outline'}
-                onClick={() => setShowCreateProcessModal(true)}
-                startEnhancer={
-                  <div className="flex justify-center">
-                    <Plus size={22} />
-                  </div>
-                }
-              >
-                Opprett ny behandling
+              <Button variant="secondary" onClick={() => setShowCreateProcessModal(true)}>
+                <FontAwesomeIcon icon={faPlusCircle} />
+                &nbsp;Opprett ny behandling
               </Button>
             )}
           </div>
@@ -118,22 +105,18 @@ export const PurposeListPage = () => {
           onClose={() => setIsExportModalOpen(false)}
         >
           <Modal.Body>
-            <StyledLink
-              style={{ textDecoration: 'none' }}
-              href={`${env.pollyBaseUrl}/export/process/allpurpose`}
-            >
-              <Button kind="outline" size="xsmall" icon={faFileWord} marginRight>
-                Eksport for intern bruk
+            <Link className="mr-4" href={`${env.pollyBaseUrl}/export/process/allpurpose`}>
+              <Button size="small" variant="secondary">
+                <FontAwesomeIcon icon={faFileWord} />
+                &nbsp;Eksport for intern bruk
               </Button>
-            </StyledLink>
-            <StyledLink
-              style={{ textDecoration: 'none' }}
-              href={`${env.pollyBaseUrl}/export/process/allpurpose?documentAccess=EXTERNAL`}
-            >
-              <Button kind="outline" size="xsmall" icon={faFileWord} marginRight>
-                Eksport for ekstern bruk
+            </Link>
+            <Link href={`${env.pollyBaseUrl}/export/process/allpurpose?documentAccess=EXTERNAL`}>
+              <Button size="small" variant="secondary">
+                <FontAwesomeIcon icon={faFileWord} />
+                &nbsp;Eksport for ekstern bruk
               </Button>
-            </StyledLink>
+            </Link>
           </Modal.Body>
         </Modal>
 

apps/frontend/src/util/hooks/customHooks.ts

@@ -1,5 +1,4 @@
 import { Dispatch, RefObject, SetStateAction, createRef, useEffect, useState } from 'react'
-import { useLocation } from 'react-router-dom'
 
 export function useDebouncedState<T>(
   initialValue: T,
@@ -64,7 +63,7 @@ export function useRefs<T>(ids: string[]) {
 }
 
 export function useQuery() {
-  const location = useLocation()
+  const location = window.location
   return new URLSearchParams(location.search)
 }