IndexPage: add a link to the profession list in the Header

src/features/IndexPage/components/Header/QualificationSelector.tsx

@@ -1,16 +1,20 @@
-import { useState } from 'react';
+import { MouseEventHandler, useState } from 'react';
 import { Maybe, Qualification } from 'libs/graphql';
+import { SECTION_ID as PROFESSIONS_SECTION_ID } from '../Professions/Professions';
 
+import { makeStyles } from '@material-ui/core/styles';
 import { Autocomplete } from '@material-ui/lab';
 import { InputAdornment, TextField } from '@material-ui/core';
 import { Search as SearchIcon } from '@material-ui/icons';
+import Link from 'common/Link/Link';
 import TestForm from './TestForm';
-import { makeStyles } from '@material-ui/core/styles';
 
 export interface QualificationSelectorProps {
   qualifications: Qualification[];
 }
 
+const PROFESSIONS_SECTION_SELECTOR = '#' + PROFESSIONS_SECTION_ID;
+
 const QualificationSelector = ({
   qualifications,
 }: QualificationSelectorProps) => {
@@ -19,6 +23,19 @@ const QualificationSelector = ({
   >(null);
   const classes = useStyles();
 
+  const scrollToProfessions = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    const element = document.querySelector<HTMLDivElement>(
+      PROFESSIONS_SECTION_SELECTOR
+    );
+    if (element?.scrollIntoView) {
+      e.preventDefault();
+      element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    }
+  };
+
   return (
     <div className={classes.container}>
       <Autocomplete
@@ -49,6 +66,13 @@ const QualificationSelector = ({
         }}
         options={qualifications}
       />
+      <Link
+        href={PROFESSIONS_SECTION_SELECTOR}
+        onClick={scrollToProfessions}
+        title="Przejdź do listy dostępnych zawodów i kwalifikacji."
+      >
+        Przejdź do listy dostępnych zawodów i kwalifikacji.
+      </Link>
       {selectedQualification && (
         <TestForm qualification={selectedQualification} />
       )}

src/features/IndexPage/components/Professions/Professions.tsx

@@ -8,9 +8,11 @@ export interface ProfessionsProps {
   professions: ProfessionT[];
 }
 
+export const SECTION_ID = 'professions';
+
 const Professions = ({ professions }: ProfessionsProps) => {
   return (
-    <Section size={Size.Medium}>
+    <Section id={SECTION_ID} size={Size.Medium}>
       <Container>
         <Typography align="center" variant="h2" gutterBottom>
           Lista dostępnych zawodów i kwalifikacji