SHARED:YKI:AKR(Frontend): Update CookieBanner to be non-modal [deploy]

Opetushallitus · Nov 24, 2023 · 179d823 · 179d823
1 parent 85e7785
commit 179d823
Show file tree

Hide file tree

Showing 16 changed files with 112 additions and 48 deletions.
diff --git a/frontend/packages/akr/package.json b/frontend/packages/akr/package.json
@@ -22,6 +22,6 @@
     "akr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].1"
+    "shared": "npm:@opetushallitus/[email protected].2"
   }
 }
diff --git a/frontend/packages/akr/public/i18n/en-GB/translation.json b/frontend/packages/akr/public/i18n/en-GB/translation.json
@@ -447,10 +447,10 @@
       },
       "homepage": {
         "cookieBanner": {
-          "buttonAriaLabel": "Accept cookies",
-          "buttonText": "Accept",
+          "buttonAriaLabel": "Close",
+          "buttonText": "Close",
           "description": "This web site uses mandatory cookies to be functional.",
-          "title": "Accept cookies"
+          "title": "Information about cookies"
         },
         "description": "The Finnish National Agency for Education maintains a register of authorised translators. You can use the search engine to find an authorised translator or several either by language pair, name, or municipality of residence. You can use the search form to leave a contact request to the translators you have selected. If there is a malfunction in the register, contact us by email: [email protected]",
         "filters": {

diff --git a/frontend/packages/akr/public/i18n/fi-FI/translation.json b/frontend/packages/akr/public/i18n/fi-FI/translation.json
@@ -457,10 +457,10 @@
       },
       "homepage": {
         "cookieBanner": {
-          "buttonAriaLabel": "Hyväksy evästeet",
-          "buttonText": "Hyväksy",
+          "buttonAriaLabel": "Sulje evästetiedot",
+          "buttonText": "Sulje",
           "description": "Tämä sivusto käyttää välttämättömiä evästeitä toimiakseen.",
-          "title": "Hyväksy evästeet"
+          "title": "Tietoa sivuston evästeistä"
         },
         "description": "Opetushallitus ylläpitää auktorisoitujen kääntäjien rekisteriä. Hakukoneella voit hakea auktorisoitua kääntäjää/auktorisoituja kääntäjiä joko kieliparin, nimen tai asuinkunnan mukaan. Voit jättää yhteydenottopyynnön valitsemillesi kääntäjille alla. Jos rekisterissä on toimintahäiriö, ota yhteyttä Opetushallitukseen sähköpostitse: [email protected]",
         "filters": {

diff --git a/frontend/packages/akr/public/i18n/sv-SE/translation.json b/frontend/packages/akr/public/i18n/sv-SE/translation.json
@@ -447,10 +447,10 @@
       },
       "homepage": {
         "cookieBanner": {
-          "buttonAriaLabel": "Acceptera cookies",
-          "buttonText": "Acceptera",
-          "description": "Den här webbplatsen använder nödvändiga cookies för att fungera.",
-          "title": "Acceptera cookies"
+          "buttonAriaLabel": "Stäng",
+          "buttonText": "Stäng",
+          "description": "Den här webbplatsen använder nödvändiga kakor för att fungera",
+          "title": "Information om kakor"
         },
         "description": "Utbildningsstyrelsen upprätthåller ett register över auktoriserade translatorer. Med sökmotorn kan du söka auktoriserade translatorer utgående från språkpar, på namn eller boendeort. Du kan lämna en kontaktförfrågan för de translatorer som du väljer nedan. I fall av ett funktionsfel i registret vänligen kontakta vår e-postadress: [email protected]",
         "filters": {

diff --git a/frontend/packages/akr/src/components/layouts/Header.tsx b/frontend/packages/akr/src/components/layouts/Header.tsx
@@ -1,10 +1,12 @@
 import { AppBar, Toolbar } from '@mui/material';
 import { Link } from 'react-router-dom';
 import {
+  CookieBanner,
   LangSelector,
   OPHClerkLogo,
   OPHLogoViewer,
   SkipLink,
+  Text,
 } from 'shared/components';
 import { AppLanguage, Direction } from 'shared/enums';
 import { useWindowProperties } from 'shared/hooks';
@@ -25,6 +27,9 @@ export const Header = (): JSX.Element => {
   const { t } = useAppTranslation({
     keyPrefix: 'akr.component.header',
   });
+  const { t: cookieTranslation } = useAppTranslation({
+    keyPrefix: 'akr.pages.homepage.cookieBanner',
+  });
   const translateCommon = useCommonTranslation();
   const [finnish, swedish, english] = getSupportedLangs();
 
@@ -90,6 +95,19 @@ export const Header = (): JSX.Element => {
           </div>
         </Toolbar>
       </AppBar>
+      {!isClerkUI && (
+        <CookieBanner
+          title={cookieTranslation('title')}
+          buttonText={cookieTranslation('buttonText')}
+          cookieTag="cookie-consent-akr"
+          buttonAriaLabel={cookieTranslation('buttonAriaLabel')}
+          path="/akr"
+        >
+          <Text data-testid="cookie-banner-description">
+            {cookieTranslation('description')}
+          </Text>
+        </CookieBanner>
+      )}
     </>
   );
 };
diff --git a/frontend/packages/akr/src/pages/PublicHomePage.tsx b/frontend/packages/akr/src/pages/PublicHomePage.tsx
@@ -1,9 +1,7 @@
 import { Box, Grid } from '@mui/material';
 import { FC, useEffect } from 'react';
-import { CookieBanner, Text } from 'shared/components';
 
 import { PublicTranslatorGrid } from 'components/publicTranslator/PublicTranslatorGrid';
-import { useAppTranslation } from 'configs/i18n';
 import { useAppDispatch, useAppSelector } from 'configs/redux';
 import { PublicUIViews } from 'enums/app';
 import { ContactRequestPage } from 'pages/ContactRequestPage';
@@ -12,9 +10,6 @@ import { publicUIViewSelector } from 'redux/selectors/publicUIView';
 
 export const PublicHomePage: FC = () => {
   const dispatch = useAppDispatch();
-  const { t } = useAppTranslation({
-    keyPrefix: 'akr.pages.homepage.cookieBanner',
-  });
 
   useEffect(() => {
     dispatch(loadPublicTranslators());
@@ -24,15 +19,6 @@ export const PublicHomePage: FC = () => {
 
   return (
     <Box className="public-homepage">
-      <CookieBanner
-        title={t('title')}
-        buttonText={t('buttonText')}
-        cookieTag="cookie-consent-akr"
-        buttonAriaLabel={t('buttonAriaLabel')}
-        path="/akr"
-      >
-        <Text data-testid="cookie-banner-description">{t('description')}</Text>
-      </CookieBanner>
       <Grid
         container
         rowSpacing={4}

diff --git a/frontend/packages/akr/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap b/frontend/packages/akr/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Header should render Header correctly 1`] = `
 Array [
   <a
-    className="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways skip-link css-tvmhkj-MuiTypography-root-MuiLink-root"
+    className="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways skip-link css-1vrl3mg-MuiTypography-root-MuiLink-root"
     href="#main-content"
     onBlur={[Function]}
     onFocus={[Function]}

diff --git a/frontend/packages/shared/CHANGELOG.MD b/frontend/packages/shared/CHANGELOG.MD
@@ -9,6 +9,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Released]
 
+## [1.10.2] - 2023-11-24
+### Changed
+
+- Change CookieBanner from modal dialog to a banner
+
 ## [1.10.1] - 2023-11-07
 
 ### Changed

diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared",
-  "version": "1.10.1",
+  "version": "1.10.2",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",

diff --git a/frontend/packages/shared/src/components/CookieBanner/CookieBanner.scss b/frontend/packages/shared/src/components/CookieBanner/CookieBanner.scss
@@ -13,6 +13,11 @@
       min-width: 96px;
     }
 
+    & &__dialog-container {
+      padding: 20px 24px;
+      padding-top: 0px;
+    }
+
     & &__dialog-content {
       height: calc(100% - map-get(maps.$spacing, 'lg'));
       padding-bottom: map-get(maps.$spacing, 'lg');
@@ -21,5 +26,14 @@
         padding-bottom: 0;
       }
     }
+
+    h2 {
+      margin: 0;
+      font-weight: 500;
+      font-size: 2rem;
+      line-height: 1.6;
+      letter-spacing: 0.0075em;
+      padding: 16px 24px;
+    }
   }
 }
diff --git a/frontend/packages/shared/src/components/CookieBanner/CookieBanner.tsx b/frontend/packages/shared/src/components/CookieBanner/CookieBanner.tsx
@@ -1,4 +1,4 @@
-import { Dialog, DialogContent, DialogTitle } from '@mui/material';
+import { Paper } from '@mui/material';
 import Cookies from 'js-cookie';
 import { FC, PropsWithChildren, useEffect, useState } from 'react';
 
@@ -42,25 +42,29 @@ export const CookieBanner: FC<PropsWithChildren<CookieBannerProps>> = ({
     setOpen(false);
   };
 
+  if (!open) return null;
+
   return (
-    <Dialog
-      open={open}
-      maxWidth={false}
-      fullWidth
+    <Paper
+      square
+      elevation={3}
       sx={{
-        '& .MuiPaper-root': {
-          position: 'absolute',
-          bottom: 0,
-          width: '100%',
-          maxWidth: '100%',
-          margin: 0,
-          borderRadius: 0,
-        },
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        maxWidth: '100%',
+        margin: 0,
+        borderRadius: 0,
+        zIndex: 2,
       }}
     >
-      <div className="cookie-banner__content">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogContent>
+      <section
+        className="cookie-banner__content"
+        aria-labelledby="cookie-banner__title"
+      >
+        <h2 id="cookie-banner__title">{title}</h2>
+        <div className="cookie-banner__content__dialog-container">
           <div
             className={`cookie-banner__content__dialog-content gapped space-between ${
               isDesktop ? 'columns' : 'rows'
@@ -78,8 +82,8 @@ export const CookieBanner: FC<PropsWithChildren<CookieBannerProps>> = ({
               {buttonText}
             </CustomButton>
           </div>
-        </DialogContent>
-      </div>
-    </Dialog>
+        </div>
+      </section>
+    </Paper>
   );
 };
diff --git a/frontend/packages/yki/package.json b/frontend/packages/yki/package.json
@@ -26,7 +26,7 @@
     "yki:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].1"
+    "shared": "npm:@opetushallitus/[email protected].2"
   },
   "devDependencies": {
     "multer": "^1.4.5-lts.1"

diff --git a/frontend/packages/yki/public/i18n/en-GB/public.json b/frontend/packages/yki/public/i18n/en-GB/public.json
@@ -1,6 +1,12 @@
 {
   "yki": {
     "component": {
+      "cookieBanner": {
+        "buttonAriaLabel": "Close",
+        "buttonText": "Close",
+        "description": "This web site uses mandatory cookies to be functional.",
+        "title": "Information about cookies"
+      },
       "evaluationOrderForm": {
         "actionButtons": {
           "cancel": "Quit",

diff --git a/frontend/packages/yki/public/i18n/fi-FI/public.json b/frontend/packages/yki/public/i18n/fi-FI/public.json
@@ -1,6 +1,12 @@
 {
   "yki": {
     "component": {
+      "cookieBanner": {
+        "buttonAriaLabel": "Sulje evästetiedot",
+        "buttonText": "Sulje evästetiedot",
+        "description": "Tämä sivusto käyttää välttämättömiä evästeitä toimiakseen.",
+        "title": "Tietoa sivuston evästeistä"
+      },
       "evaluationOrderForm": {
         "actionButtons": {
           "cancel": "Keskeytä",

diff --git a/frontend/packages/yki/public/i18n/sv-SE/public.json b/frontend/packages/yki/public/i18n/sv-SE/public.json
@@ -1,6 +1,12 @@
 {
   "yki": {
     "component": {
+      "cookieBanner": {
+        "buttonAriaLabel": "Stäng",
+        "buttonText": "Stäng",
+        "description": "Den här webbplatsen använder nödvändiga kakor för att fungera",
+        "title": "Information om kakor"
+      },
       "evaluationOrderForm": {
         "actionButtons": {
           "cancel": "Avbryt",

diff --git a/frontend/packages/yki/src/components/layouts/Header.tsx b/frontend/packages/yki/src/components/layouts/Header.tsx
@@ -1,6 +1,12 @@
 import { AppBar, Toolbar } from '@mui/material';
 import { Link } from 'react-router-dom';
-import { LangSelector, OPHLogoViewer, SkipLink } from 'shared/components';
+import {
+  CookieBanner,
+  LangSelector,
+  OPHLogoViewer,
+  SkipLink,
+  Text,
+} from 'shared/components';
 import { AppLanguage, Direction } from 'shared/enums';
 import { useWindowProperties } from 'shared/hooks';
 
@@ -11,12 +17,16 @@ import {
   getCurrentLang,
   getSupportedLangs,
   useCommonTranslation,
+  usePublicTranslation,
 } from 'configs/i18n';
 import { AppRoutes } from 'enums/app';
 
 export const Header = (): JSX.Element => {
   const translateCommon = useCommonTranslation();
   const [finnish, swedish, english] = getSupportedLangs();
+  const { t } = usePublicTranslation({
+    keyPrefix: 'yki.component.cookieBanner',
+  });
 
   const langDict = new Map<string, AppLanguage>([
     [translateCommon('header.lang.fi'), finnish],
@@ -76,6 +86,15 @@ export const Header = (): JSX.Element => {
           </div>
         </Toolbar>
       </AppBar>
+      <CookieBanner
+        title={t('title')}
+        buttonText={t('buttonText')}
+        cookieTag="cookie-consent-yki"
+        buttonAriaLabel={t('buttonAriaLabel')}
+        path="/yki"
+      >
+        <Text data-testid="cookie-banner-description">{t('description')}</Text>
+      </CookieBanner>
     </>
   );
 };