Merge pull request #1422 from City-of-Helsinki/hds-2517-cookie-theme-…

…story

(release-4.0.0) HDS-2517: change cookie consent theme

packages/react/src/components/cookieConsent/CookieConsent.stories.tsx

@@ -14,6 +14,7 @@ import {
 import { StoryComponent } from './components/StoryComponent';
 // importing the json because load won't work in e2e
 import siteSettings from '../cookieConsentCore/example/helfi_sitesettings.json';
+import { ToggleButton } from '../toggleButton/ToggleButton';
 
 export default {
   component: StoryComponent,
@@ -31,18 +32,18 @@ const ConsentOutput = () => {
     return <p>No consents</p>;
   }
   return (
-    <p>
+    <div>
       Current consents:{' '}
       <ul data-testid="consents-list">
         {consents.map((obj) => {
           return (
-            <li data-consent-group={obj.group} data-consent-group-value={obj.consented}>
+            <li data-consent-group={obj.group} data-consent-group-value={obj.consented} key={obj.group}>
               {obj.group}:{String(obj.consented)}
             </li>
           );
         })}
       </ul>
-    </p>
+    </div>
   );
 };
 
@@ -51,10 +52,6 @@ const Actions = () => {
     // eslint-disable-next-line no-console
     console.log('Adding chat cookie:', await window.hds.cookieConsent.setGroupsStatusToAccepted(['chat']));
   };
-  const addUnallowedCookie = async () => {
-    // eslint-disable-next-line no-console
-    console.log('Adding chat cookie:', await window.hds.cookieConsent.setGroupsStatusToAccepted(['unallowed']));
-  };
   const removeConsentCookie = async () => {
     const cookieName = `helfi-cookie-consents`;
     document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
@@ -66,22 +63,41 @@ const Actions = () => {
     console.log('Spawning banner', await window.hds.cookieConsent.openBanner(['statistics', 'chat']));
   };
   return (
-    <p>
-      <div style={{ display: 'flex', gap: 'var(--spacing-s)' }}>
+    <div>
+      <div style={{ display: 'flex', gap: 'var(--spacing-xs)' }}>
         <Button data-testid="add-chat-group-button" onClick={addChatCookie}>
-          Add chat group
-        </Button>
-        <Button data-testid="add-unallowed-group-button" onClick={addUnallowedCookie}>
-          Add unallowed group
+          Set &quot;chat&quot; consent group as accepted
         </Button>
         <Button data-testid="remove-cookie-button" onClick={removeConsentCookie}>
-          Remove consent cookie
+          Remove all consents
         </Button>
         <Button data-testid="open-banner-button" onClick={openBanner}>
-          Open banner
+          Open banner with highlighted groups &quot;chat&quot; and &quot;statistics&quot;
         </Button>
       </div>
-    </p>
+    </div>
+  );
+};
+
+const ThemeButton = (props: { current: 'bus' | 'black'; onChange: (selected: 'bus' | 'black') => void }) => {
+  const { current, onChange } = props;
+  const changedTheme = current === 'bus' ? 'black' : 'bus';
+  return (
+    <div>
+      <div>Current theme</div>
+      <div style={{ display: 'flex', gap: 'var(--spacing-s)', alignItems: 'center' }}>
+        <span>Black</span>
+        <ToggleButton
+          id="bus-theme"
+          aria-label={`change cookie consent label to ${changedTheme}`}
+          label=""
+          checked={current === 'bus'}
+          onChange={() => onChange(changedTheme)}
+        />
+        <span>Bus</span>
+      </div>
+      <div>Theme is only applied to the cookie consent banner and page</div>
+    </div>
   );
 };
 
@@ -92,6 +108,7 @@ export const Example = ({ currentTabIndex }: { currentTabIndex?: number } = {})
     { label: 'English', value: 'en', isPrimary: true },
   ];
   const [language, updateLang] = useState<string>(languages[0].value);
+  const [theme, updateTheme] = useState<'bus' | 'black'>('bus');
   const onLangChange = (newLanguage: string) => {
     updateLang(newLanguage);
   };
