Merge pull request #827 from City-of-Helsinki/cookie-consent-fixes

Cookie consent fixes
City-of-Helsinki · Sep 14, 2022 · a05dbc5 · a05dbc5
2 parents 8a134bf + 9867fff
commit a05dbc5
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 12 deletions.
diff --git a/packages/react/src/components/cookieConsent/CookieConsent.stories.tsx b/packages/react/src/components/cookieConsent/CookieConsent.stories.tsx
@@ -8,10 +8,10 @@ import { CookieContentSource } from './content.builder';
 import { Modal } from './modal/Modal';
 import { Accordion } from '../accordion';
 import { useCookies } from './useCookies';
-import { PortalModal } from './portalModal/PortalModal';
+import { CookieModal } from './cookieModal/CookieModal';
 
 export default {
-  component: PortalModal,
+  component: CookieModal,
   title: 'Components/CookieConsent',
   parameters: {
     controls: { expanded: true },
@@ -315,7 +315,7 @@ export const EnglishModalVersion = (args) => {
 
   return (
     <>
-      <PortalModal contentSource={contentSource} />
+      <CookieModal contentSource={contentSource} />
       <Application />
     </>
   );
@@ -610,7 +610,7 @@ export const FinnishModalVersion = (args) => {
 
   return (
     <>
-      <PortalModal contentSource={contentSource} />
+      <CookieModal contentSource={contentSource} />
       <Application />
     </>
   );
@@ -655,7 +655,7 @@ export const SimpleModalVersion = (args) => {
 
   return (
     <>
-      <PortalModal contentSource={contentSource} />
+      <CookieModal contentSource={contentSource} />
       <Application />
     </>
   );

diff --git a/...eConsent/portalModal/PortalModal.test.tsx → ...eConsent/cookieModal/CookieModal.test.tsx b/...eConsent/portalModal/PortalModal.test.tsx → ...eConsent/cookieModal/CookieModal.test.tsx
@@ -5,7 +5,7 @@ import { render, RenderResult, screen, waitFor } from '@testing-library/react';
 import { axe } from 'jest-axe';
 import { act } from 'react-dom/test-utils';
 
-import { PortalModal } from './PortalModal';
+import { CookieModal } from './CookieModal';
 import { COOKIE_NAME } from '../cookieConsentController';
 import mockDocumentCookie from '../__mocks__/mockDocumentCookie';
 import {
@@ -54,7 +54,7 @@ const renderCookieConsent = (
   mockedCookieControls.init({ [COOKIE_NAME]: JSON.stringify(consentCookieWithInjectedUnknowns) });
   const result = render(
     <div>
-      <PortalModal contentSource={contentSource} rootId={rootId} />
+      <CookieModal contentSource={contentSource} rootId={rootId} />
       <button id="focus-target" type="button">
         Focus me
       </button>
@@ -76,7 +76,7 @@ const renderCookieConsent = (
   return result;
 };
 
-describe('<PortalModal /> spec', () => {
+describe('<CookieModal /> spec', () => {
   afterEach(() => {
     mockedCookieControls.clear();
   });
@@ -99,7 +99,7 @@ describe('<PortalModal /> spec', () => {
   }, 15000);
 });
 
-describe('<PortalModal /> ', () => {
+describe('<CookieModal /> ', () => {
   afterEach(() => {
     mockedCookieControls.clear();
   });

diff --git a/...cookieConsent/portalModal/PortalModal.tsx → ...cookieConsent/cookieModal/CookieModal.tsx b/...cookieConsent/portalModal/PortalModal.tsx → ...cookieConsent/cookieModal/CookieModal.tsx
@@ -5,7 +5,7 @@ import { Modal } from '../modal/Modal';
 import { CookieConsentContext } from '../contexts/ContextComponent';
 import { CookieContentSource } from '../content.builder';
 
-export function PortalModal({
+export function CookieModal({
   contentSource,
   cookieDomain,
   rootId = 'HdsCookieConsentContainer',

diff --git a/...ents/cookieConsent/portalModal/Portal.tsx → ...ents/cookieConsent/cookieModal/Portal.tsx b/...ents/cookieConsent/portalModal/Portal.tsx → ...ents/cookieConsent/cookieModal/Portal.tsx
@@ -47,6 +47,9 @@ export function Portal({ rootId, children }: { rootId: string; children: React.R
       removePortal();
     };
   }, [rootId, shouldShowModal, setIsDomReady, removePortal]);
+
+  if (typeof document === 'undefined') return null;
+
   if (getChildNodeCount() === 0 && (!shouldShowModal || !isDomReady)) {
     return null;
   }

diff --git a/...l/__snapshots__/PortalModal.test.tsx.snap → ...l/__snapshots__/CookieModal.test.tsx.snap b/...l/__snapshots__/PortalModal.test.tsx.snap → ...l/__snapshots__/CookieModal.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PortalModal /> spec renders the component 1`] = `
+exports[`<CookieModal /> spec renders the component 1`] = `
 <body>
   <div
     data-testid="html-cookie-consent-container"

diff --git a/packages/react/src/components/cookieConsent/index.ts b/packages/react/src/components/cookieConsent/index.ts
@@ -1,4 +1,4 @@
-export * from './portalModal/PortalModal';
+export * from './cookieModal/CookieModal';
 export * from './cookiePage/CookiePage';
 export * from './useCookies';
 export * from './types';