Merge pull request #26 from Amsterdam/improvement/122938-update-css-z…

…aakdetails 122938 css case details
Amsterdam · Aug 8, 2024 · 5ab8847 · 5ab8847
2 parents 97be92a + 77ca530
commit 5ab8847
Show file tree

Hide file tree

Showing 16 changed files with 99 additions and 68 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="nl">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/amsterdam.svg" />

diff --git a/src/app/components/DetailsList/DetailsList.tsx b/src/app/components/DetailsList/DetailsList.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+import { DescriptionList } from "@amsterdam/design-system-react"
+
+type Props = {
+  data?: {
+    term: string;
+    details?: string | number | null;
+  }[]
+}
+
+export const DetailsList: React.FC<Props> = ({ data = [] }) => (
+  <DescriptionList>
+    { data.map((item) => ( 
+      <React.Fragment key={item?.term}>
+        <DescriptionList.Term key={item?.term}>{item?.term}</DescriptionList.Term>
+        <DescriptionList.Details  key={item?.details}>{item?.details}</DescriptionList.Details>
+      </React.Fragment>
+    ))}
+  </DescriptionList>
+)
+
+export default DetailsList
diff --git a/src/app/components/LinkButton/LinkButton.tsx b/src/app/components/LinkButton/LinkButton.tsx
@@ -0,0 +1,37 @@
+import { LinkList } from "@amsterdam/design-system-react"
+import { useLinkClickHandler, useHref } from "react-router-dom" 
+
+
+type Props = {
+  label: string
+  path?: string
+  onClick?: () => void
+}
+
+export const LinkButton: React.FC<Props> = ({ label, path = "", onClick }) => {
+  const onRouterClick = useLinkClickHandler(path)
+  const href = useHref(path)
+
+  const onHandleButtonClick = (event: React.MouseEvent<HTMLElement>) => {
+    event. preventDefault()
+    if (onClick) {
+      onClick()
+    }
+  }
+
+  // If onClick is passed. Link must be used as button.
+  const onClickLink = onClick ? onHandleButtonClick : onRouterClick
+
+  return (
+    <LinkList>
+      <LinkList.Link
+        href={ href } 
+        onClick={ onClickLink }
+      >
+        { label }
+      </LinkList.Link>
+    </LinkList>
+  )
+}
+
+export default LinkButton
diff --git a/src/app/components/Modal/Modal.tsx b/src/app/components/Modal/Modal.tsx
@@ -25,16 +25,16 @@ const Wrapper = styled.div`
 
 const Container = styled.div`
   background-color: white;
-  margin: 25% auto; /* 15% from the top and centered */
+  margin: 15% auto; /* 15% from the top and centered */
   border: 1px solid #888;
   width: 80%; /* Could be more or less, depending on screen size */
-  max-width: 500px;
+  max-width: 600px;
   box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
-  border-radius: 10px;
+  border-radius: 4px;
 `
 
 const Header = styled.div`
-  padding: 10px 20px;
+  padding: 30px 40px;
 `
 
 const StyledIcon = styled(Icon)`
@@ -49,7 +49,7 @@ const StyledIcon = styled(Icon)`
 
 const Content = styled.div`
   border-top: 1px solid #e0e0e0;
