Landing page enhancements and fixes

packages/design-system/src/components/bulletList/index.tsx

@@ -34,7 +34,7 @@ const BulletList = ({ rows, heading }: BulletListProps) => {
     <>
       {heading && (
         <>
-          <h2 className="text-xs font-bold uppercase text-darkest-gray">
+          <h2 className="text-xs font-bold uppercase text-darkest-gray dark:text-bright-gray">
             {heading}
           </h2>
           <hr className="border-0 border-b border-hex-gray dark:border-quartz" />

packages/design-system/src/components/bulletList/listRow.tsx

@@ -39,7 +39,7 @@ const ListRow = ({ row }: Props) => {
           href={row.link}
           target="_blank"
           rel="noreferrer"
-          className="text-sm text-analytics font-medium leading-6"
+          className="text-sm text-analytics font-medium leading-6 dark:text-medium-persian-blue"
         >
           {row.title}
         </a>

packages/design-system/src/components/landingPage/index.tsx

@@ -17,7 +17,7 @@
 /**
  * External dependencies.
  */
-import React, { useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { XMLParser } from 'fast-xml-parser';
 
@@ -30,14 +30,14 @@ import BulletList from '../bulletList';
 import { QUICK_LINKS } from './constants';
 
 interface LandingPageProps {
-  title: string;
-  embedUrl: string;
+  title?: string;
+  children?: ReactNode;
+  isLoading?: boolean;
 }
 
-const LandingPage = ({ title, embedUrl }: LandingPageProps) => {
-  const [open, setOpen] = useState(true);
+const LandingPage = ({ title, children, isLoading }: LandingPageProps) => {
+  const [open, setOpen] = useState(false);
   const [news, setNews] = useState<BulletListItem[]>([]);
-  const [loading, setLoading] = useState(true);
 
   const fetchLatestNews = async () => {
     try {
@@ -69,52 +69,54 @@ const LandingPage = ({ title, embedUrl }: LandingPageProps) => {
 
   return (
     <>
-      {loading && <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />}
-      <div className={classNames(loading && 'hidden')}>
-        <div className="flex gap-2 text-2xl font-bold pl-4 pt-6 pb-3 items-baseline border-b border-hex-gray dark:border-quartz">
-          <h1>{title}</h1>
-          <button onClick={() => setOpen((prevOpen) => !prevOpen)}>
-            <ArrowUp className={classNames(!open && 'rotate-180 -mt-3')} />
+      {isLoading && <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />}
+      <div className={classNames(isLoading && 'hidden')}>
+        <div className="px-4 pt-6 pb-3 border-b border-hex-gray dark:border-quartz">
+          <button
+            className="flex gap-2 text-2xl font-bold items-baseline dark:text-bright-gray"
+            onClick={() => setOpen((prevOpen) => !prevOpen)}
+          >
+            {title && <h1>{title}</h1>}
+            <ArrowUp
+              className={classNames(!open && 'rotate-180 -translate-y-1')}
+            />
           </button>
         </div>
-        <div className={classNames(!open && 'hidden')}>
-          {/* Section Content */}
-          <div className="pl-4 pt-6 pb-4 h-screen w-full border-b border-hex-gray dark:border-quartz">
-            <iframe
-              src={embedUrl}
-              width="70%"
-              height="100%"
-              onLoad={() => {
-                setLoading(false);
-              }}
-            />
+
+        {/* Section Content */}
+        <div
+          className={classNames(
+            !open && 'hidden',
+            'border-b border-hex-gray dark:border-quartz'
+          )}
+        >
+          {children}
+        </div>
+
+        <div className="md:max-w-[70%] flex flex-col md:flex-row px-4 pt-12 pb-24 gap-10">
+          {/* Quick Links */}
+          <div className="md:w-[35%] flex flex-col gap-4">
+            <BulletList rows={QUICK_LINKS} heading="Quick Links" />
           </div>
 
-          <div className="max-w-[70%] flex pl-4 pt-12 pb-24 gap-10">
-            {/* Quick Links */}
-            <div className="w-[35%] flex flex-col gap-4">
-              <BulletList rows={QUICK_LINKS} heading="Quick Links" />
-            </div>
+          {/* Latest News */}
+          <div className="md:w-[65%] flex flex-col gap-4">
+            <h2 className="text-xs font-bold uppercase text-darkest-gray dark:text-bright-gray">
+              Latest News
+            </h2>
+            <hr className="border-0 border-b border-hex-gray dark:border-quartz" />
+            <div className="space-y-4">
+              <BulletList rows={news} />
 
-            {/* Latest News */}
-            <div className="w-[65%] flex flex-col gap-4">
-              <h2 className="text-xs font-bold uppercase text-darkest-gray">
-                Latest News
-              </h2>
-              <hr className="border-0 border-b border-hex-gray dark:border-quartz" />
-              <div className="space-y-4">
-                <BulletList rows={news} />
-
-                <div className="ml-6">
-                  <a
-                    href="https://privacysandbox.com/news/"
-                    target="_blank"
-                    rel="noreferrer"
-                    className="leading-6 text-sm text-analytics font-semibold px-3 border border-hex-gray dark:border-quartz rounded inline-flex gap-2 items-center"
-                  >
-                    View More <ChevronRight />
-                  </a>
-                </div>
+              <div className="ml-6">
+                <a
+                  href="https://privacysandbox.com/news/"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="leading-6 text-sm text-analytics font-semibold px-3 border border-american-silver dark:border-quartz rounded inline-flex gap-2 items-center"
+                >
+                  View More <ChevronRight />
+                </a>
               </div>
             </div>
           </div>

packages/extension/src/view/design-system/components/infoCard/index.tsx

@@ -28,35 +28,51 @@ import {
   type PSInfo as PSInfoType,
   type PSInfoKeyType,
 } from '../../../../utils/fetchPSInfo';
+import classNames from 'classnames';
 
 interface InfoCardProps {
   infoKey: PSInfoKeyType;
+  setTitle?: React.Dispatch<React.SetStateAction<string>>;
+  hasHeader?: boolean;
 }
 
-const InfoCard = ({ infoKey }: InfoCardProps) => {
+const InfoCard = ({ infoKey, setTitle, hasHeader }: InfoCardProps) => {
   const [PSInfo, setPSInfo] = useState({} as PSInfoType);
 
   useEffect(() => {
     (async function () {
       const info = await fetchPSInfo(infoKey);
 
       setPSInfo(info);
+      setTitle?.(info.name);
     })();
-  }, [infoKey]);
+  }, [infoKey, setTitle]);
 
   return (
     <>
       {Object.keys(PSInfo).length ? (
-        <div className="max-w-2xl m-3">
-          <div className="p-6 dark:bg-davys-grey border border-gray-200 dark:border-quartz rounded-lg shadow">
-            <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-bright-gray">
-              {PSInfo.name}
-            </h5>
+        <div className={classNames('max-w-2xl', hasHeader && 'm-3')}>
+          <div
+            className={classNames(
+              'p-6 dark:bg-davys-grey',
+              hasHeader
+                ? 'border border-gray-200 dark:border-quartz rounded-lg shadow'
+                : 'pl-4'
+            )}
+          >
+            {hasHeader && (
+              <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-bright-gray">
+                {PSInfo.name}
+              </h5>
+            )}
             <p
-              className="mb-3 text-gray-700 dark:text-bright-gray"
+              className={classNames(
+                'mb-3 text-gray-700 dark:text-bright-gray',
+                !hasHeader && 'text-sm'
+              )}
               dangerouslySetInnerHTML={{ __html: PSInfo.description }}
             />
-            <LearnMoreDropdown PSInfo={PSInfo} />
+            <LearnMoreDropdown PSInfo={PSInfo} hasSeparator={hasHeader} />
           </div>
         </div>
       ) : (

packages/extension/src/view/design-system/components/infoCard/learnMoreDropdown.tsx

@@ -25,6 +25,7 @@ import React, { useState } from 'react';
 import type { PSInfo as PSInfoType } from '../../../../utils/fetchPSInfo';
 import RenderLink from './renderLink';
 import { ArrowRight, Button } from '@cookie-analysis-tool/design-system';
+import classNames from 'classnames';
 
 /**
  * @type {Array} LABELS - Array of objects containing the label and link label for each dropdown item.
@@ -52,10 +53,12 @@ const LABELS = [
 
 interface LearnMoreDropdownProps {
   PSInfo: PSInfoType;
+  hasSeparator?: boolean;
 }
 
 const LearnMoreDropdown = ({
   PSInfo: { proposal, publicDiscussion, videoOverview, devDocumentation },
+  hasSeparator,
 }: LearnMoreDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -80,7 +83,12 @@ const LearnMoreDropdown = ({
           </ul>
         </div>
       )}
-      <div className="pt-4 border-t border-gray-200 dark:border-gray-500">
+      <div
+        className={classNames(
+          'pt-4',
+          hasSeparator && 'border-t border-gray-200 dark:border-gray-500'
+        )}
+      >
         <Button
           text={
             isOpen ? (

packages/extension/src/view/design-system/components/infoCard/tests/infoCard.test.tsx

@@ -41,21 +41,22 @@ describe('should match the json file data with the component', () => {
 
   beforeAll(() => {
     globalThis.chrome = SinonChrome as unknown as typeof chrome;
-
+    jest.spyOn(console, 'warn').mockImplementation(() => undefined);
     globalThis.fetch = function () {
       return Promise.resolve({
         json: () =>
           Promise.resolve({
             ...PSInfo,
           }),
+        text: () => Promise.resolve({}),
       });
     } as unknown as typeof fetch;
   });
 
   test.each(tests)(
     'should match component with enum key prop to json data',
     async ({ input, output }) => {
-      render(<InfoCard infoKey={input} />);
+      render(<InfoCard infoKey={input} hasHeader={true} />);
 
       const name = await screen.findByText(output.name);
       expect(name).toBeInTheDocument();

packages/extension/src/view/devtools/components/antiCovertTracking/antiCovertTracking.tsx

@@ -17,20 +17,30 @@
 /**
  * External Dependencies
  */
-import React from 'react';
+import React, { useState } from 'react';
 
 /**
  * Internal Dependencies
  */
 import { LandingPage } from '@cookie-analysis-tool/design-system';
 
 const AntiCovertTracking = () => {
+  const [loading, setLoading] = useState(true);
+
   return (
     <>
-      <LandingPage
-        title="Tracking Protection"
-        embedUrl="https://privacysandbox.info/en/privacy-sandbox/prevent-covert-tracking"
-      />
+      <LandingPage title="Tracking Protection" isLoading={loading}>
+        <div className="px-4 pt-6 pb-4 h-screen w-full">
+          <iframe
+            src="https://privacysandbox.info/en/privacy-sandbox/prevent-covert-tracking"
+            height="100%"
+            onLoad={() => {
+              setLoading(false);
+            }}
+            className="w-full md:w-[70%]"
+          />
+        </div>
+      </LandingPage>
     </>
   );
 };

packages/extension/src/view/devtools/components/antiCovertTracking/bounceTracking/index.tsx

@@ -16,7 +16,8 @@
 /**
  * External dependencies.
  */
-import React from 'react';
+import React, { useState } from 'react';
+import { LandingPage } from '@cookie-analysis-tool/design-system';
 
 /**
  * Internal dependencies.
@@ -25,13 +26,17 @@ import InfoCard from '../../../../design-system/components/infoCard';
 import { PSInfoKey } from '../../../../../utils/fetchPSInfo';
 
 const BounceTracking = () => {
+  const [pageTitle, setPageTitle] = useState('');
+
   return (
-    <div
-      className="w-full h-full overflow-auto"
-      data-testid="bounce-tracking-content"
-    >
-      <InfoCard infoKey={PSInfoKey.BounceTracking} />
-    </div>
+    <LandingPage title={pageTitle} isLoading={!pageTitle}>
+      <div
+        className="w-full h-full overflow-auto"
+        data-testid="bounce-tracking-content"
+      >
+        <InfoCard infoKey={PSInfoKey.BounceTracking} setTitle={setPageTitle} />
+      </div>
+    </LandingPage>
   );
 };
 

packages/extension/src/view/devtools/components/antiCovertTracking/fingerprinting/index.tsx

@@ -16,22 +16,30 @@
 /**
  * External dependencies.
  */
-import React from 'react';
+import React, { useState } from 'react';
 
 /**
  * Internal dependencies.
  */
 import InfoCard from '../../../../design-system/components/infoCard';
 import { PSInfoKey } from '../../../../../utils/fetchPSInfo';
+import { LandingPage } from '@cookie-analysis-tool/design-system';
 
 const Fingerprinting = () => {
+  const [pageTitle, setPageTitle] = useState('');
+
   return (
-    <div
-      className="w-full h-full overflow-auto"
-      data-testid="fingerprinting-content"
-    >
-      <InfoCard infoKey={PSInfoKey.UserAgentReduction} />
-    </div>
+    <LandingPage title={pageTitle} isLoading={!pageTitle}>
+      <div
+        className="w-full h-full overflow-auto"
+        data-testid="fingerprinting-content"
+      >
+        <InfoCard
+          infoKey={PSInfoKey.UserAgentReduction}
+          setTitle={setPageTitle}
+        />
+      </div>
+    </LandingPage>
   );
 };