NTP: UI Privacy Stats spacing and secondary expansion (#1270)

* chore: Update Privacy stats view

* chore: Modify the showHide button

* chore: FInalize button and spacing in card

* fix: lint

* fix: Making sure round buttons stay round

* fix: Line height for empty subtitle

* chore: Move rowmax to a const

* chore: Markup cleanpu

Author: vkraucunas

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

@@ -15,9 +15,9 @@ export function ChevronButton() {
     );
 }
 
-export function Chevron({ className }) {
+export function Chevron() {
     return (
-        <svg fill="none" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class={className}>
+        <svg fill="none" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path
                 fill="currentColor"
                 fill-rule="evenodd"

special-pages/pages/new-tab/app/components/ShowHide.module.css

@@ -11,9 +11,10 @@
     color: var(--ntp-text-normal);
     height: var(--ntp-gap);
     width: 100%;
-    border-radius: var(--border-radius-md);
+    border-radius: var(--border-radius-sm);
 
     &.round {
+        height: 2rem;
         width: 2rem;
         border-radius: 50%;
 
@@ -22,6 +23,13 @@
         }
     }
 
+    &.withText {
+        border: 1px solid var(--color-black-at-9);
+        svg {
+            margin-right: var(--sp-2);
+        }
+    }
+
     svg {
         transition: transform .3s;
     }
@@ -34,4 +42,10 @@
         opacity: 1;
         box-shadow: var(--focus-ring-thin);
     }
-}
+
+    @media (prefers-color-scheme: dark) {
+        &.withText {
+            border-color: var(--color-white-at-9);
+        } 
+    }
+}

special-pages/pages/new-tab/app/components/ShowHideButton.jsx

@@ -1,21 +1,34 @@
 import styles from './ShowHide.module.css';
 import cn from 'classnames';
-import { ChevronButton } from './Icons.js';
-import { h } from 'preact';
+import { ChevronButton, Chevron } from './Icons.js';
+import { Fragment, h } from 'preact';
 
 /**
  * Function to handle showing or hiding content based on certain conditions.
  *
  * @param {Object} props - Input parameters for controlling the behavior of the ShowHide functionality.
  * @param {string} props.text
+ * @param {boolean} [props.showText]
  * @param {() => void} props.onClick
  * @param {'none'|'round'} [props.shape]
  * @param {import("preact").ComponentProps<'button'>} [props.buttonAttrs]
  */