-  padding: 20px;
+  padding: 40px;
 `
 
 export const Modal: React.FC<Props> = ({ title, open, onCancel, children }) => open ? (
@@ -62,11 +62,11 @@ export const Modal: React.FC<Props> = ({ title, open, onCancel, children }) => o
     >
       <Header>
         <StyledIcon
-          size="level-5"
+          size="level-3"
           svg={ CloseIcon }
           onClick={ onCancel }
         />
-        <Heading size="level-5">{ title }</Heading>
+        <Heading size="level-3">{ title }</Heading>
       </Header>
       <Content>
         { children }

diff --git a/src/app/components/NavMenu/NavMenu.tsx b/src/app/components/NavMenu/NavMenu.tsx
@@ -1,13 +1,18 @@
 import { PageMenu } from "@amsterdam/design-system-react"
 import { SearchIcon } from "@amsterdam/design-system-react-icons"
 import { useLinkClickHandler, useHref } from "react-router-dom" 
+import { styled } from "styled-components"
 
 type MenuItem = {
   label: string
   path: string
   icon?: React.ComponentType
 }
 
+const StyledPageMenuLink = styled(PageMenu.Link)`
+  font-size: var(--ams-text-level-5-font-size);
+`
+
 const menuItems: MenuItem[] = [
   { label: "Zoeken", path: "/", icon: SearchIcon },
   { label: "Zakenoverzicht", path: "/zaken" },
@@ -18,9 +23,9 @@ const NavMenuItem: React.FC<MenuItem> = ({ label, path, icon }) => {
   const handleClick = useLinkClickHandler(path)
   const href = useHref(path)
   return (
-    <PageMenu.Link href={ href } icon={ icon } onClick={ handleClick }>
+    <StyledPageMenuLink href={ href } icon={ icon } onClick={ handleClick }>
       { label }
-    </PageMenu.Link>
+    </StyledPageMenuLink>
   )
 }
 

diff --git a/src/app/components/RouterLink/RouterLink.tsx b/src/app/components/RouterLink/RouterLink.tsx
diff --git a/src/app/components/User/User.tsx b/src/app/components/User/User.tsx
@@ -8,7 +8,6 @@ import { useDecodedToken } from "app/hooks"
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
-  font-size: var(--ams-page-menu-item-font-size);
 `
 
 const StyledIcon = styled(Icon)`

diff --git a/src/app/components/index.ts b/src/app/components/index.ts
@@ -1,10 +1,11 @@
 export * from "./DefaultLayout/DefaultLayout"
+export * from "./DetailsList/DetailsList"
 export * from "./icons/icons"
 export * from "./Modal/Modal"
 export * from "./Modal/hooks/useModal"
 export * from "./NavMenu/NavMenu"
 export * from "./PageHeading/PageHeading"
-export * from "./RouterLink/RouterLink"
+export * from "./LinkButton/LinkButton"
 export * from "./SmallSkeleton/SmallSkeleton"
 export * from "./Spinner/Spinner"
 export * from "./Table/Table"

diff --git a/src/app/pages/CaseDetailsPage/CaseDetailsPage.tsx b/src/app/pages/CaseDetailsPage/CaseDetailsPage.tsx
@@ -1,9 +1,9 @@
 import { useParams } from "react-router-dom"
 import { DocumentIcon } from "@amsterdam/design-system-react-icons"
 import { useCase } from "app/state/rest"
-import { PageHeading, PageSpinner } from "app/components"
+import { PageHeading, PageSpinner, DetailsList } from "app/components"
 import Workflows from "./Workflows/Workflows"
-import { Grid, Row } from "@amsterdam/design-system-react"
+
 
 export const CaseDetailsPage: React.FC = () => {
   const { caseId } = useParams()
@@ -12,19 +12,16 @@ export const CaseDetailsPage: React.FC = () => {
   if (isBusy) {
     return <PageSpinner />
   }
+
+  const dataDetailsList = [
+    { term: "Zaak ID:", details: data?.id  },
+    { term: "Beschrijving:", details: data?.description }
+  ]
+
   return (
     <>
       <PageHeading label="Zaakdetails" icon={DocumentIcon}/>
-      <Row>
-        <Grid.Cell span={4} start={1} >
-          <div>Zaak ID:</div>
-          <div>Beschrijving:</div>
-        </Grid.Cell>
-        <Grid.Cell span={4} >
-          <div>{ data?.id }</div>
-          <div>{ data?.description }</div>
-        </Grid.Cell>
-      </Row>
+      <DetailsList data={ dataDetailsList } />
       <br />
       <br />
       { data?.id && <Workflows caseId={ data?.id } /> }

diff --git a/src/app/pages/CaseDetailsPage/Workflows/Workflows.tsx b/src/app/pages/CaseDetailsPage/Workflows/Workflows.tsx
@@ -31,12 +31,11 @@ export const Workflows: React.FC<Props> = ({ caseId }) => {
               lastColumnFixed
               data={ tasks }
               pagination={ false }
+              emptyPlaceholder="Geen taken beschikbaar."
             />
           </Wrapper>
         ))
-      ) : (
-        <>Geen taken beschikbaar.</>
-      )}
+      ) : <></>}
     </>
   )
 }

diff --git a/src/app/pages/CaseDetailsPage/tasks/TaskButton/TaskButton.tsx b/src/app/pages/CaseDetailsPage/tasks/TaskButton/TaskButton.tsx
@@ -1,23 +1,19 @@
-import { Button } from "@amsterdam/design-system-react"
-import { useModal } from "app/components"
+import { useModal, LinkButton } from "app/components"
 import FormModal from "../FormModal/FormModal"
 
 type Props = {
   task: Components.Schemas.CaseUserTask
   caseId: Components.Schemas.Case["id"]
 }
 
+// const StyledButton
+
 export const TaskButton: React.FC<Props> = ({ task, caseId }) => {
   const { isModalOpen, openModal, closeModal } = useModal()
 
   return (
     <>
-      <Button
-        variant="primary"
-        onClick={ openModal }
-      >
-        Taak afronden
-      </Button>
+      <LinkButton label="Taak afronden" onClick={ openModal } />
       <FormModal 
         task={ task } 
         caseId={ caseId }

diff --git a/src/app/pages/CaseDetailsPage/tasks/forms/GenericTaskForm.tsx b/src/app/pages/CaseDetailsPage/tasks/forms/GenericTaskForm.tsx
@@ -23,6 +23,7 @@ type Props = {
   form: FormItem[]
 }
 
+
 const formatData = (form: FormItem[], data: GenericTaskFormData) => (
   form.reduce<GenericTaskFormData>((acc, item) => {
     const key = item.name
@@ -55,7 +56,7 @@ export const GenericTaskForm: React.FC<Props> = ({ closeModal, submitForm, loadi
         case "select":
           return (
             <Field key={index}>
-              <Label htmlFor={formItem.name}>{formItem.label}</Label>
+              <Label htmlFor={formItem.name} >{formItem.label}</Label>
               <Select {...register(formItem.name, { required: formItem.required })}>
                 { formItem.options?.map((option) => (
                   <Select.Option key={option.value} value={option.value}>

diff --git a/src/app/pages/CaseDetailsPage/tasks/forms/SubmitButtonRow.tsx b/src/app/pages/CaseDetailsPage/tasks/forms/SubmitButtonRow.tsx
@@ -9,7 +9,7 @@ type Props = {
 }
 
 export const SubmitButtonRow: React.FC<Props> = ({ onCancel, disabled = false, loading = false }) => (
-  <Row align="end">
+  <Row align="between" style={{ marginTop: 16 }}>
     <Button variant="secondary" onClick={ onCancel }>
       Annuleer  
     </Button>

diff --git a/src/app/pages/CasesPage/CasesPage.tsx b/src/app/pages/CasesPage/CasesPage.tsx
@@ -1,5 +1,5 @@
 import { useCases } from "app/state/rest"
-import { ColumnType, Table, PageHeading, RouterLink } from "app/components"
+import { ColumnType, Table, PageHeading, LinkButton } from "app/components"
 import { useNavigate } from "react-router-dom"
 
 const columns: ColumnType<Components.Schemas.Case>[] = [
@@ -18,7 +18,7 @@ const columns: ColumnType<Components.Schemas.Case>[] = [
     header: "",
     dataIndex: "id",
     minWidth: 170,
-    render: () => <RouterLink label="Zaakdetails" path="" />
+    render: () => <LinkButton label="Zaakdetails" path="" />
   }
 ]
 

diff --git a/src/app/pages/SearchPage/SearchResultsTable.tsx b/src/app/pages/SearchPage/SearchResultsTable.tsx
@@ -1,4 +1,4 @@
-import { ColumnType, Table, RouterLink } from "app/components"
+import { ColumnType, Table, LinkButton } from "app/components"
 import { vveList } from "app/dummy_data/vveList"
 import { useNavigate } from "react-router-dom"
 
@@ -19,7 +19,7 @@ const columns: ColumnType<Vve>[] = [
     header: "",
     dataIndex: "id",
     minWidth: 170,
-    render: () => <RouterLink label="Zaak aanmaken" path="" />
+    render: () => <LinkButton label="Zaak aanmaken" path="" /> // onClickRow is overruling the  link
   }
 ]
 

diff --git a/src/main.tsx b/src/main.tsx
@@ -8,6 +8,7 @@ import "./index.css"
 import "@amsterdam/design-system-assets/font/index.css"
 import "@amsterdam/design-system-css/dist/index.css"
 import "@amsterdam/design-system-tokens/dist/index.css"
+import "@amsterdam/design-system-tokens/dist/compact.css"
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <StrictMode>