Feature/no jira update epic branch with develop (#4741)

* feat(vaccinations-page): remove planned vaccine content for 'Vaccinated people' graph; update schemas so that vaccine_planned is no longer used; fixed issue caused by previous magic number PRs; (#4697) Co-authored-by: VWSCoronaDashboard26 <[email protected]> * Chore/update-docs-structure (no related COR) (#4723) * chore: make reference to deletion file doc * fix: removed to much * feature/COR-1516-404-page-improvements-multiple-pages-client-side-only (#4727) * feat(404-pages): Remove hardcoded article redirects * feat(404-pages): Enable configuration of 404 pages in Sanity. * feat(404-pages): Adjust schemas. * feat(404-pages): Wrap breadcrumbs with a guard. * feat(404-pages): Middleware redirect logic with parameters for each 404 page. * feat(404-pages): Add new icons. Adjust KpiIconInput component so that it closes upon selecting an icon. * feat(404-pages): Extract query to its own file and adjust not found schema. * feat(404-pages): Update SVG fill * feat(404-pages): Adjust query and schema. Delete old 404 page * feat(404-pages): WIP new 404 pages. * feat(404-pages): Finalize 404 pages. * feat(404-pages): Fine tune implementation. * feat(404-pages): PR Feedback, first round. * feat(404-pages): PR Feedback, second round. * feat(404-pages): Non middleware solution. * feat(404-pages): Client side implementation * feat(404-pages): Add isGm and isGeneralPage. * feat(404-pages): Final tweaks * feat(404-pages): Revert undesired change. --------- Co-authored-by: VWSCoronaDashboard28 <[email protected]> * bugfix(positive-tests): added self_test_overall as metric to metrics array; (#4730) Co-authored-by: VWSCoronaDashboard26 <[email protected]> * feature/COR-1548-tests-page (#4734) * feat(tests-page): added new Tests route component; updated PositivelyTestedPeople route component to remove self tests chart; updated reverse router to add new Tests route and clean up; updated NlLayout component to add new Tests route to sidebar; moved Sanity keys using DELETE and ADD; updated types; * feat(tests-page): sorted mapKeysToReverseRouter entries in useSidebar hook; --------- Co-authored-by: VWSCoronaDashboard26 <[email protected]> * revert-4734-feature/COR-1548-tests-page (#4740) * Revert "feature/COR-1548-tests-page (#4734)" This reverts commit 79b8cec. * chore(revert): updated key-mutations.csv; --------- Co-authored-by: VWSCoronaDashboard26 <[email protected]> --------- Co-authored-by: LR <[email protected]> Co-authored-by: VWSCoronaDashboard26 <[email protected]> Co-authored-by: J <[email protected]> Co-authored-by: AP <[email protected]> Co-authored-by: VWSCoronaDashboard28 <[email protected]>
minvws · Apr 17, 2023 · 090b7b5 · 090b7b5
1 parent e041241
commit 090b7b5
Show file tree

Hide file tree

Showing 23 changed files with 518 additions and 73 deletions.
diff --git a/docs/deleting-a-page-procedure.md b/docs/deleting-a-page-procedure.md
@@ -1,4 +1,4 @@
-# Deleting a page Procedure
+# Deleting a page procedure
 
 ## For every file you delete do the following:
 1. ### imports (if there are any)

diff --git a/docs/index.md b/docs/index.md
@@ -23,7 +23,8 @@
 
 - [Schema docs](schema.md)
 
-## Miscelaneous
+## Miscellaneous
 
 - [Developer notes](developers.md)
 - [Choropleth data](choropleth-data.md)
+- [Deleting a page procedure](deleting-a-page-procedure.md)
diff --git a/packages/app/src/components/combo-box/combo-box.tsx b/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;

diff --git a/packages/app/src/components/layout/components/top-navigation.tsx b/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);

diff --git a/packages/app/src/domain/layout/components/gm-combo-box.tsx b/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}
     />
   );
 }
diff --git a/packages/app/src/domain/layout/layout.tsx b/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>
   );
 }
diff --git a/packages/app/src/next-config/redirects/redirects.js b/packages/app/src/next-config/redirects/redirects.js
@@ -76,22 +76,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,
-    },
   ];
 }