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

ibg-TTD-786-banner-tables

Author: ibgrav

docs/overviews/overview-publishers.md

@@ -6,6 +6,9 @@ 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.10",
+    "path-to-regexp@0": "0.1.12",
     "path-to-regexp@1": "1.9.0",
     "path-to-regexp@2": "8.0.0"
   },

package.json

@@ -1,32 +1,54 @@
-import React from "react";
+import React, { CSSProperties, ComponentType, SVGProps } 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)}>
+    <header
+      className={clsx(styles.docsBanner)}
+      style={
+        {
+          "--bg-docs-banner": backgroundColor,
+          "--bg-docs-banner-dark": backgroundColorDark,
+        } as CSSProperties
+      }
+    >
       <div className={styles.docsBannerLeft}>
         <h1 className="type-gamma">{title}</h1>
         <p className="type-paragraph">{description}</p>
       </div>
-      <DocumentsSvg className={styles.icon} />
+
+      <Icon className={styles.icon} />
     </header>
   );
 }

src/components/DocsBanner/index.tsx

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

src/components/DocsBanner/styles.module.scss

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

src/css/markdown.scss

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