diff --git a/src/components/WithTooltip.tsx b/src/components/WithTooltip.tsx index 2d13808..34b0f14 100644 --- a/src/components/WithTooltip.tsx +++ b/src/components/WithTooltip.tsx @@ -2,11 +2,13 @@ import type { ReactNode } from 'react'; import styled, { AnyStyledComponent } from 'styled-components'; import { Content, Portal, Provider, Root, Trigger, Arrow } from '@radix-ui/react-tooltip'; +import { STRING_KEYS } from '@/constants/localization'; import { tooltipStrings } from '@/constants/tooltips'; import { useStringGetter, useURLConfigs } from '@/hooks'; import { Icon, IconName } from '@/components/Icon'; +import { Link } from '@/components/Link'; import { layoutMixins } from '@/styles/layoutMixins'; import { popoverMixins } from '@/styles/popoverMixins'; @@ -45,15 +47,17 @@ export const WithTooltip = ({ let tooltipTitle; let tooltipBody; + let tooltipLearnMore; if (getTooltipStrings) { - const { title, body } = getTooltipStrings({ + const { title, body, learnMoreLink } = getTooltipStrings({ stringGetter, stringParams, urlConfigs, }); tooltipTitle = title; tooltipBody = body; + tooltipLearnMore = learnMoreLink; } else { tooltipBody = tooltipString; } @@ -74,6 +78,13 @@ export const WithTooltip = ({
{tooltipTitle &&
{tooltipTitle}
} {tooltipBody &&
{tooltipBody}
} + {tooltipLearnMore && ( +
+ + {stringGetter({ key: STRING_KEYS.LEARN_MORE })} → + +
+ )}
)} @@ -144,3 +155,7 @@ Styled.Arrow = styled(Arrow)` Styled.Icon = styled(Icon)` color: var(--color-text-0); `; + +Styled.LearnMore = styled(Link)` + --link-color: var(--color-accent); +`;