From c113cccc6d5d7c79fd5ce5479195cd4b2e36e851 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 30 Jan 2025 13:09:32 +0100 Subject: [PATCH 1/4] ADS packages update & Header menu change --- .prettierrc | 3 +- package-lock.json | 43 ++++++++--------- package.json | 6 ++- .../DefaultLayout/DefaultLayout.tsx | 46 ++++++++++++++----- .../DefaultLayout/styles.module.css | 19 ++++++++ src/app/components/User/User.tsx | 31 +++++-------- 6 files changed, 95 insertions(+), 53 deletions(-) create mode 100644 src/app/components/DefaultLayout/styles.module.css diff --git a/.prettierrc b/.prettierrc index 6081029..4e64c38 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { "semi": false, - "trailingComma" : "none" + "trailingComma": "none", + "bracketSpacing": true } diff --git a/package-lock.json b/package-lock.json index f82361b..6a153cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,11 @@ "name": "zwd-frontend", "version": "0.0.1", "dependencies": { - "@amsterdam/design-system-react": "^0.13.1", + "@amsterdam/design-system-assets": "^0.3.0", + "@amsterdam/design-system-css": "^0.14.0", + "@amsterdam/design-system-react": "^0.14.0", + "@amsterdam/design-system-react-icons": "^0.1.13", + "@amsterdam/design-system-tokens": "^0.14.0", "@types/lodash.debounce": "^4.0.9", "@types/lodash.get": "^4.4.9", "@types/qs": "^6.9.18", @@ -53,27 +57,25 @@ } }, "node_modules/@amsterdam/design-system-assets": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/@amsterdam/design-system-assets/-/design-system-assets-0.2.2.tgz", - "integrity": "sha512-z/TjM5TKqvMkKOfYYbNbaTccskuPqHoCcSdaLQiAodEEjmnERSt1ZKB99cFfLM0/87UFNt7WcgiPyoM5g1KnJQ==", - "license": "SEE LICENSE IN LICENSE.md", - "peer": true + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@amsterdam/design-system-assets/-/design-system-assets-0.3.0.tgz", + "integrity": "sha512-1r7vsZ7ZjeTLIDZtxLZA97Y5EXkiRyIewWvdocGHU/qNXSKvhUqa4Q0zTMwbbojrQ/rP8Qdi08EyVT5If3X/WA==", + "license": "SEE LICENSE IN LICENSE.md" }, "node_modules/@amsterdam/design-system-css": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/@amsterdam/design-system-css/-/design-system-css-0.13.1.tgz", - "integrity": "sha512-B66nHVesBkN6m4BP4E2weA/Nl1cPgg6GgLcAUSs7eK3GBpmzu/8dvpNor3JPZuunrKDiS+fAzrt7Fp0PE7I7Wg==", + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@amsterdam/design-system-css/-/design-system-css-0.14.0.tgz", + "integrity": "sha512-45TbbVtUgOPx5vojcpIhTjn+ZyHVuVTEvzmkaYG1pplMurMU51FKLFFTqawf9Y177cE12+xYbNAP59WyA5HA5w==", "license": "EUPL-1.2", - "peer": true, "peerDependencies": { - "@amsterdam/design-system-assets": "0.2.2", - "@amsterdam/design-system-tokens": "0.13.0" + "@amsterdam/design-system-assets": "0.3.0", + "@amsterdam/design-system-tokens": "0.14.0" } }, "node_modules/@amsterdam/design-system-react": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/@amsterdam/design-system-react/-/design-system-react-0.13.1.tgz", - "integrity": "sha512-3wMC9uRP86byfJzeVUvPSS1gwgmxa+QzVcxcd3ZyJashrt66XiA4R7qV3s+MqmIBG8wHxQwjdRTVbZmUXznHZA==", + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@amsterdam/design-system-react/-/design-system-react-0.14.0.tgz", + "integrity": "sha512-53VMGcQd8cBZg3wpLP0t7xrVZUlMlXvBh41s4PNjCtYEvbdlEkK9SvWGeWPZaG2Fd0nuhcAKK2nSBFBAuxWjwg==", "license": "EUPL-1.2", "dependencies": { "@amsterdam/design-system-react-icons": "0.1.13", @@ -81,7 +83,7 @@ "clsx": "2.1.1" }, "peerDependencies": { - "@amsterdam/design-system-css": "0.13.1", + "@amsterdam/design-system-css": "0.14.0", "react": "16 - 18", "react-dom": "16 - 18" } @@ -97,11 +99,10 @@ } }, "node_modules/@amsterdam/design-system-tokens": { - "version": "0.13.0", - "resolved": "https://registry.npmjs.org/@amsterdam/design-system-tokens/-/design-system-tokens-0.13.0.tgz", - "integrity": "sha512-Wug3f8hwyzZ9SVhknwndrh2g4uzXT6e7jLseq6v71bkGIiTIRjN+oc9lhMlAc8xZOd6OLqwBSIAVlVwy/xSzGA==", - "license": "SEE LICENSE IN LICENSE.md", - "peer": true + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@amsterdam/design-system-tokens/-/design-system-tokens-0.14.0.tgz", + "integrity": "sha512-SACpCctLNNiYPaXTRzijdr4fF84ytc4pqvqtktapOFdMRgvfQTWcCW+K1T+KG9JfRzoEd2O2LMwQ1BwTsJ+ZYg==", + "license": "SEE LICENSE IN LICENSE.md" }, "node_modules/@babel/runtime": { "version": "7.26.0", diff --git a/package.json b/package.json index 4dc61de..d11ba5c 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,11 @@ "preview": "vite preview" }, "dependencies": { - "@amsterdam/design-system-react": "^0.13.1", + "@amsterdam/design-system-assets": "^0.3.0", + "@amsterdam/design-system-css": "^0.14.0", + "@amsterdam/design-system-react": "^0.14.0", + "@amsterdam/design-system-react-icons": "^0.1.13", + "@amsterdam/design-system-tokens": "^0.14.0", "@types/lodash.debounce": "^4.0.9", "@types/lodash.get": "^4.4.9", "@types/qs": "^6.9.18", diff --git a/src/app/components/DefaultLayout/DefaultLayout.tsx b/src/app/components/DefaultLayout/DefaultLayout.tsx index d5f343c..28a2cce 100644 --- a/src/app/components/DefaultLayout/DefaultLayout.tsx +++ b/src/app/components/DefaultLayout/DefaultLayout.tsx @@ -1,9 +1,15 @@ import { Outlet } from "react-router-dom" -import { Header, SkipLink, PageMenu, Screen } from "@amsterdam/design-system-react" -import { User, NavMenu } from "app/components" +import { + Header, + SkipLink, + Screen, + LinkList +} from "@amsterdam/design-system-react" +import { User } from "app/components" import { env } from "app/config/env" import { useRedirectFromState } from "app/hooks" +import styles from "./styles.module.css" export const DefaultLayout: React.FC = () => { useRedirectFromState() @@ -13,15 +19,33 @@ export const DefaultLayout: React.FC = () => { Direct naar inhoud
-
    • - - )} - /> - -
    + // eslint-disable-next-line template-curly-spacing + brandName={`${env.VITE_APP_TITLE} ${env.VITE_ENV}`} + className={styles.header} + menuItems={[ + + BPMN + , + + Takenoverzicht + , + + Zakenoverzicht + , + + Zoeken + , + + ]} + noMenuButtonOnWideWindow + > + + BPMN + Takenoverzicht + Zakenoverzicht + Zoeken + +
    diff --git a/src/app/components/DefaultLayout/styles.module.css b/src/app/components/DefaultLayout/styles.module.css new file mode 100644 index 0000000..c4eb4af --- /dev/null +++ b/src/app/components/DefaultLayout/styles.module.css @@ -0,0 +1,19 @@ +.header { + h1 { + font-size: var(--ams-text-level-4-font-size); + } + + div:first-child { + container-type: inline-size; + container-name: branding; + } + + @container (max-width: 36rem) { + div:first-child > a { + max-inline-size: 12px; + } + div:first-child > a svg path:nth-child(1) { + opacity: 0; + } + } +} diff --git a/src/app/components/User/User.tsx b/src/app/components/User/User.tsx index 63ef58c..b99c281 100644 --- a/src/app/components/User/User.tsx +++ b/src/app/components/User/User.tsx @@ -1,18 +1,8 @@ -import styled from "styled-components" -import { Icon } from "@amsterdam/design-system-react" +import { Header, Icon } from "@amsterdam/design-system-react" import { PersonalLoginIcon } from "@amsterdam/design-system-react-icons" import { useAuth } from "react-oidc-context" -import { useNavigate } from "react-router-dom" -import { useDecodedToken } from "app/hooks" - -const Wrapper = styled.div` - display: flex; - align-items: center; -` - -const StyledIcon = styled(Icon)` - margin-right: 0.5rem; -` +import { useNavigate } from "react-router-dom" +import { useDecodedToken } from "app/hooks" export const User: React.FC = () => { const auth = useAuth() @@ -20,14 +10,17 @@ export const User: React.FC = () => { const navigate = useNavigate() return auth.isAuthenticated ? ( - navigate("/auth")} > - navigate("/auth")} fixed> + {decodedToken?.given_name} + - { decodedToken?.given_name } - - ) : <> + + ) : ( + <> + ) } export default User From 9677c948b436d714f8beb9254fc7ca1d3d4dba69 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 30 Jan 2025 13:18:19 +0100 Subject: [PATCH 2/4] Aligned user icon --- src/app/components/User/User.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/User/User.tsx b/src/app/components/User/User.tsx index b99c281..b8849c1 100644 --- a/src/app/components/User/User.tsx +++ b/src/app/components/User/User.tsx @@ -13,7 +13,7 @@ export const User: React.FC = () => { navigate("/auth")} fixed> {decodedToken?.given_name} From 04979ee9e92c8388a622f0eb1d4d5bef7a7d1a0b Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 30 Jan 2025 13:40:33 +0100 Subject: [PATCH 3/4] Number of page layout adjustments --- package-lock.json | 11 +++--- package.json | 4 --- .../components/PageHeading/PageHeading.tsx | 34 ++++++++++++------- src/app/components/Table/Table.tsx | 2 ++ .../DocumentsTable/DocumentsTable.tsx | 4 +-- src/app/pages/SearchPage/SearchPage.tsx | 11 ++++-- src/app/pages/TasksPage/TaskPage.tsx | 18 ++++++---- src/app/styles/design-system-overrides.css | 4 +++ src/index.css | 2 +- vite.config.mts | 7 ++-- 10 files changed, 60 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6a153cd..926be0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,7 @@ "name": "zwd-frontend", "version": "0.0.1", "dependencies": { - "@amsterdam/design-system-assets": "^0.3.0", - "@amsterdam/design-system-css": "^0.14.0", "@amsterdam/design-system-react": "^0.14.0", - "@amsterdam/design-system-react-icons": "^0.1.13", - "@amsterdam/design-system-tokens": "^0.14.0", "@types/lodash.debounce": "^4.0.9", "@types/lodash.get": "^4.4.9", "@types/qs": "^6.9.18", @@ -60,13 +56,15 @@ "version": "0.3.0", "resolved": "https://registry.npmjs.org/@amsterdam/design-system-assets/-/design-system-assets-0.3.0.tgz", "integrity": "sha512-1r7vsZ7ZjeTLIDZtxLZA97Y5EXkiRyIewWvdocGHU/qNXSKvhUqa4Q0zTMwbbojrQ/rP8Qdi08EyVT5If3X/WA==", - "license": "SEE LICENSE IN LICENSE.md" + "license": "SEE LICENSE IN LICENSE.md", + "peer": true }, "node_modules/@amsterdam/design-system-css": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/@amsterdam/design-system-css/-/design-system-css-0.14.0.tgz", "integrity": "sha512-45TbbVtUgOPx5vojcpIhTjn+ZyHVuVTEvzmkaYG1pplMurMU51FKLFFTqawf9Y177cE12+xYbNAP59WyA5HA5w==", "license": "EUPL-1.2", + "peer": true, "peerDependencies": { "@amsterdam/design-system-assets": "0.3.0", "@amsterdam/design-system-tokens": "0.14.0" @@ -102,7 +100,8 @@ "version": "0.14.0", "resolved": "https://registry.npmjs.org/@amsterdam/design-system-tokens/-/design-system-tokens-0.14.0.tgz", "integrity": "sha512-SACpCctLNNiYPaXTRzijdr4fF84ytc4pqvqtktapOFdMRgvfQTWcCW+K1T+KG9JfRzoEd2O2LMwQ1BwTsJ+ZYg==", - "license": "SEE LICENSE IN LICENSE.md" + "license": "SEE LICENSE IN LICENSE.md", + "peer": true }, "node_modules/@babel/runtime": { "version": "7.26.0", diff --git a/package.json b/package.json index d11ba5c..50fcbb2 100644 --- a/package.json +++ b/package.json @@ -18,11 +18,7 @@ "preview": "vite preview" }, "dependencies": { - "@amsterdam/design-system-assets": "^0.3.0", - "@amsterdam/design-system-css": "^0.14.0", "@amsterdam/design-system-react": "^0.14.0", - "@amsterdam/design-system-react-icons": "^0.1.13", - "@amsterdam/design-system-tokens": "^0.14.0", "@types/lodash.debounce": "^4.0.9", "@types/lodash.get": "^4.4.9", "@types/qs": "^6.9.18", diff --git a/src/app/components/PageHeading/PageHeading.tsx b/src/app/components/PageHeading/PageHeading.tsx index aab4431..5b403e6 100644 --- a/src/app/components/PageHeading/PageHeading.tsx +++ b/src/app/components/PageHeading/PageHeading.tsx @@ -8,31 +8,41 @@ type Props = { border?: boolean } -type Size = "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6" +type Size = + | "level-1" + | "level-2" + | "level-3" + | "level-4" + | "level-5" + | "level-6" const Wrapper = styled.div<{ $isBorder: boolean }>` - display: flex; + display: flex; padding-bottom: 8px; margin: 24px 0px; - border-bottom: ${ ({ $isBorder }) => $isBorder ? "1px solid #b4b4b4" : "none" }; + border-bottom: ${({ $isBorder }) => + $isBorder ? "1px solid #b4b4b4" : "none"}; ` const StyledIcon = styled(Icon)<{ level: number }>` margin-right: 8px; svg { - height: ${ ({ level }) => `${ 40 - (level * 4) }px` }; - width: ${ ({ level }) => `${ 40 - (level * 4) }px` }; + height: ${({ level }) => `${40 - level * 4}px`}; + width: ${({ level }) => `${40 - level * 4}px`}; } ` -export const PageHeading: React.FC = ({ label, level = 2, icon, border = false }) => { - const size: Size = `level-${ level }` +export const PageHeading: React.FC = ({ + label, + level = 2, + icon, + border = false +}) => { + const size: Size = `level-${level}` return ( - - { icon && } - - { label } - + + {icon && } + {label} ) } diff --git a/src/app/components/Table/Table.tsx b/src/app/components/Table/Table.tsx index fef67a6..b932cb0 100644 --- a/src/app/components/Table/Table.tsx +++ b/src/app/components/Table/Table.tsx @@ -12,6 +12,8 @@ import { TableType, SortingType, DESCEND } from "./types" const Wrap = styled.div` position: relative; + width: 100%; + overflow-x: auto; ` const StyledTable = styled.table` diff --git a/src/app/pages/CaseDetailsPage/Documents/DocumentsTable/DocumentsTable.tsx b/src/app/pages/CaseDetailsPage/Documents/DocumentsTable/DocumentsTable.tsx index c8e51f1..109d675 100644 --- a/src/app/pages/CaseDetailsPage/Documents/DocumentsTable/DocumentsTable.tsx +++ b/src/app/pages/CaseDetailsPage/Documents/DocumentsTable/DocumentsTable.tsx @@ -40,11 +40,11 @@ const DocumentsTable: React.FC = () => { return ( + /> ) } diff --git a/src/app/pages/SearchPage/SearchPage.tsx b/src/app/pages/SearchPage/SearchPage.tsx index 3ce74cc..df8ec16 100644 --- a/src/app/pages/SearchPage/SearchPage.tsx +++ b/src/app/pages/SearchPage/SearchPage.tsx @@ -4,6 +4,7 @@ import { SearchField } from "@amsterdam/design-system-react" import SearchResults from "./SearchResults/SearchResults" import { PageHeading } from "app/components" import { useURLState } from "app/hooks" +import { Grid } from "@amsterdam/design-system-react" const DELAY = 750 @@ -25,8 +26,11 @@ export const SearchPage: React.FC = () => { } return ( - <> - + + + + + e.preventDefault() } style={{ width: 600, marginBottom: "2rem" }}> { - + + ) } diff --git a/src/app/pages/TasksPage/TaskPage.tsx b/src/app/pages/TasksPage/TaskPage.tsx index c91fc8b..3e46bcf 100644 --- a/src/app/pages/TasksPage/TaskPage.tsx +++ b/src/app/pages/TasksPage/TaskPage.tsx @@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom" import { ColumnType, LinkButton, PageHeading, Table } from "app/components" import { useTasks } from "app/state/rest" import { formatDate } from "app/utils/dates" - +import { Grid } from "@amsterdam/design-system-react" const columns: ColumnType[] = [ { @@ -42,17 +42,21 @@ const columns: ColumnType[] = [ export const TasksPage: React.FC = () => { const [data, { isBusy }] = useTasks() const navigate = useNavigate() - + return ( - <> - -
    + + + + +
    navigate(`/zaken/${ obj.case }`)} /> - + + ) } diff --git a/src/app/styles/design-system-overrides.css b/src/app/styles/design-system-overrides.css index 3726019..77875d5 100644 --- a/src/app/styles/design-system-overrides.css +++ b/src/app/styles/design-system-overrides.css @@ -1,5 +1,9 @@ /* This file is used to override the default design system styles */ +body, html { + padding: 0; +} + .ams-dialog { --ams-label-font-weight: normal; } diff --git a/src/index.css b/src/index.css index 800048e..073eea2 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,4 @@ :root { font-family: "Amsterdam Sans", Arial, sans-serif; - padding: 0px 16px; + /* padding: 0px 16px; */ } \ No newline at end of file diff --git a/vite.config.mts b/vite.config.mts index d13e884..4789fb3 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -4,12 +4,15 @@ import react from "@vitejs/plugin-react-swc" // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + css: { + devSourcemap: true + }, server: { open: true // Opens browser when running npm start - }, + }, resolve: { alias: { - "app": "/src/app" + app: "/src/app" } } }) From cdb38468f37622854f3ac72cc5f00b87010c0142 Mon Sep 17 00:00:00 2001 From: Remy van der Wereld Date: Fri, 31 Jan 2025 11:17:34 +0100 Subject: [PATCH 4/4] Add PageGrid component and refactor pages to use it for layout consistency --- .../DefaultLayout/DefaultLayout.tsx | 34 ++------- src/app/components/NavMenu/NavMenu.tsx | 45 +++++++----- src/app/components/PageGrid/PageGrid.tsx | 17 +++++ .../components/PageHeading/PageHeading.tsx | 12 ++-- src/app/components/forms/Form/Form.tsx | 2 +- src/app/components/index.ts | 1 + src/app/pages/AddressPage/AddressPage.tsx | 58 ++++++++++------ src/app/pages/AuthPage/AuthPage.tsx | 10 +-- src/app/pages/BpmnPage/BpmnPage.tsx | 7 +- .../pages/CaseCreatePage/CaseCreatePage.tsx | 69 ++++++++++--------- .../pages/CaseDetailsPage/CaseDetailsPage.tsx | 6 +- src/app/pages/CasesPage/CasesPage.tsx | 8 +-- src/app/pages/SearchPage/SearchPage.tsx | 14 ++-- src/app/pages/TasksPage/TaskPage.tsx | 13 ++-- 14 files changed, 155 insertions(+), 141 deletions(-) create mode 100644 src/app/components/PageGrid/PageGrid.tsx diff --git a/src/app/components/DefaultLayout/DefaultLayout.tsx b/src/app/components/DefaultLayout/DefaultLayout.tsx index 28a2cce..8c44db2 100644 --- a/src/app/components/DefaultLayout/DefaultLayout.tsx +++ b/src/app/components/DefaultLayout/DefaultLayout.tsx @@ -1,13 +1,9 @@ import { Outlet } from "react-router-dom" -import { - Header, - SkipLink, - Screen, - LinkList -} from "@amsterdam/design-system-react" +import { Header, SkipLink, Screen } from "@amsterdam/design-system-react" import { User } from "app/components" import { env } from "app/config/env" import { useRedirectFromState } from "app/hooks" +import { NavMenuItems, LinklistMenu } from "app/components" import styles from "./styles.module.css" @@ -19,32 +15,12 @@ export const DefaultLayout: React.FC = () => { Direct naar inhoud
    - BPMN - , - - Takenoverzicht - , - - Zakenoverzicht - , - - Zoeken - , - - ]} + menuItems={[...NavMenuItems, ]} noMenuButtonOnWideWindow > - - BPMN - Takenoverzicht - Zakenoverzicht - Zoeken - +
    diff --git a/src/app/components/NavMenu/NavMenu.tsx b/src/app/components/NavMenu/NavMenu.tsx index a430523..bf71318 100644 --- a/src/app/components/NavMenu/NavMenu.tsx +++ b/src/app/components/NavMenu/NavMenu.tsx @@ -1,6 +1,6 @@ -import { PageMenu } from "@amsterdam/design-system-react" +import { Header, Icon, LinkList } from "@amsterdam/design-system-react" import { SearchIcon } from "@amsterdam/design-system-react-icons" -import { useLinkClickHandler, useHref } from "react-router-dom" +import { useLinkClickHandler, useHref } from "react-router-dom" import { styled } from "styled-components" type MenuItem = { @@ -9,10 +9,6 @@ type MenuItem = { 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" }, @@ -20,22 +16,39 @@ const menuItems: MenuItem[] = [ { label: "BPMN", path: "/bpmn" } ] +const StyledIcon = styled(Icon)` + padding-inline-start: .5rem; +` + const NavMenuItem: React.FC = ({ label, path, icon }) => { const handleClick = useLinkClickHandler(path) const href = useHref(path) return ( - - { label } - + + {label} + {icon && } + + ) +} + +export const NavMenuItems = menuItems.map((props) => ( + +)) + +const LinklistMenuItem: React.FC = ({ label, path, icon }) => { + const handleClick = useLinkClickHandler(path) + const href = useHref(path) + return ( + + {label} + ) } -export const NavMenu = () => ( - - { menuItems.map((props) => ( - +export const LinklistMenu = () => ( + + {menuItems.map((props) => ( + ))} - + ) - -export default NavMenu diff --git a/src/app/components/PageGrid/PageGrid.tsx b/src/app/components/PageGrid/PageGrid.tsx new file mode 100644 index 0000000..c365899 --- /dev/null +++ b/src/app/components/PageGrid/PageGrid.tsx @@ -0,0 +1,17 @@ +import { Grid } from "@amsterdam/design-system-react" + +type Props = { + children: React.ReactNode[] +} + +export const PageGrid: React.FC = ({ children }) => ( + + { children.map((child, index) => ( + + { child } + + )) } + +) + +export default PageGrid diff --git a/src/app/components/PageHeading/PageHeading.tsx b/src/app/components/PageHeading/PageHeading.tsx index 5b403e6..ddd95fb 100644 --- a/src/app/components/PageHeading/PageHeading.tsx +++ b/src/app/components/PageHeading/PageHeading.tsx @@ -19,16 +19,16 @@ type Size = const Wrapper = styled.div<{ $isBorder: boolean }>` display: flex; padding-bottom: 8px; - margin: 24px 0px; - border-bottom: ${({ $isBorder }) => - $isBorder ? "1px solid #b4b4b4" : "none"}; + margin-top: 2rem; + border-bottom: ${ ({ $isBorder }) => + $isBorder ? "1px solid #b4b4b4" : "none" }; ` const StyledIcon = styled(Icon)<{ level: number }>` margin-right: 8px; svg { - height: ${({ level }) => `${40 - level * 4}px`}; - width: ${({ level }) => `${40 - level * 4}px`}; + height: ${ ({ level }) => `${ 40 - level * 4 }px` }; + width: ${ ({ level }) => `${ 40 - level * 4 }px` }; } ` @@ -38,7 +38,7 @@ export const PageHeading: React.FC = ({ icon, border = false }) => { - const size: Size = `level-${level}` + const size: Size = `level-${ level }` return ( {icon && } diff --git a/src/app/components/forms/Form/Form.tsx b/src/app/components/forms/Form/Form.tsx index 32a1b5a..c88e518 100644 --- a/src/app/components/forms/Form/Form.tsx +++ b/src/app/components/forms/Form/Form.tsx @@ -39,7 +39,7 @@ export const Form = ({ return ( <> diff --git a/src/app/components/index.ts b/src/app/components/index.ts index cd4c957..ee5c2a1 100644 --- a/src/app/components/index.ts +++ b/src/app/components/index.ts @@ -7,6 +7,7 @@ export * from "./HoaName/HoaName" export * from "./icons/icons" export * from "./LinkButton/LinkButton" export * from "./NavMenu/NavMenu" +export * from "./PageGrid/PageGrid" export * from "./PageHeading/PageHeading" export * from "./Panorama/PanoramaPreview" export * from "./SectionDivider/SectionDivider" diff --git a/src/app/pages/AddressPage/AddressPage.tsx b/src/app/pages/AddressPage/AddressPage.tsx index d515240..772c926 100644 --- a/src/app/pages/AddressPage/AddressPage.tsx +++ b/src/app/pages/AddressPage/AddressPage.tsx @@ -1,9 +1,17 @@ import { HousingIcon } from "@amsterdam/design-system-react-icons" import { useNavigate, useParams } from "react-router-dom" -import { PanoramaPreview, PageHeading, PageSpinner } from "app/components" +import { + PanoramaPreview, + PageHeading, + PageSpinner, + PageGrid +} from "app/components" import HoaDescription from "./HoaDescription" import { Button, Grid, GridColumnNumbers } from "@amsterdam/design-system-react" -import { useHomeownerAssociation, useHomeownerAssociationByBagId } from "app/state/rest" +import { + useHomeownerAssociation, + useHomeownerAssociationByBagId +} from "app/state/rest" import { styled } from "styled-components" import HoaCases from "./HoaCases" import HoaOwners from "./HoaOwners" @@ -15,9 +23,11 @@ const Wrapper = styled.div` ` export const AddressPage: React.FC = () => { - const { bagId, hoaId } = useParams<{ bagId: string, hoaId: string }>() + const { bagId, hoaId } = useParams<{ bagId: string; hoaId: string }>() const [dataByBagId, { isBusy }] = useHomeownerAssociationByBagId(bagId) - const [dataByHoaId, { isBusy: isLoading }] = useHomeownerAssociation(Number(hoaId)) + const [dataByHoaId, { isBusy: isLoading }] = useHomeownerAssociation( + Number(hoaId) + ) const navigate = useNavigate() const hasId = bagId || hoaId @@ -25,34 +35,39 @@ export const AddressPage: React.FC = () => { const hoa = bagId ? dataByBagId : dataByHoaId return ( - <> - - { loading && } - { !loading && hasId && ( + + + {loading ? ( + + ) : hasId ? ( <> - - {hoa?.id ? ( - - + + {hoa?.id ? ( + + ) : ( - +

    Er zijn geen vve-gegevens gevonden voor dit adres.

     )} - { bagId && ( - - + {bagId && ( + + )}     - { hoa?.id && ( + {hoa?.id && ( <> - + - + - +     ) : <> } diff --git a/src/app/pages/BpmnPage/BpmnPage.tsx b/src/app/pages/BpmnPage/BpmnPage.tsx index 81e4e53..b755ce8 100644 --- a/src/app/pages/BpmnPage/BpmnPage.tsx +++ b/src/app/pages/BpmnPage/BpmnPage.tsx @@ -1,7 +1,7 @@ import { useState } from "react" import styled from "styled-components" import { Row } from "@amsterdam/design-system-react" -import { PageHeading } from "app/components" +import { PageGrid, PageHeading } from "app/components" import SelectBpmnModelName from "./forms/SelectBpmnModelName" import SelectBpmnModel from "./forms/SelectBpmnModel" import BpmnDiagram from "./BpmnDiagram" @@ -15,15 +15,14 @@ export const BpmnPage: React.FC = () => { const [bpmnModel, setBpmnModel] = useState() return ( - <> + { bpmnModelName ? : <> } { bpmnModel ? : <> } - - + ) } diff --git a/src/app/pages/CaseCreatePage/CaseCreatePage.tsx b/src/app/pages/CaseCreatePage/CaseCreatePage.tsx index 7376ec1..c039682 100644 --- a/src/app/pages/CaseCreatePage/CaseCreatePage.tsx +++ b/src/app/pages/CaseCreatePage/CaseCreatePage.tsx @@ -10,7 +10,8 @@ import { FormActionButtons, HoaName, SectionDivider, - PageSpinner + PageSpinner, + PageGrid } from "app/components" import { useCases, useHomeownerAssociation } from "app/state/rest" import { ContactsFormFields } from "./ContactsFormFields" @@ -56,38 +57,40 @@ export const CaseCreatePage: React.FC = () => { const options = hoa?.is_small ? optionsForSmallHoa : optionsForBigHoa return ( - <> + - Vve - {hoaId && } - - {isBusy ? ( - - ) : ( -
    - - - - navigate(-1)} - loading={loading} - /> - - )} - + <> + Vve + {hoaId && } + + {isBusy ? ( + + ) : ( +
    + + + + navigate(-1)} + loading={loading} + /> + + )} + +     ) } diff --git a/src/app/pages/CaseDetailsPage/CaseDetailsPage.tsx b/src/app/pages/CaseDetailsPage/CaseDetailsPage.tsx index 79a838f..6d3f511 100644 --- a/src/app/pages/CaseDetailsPage/CaseDetailsPage.tsx +++ b/src/app/pages/CaseDetailsPage/CaseDetailsPage.tsx @@ -3,7 +3,7 @@ import styled from "styled-components" import { DocumentIcon } from "@amsterdam/design-system-react-icons" import { Heading, Tabs } from "@amsterdam/design-system-react" import { useCase } from "app/state/rest" -import { PageHeading, PageSpinner, DetailsList } from "app/components" +import { PageHeading, PageSpinner, DetailsList, PageGrid } from "app/components" import { useURLState } from "app/hooks" import Workflows from "./Workflows/Workflows" import CaseEvents from "./CaseEvents/CaseEvents" @@ -40,7 +40,7 @@ export const CaseDetailsPage: React.FC = () => { } return ( - <> + navigate(`/vve/${ data?.homeowner_association?.id }`)} @@ -71,7 +71,7 @@ export const CaseDetailsPage: React.FC = () => { - + ) } diff --git a/src/app/pages/CasesPage/CasesPage.tsx b/src/app/pages/CasesPage/CasesPage.tsx index a7d6450..ad38add 100644 --- a/src/app/pages/CasesPage/CasesPage.tsx +++ b/src/app/pages/CasesPage/CasesPage.tsx @@ -1,6 +1,6 @@ -import { useCases } from "app/state/rest" -import { ColumnType, Table, PageHeading, LinkButton } from "app/components" import { useNavigate } from "react-router-dom" +import { useCases } from "app/state/rest" +import { ColumnType, Table, PageHeading, LinkButton, PageGrid } from "app/components" import { formatDate } from "app/utils/dates" const columns: ColumnType[] = [ @@ -39,7 +39,7 @@ export const CasesPage: React.FC = () => { const navigate = useNavigate() return ( - <> +
    { loading={ isBusy } onClickRow={(obj) => navigate(`/zaken/${ obj.id }`)} /> - + ) } diff --git a/src/app/pages/SearchPage/SearchPage.tsx b/src/app/pages/SearchPage/SearchPage.tsx index df8ec16..828eb3d 100644 --- a/src/app/pages/SearchPage/SearchPage.tsx +++ b/src/app/pages/SearchPage/SearchPage.tsx @@ -2,9 +2,9 @@ import { useCallback, useState } from "react" import debounce from "lodash.debounce" import { SearchField } from "@amsterdam/design-system-react" import SearchResults from "./SearchResults/SearchResults" -import { PageHeading } from "app/components" +import { PageGrid, PageHeading } from "app/components" import { useURLState } from "app/hooks" -import { Grid } from "@amsterdam/design-system-react" + const DELAY = 750 @@ -26,11 +26,8 @@ export const SearchPage: React.FC = () => { } return ( - - - - - + + e.preventDefault() } style={{ width: 600, marginBottom: "2rem" }}> { - - + ) } diff --git a/src/app/pages/TasksPage/TaskPage.tsx b/src/app/pages/TasksPage/TaskPage.tsx index 3e46bcf..9c13b95 100644 --- a/src/app/pages/TasksPage/TaskPage.tsx +++ b/src/app/pages/TasksPage/TaskPage.tsx @@ -1,8 +1,7 @@ import { useNavigate } from "react-router-dom" -import { ColumnType, LinkButton, PageHeading, Table } from "app/components" +import { ColumnType, LinkButton, PageGrid, PageHeading, Table } from "app/components" import { useTasks } from "app/state/rest" import { formatDate } from "app/utils/dates" -import { Grid } from "@amsterdam/design-system-react" const columns: ColumnType[] = [ { @@ -44,19 +43,15 @@ export const TasksPage: React.FC = () => { const navigate = useNavigate() return ( - - - - - + +
    navigate(`/zaken/${ obj.case }`)} /> - - + ) }