feat(CookieConsent): add modalClassName property to ConsentPopup …

…Modal (#230)
gravity-ui · Oct 22, 2024 · 58b64e6 · 58b64e6
1 parent 0a7854b
commit 58b64e6
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 0 deletions.
diff --git a/src/components/CookieConsent/README.md b/src/components/CookieConsent/README.md
@@ -53,6 +53,7 @@ const Analytics = () => {
       consentManager={consentManager}
       cookieList={cookieList}
       onConsentPopupClose={props.onClose}
+      modalClassName={'unique-class-name-for-adblockers'}
     />
   );
 };

diff --git a/src/components/CookieConsent/__stories__/CookieConsent.stories.tsx b/src/components/CookieConsent/__stories__/CookieConsent.stories.tsx
@@ -72,6 +72,7 @@ ConsentPopup.args = {
     consentMode: ConsentMode.Manage,
     policyLink: 'https://google.com',
     cookieList,
+    modalClassName: 'unique-class-name-for-adblockers',
 } as DefaultTemplateProps;
 
 export const ManageCookies = DefaultTemplate.bind({});
@@ -80,6 +81,7 @@ ManageCookies.args = {
     manageCookies: true,
     policyLink: 'https://google.com',
     cookieList,
+    modalClassName: 'unique-class-name-for-adblockers',
 } as DefaultTemplateProps;
 
 export const ConsentNotification = DefaultTemplate.bind({});

diff --git a/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.tsx b/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.tsx
@@ -101,6 +101,7 @@ export const ConsentPopup = ({
     policyLink,
     onAction,
     className,
+    modalClassName,
     policyLinkText = i18n('label_policy_extended'),
     text,
     manageLabelText = i18n('manage_label_text_extended'),
@@ -156,6 +157,7 @@ export const ConsentPopup = ({
             open
             disableOutsideClick
             disableEscapeKeyDown
+            className={modalClassName}
             contentClassName={b('modal-content', {step: currentStep, mobile})}
             onClose={onClose}
         >

diff --git a/src/components/CookieConsent/components/ConsentPopup/types.ts b/src/components/CookieConsent/components/ConsentPopup/types.ts
@@ -40,6 +40,8 @@ export type ConsentPopupProps = ConsentPopupData &
     CookieConsentBaseProps & {
         /* Active step */
         step?: `${ConsentPopupStep}`;
+        /* Class for the root Modal node */
+        modalClassName?: string;
     };
 
 export interface HeaderProps {