feature/COR-1516-404-page-improvements-multiple-pages-client-side-only

packages/app/src/components/combo-box/combo-box.tsx

@@ -22,6 +22,7 @@ type TProps<Option extends TOption> = {
   placeholder: string;
   onSelect: (option: Option) => void;
   selectedOption?: Option;
+  shouldFocusInput?: boolean;
 };
 
 /**
@@ -40,7 +41,7 @@ type TProps<Option extends TOption> = {
  * ```
  */
 export const ComboBox = <Option extends TOption>(props: TProps<Option>) => {
-  const { options, placeholder, selectedOption } = props;
+  const { options, placeholder, selectedOption, shouldFocusInput = true } = props;
 
   const { commonTexts } = useIntl();
 
@@ -98,10 +99,10 @@ export const ComboBox = <Option extends TOption>(props: TProps<Option>) => {
   };
 
   useEffect(() => {
-    if (!inputRef.current?.value && isLargeScreen && !hasRegionSelected) {
+    if (!inputRef.current?.value && isLargeScreen && !hasRegionSelected && shouldFocusInput) {
       inputRef.current?.focus();
     }
-  }, [isLargeScreen, hasRegionSelected]);
+  }, [isLargeScreen, hasRegionSelected, shouldFocusInput]);
 
   return (
     <Box role="search" css={css({ '[data-reach-combobox]': { paddingX: space[3], paddingY: space[4] } })}>
@@ -183,7 +184,7 @@ const ComboBoxStyles = createGlobalStyle`
 }
 
 [data-reach-combobox-list] {
-  height: 30em;
+  height: 25em;
   overflow-y: scroll;
   border: none;
   border-top: none;

packages/app/src/components/layout/components/top-navigation.tsx

@@ -7,13 +7,13 @@ import { MaxWidth } from '~/components/max-width';
 import { Anchor } from '~/components/typography';
 import { VisuallyHidden } from '~/components/visually-hidden';
 import { useIntl } from '~/intl';
-import { space } from '~/style/theme';
+import { sizes, space } from '~/style/theme';
 import { Link } from '~/utils/link';
 import { useCollapsible } from '~/utils/use-collapsible';
 import { useMediaQuery } from '~/utils/use-media-query';
 import { useReverseRouter } from '~/utils/use-reverse-router';
 
-const wideNavBreakpoint = 'screen and (min-width: 1024px)';
+const wideNavBreakpoint = `screen and (min-width: ${sizes.wideNavWidth}px)`;
 
 export function TopNavigation() {
   const isWideNav = useMediaQuery(wideNavBreakpoint);

packages/app/src/domain/layout/components/gm-combo-box.tsx

@@ -6,11 +6,12 @@ import { useReverseRouter } from '~/utils/use-reverse-router';
 
 interface GmComboBoxProps {
   getLink?: (gmcode: string) => string;
+  shouldFocusInput?: boolean;
   selectedGmCode: string;
 }
 
 export function GmComboBox(props: GmComboBoxProps) {
-  const { getLink, selectedGmCode } = props;
+  const { getLink, selectedGmCode, shouldFocusInput } = props;
 
   const { commonTexts } = useIntl();
   const reverseRouter = useReverseRouter();
@@ -24,6 +25,7 @@ export function GmComboBox(props: GmComboBoxProps) {
         router.push(typeof getLink === 'function' ? getLink(gemcode) : reverseRouter.gm.index(gemcode));
       }}
       selectedOption={gmData.find((gm) => gm.gemcode === selectedGmCode)}
+      shouldFocusInput={shouldFocusInput}
     />
   );
 }

packages/app/src/domain/layout/layout.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import { ReactNode } from 'react';
+import { Box } from '~/components/base/box';
 import { Breadcrumbs } from '~/components/breadcrumbs';
 import { BreadcrumbsDataProvider } from '~/components/breadcrumbs/logic/use-breadcrumbs';
 import { AppFooter } from '~/components/layout/app-footer';
@@ -8,40 +9,24 @@ import { SEOHead } from '~/components/seo-head';
 import { SkipLinkMenu } from '~/components/skip-link-menu';
 import { useIntl } from '~/intl';
 import { CurrentDateProvider } from '~/utils/current-date-context';
+
 interface LayoutProps {
+  children: ReactNode;
+  lastGenerated: string;
   title: string;
-  url?: string;
+  breadcrumbsData?: Record<string, string>;
   description?: string;
   openGraphImage?: string;
   twitterImage?: string;
-  breadcrumbsData?: Record<string, string>;
+  url?: string;
 }
 
-export function Layout(
-  props: LayoutProps & { lastGenerated: string; children: React.ReactNode }
-) {
-  const {
-    breadcrumbsData,
-    children,
-    title,
-    description,
-    openGraphImage,
-    twitterImage,
-    url,
-    lastGenerated,
-  } = props;
-
+export function Layout({ breadcrumbsData, children, title, description, openGraphImage, twitterImage, url, lastGenerated }: LayoutProps) {
   const { commonTexts } = useIntl();
 
   return (
-    <div>
-      <SEOHead
-        title={title}
-        description={description}
-        openGraphImage={openGraphImage}
-        twitterImage={twitterImage}
-        url={url}
-      />
+    <Box minHeight="100vh" display="flex" flexDirection="column">
+      <SEOHead title={title} description={description} openGraphImage={openGraphImage} twitterImage={twitterImage} url={url} />
       <SkipLinkMenu
         ariaLabel={commonTexts.aria_labels.skip_links}
         links={[
@@ -60,20 +45,19 @@ export function Layout(
       <AppHeader />
 
       {commonTexts.dashboard_wide_notification.title.length !== 0 && (
-        <NotificationBanner
-          title={commonTexts.dashboard_wide_notification.title}
-          description={commonTexts.dashboard_wide_notification.description}
-        />
+        <NotificationBanner title={commonTexts.dashboard_wide_notification.title} description={commonTexts.dashboard_wide_notification.description} />
       )}
 
-      <BreadcrumbsDataProvider value={breadcrumbsData}>
-        <Breadcrumbs />
-      </BreadcrumbsDataProvider>
+      {breadcrumbsData && (
+        <BreadcrumbsDataProvider value={breadcrumbsData}>
+          <Breadcrumbs />
+        </BreadcrumbsDataProvider>
+      )}
 
       <CurrentDateProvider dateInSeconds={Number(lastGenerated)}>
-        <div>{children}</div>
+        <Box margin="auto 0">{children}</Box>
       </CurrentDateProvider>
       <AppFooter />
-    </div>
+    </Box>
   );
 }

packages/app/src/next-config/redirects/redirects.js

@@ -101,22 +101,6 @@ async function redirects() {
       destination: `/landelijk/ziekenhuizen-en-zorg`,
       permanent: true,
     },
-    // Redirects for unpublished articles - COR-1232
-    {
-      source: '/artikelen/wat-betekent-de-britse-variant-voor-nederland',
-      destination: '/artikelen',
-      permanent: true,
-    },
-    {
-      source: '/artikelen/hoe-weten-we-hoeveel-besmettelijke-mensen-er-zijn',
-      destination: '/artikelen',
-      permanent: true,
-    },
-    {
-      source: '/artikelen/waarom-mogelijke-situaties-van-besmetting-niet-altijd-te-zien-zijn-op-het-dashboard',
-      destination: '/artikelen',
-      permanent: true,
-    },
   ];
 }