Skip to content

Commit 42112ab

Browse files
jsoningramjsoningram
committed
Implement tooltip
Adjust animation
1 parent 3507b6c commit 42112ab

File tree

7 files changed

+105
-11
lines changed

7 files changed

+105
-11
lines changed

‎special-pages/pages/new-tab/app/components/Icons.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -621,15 +621,14 @@ export function NewBadgeIcon(props) {
621621
*/
622622
export function InfoIcon(props) {
623623
return (
624-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
625-
<path d="M8.48319 3.64453C7.73951 3.64453 7.28748 4.24239 7.28748 4.7965C7.28748 5.46726 7.79784 5.68599 8.24988 5.68599C9.08104 5.68599 9.43101 5.05897 9.43101 4.54861C9.43101 3.907 8.92064 3.64453 8.48319 3.64453Z" fill="black" fill-opacity="0.36"/>
626-
<path d="M8.91304 6.54504L7.08645 6.84036C7.03054 7.28244 6.95011 7.72956 6.86842 8.18373C6.71074 9.06033 6.54834 9.96319 6.54834 10.9066C6.54834 11.8434 7.10858 12.3547 7.99455 12.3547C9.00639 12.3547 9.17956 11.7196 9.21882 11.1442C8.37999 11.2659 8.19573 10.8873 8.33282 9.99619C8.46991 9.10509 8.91304 6.54504 8.91304 6.54504Z" fill="black" fill-opacity="0.36"/>
624+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon" {...props}>
625+
<path d="M8.48319 3.64453C7.73951 3.64453 7.28748 4.24239 7.28748 4.7965C7.28748 5.46726 7.79784 5.68599 8.24988 5.68599C9.08104 5.68599 9.43101 5.05897 9.43101 4.54861C9.43101 3.907 8.92064 3.64453 8.48319 3.64453Z" class="info-icon-fill"/>
626+
<path d="M8.91304 6.54504L7.08645 6.84036C7.03054 7.28244 6.95011 7.72956 6.86842 8.18373C6.71074 9.06033 6.54834 9.96319 6.54834 10.9066C6.54834 11.8434 7.10858 12.3547 7.99455 12.3547C9.00639 12.3547 9.17956 11.7196 9.21882 11.1442C8.37999 11.2659 8.19573 10.8873 8.33282 9.99619C8.46991 9.10509 8.91304 6.54504 8.91304 6.54504Z" class="info-icon-fill"/>
627627
<path
628628
fill-rule="evenodd"
629629
clip-rule="evenodd"
630630
d="M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM1.25 8C1.25 4.27208 4.27208 1.25 8 1.25C11.7279 1.25 14.75 4.27208 14.75 8C14.75 11.7279 11.7279 14.75 8 14.75C4.27208 14.75 1.25 11.7279 1.25 8Z"
631-
fill="black"
632-
fill-opacity="0.36"
631+
class="info-icon-fill"
633632
/>
634633
</svg>
635634
);

‎special-pages/pages/new-tab/app/components/Icons.module.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,13 @@
1818
}
1919
}
2020

21+
/* InfoIcon styles */
22+
:global(.info-icon-fill) {
23+
fill: black;
24+
fill-opacity: 0.36;
25+
}
2126

27+
[data-theme=dark] :global(.info-icon-fill) {
28+
fill: white;
29+
fill-opacity: 0.24;
30+
}

‎special-pages/pages/new-tab/app/components/Tooltip/Tooltip.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { h } from 'preact';
2+
import { useState } from 'preact/hooks';
3+
import styles from './Tooltip.module.css';
4+
import cn from 'classnames';
5+
6+
/**
7+
* A tooltip component that appears on hover
8+
* @param {Object} props
9+
* @param {import('preact').ComponentChildren} props.children - The element that triggers the tooltip
10+
* @param {string} props.content - The tooltip content text
11+
* @param {string} [props.className] - Additional CSS classes for the trigger element
12+
*/
13+
export function Tooltip({ children, content, className }) {
14+
const [isVisible, setIsVisible] = useState(false);
15+
16+
return (
17+
<div
18+
class={cn(styles.tooltipContainer, className)}
19+
onMouseEnter={() => setIsVisible(true)}
20+
onMouseLeave={() => setIsVisible(false)}
21+
>
22+
{children}
23+
{isVisible && (
24+
<div class={styles.tooltip} role="tooltip" dangerouslySetInnerHTML={{__html: content}} />
25+
)}
26+
</div>
27+
);
28+
}

‎special-pages/pages/new-tab/app/components/Tooltip/Tooltip.module.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.tooltipContainer {
2+
position: relative;
3+
display: inline-flex;
4+
align-items: center;
5+
}
6+
7+
.tooltip {
8+
position: absolute;
9+
bottom: -20px;
10+
left: calc(100% + 8px);
11+
padding: 8px 16px;
12+
border-radius: 12px;
13+
background-color: rgba(255, 255, 255, 0.98);
14+
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.20);
15+
font-size: 12px;
16+
line-height: 15px;
17+
color: var(--color-black-at-96);
18+
white-space: normal;
19+
width: 236px;
20+
z-index: 1000;
21+
animation: tooltipFadeIn 0.7s ease-out;
22+
23+
& span {
24+
display: block;
25+
margin-top: 22px;
26+
}
27+
}
28+
29+
/* Dark mode styles */
30+
[data-theme="dark"] .tooltip {
31+
background-color: rgb(71, 71, 71);
32+
color: var(--color-white-at-96);
33+
}
34+
35+
@keyframes tooltipFadeIn {
36+
from {
37+
opacity: 0;
38+
transform: translateX(-10px);
39+
}
40+
to {
41+
opacity: 1;
42+
transform: translateX(0);
43+
}
44+
}

