Merge pull request #203 from Amsterdam/fix/ads-header-update

ADS packages update & Header menu change

.prettierrc

@@ -1,4 +1,5 @@
 {
   "semi": false,
-  "trailingComma" : "none"
+  "trailingComma": "none",
+  "bracketSpacing": true
 }

package.json

@@ -18,7 +18,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@amsterdam/design-system-react": "^0.13.1",
+    "@amsterdam/design-system-react": "^0.14.0",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.get": "^4.4.9",
     "@types/qs": "^6.9.18",

src/app/components/DefaultLayout/DefaultLayout.tsx

@@ -1,9 +1,11 @@
 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 } 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"
 
 export const DefaultLayout: React.FC = () => {
   useRedirectFromState()
@@ -13,15 +15,13 @@ export const DefaultLayout: React.FC = () => {
       <SkipLink href="#main">Direct naar inhoud</SkipLink>
       <Screen maxWidth="wide">
         <Header
-          appName={`${ env.VITE_APP_TITLE } ${ env.VITE_ENV }`}
-          links={(
-            <PageMenu alignEnd>
-              <li><User /></li>
-            </PageMenu>
-          )}
-        />
-        <NavMenu />
-        <br />
+          brandName={`${ env.VITE_APP_TITLE } ${ env.VITE_ENV }`}
+          className={styles.header}
+          menuItems={[...NavMenuItems, <User key="User" />]}
+          noMenuButtonOnWideWindow
+        >
+          <LinklistMenu />
+        </Header>
         <main id="main">
           <Outlet />
         </main>

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;
+    }
+  }
+}

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,33 +9,46 @@ 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" },
   { label: "Takenoverzicht", path: "/taken" },
   { label: "BPMN", path: "/bpmn" }
 ]
 
+const StyledIcon = styled(Icon)`
+  padding-inline-start: .5rem;
+`
+
 const NavMenuItem: React.FC<MenuItem> = ({ label, path, icon }) => {
   const handleClick = useLinkClickHandler(path)
   const href = useHref(path)
   return (
-    <StyledPageMenuLink href={ href } icon={ icon } onClick={ handleClick }>
-      { label }
-    </StyledPageMenuLink>
+    <Header.MenuLink href={href} onClick={handleClick}>
+      {label}
+      {icon && <StyledIcon svg={icon} size="level-5" />}
+    </Header.MenuLink>
+  )
+}
+
+export const NavMenuItems = menuItems.map((props) => (
+  <NavMenuItem key={props.path} {...props} />
+))
+
+const LinklistMenuItem: React.FC<MenuItem> = ({ label, path, icon }) => {
+  const handleClick = useLinkClickHandler(path)
+  const href = useHref(path)
+  return (
+    <LinkList.Link href={href} icon={icon} onClick={handleClick}>
+      {label}
+    </LinkList.Link>
   )
 }
 
-export const NavMenu = () => (
-  <PageMenu>
-    { menuItems.map((props) => (
-      <NavMenuItem key={ props.path } {...props} />
+export const LinklistMenu = () => (
+  <LinkList className="ams-mb--lg">
+    {menuItems.map((props) => (
+      <LinklistMenuItem key={props.path} {...props} />
     ))}
-  </PageMenu>
+  </LinkList>
 )
-
-export default NavMenu

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<Props> = ({ children }) => (
+  <Grid>
+    { children.map((child, index) => (
+      <Grid.Cell key={ index } span="all">
+        { child }
+      </Grid.Cell>
+    )) }
+  </Grid>
+)
+
+export default PageGrid

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" };
+  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` };
   }
 `
 
-export const PageHeading: React.FC<Props> = ({ label, level = 2, icon, border = false }) =>  {
-  const size: Size = `level-${ level }` 
+export const PageHeading: React.FC<Props> = ({
+  label,
+  level = 2,
+  icon,
+  border = false
+}) => {
+  const size: Size = `level-${ level }`
   return (
-    <Wrapper $isBorder={ border }>
-      { icon && <StyledIcon svg={icon} level={ level }/> }
-      <Heading size={ size } >
-        { label }
-      </Heading>
+    <Wrapper $isBorder={border}>
+      {icon && <StyledIcon svg={icon} level={level} />}
+      <Heading size={size}>{label}</Heading>
     </Wrapper>
   )
 }

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`

src/app/components/User/User.tsx

@@ -1,33 +1,26 @@
-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()
   const decodedToken = useDecodedToken()
   const navigate = useNavigate()
 
   return auth.isAuthenticated ? (
-    <Wrapper onClick={() => navigate("/auth")} >
-      <StyledIcon
+    <Header.MenuLink onClick={() => navigate("/auth")} fixed>
+      {decodedToken?.given_name}
+      <Icon
+        style={{ paddingInlineStart: ".5rem ", blockSize: ".8em" }}
         size="level-5"
-        svg={ PersonalLoginIcon }
+        svg={PersonalLoginIcon}
       />
-      { decodedToken?.given_name }
-    </Wrapper>
-  ) : <></>
+    </Header.MenuLink>
+  ) : (
+    <></>
+  )
 }
 
 export default User

src/app/components/forms/Form/Form.tsx

@@ -39,7 +39,7 @@ export const Form = <T extends FieldValues>({
   return (
     <>
       <Grid
-        paddingTop="medium"
+        paddingTop="small"
         paddingBottom="medium"
         style={{ paddingLeft: 0 }}
       >

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"