Style Fix: Rearrange and rename components in CLI dashboard.

packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx

@@ -59,11 +59,9 @@ const CookiesLandingContainer = ({
         associatedCookiesCount={Object.values(tabFrames).length}
         showMessageBoxBody={false}
         showBlockedCookiesSection
+        cookieClassificationTitle="Categories"
       >
         <div className="flex flex-col">
-          <h3 className="text-xs font-bold text-darkest-gray dark:text-bright-gray uppercase">
-            Comparative Insights
-          </h3>
           <div className="pt-4">
             <CookiesMatrix
               tabCookies={affectedCookies}
@@ -73,14 +71,10 @@ const CookiesLandingContainer = ({
                 ).legend
               }
               tabFrames={tabFrames}
-              title="Affected Cookies"
               description=""
               showInfoIcon={false}
               showHorizontalMatrix={false}
-              count={Number(Object.values(affectedCookies).length)}
               allowExpand={false}
-              highlightTitle={true}
-              capitalizeTitle={true}
             />
           </div>
         </div>

packages/design-system/src/components/cookiesLanding/cookiesMatrix/index.tsx

@@ -56,7 +56,7 @@ const CookiesMatrix = ({
   tabCookies,
   tabFrames,
   componentData = [],
-  title = 'Cookie Classification',
+  title = 'Categories',
   description = '',
   showHorizontalMatrix = true,
   showMatrix = true,

packages/design-system/src/components/cookiesLanding/cookiesMatrix/tests/cookieMatrix.tsx

@@ -31,17 +31,17 @@ describe('CookiesMatrix', () => {
   it('should render the cookies insights', () => {
     const tabCookies = mockResponse.tabCookies;
     const tabFrames = mockResponse.tabFrames;
+    const title = 'Title';
 
     const { getByTestId } = render(
       <CookiesMatrix
+        title="Title"
         tabCookies={tabCookies}
         componentData={cookiesStatsComponents.legend}
         tabFrames={tabFrames}
       />
     );
 
-    expect(
-      getByTestId('cookies-matrix-Cookie Classification')
-    ).toBeInTheDocument();
+    expect(getByTestId(`cookies-matrix-${title}`)).toBeInTheDocument();
   });
 });

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

@@ -47,6 +47,7 @@ interface CookiesLandingProps {
   };
   showFramesSection?: boolean;
   description?: React.ReactNode;
+  cookieClassificationTitle?: string;
 }
 
 const CookiesLanding = ({
@@ -62,6 +63,7 @@ const CookiesLanding = ({
   showHorizontalMatrix = false,
   description = '',
   additionalComponents = {},
+  cookieClassificationTitle,
 }: CookiesLandingProps) => {
   const cookieStats = prepareCookiesCount(tabCookies);
   const cookiesStatsComponents = prepareCookieStatsComponents(cookieStats);
@@ -112,14 +114,14 @@ const CookiesLanding = ({
               />
             ))}
         <CookiesMatrix
+          title={cookieClassificationTitle}
           tabCookies={tabCookies}
           componentData={cookiesStatsComponents.legend}
           tabFrames={tabFrames}
           showInfoIcon={showInfoIcon}
           showHorizontalMatrix={showHorizontalMatrix}
           associatedCookiesCount={associatedCookiesCount}
         />
-        {children && <div className="mt-8">{children}</div>}
       </CookiesLandingContainer>
       {showBlockedCookiesSection && (
         <CookiesLandingContainer
@@ -140,10 +142,11 @@ const CookiesLanding = ({
               />
             </>
           )}
+          {children && <div className="mt-8">{children}</div>}
         </CookiesLandingContainer>
       )}
       {/* TODO: This is not scalable. Refactor code so that components can be added from the the extension or dashboard package. */}
-      {Object.keys(additionalComponents).length &&
+      {Boolean(Object.keys(additionalComponents).length) &&
         Object.keys(additionalComponents).map((key: string) => {
           const Component = additionalComponents[key];
           return <Component key={key} />;

packages/design-system/src/components/cookiesLanding/landingHeader/index.tsx

@@ -35,7 +35,9 @@ interface LandingHeaderProps {
 const LandingHeader = ({ dataMapping = [] }: LandingHeaderProps) => {
   return (
     <div
-      className="flex justify-center border-t border-hex-gray pt-5 pb-5 dark:border-quartz"
+      className={
+        'flex justify-center border-hex-gray pt-5 pb-5 dark:border-quartz border-t'
+      }
       data-testid="cookies-landing-header"
     >
       <div className="lg:max-w-[729px] flex gap-9 px-4">

packages/design-system/src/components/cookiesLanding/tests/cookiesLanding.tsx

@@ -39,8 +39,6 @@ describe('CookiesLanding', () => {
 
     expect(getByTestId('cookies-landing')).toBeInTheDocument();
     expect(getAllByTestId('cookies-landing-header')[0]).toBeInTheDocument();
-    expect(
-      getByTestId('cookies-matrix-Cookie Classification')
-    ).toBeInTheDocument();
+    expect(getByTestId('cookies-matrix-Categories')).toBeInTheDocument();
   });
 });