New Tab Page and NTP Widget styles (#1229)

* fix: NextSteps bubble position, rm the unused mock provider

* chore: Add RMF to default page, adjust NextSteps styels

* chore: Add common border radii 4, 6, 8, 12px

* fix: tests, first attempt

* reverting adding the RMF to the default page

* feat: Add hover show/hide on NExtSteps

* chore: Add focus ring consistency

* chore: Update text colors to use ntp theme values

* chore: remove unneeded css

* wip

* fix: file names

* fix: bubble location

* fix: addAppToDockMac NextSteps variant

* chore: Add 0 gap option to Stack, use in WidgetList

* chore: remove ShowHideButtonWithText, update ShowHideButton to handle full width and round variations

* chore: Update ChevronButton Icon

* chore: Add long title option to the Favorites data

* chore: Adjust widget spacing values

* chore: A few cleanups

* chore: Reorg RMF

* chore: Reorg PrivacyStats

* fix: PrivacyStats reorg

* chore: Reorg Customizer

* chore: Update Examples

* fix: Favorites tests

* chore: Add type info to the Examples in each widget

* fix: Examples view

* fix: Component item relative to contain absolutely positioned items

* chore: Rename example files consistently

* chore: UpdateNotification added to correct space, switched to DismissButton usage

* fix: lint

* chore: Remove unneeded color

* chore: Add a gap var to the ntp-theme css and apply across widgets

* rebase bugfix

* chore: Fix rmf spacing

* fix: Favorites test

* fix: thin focus ring

---------

Co-authored-by: Shane Osbourne <[email protected]>

Author: vkraucunas

special-pages/messages/new-tab/examples/widgets.js

@@ -32,6 +32,8 @@ const widgetConfig = {
 const initialSetupResponse = {
     widgets: [{ id: 'updateNotification' }, { id: 'rmf' }, { id: 'favorites' }, { id: 'privacyStats' }],
     widgetConfigs: [
+        { id: 'rmf', visibility: 'visible' },
+        { id: 'nextSteps', visibility: 'visible' },
         { id: 'favorites', visibility: 'visible' },
         { id: 'privacyStats', visibility: 'visible' },
     ],

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

@@ -1,13 +1,11 @@
 import { Fragment, h } from 'preact';
 import styles from './Components.module.css';
 import { mainExamples, otherExamples } from './Examples.jsx';
-import { updateNotificationExamples } from '../update-notification/UpdateNotification.examples.js';
 const url = new URL(window.location.href);
 
 const list = {
     ...mainExamples,
     ...otherExamples,
-    ...updateNotificationExamples,
 };
 
 const entries = Object.entries(list);

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

@@ -35,7 +35,7 @@ body[data-display="components"] {
     color: var(--ntp-text-normal);
     padding: 0.2em 0.3em;
     border: 1px solid var(--color-gray-60);
-    border-radius: 4px;
+    border-radius: var(--border-radius-xs);
     display: inline-block;
     line-height: 1;
     text-decoration: none;
@@ -72,7 +72,6 @@ body[data-display="components"] {
     gap: 1rem; /* Adjust the gap size as needed */
 }
 
-.selectItem {
+.item {
+    position: relative;
 }
-
-.item {}

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

@@ -2,18 +2,15 @@
     border-width: 0;
     text-wrap: nowrap;
     font-weight: 600;
-    font-size: calc(11 * var(--px-in-rem));
-    line-height: calc(11 * var(--px-in-rem));
-    color: var(--ntp-color-primary);
     height: 1rem;
     width: 1rem;
     padding: 0;
     line-height: 1;
     background-color: transparent;
-    color: var(--color-black-at-60);
+    color: var(--ntp-text-muted);
     border: none;
     border-radius: 50%;
-
+    transition: all .3s;
 
     &:hover {
         background-color: var(--color-black-at-9);
@@ -22,7 +19,7 @@
 
     &:active {
         background-color: var(--color-black-at-18);
-        color: var(--color-black-at-84);
+        color: var(--ntp-text-normal);
     }
 
     &:disabled {
@@ -35,20 +32,17 @@
     }
 
     &:focus-visible {
-        box-shadow: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ntp-focus-outline-color);
+        box-shadow: var(--focus-ring);
+        outline: none;
     }
 
     @media screen and (prefers-color-scheme: dark) {
-        color: var(--color-white-at-60);
-
-
         &:hover {
             background-color: var(--color-black-at-9);
         }
 
         &:active {
             background-color: var(--color-white-at-18);
-            color: var(--color-white-at-84);
         }
 
         &:disabled {
@@ -60,42 +54,5 @@
             cursor: not-allowed;
             background-color: var(--color-white-at-12);
         }
-
-        &:focus-visible {
-            box-shadow: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 3px var(--color-white);
-        }
-    }
-}
-/* 
-.dismissBtn {
-    height: 1rem;
-    width: 1rem;
-    padding: 0;
-    line-height: 1;
-    background-color: transparent;
-    color: var(--color-black-at-60);
-    border: none;
-    border-radius: 50%;
-
-    &:active {
-        background-color: var(--color-black-at-18);
-        color: var(--color-black-at-84);
-    }
-
-    &:hover {
-        background-color: var(--color-black-at-9);
-    }
-
-    @media screen and (prefers-color-scheme: dark) {
-        color: var(--color-white-at-60);
-
-        &:hover {
-            background-color: var(--color-white-at-9);
-        }
-
-        &:active {
-            background-color: var(--color-white-at-18);
-            color: var(--color-white-at-84);
-        }
     }
-} */
+}

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

@@ -1,172 +1,24 @@
-import { Fragment, h } from 'preact';
-import { PrivacyStatsMockProvider } from '../privacy-stats/mocks/PrivacyStatsMockProvider.js';
-import { Body, Heading, PrivacyStatsConsumer } from '../privacy-stats/PrivacyStats.js';
-import { RemoteMessagingFramework } from '../remote-messaging-framework/RemoteMessagingFramework.js';
-import { nextStepsExamples, otherNextStepsExamples } from '../next-steps/components/NextStepsExamples.js';
-import { stats } from '../privacy-stats/mocks/stats.js';
+import { h } from 'preact';
+import { favoritesExamples } from '../favorites/components/Favorites.examples.js';
+import { otherPrivacyStatsExamples, privacyStatsExamples } from '../privacy-stats/components/PrivacyStats.examples.js';
+import { nextStepsExamples, otherNextStepsExamples } from '../next-steps/components/NextSteps.examples.js';
+import { otherRMFExamples, RMFExamples } from '../remote-messaging-framework/components/RMF.examples.js';
+import { customizerExamples } from '../customizer/components/Customizer.examples.js';
 import { noop } from '../utils.js';
-import { VisibilityMenu } from '../customizer/VisibilityMenu.js';
-import { CustomizerButton } from '../customizer/Customizer.js';
-import { rmfDataExamples } from '../remote-messaging-framework/mocks/rmf.data.js';
-import { favoritesExamples } from '../favorites/components/FavoritesExamples.js';
+import { updateNotificationExamples } from '../update-notification/components/UpdateNotification.examples.js';
 
 /** @type {Record<string, {factory: () => import("preact").ComponentChild}>} */
 export const mainExamples = {
-    'stats.few': {
-        factory: () => (
-            <PrivacyStatsMockProvider ticker={true}>
-                <PrivacyStatsConsumer />
-            </PrivacyStatsMockProvider>
-        ),
-    },
-    'stats.few.collapsed': {
-        factory: () => (
-            <PrivacyStatsMockProvider config={{ expansion: 'collapsed' }}>
-                <PrivacyStatsConsumer />
-            </PrivacyStatsMockProvider>
-        ),
-    },
-    'stats.single': {
-        factory: () => (
-            <PrivacyStatsMockProvider data={stats.single}>
-                <PrivacyStatsConsumer />
-            </PrivacyStatsMockProvider>
-        ),
-    },
-    'stats.none': {
-        factory: () => (
-            <PrivacyStatsMockProvider data={stats.none}>
-                <PrivacyStatsConsumer />
-            </PrivacyStatsMockProvider>
-        ),
-    },
-    'stats.norecent': {
-        factory: () => (
-            <PrivacyStatsMockProvider data={stats.norecent}>
-                <PrivacyStatsConsumer />
-            </PrivacyStatsMockProvider>
-        ),
-    },
-    'stats.list': {
-        factory: () => <Body trackerCompanies={stats.few.trackerCompanies} listAttrs={{ id: 'example-stats.list' }} />,
-    },
-    'stats.heading': {
-        factory: () => (
-            <Heading
-                trackerCompanies={stats.few.trackerCompanies}
-                totalCount={stats.few.totalCount}
-                expansion={'expanded'}
-                onToggle={noop('stats.heading onToggle')}
-            />
-        ),
-    },
-    'stats.heading.none': {
-        factory: () => (
-            <Heading
-                trackerCompanies={stats.none.trackerCompanies}
-                totalCount={stats.none.totalCount}
-                expansion={'expanded'}
-                onToggle={noop('stats.heading onToggle')}
-            />
-        ),
-    },
-    'rmf.small': {
-        factory: () => <RemoteMessagingFramework message={rmfDataExamples.small.content} dismiss={() => {}} />,
-    },
-    'rmf.medium': {
-        factory: () => <RemoteMessagingFramework message={rmfDataExamples.medium.content} dismiss={() => {}} />,
-    },
-    'rmf.big-single-action': {
-        factory: () => (
-            <RemoteMessagingFramework message={rmfDataExamples.big_single_action.content} primaryAction={() => {}} dismiss={() => {}} />
-        ),
-    },
-    'rmf.big-two-action': {
-        factory: () => (
-            <RemoteMessagingFramework
-                message={rmfDataExamples.big_two_action.content}
-                primaryAction={() => {}}
-                secondaryAction={() => {}}
-                dismiss={() => {}}
-            />
-        ),
-    },
     ...favoritesExamples,
     ...nextStepsExamples,
+    ...privacyStatsExamples,
+    ...RMFExamples,
 };
 
 export const otherExamples = {
-    'stats.without-animation': {
-        factory: () => (
-            <PrivacyStatsMockProvider
-                ticker={true}
-                config={{
-                    expansion: 'expanded',
-                    animation: { kind: 'none' },
-                }}
-            >
-                <PrivacyStatsConsumer />
-            </PrivacyStatsMockProvider>
-        ),
-    },
-    'stats.with-view-transitions': {
-        factory: () => (
-            <PrivacyStatsMockProvider
-                ticker={true}
-                config={{
-                    expansion: 'expanded',
-                    animation: { kind: 'view-transitions' },
-                }}
-            >
-                <PrivacyStatsConsumer />
-            </PrivacyStatsMockProvider>
-        ),
-    },
-    'rmf.big-two-action-overflow': {
-        factory: () => (
-            <RemoteMessagingFramework
-                message={rmfDataExamples.big_two_action_overflow.content}
-                primaryAction={() => {}}
-                secondaryAction={() => {}}
-                dismiss={() => {}}
-            />
-        ),
-    },
     ...otherNextStepsExamples,
-    'customizer-menu': {
-        factory: () => (
-            <Fragment>
-                <div>
-                    <CustomizerButton isOpen={true} />
-                </div>
-                <br />
-                <MaxContent>
-                    <VisibilityMenu
-                        rows={[
-                            {
-                                id: 'favorites',
-                                title: 'Favorites',
-                                icon: 'star',
-                                toggle: noop('toggle favorites'),
-                                visibility: 'hidden',
-                                index: 0,
-                            },
-                            {
-                                id: 'privacyStats',
-                                title: 'Privacy Stats',
-                                icon: 'shield',
-                                toggle: noop('toggle favorites'),
-                                visibility: 'visible',
-                                index: 1,
-                            },
-                        ]}
-                    />
-                </MaxContent>
-            </Fragment>
-        ),
-    },
+    ...otherPrivacyStatsExamples,
+    ...otherRMFExamples,
+    ...customizerExamples,
+    ...updateNotificationExamples,
 };
-
-function MaxContent({ children }) {
-    return <div style={{ display: 'grid', gridTemplateColumns: 'max-content' }}>{children}</div>;
-}

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

@@ -3,7 +3,7 @@ import styles from './Icons.module.css';
 
 export function ChevronButton() {
     return (
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class={styles.chevron}>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class={styles.chevronButton}>
             <rect fill="black" fill-opacity="0.06" width="24" height="24" rx="12" class={styles.chevronCircle} />
             <path
                 fill="black"

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

@@ -1,11 +1,11 @@
-.chevron {
+.chevronButton {
     &:hover .chevronCircle {
         fill: black;
         fill-opacity: 0.06;
 
         @media screen and (prefers-color-scheme: dark) {
             fill: white;
-            fill-opacity: 0.12
+            fill-opacity: 0.12;
         }
     }
 }
@@ -18,11 +18,8 @@
 .chevronArrow {
     @media screen and (prefers-color-scheme: dark) {
         fill: white;
-        fill-opacity: 0.5
+        fill-opacity: 0.5;
     }
 }
 
-.customize {
-
-}