Merge pull request #805 from IABTechLab/revert-804-ibg-TTD-786-banner-tables

Revert "ibg-TTD-786-banner-tables"

Author: ibgrav

docs/overviews/overview-publishers.md

@@ -6,9 +6,6 @@ sidebar_position: 02
 use_banner: true
 banner_title: UID2 Overview for Publishers
 banner_description: Maintain audience targeting in the ever-changing advertising industry for better impression monetization and more relevance.
-banner_icon: 'documents'
-banner_background_color: ''
-banner_background_color_dark: ''
 displayed_sidebar: sidebarPublishers
 ---
 

package-lock.json

@@ -51,7 +51,7 @@
   },
   "overrides": {
     "body-parser@1": "1.20.3",
-    "path-to-regexp@0": "0.1.12",
+    "path-to-regexp@0": "0.1.10",
     "path-to-regexp@1": "1.9.0",
     "path-to-regexp@2": "8.0.0"
   },

package.json

@@ -1,54 +1,32 @@
-import React, { CSSProperties, ComponentType, SVGProps } from "react";
+import React from "react";
 import clsx from "clsx";
 import styles from "./styles.module.scss";
 import DocumentsSvg from "@site/static/img/documents-icon.svg";
 
-const icons: Record<string, ComponentType<SVGProps<SVGSVGElement>>> = {
-  documents: DocumentsSvg,
-};
-
 type DocsBannerProps = {
   title: string;
   description: string;
-  icon?: string;
-  backgroundColor?: string;
-  backgroundColorDark?: string;
 };
 
 export default function DocsBanner({
   title,
   description,
-  icon,
-  backgroundColor,
-  backgroundColorDark,
 }: DocsBannerProps): JSX.Element {
-  const Icon = (icon && icons[icon]) || icons.documents;
-
-  backgroundColor ||= "var(--c-dirty-socks)"; // default banner bg color
-  backgroundColorDark ||= "var(--c-primary-gray)"; // default banner bg color dark theme
-
   //remove the dulpicate html <header> + h1 tags within the .markdown
   React.useEffect(() => {
     const header = document.querySelector(".markdown > header");
-    if (header) header.remove();
+    if (header) {
+      header.remove();
+    }
   }, []);
 
   return (
-    <header
-      className={clsx(styles.docsBanner)}
-      style={
-        {
-          "--bg-docs-banner": backgroundColor,
-          "--bg-docs-banner-dark": backgroundColorDark,
-        } as CSSProperties
-      }
-    >
+    <header className={clsx(styles.docsBanner)}>
       <div className={styles.docsBannerLeft}>
         <h1 className="type-gamma">{title}</h1>
         <p className="type-paragraph">{description}</p>
       </div>
-
-      <Icon className={styles.icon} />
+      <DocumentsSvg className={styles.icon} />
     </header>
   );
 }

src/components/DocsBanner/index.tsx

@@ -3,7 +3,7 @@
   padding: 1.25rem;
   display: flex;
   flex-direction: column;
-  background-color: var(--bg-docs-banner); // var is set in html styles
+  background-color: var(--c-dirty-socks);
   margin-bottom: 1.875rem;
   align-items: center;
 
@@ -34,7 +34,7 @@
   }
 
   html[data-theme="dark"] & {
-    background-color: var(--bg-docs-banner-dark); // var is set in html styles
+    background-color: var(--c-primary-gray);
 
     h1,
     p {

src/components/DocsBanner/styles.module.scss

@@ -23,10 +23,6 @@
     vertical-align: top;
   }
 
-  table th {
-    text-align: left;
-  }
-
   thead {
     @extend .type-eta;
   }

src/css/markdown.scss

@@ -21,9 +21,6 @@ type CustomDocFrontMatter = DocFrontMatter & {
   use_banner?: boolean;
   banner_title?: string;
   banner_description?: string;
-  banner_icon?: string;
-  banner_background_color?: string;
-  banner_background_color_dark?: string;
 };
 
 /**
@@ -86,15 +83,7 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
             {docTOC.mobile}
             <DocBreadcrumbs />
             {useBanner && (
-              <DocsBanner
-                title={bannerTitle}
-                description={bannerDescription}
-                icon={customFrontMatter.banner_icon}
-                backgroundColor={customFrontMatter.banner_background_color}
-                backgroundColorDark={
-                  customFrontMatter.banner_background_color_dark
-                }
-              />
+              <DocsBanner title={bannerTitle} description={bannerDescription} />
             )}
             <DocVersionBadge />
             <DocItemContent>{children}</DocItemContent>