@@ -103,7 +120,7 @@ export const Example = ({ currentTabIndex }: { currentTabIndex?: number } = {})
   return (
     <CookieConsentContextProvider
       onChange={onChange}
-      options={{ language }}
+      options={{ language, theme }}
       siteSettings={{ ...siteSettings, remove: false, monitorInterval: 0 }}
     >
       <Header languages={languages} onDidChangeLanguage={onLangChange} defaultLanguage={language}>
@@ -118,7 +135,6 @@ export const Example = ({ currentTabIndex }: { currentTabIndex?: number } = {})
           <Header.LanguageSelector aria-label="aria" languageHeading="other" />
         </Header.ActionBar>
       </Header>
-
       <Tabs initiallyActiveTab={currentTabIndex || 0}>
         <Tabs.TabList className="example-tablist">
           <Tabs.Tab>
@@ -155,8 +171,11 @@ export const Example = ({ currentTabIndex }: { currentTabIndex?: number } = {})
         </Tabs.TabPanel>
         <Tabs.TabPanel>
           <h1>Actions ( {language} )</h1>
-          <p>Banner is not shown here</p>
+          <p>Banner is never shown on this page unless shown previously.</p>
+          <p>Current consents can also be changed my calling the window.hds.cookieConsent instance.</p>
           <Actions />
+          <p>Theme can also be changed like language.</p>
+          <ThemeButton current={theme} onChange={updateTheme} />
           <span data-testid="actions-tab" />
         </Tabs.TabPanel>
       </Tabs>

packages/react/src/components/cookieConsent/contexts/CookieConsentContext.tsx

@@ -19,6 +19,7 @@ export const ConsentContext = createContext<ConsentContextType>({
   removePage: () => false,
   settingsPageId: '',
   language: '',
+  theme: '',
 });
 
 export const CookieConsentContextProvider = ({ children, ...rest }: CookieConsentContextProps): React.ReactElement => {

packages/react/src/components/cookieConsent/hooks/__tests__/useCookieBanner.test.tsx

@@ -26,6 +26,10 @@ describe('useCookieBanner', () => {
     modalComponent: 'modal-component',
     consents: 'consents',
     isMounted: 'is-mounted',
+    setLanguageTo_sv: 'set-sv-lang',
+    setLanguageTo_fi: 'set-fi-lang',
+    setThemeTo_black: 'set-black-theme',
+    setThemeTo_bus: 'set-bus-theme',
   };
 
   let renderCount: number = 0;
@@ -40,10 +44,12 @@ describe('useCookieBanner', () => {
   };
   const HookComponent = () => {
     const [isMounted, setIsMounted] = useState(true);
+    const [language, setLanguage] = useState('fi');
+    const [theme, setTheme] = useState('bus');
     renderCount += 1;
     const forceRender = useForceRender();
     return (
-      <CookieConsentContextProvider onChange={jest.fn()}>
+      <CookieConsentContextProvider onChange={jest.fn()} options={{ language, theme }}>
         <div>
           {isMounted && <ModalComponent />}
           <div data-testid={testIds.isMounted}>{isMounted ? 1 : 0}</div>
@@ -65,7 +71,42 @@ describe('useCookieBanner', () => {
           >
             {isMounted}
           </button>
-          );
+          <button
+            type="button"
+            data-testid={testIds.setLanguageTo_sv}
+            onClick={() => {
+              setLanguage('sv');
+            }}
+          >
+            Set language sv
+          </button>
+          <button
+            type="button"
+            data-testid={testIds.setLanguageTo_fi}
+            onClick={() => {
+              setLanguage('fi');
+            }}
+          >
+            Set language fi
+          </button>
+          <button
+            type="button"
+            data-testid={testIds.setThemeTo_black}
+            onClick={() => {
+              setTheme('black');
+            }}
+          >
+            Set theme black
+          </button>
+          <button
+            type="button"
+            data-testid={testIds.setThemeTo_bus}
+            onClick={() => {
+              setTheme('bus');
+            }}
+          >
+            Set theme bus
+          </button>
         </div>
       </CookieConsentContextProvider>
     );
@@ -108,6 +149,19 @@ describe('useCookieBanner', () => {
       });
     };
 
+    const setLanguage = async (newLang: 'sv' | 'fi') => {
+      fireEvent.click(result.getByTestId(testIds[`setLanguageTo_${newLang}`]));
+      await waitFor(() => {
+        expect(mockCore.getRenderedLanguage()).toBe(newLang);
+      });
+    };
+    const setTheme = async (newTheme: 'bus' | 'black') => {
+      fireEvent.click(result.getByTestId(testIds[`setThemeTo_${newTheme}`]));
+      await waitFor(() => {
+        expect(mockCore.getRenderedTheme()).toBe(newTheme);
+      });
+    };
+
     // @ts-ignore
     mockCore.setRenderResult(result);
 
@@ -116,8 +170,19 @@ describe('useCookieBanner', () => {
       ...result,
       renderAgain,
       getConsents,
+      setLanguageSv: async () => {
+        return setLanguage('sv');
+      },
+      setLanguageFi: async () => {
+        return setLanguage('fi');
+      },
+      setThemeBus: async () => {
+        return setTheme('bus');
+      },
+      setThemeBlack: async () => {
+        return setTheme('black');
+      },
       waitForReady: async () => {
-        // mockCore.triggerReadyEvent();
         await waitForTestId(testIds.ready);
       },
     };
@@ -148,4 +213,20 @@ describe('useCookieBanner', () => {
       expect(getConsents()).toEqual(updatedConsentData.map((group) => ({ group, consented: true })));
     });
   });
+  it('changing language re-renders the banner', async () => {
+    const result = renderTests();
+    await result.waitForReady();
+    await result.setLanguageSv();
+    expect(mockCore.getRenderedLanguage()).toBe('sv');
+    await result.setLanguageFi();
+    expect(mockCore.getRenderedLanguage()).toBe('fi');
+  });
+  it('changing theme re-renders the banner', async () => {
+    const result = renderTests();
+    await result.waitForReady();
+    await result.setThemeBlack();
+    expect(mockCore.getRenderedTheme()).toBe('black');
+    await result.setThemeBus();
+    expect(mockCore.getRenderedTheme()).toBe('bus');
+  });
 });

packages/react/src/components/cookieConsent/hooks/__tests__/useCookieConsent.test.tsx

@@ -31,12 +31,16 @@ describe('useCookieConsent', () => {
 
   const onChange = jest.fn();
   let language: string | undefined;
+  let theme: string | undefined;
   let renderCount = 1;
   const HookComponent = (props: Partial<CookieConsentReactProps> & { renderPageContainer?: boolean } = {}) => {
     const { options = {}, siteSettings = {}, settingsPageId, renderPageContainer } = props;
     if (language) {
       options.language = language;
     }
+    if (theme) {
+      options.theme = theme;
+    }
     const {
       isReady,
       settingsPageId: currentSettingsPageId,
@@ -102,6 +106,7 @@ describe('useCookieConsent', () => {
     mockCore.reset();
     onChange.mockReset();
     language = undefined;
+    theme = undefined;
     renderCount = 0;
   });
   const renderTests = (
@@ -145,8 +150,13 @@ describe('useCookieConsent', () => {
       });
     };
 
-    const renderAgain = async (newLanguage?: string) => {
-      language = newLanguage;
+    const renderAgain = async (newLanguage?: string, newTheme?: string) => {
+      if (newLanguage) {
+        language = newLanguage;
+      }
+      if (newTheme) {
+        theme = newTheme;
+      }
       const lastRender = getRenderCount();
       fireEvent.click(result.getByTestId(testIds.renderAgain));
       await waitFor(() => {
@@ -256,4 +266,12 @@ describe('useCookieConsent', () => {
     await renderAgain('be');
     expect(mockCore.getTrackerCallCounts('setLanguage')).toBe(2);
   });
+  it('If theme changes, setTheme is called.', async () => {
+    const result = renderTests();
+    const { waitForReady, renderAgain } = result;
+    await waitForReady();
+    await renderAgain('', 'black');
+    await renderAgain('', 'bus');
+    expect(mockCore.getTrackerCallCounts('setTheme')).toBe(2);
+  });
 });