Merge pull request #2155 from navikt/consent-banner-link

Consent banner link

Author: terjeofnorway

src/components/macros/MacroMapper.tsx

@@ -28,6 +28,7 @@ import { MacroIngress } from './ingress/MacroIngress';
 import { MacroAlertBox } from './alert-box/MacroAlertBox';
 import { MacroSaksbehandlingstid } from './saksbehandlingstid/MacroSaksbehandlingstid';
 import { MacroPayoutDates } from './payout-dates/MacroPayoutDates';
+import { MacroConsentBannerLink } from './consent-banner-link/MacroConsentBannerLink';
 
 const macroComponents: {
     [key in MacroType]: React.FunctionComponent<MacroPropsCommon>;
@@ -37,6 +38,7 @@ const macroComponents: {
     [MacroType.ButtonBlue]: MacroButton,
     [MacroType.Saksbehandlingstid]: MacroSaksbehandlingstid,
     [MacroType.ChatbotLink]: MacroChatbotLink,
+    [MacroType.ConsentBannerLink]: MacroConsentBannerLink,
     [MacroType.ChevronLinkExternal]: MacroChevronLinkExternal,
     [MacroType.ChevronLinkInternal]: MacroChevronLinkInternal,
     [MacroType.Fotnote]: MacroFotnote,

src/components/macros/consent-banner-link/MacroConsentBannerLink.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { LenkeInline } from 'components/_common/lenke/lenkeInline/LenkeInline';
+import { Button } from 'components/_common/button/Button';
+import { MacroConsentBannerLinkProps } from 'types/macro-props/consent-banner-link';
+
+type ExtraProps = {
+    variant?: 'secondary';
+};
+
+export const MacroConsentBannerLink = ({ config }: MacroConsentBannerLinkProps) => {
+    if (!config?.consent_banner_link) {
+        return null;
+    }
+
+    const { text, presentation = 'link' } = config.consent_banner_link;
+
+    const Element = presentation === 'link' ? LenkeInline : Button;
+    const extraProps: ExtraProps = presentation === 'link' ? {} : { variant: 'secondary' };
+
+    return (
+        <Element
+            href={'/'}
+            onClick={(e) => {
+                e.preventDefault();
+                window.webStorageController?.showConsentBanner();
+            }}
+            {...extraProps}
+        >
+            {text}
+        </Element>
+    );
+};

src/types/macro-props/_macros-common.ts

@@ -3,6 +3,7 @@ export enum MacroType {
     Button = 'button',
     ButtonBlue = 'button-blue',
     ChatbotLink = 'chatbot-link',
+    ConsentBannerLink = 'consent-banner-link',
     ChevronLinkInternal = 'chevron-link-internal',
     ChevronLinkExternal = 'chevron-link-external',
     Fotnote = 'fotnote',

src/types/macro-props/consent-banner-link.ts

@@ -0,0 +1,11 @@
+import { MacroPropsCommon, MacroType } from './_macros-common';
+
+export interface MacroConsentBannerLinkProps extends MacroPropsCommon {
+    name: MacroType.ChevronLinkExternal;
+    config: {
+        consent_banner_link: {
+            text: string;
+            presentation: 'button' | 'link';
+        };
+    };
+}

src/window.d.ts

@@ -10,6 +10,7 @@ declare global {
             destroy: (widgetId: string, deleteElement?: boolean) => any;
             widgets: (widgetId: string) => any;
         };
+        webStorageController: any;
     }
 
     interface WindowEventMap {