-export function ShowHideButton({ text, onClick, buttonAttrs = {}, shape = 'none' }) {
+export function ShowHideButton({ text, onClick, buttonAttrs = {}, shape = 'none', showText = false }) {
     return (
-        <button {...buttonAttrs} class={cn(styles.button, shape === 'round' && styles.round)} aria-label={text} onClick={onClick}>
-            <ChevronButton />
+        <button
+            {...buttonAttrs}
+            class={cn(styles.button, shape === 'round' && styles.round, !!showText && styles.withText)}
+            aria-label={text}
+            onClick={onClick}
+        >
+            {showText ? (
+                <Fragment>
+                    <Chevron />
+                    {text}
+                </Fragment>
+            ) : (
+                <ChevronButton />
+            )}
         </button>
     );
 }

special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js

@@ -1,4 +1,5 @@
 import { Fragment, h } from 'preact';
+import cn from 'classnames';
 import styles from './PrivacyStats.module.css';
 import { useTypedTranslationWith } from '../../types.js';
 import { useContext, useState, useId, useCallback } from 'preact/hooks';
@@ -105,7 +106,7 @@ export function Heading({ expansion, trackerCompanies, onToggle, buttonAttrs = {
             {none && <p className={styles.title}>{t('stats_noRecent')}</p>}
             {some && <p className={styles.title}>{alltimeTitle}</p>}
             {recent > 0 && (
-                <span className={styles.expander}>
+                <span className={styles.widgetExpander}>
                     <ShowHideButton
                         buttonAttrs={{
                             ...buttonAttrs,
@@ -119,7 +120,7 @@ export function Heading({ expansion, trackerCompanies, onToggle, buttonAttrs = {
                 </span>
             )}
             {recent === 0 && <p className={styles.subtitle}>{t('stats_noActivity')}</p>}
-            {recent > 0 && <p className={styles.subtitle}>{t('stats_feedCountBlockedPeriod')}</p>}
+            {recent > 0 && <p className={cn(styles.subtitle, styles.uppercase)}>{t('stats_feedCountBlockedPeriod')}</p>}
         </div>
     );
 }
@@ -133,11 +134,21 @@ export function Heading({ expansion, trackerCompanies, onToggle, buttonAttrs = {
 export function PrivacyStatsBody({ trackerCompanies, listAttrs = {} }) {
     const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
     const [formatter] = useState(() => new Intl.NumberFormat());
+    const defaultRowMax = 5;
     const sorted = sortStatsForDisplay(trackerCompanies);
     const max = sorted[0]?.count ?? 0;
-    const [visible, setVisible] = useState(5);
+    const [visible, setVisible] = useState(defaultRowMax);
     const hasmore = sorted.length > visible;
 
+    const toggleListExpansion = () => {
+        if (visible === defaultRowMax) {
+            setVisible(sorted.length);
+        }
+        if (visible === sorted.length) {
+            setVisible(defaultRowMax);
+        }
+    };
+
     return (
         <Fragment>
             <ul {...listAttrs} class={styles.list} data-testid="CompanyList">
@@ -153,28 +164,37 @@ export function PrivacyStatsBody({ trackerCompanies, listAttrs = {} }) {
                     if (company.displayName === DDG_STATS_OTHER_COMPANY_IDENTIFIER) {
                         const otherText = t('stats_otherCount', { count: String(company.count) });
                         return (
-                            <li key={company.displayName}>
-                                <div class={styles.textRow}>{otherText}</div>
+                            <li key={company.displayName} class={styles.otherTrackersRow}>
+                                {otherText}
                             </li>
                         );
                     }
                     return (
-                        <li key={company.displayName}>
-                            <div class={styles.row}>
-                                <div class={styles.company}>
-                                    <CompanyIcon displayName={company.displayName} />
-                                    <span class={styles.name}>{displayName}</span>
-                                </div>
-                                <span class={styles.count}>{countText}</span>
-                                <span class={styles.bar}></span>
-                                <span class={styles.fill} style={inlineStyles}></span>
+                        <li key={company.displayName} class={styles.row}>
+                            <div class={styles.company}>
+                                <CompanyIcon displayName={company.displayName} />
+                                <span class={styles.name}>{displayName}</span>
                             </div>
+                            <span class={styles.count}>{countText}</span>
+                            <span class={styles.bar}></span>
+                            <span class={styles.fill} style={inlineStyles}></span>
                         </li>
                     );
                 })}
             </ul>
-            {hasmore && visible < sorted.length && <button onClick={() => setVisible(sorted.length)}>{t('ntp_show_more')}</button>}
-            {visible > 5 && visible === sorted.length && <button onClick={() => setVisible(5)}>{t('ntp_show_less')}</button>}
+            {sorted.length > defaultRowMax && (
+                <div class={styles.listExpander}>
+                    <ShowHideButton
+                        onClick={toggleListExpansion}
+                        text={hasmore ? t('ntp_show_more') : t('ntp_show_less')}
+                        showText={true}
+                        buttonAttrs={{
+                            'aria-expanded': !hasmore,
+                            'aria-pressed': visible === sorted.length,
+                        }}
+                    />
+                </div>
+            )}
         </Fragment>
     );
 }

special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css

@@ -6,10 +6,15 @@
     display: grid;
     align-items: start;
     grid-template-columns: auto;
-    grid-row-gap: calc(18 * var(--px-in-rem));
     width: 100%;
     margin-bottom: var(--ntp-gap);
 
+    &:hover {
+        .listExpander * {
+            opacity: 1;
+        }
+    }
+
     @media screen and (prefers-color-scheme: dark) {
         border-color: var(--color-white-at-9);
     }
@@ -18,28 +23,26 @@
 .heading {
     display: grid;
     grid-template-columns: 1.5rem auto 2rem;
-    gap: var(--sp-3);
+    grid-column-gap: var(--sp-2);
+    grid-row-gap: var(--sp-1);
     grid-template-rows: auto;
     grid-template-areas: 'icon title expander';
 }
 .heading:has(.subtitle) {
     grid-template-rows: auto auto;
     grid-template-areas:
-         'icon title expander'
-        'label label label';
+        'icon title expander'
+        'empty label label';
 }
 .headingIcon {
     grid-area: icon;
     width: 1.5rem;
-    height: 1.5rem;
+    height: var(--title-2-line-height);
     position: relative;
-
-    img {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, calc(-50% - 2px));
-    }
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 2px;
 }
 
 .title {
@@ -49,7 +52,7 @@
     line-height: var(--title-2-line-height);
 }
 
-.expander {
+.widgetExpander {
     position: relative;
 
     & [aria-controls] {
@@ -63,14 +66,18 @@
 .subtitle {
     grid-area: label;
     color: var(--ntp-text-muted);
-    padding-left: 2px;
+    &.uppercase {
+        line-height: 1;
+        text-transform: uppercase;
+    }
 }
 
 .list {
     display: grid;
     grid-template-columns: auto;
     grid-row-gap: calc(6 * var(--px-in-rem));
     transition: opacity ease-in-out 0.3s, visibility ease-in-out 0.3s;
+    margin-top: 18px;
 }
 
 .entering {
@@ -120,17 +127,22 @@
 .row {
     min-height: 2rem;
     display: grid;
-    grid-gap: 0.75rem;
+    grid-gap: var(--sp-2);
     grid-template-columns: auto auto 40%;
     grid-template-areas: 'company count bar';
     align-items: center;
+
     @media screen and (min-width: 500px) {
         grid-template-columns: auto auto 60%;
     }
 }
-.textRow {
-    margin-top: 12px;
+
+.otherTrackersRow {
+    margin-top: var(--sp-3);
+    padding-left: var(--sp-1);
+    color: var(--ntp-text-muted);
 }
+
 .company {
     grid-area: company;
     display: flex;
@@ -145,12 +157,14 @@
     height: 1rem;
     border-radius: 50%;
     flex-shrink: 0;
+
     img, svg {
         display: block;
         font-size: 0;
         width: 1rem;
         height: 1rem;
     }
+
     &:has([data-errored=true]) {
         outline: 1px solid var(--ntp-surface-border-color);
         @media screen and (prefers-color-scheme: dark) {
@@ -173,6 +187,13 @@
     line-height: 1;
 }
 
+.count {
+    grid-area: count;
+    text-align: right;
+    color: var(--ntp-text-normal);
+    line-height: 1;
+}
+
 .bar {
     grid-area: bar;
     width: 100%;
@@ -190,16 +211,17 @@
     grid-area: bar;
     height: 1rem;
     border-radius: calc(20 * var(--px-in-rem));
-
     background: var(--color-black-at-6);
 
     @media screen and (prefers-color-scheme: dark) {
         background: var(--color-white-at-9);
     }
 }
 
-.count {
-    grid-area: count;
-    text-align: right;
-    color: var(--ntp-text-normal);
-}
+.listExpander {
+    margin-top: var(--sp-3);
+    button {
+        color: var(--ntp-text-muted);
+        opacity: 1;
+    }
+}