‎special-pages/pages/new-tab/app/privacy-stats/strings.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@
4747
"title": "Cookie pop-ups blocked",
4848
"note": "The heading indicating multiple cookie pop-ups were handled by the CPM"
4949
},
50+
"stats_protectionsReportInfo": {
51+
"title": "Displays tracking attempts blocked in the last 7 days and the number of cookie pop-ups blocked since you started using the browser. <span>You can reset these stats using the Fire Button.</span>",
52+
"note": "Text explaining how to reset the protections stats"
53+
},
5054
"stats_feedCountBlockedSingular": {
5155
"title": "1 attempt blocked by DuckDuckGo in the last 7 days",
5256
"note": "A summary description of how many tracking attempts where blocked, when only one exists."

‎special-pages/pages/new-tab/app/protections/components/ProtectionsHeading.js‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ShowHideButtonCircle } from '../../components/ShowHideButton.jsx';
44
import cn from 'classnames';
55
import { h } from 'preact';
66
import { InfoIcon, NewBadgeIcon } from '../../components/Icons.js';
7+
import { Tooltip } from '../../components/Tooltip/Tooltip.js';
78

89
/**
910
* @import enStrings from "../strings.json"
@@ -21,11 +22,12 @@ import { InfoIcon, NewBadgeIcon } from '../../components/Icons.js';
2122
export function ProtectionsHeading({ expansion, canExpand, blockedCountSignal, onToggle, buttonAttrs = {}, totalCookiePopUpsBlockedSignal }) {
2223
const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
2324
const totalTrackersBlocked = blockedCountSignal.value;
24-
const totalCookiePopUpsBlocked = totalCookiePopUpsBlockedSignal.value;
25+
const totalCookiePopUpsBlocked = totalCookiePopUpsBlockedSignal.value ?? 0;
2526

26-
// @todo jingram get these values from native
27-
const isCpmEnabled = true; // Is Cookie pop-up protection in app
28-
const shouldShowCookiePopUpsBlocked = true; // from ProtectionsConfig
27+
// Native does not tell the FE if cookie pop up protection is enabled but
28+
// we can derive this from the value of `totalCookiePopUpsBlocked` in the
29+
// `ProtectionsService`
30+
const isCpmEnabled = totalCookiePopUpsBlockedSignal.value !== null;
2931

3032
const trackersBlockedHeading = totalTrackersBlocked === 1
3133
? t('stats_countBlockedSingular')
@@ -42,7 +44,11 @@ export function ProtectionsHeading({ expansion, canExpand, blockedCountSignal, o
4244
<img src={'./icons/Shield-Check-Color-16.svg'} alt="Privacy Shield" />
4345
</span>
4446
<h2 class={styles.caption}>{t('protections_menuTitle')}</h2>
45-
<InfoIcon class={styles.infoIcon}/>
47+
48+
<Tooltip content={t('stats_protectionsReportInfo')}>
49+
<InfoIcon class={styles.infoIcon}/>
50+
</Tooltip>
51+
4652
{canExpand && (
4753
<span class={styles.widgetExpander}>
4854
<ShowHideButtonCircle
@@ -75,7 +81,7 @@ export function ProtectionsHeading({ expansion, canExpand, blockedCountSignal, o
7581
{/* Rules: Display CPM stats when Cookie Pop-Up Protection is
7682
enabled AND both `totalTrackersBlocked` and
7783
`totalCookiePopUpsBlocked` are at least 1 */}
78-
{(shouldShowCookiePopUpsBlocked && isCpmEnabled && totalTrackersBlocked > 0 && totalCookiePopUpsBlocked > 0) && (
84+
{(isCpmEnabled && totalTrackersBlocked > 0 && totalCookiePopUpsBlocked > 0) && (
7985
<div class={styles.counter}>
8086
<h3 class={styles.title}>
8187
<span>{totalCookiePopUpsBlocked}</span>

‎special-pages/pages/new-tab/public/locales/en/new-tab.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,10 @@
109109
"title": "Cookie pop-ups blocked",
110110
"note": "The heading indicating multiple cookie pop-ups were handled by the CPM"
111111
},
112+
"stats_protectionsReportInfo": {
113+
"title": "Displays tracking attempts blocked in the last 7 days and the number of cookie pop-ups blocked since you started using the browser. <span>You can reset these stats using the Fire Button.</span>",
114+
"note": "Text explaining how to reset the protections stats"
115+
},
112116
"stats_feedCountBlockedSingular": {
113117
"title": "1 attempt blocked by DuckDuckGo in the last 7 days",
114118
"note": "A summary description of how many tracking attempts where blocked, when only one exists."

0 commit comments

Comments
 (0)