Merged in feat/profile-consent-feature-branch (pull request #2900)

feat(LOY-268): Feature branch for profiling consent work

* feat: Add feature branch for profile and consent work

* Merged in feat/LOY-268-profile-consent-banner-comp (pull request #2908)

Feat/LOY-358 profile consent banner component

* feat: Add feature branch for profile and consent work

* feat(LOY-268): create banner

* feat(LOY-268): Create personalization banner component


Approved-by: Chuma Mcphoy (We Ahead)

* feat(LOY-268): create banner

* feat(LOY-268): Create personalization banner component

* Merged in feat/profile-consent-contentstack (pull request #2921)

Feat(LOY-389): Profile consent in Contentstack

* feat(LOY-268): create banner

* feat(LOY-268): Create personalization banner component

* chore(LOY-348): add profiling consent as CS entry

* chore(LOY-348): add banner as dynamic content

Approved-by: Chuma Mcphoy (We Ahead)

* Merged in feat/LOY-347-Profile-consent-modal-phase-1 (pull request #2901)

Feat(LOY-347): Profiling Consent Modal (phase 1)

* feat(LOY-347): Profile Consent Modal base functionality

* feat(LOY-347): Add Icon

* feat(LOY-347): Add Benefit Cards to Profile consent modal

* feat(LOY-347): Add accordion to profile consent modal

* fix(LOY-347): scroll behaviour

* Fix(LOY-347): fade in/out animations of profile consent modal

* fix(LOY-347): White Ellipsis Around Icons

* feat(LOY-347): Implement ability to open modal from banner

* fix(LOY-347): minor fixes

* fix(LOY-347): replace old spa icon

* fix(LOY-347): re-add env vars

* fix(LOY-347): File renaming and cleanup

* chore(LOY-347): Update readme

* fix(LOY-347): use correct space var

* fix(LOY-347): Add TODO comment for adding link to accordion

Approved-by: Matilda Landström

* Merged in fix/LOY-386-profiling-consent-modal-contentstack (pull request #2930)

Fix(LOY-386): profiling consent modal contentstack

* feat(LOY-347): Profile Consent Modal base functionality

* feat(LOY-347): Add Icon

* feat(LOY-347): Add Benefit Cards to Profile consent modal

* feat(LOY-347): Add accordion to profile consent modal

* fix(LOY-347): scroll behaviour

* Fix(LOY-347): fade in/out animations of profile consent modal

* fix(LOY-347): White Ellipsis Around Icons

* feat(LOY-347): Implement ability to open modal from banner

* fix(LOY-347): minor fixes

* fix(LOY-347): replace old spa icon

* fix(LOY-347): re-add env vars

* fix(LOY-347): File renaming and cleanup

* fix(LOY-386): Use contentstack content for profile consent modal

* fix(LOY-386): beneift cards schema transform

* chore(LOY-386): remove usememo

* fix(LOY-386): fix modalcontent check

* fix(LOY-386): remove uneeded vars


Approved-by: Matilda Landström

* Merged in feat/LOY-412-profiling-consent-in-signup (pull request #2976)

Feat(LOY-412): profiling consent in signup

* feat(LOY-268): create banner

* feat(LOY-268): Create personalization banner component

* Merged in feat/profile-consent-contentstack (pull request #2921)

Feat(LOY-389): Profile consent in Contentstack

* feat(LOY-268): create banner

* feat(LOY-268): Create personalization banner component

* chore(LOY-348): add profiling consent as CS entry

* chore(LOY-348): add banner as dynamic content

Approved-by: Chuma Mcphoy (We Ahead)

* Merged in feat/LOY-347-Profile-consent-modal-phase-1 (pull request #2901)

Feat(LOY-347): Profiling Consent Modal (phase 1)

* feat(LOY-347): Profile Consent Modal base functionality

* feat(LOY-347): Add Icon

* feat(LOY-347): Add Benefit Cards to Profile consent modal

* feat(LOY-347): Add accordion to profile consent modal

* fix(LOY-347): scroll behaviour

* Fix(LOY-347): fade in/out animations of profile consent modal

* fix(LOY-347): White Ellipsis Around Ico…
* Merged in fix/lokalise-ids (pull request #3013)

fix: add ids to translations in Profiling Consent

* fix: add ids to translations


Approved-by: Erik Tiekstra
Approved-by: Chuma Mcphoy (We Ahead)

* Merged in LOY-436-my-pages-profiling-consent (pull request #3011)

LOY-436: Profiling Consent on My Profile, no api

Approved-by: Chuma Mcphoy (We Ahead)

* Merged in feat/LOY-418-profiling-consent-ui-text-update (pull request #3080)

Feat/LOY-418: Profiling consent ui and text update

* chore(LOY-418): update /consent buttons

* chore(LOY-418): update legal texts


Approved-by: Chuma Mcphoy (We Ahead)

* Merged in feat/LOY-268-profiling-consent-api (pull request #3088)

Approved-by: Chuma Mcphoy (We Ahead)

* Merged in feat/LOY-413-Signup-API-Profiling-Consent (pull request #3105)

Feat/LOY-413 Signup API Profiling Consent

* feat(LOY-413): signup profiling consent

* chore(LOY-413): remove todo

* fix(LOY-413): only pass in profilingConsent if true

* fix(LOY-413): proper spread of profilingConsent in signup input


Approved-by: Christel Westerberg

* Merged in fix/LOY-413-use-v2-for-signup-call (pull request #3112)

fix(LOY-413): use v2 endpoint for profile POST in signup

* fix(LOY-413): use v2 endpoint for profile POST in signup


Approved-by: Erik Tiekstra

* Merged in feat/LOY-268-profiling-consent-improvements (pull request #3094)

Feat/LOY-268: Profiling consent improvements

* Merged in feat/profile-consent-contentstack (pull request #2921)

Feat(LOY-389): Profile consent in Contentstack

* feat(LOY-268): create banner

* feat(LOY-268): Create personalization banner component

* chore(LOY-348): add profiling consent as CS entry

* chore(LOY-348): add banner as dynamic content

Approved-by: Chuma Mcphoy (We Ahead)

* Merged in feat/LOY-347-Profile-consent-modal-phase-1 (pull request #2901)

Feat(LOY-347): Profiling Consent Modal (phase 1)

* feat(LOY-347): Profile Consent Modal base functionality

* feat(LOY-347): Add Icon

* feat(LOY-347): Add Benefit Cards to Profile consent modal

* feat(LOY-347): Add accordion to profile consent modal

* fix(LOY-347): scroll behaviour

* Fix(LOY-347): fade in/out animations of profile consent modal

* fix(LOY-347): White Ellipsis Around Icons

* feat(LOY-347): Implement ability to open modal from banner

* fix(LOY-347): min…
* Merged in fix/update-graphql (pull request #3130)

fix: update graphql

* fix: update graphql


Approved-by: Chuma Mcphoy (We Ahead)

* Merged in feat/LOY-414-prof-consent-tracking (pull request #3127)

Feat/LOY-414 profile consent tracking + credit card ui update

* chore(LOY-414): create track link function

* chore(LOY-414): add cta tracking

* chore(LOY-414): add profileConsent to userInfo datalayer

* chore(LOY-414): update credit card ui

* chore(LOY-414): update tracking specs

* chore(LOY-414): add pageView tracking to modal

Approved-by: Chuma Mcphoy (We Ahead)

* fix: remove old flag

* Merged in fix/LOY-268-prof-consent-button-fix (pull request #3162)

fix(LOY-268): add button as link

* fix(LOY-268): add button as link


Approved-by: Chuma Mcphoy (We Ahead)


Approved-by: Matilda Landström

packages/design-system/lib/components/Tooltip/index.tsx

@@ -3,7 +3,7 @@ import { type PropsWithChildren, useState } from 'react'
 import { tooltipVariants } from './variants'
 
 import styles from './tooltip.module.css'
-import Caption from '../Caption'
+import { Typography } from '../Typography'
 
 type TooltipPosition = 'left' | 'right' | 'top' | 'bottom'
 type VerticalArrow = 'top' | 'bottom' | 'center'
@@ -26,6 +26,7 @@ interface TooltipProps<P extends TooltipPosition = TooltipPosition> {
   position: P
   arrow: ValidArrow<P>
   isTouchable?: boolean
+  isVisible?: boolean
 }
 
 export function Tooltip<P extends TooltipPosition>({
@@ -35,6 +36,7 @@ export function Tooltip<P extends TooltipPosition>({
   arrow,
   children,
   isTouchable = false,
+  isVisible = true,
 }: PropsWithChildren<TooltipProps<P>>) {
   const className = tooltipVariants({ position, arrow })
   const [isActive, setIsActive] = useState(false)
@@ -50,6 +52,10 @@ export function Tooltip<P extends TooltipPosition>({
     }
   }
 
+  if (!isVisible) {
+    return <> {children} </>
+  }
+
   return (
     <div
       className={styles.tooltipContainer}
@@ -62,12 +68,16 @@ export function Tooltip<P extends TooltipPosition>({
       data-active={isActive}
     >
       <div className={className}>
-        {heading && (
-          <Caption type="bold" color="white">
-            {heading}
-          </Caption>
-        )}
-        {text && <Caption color="white">{text}</Caption>}
+        {heading ? (
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <p>{heading}</p>
+          </Typography>
+        ) : null}
+        {text ? (
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>{text} </p>
+          </Typography>
+        ) : null}
       </div>
       {children}
     </div>