ibg-TTD-786-banners

docs/overviews/overview-advertisers.md

@@ -6,6 +6,11 @@ sidebar_position: 04
 use_banner: true
 banner_title: UID2 Overview for Advertisers
 banner_description: Upgrade campaign activation with Unified ID 2.0.
+banner_icon: 'advertisers'
+banner_text_color: ''
+banner_text_color_dark: ''
+banner_background_color: ''
+banner_background_color_dark: ''
 displayed_sidebar: sidebarAdvertisers
 ---
 

docs/overviews/overview-data-providers.md

@@ -6,6 +6,11 @@ sidebar_position: 08
 use_banner: true
 banner_title: UID2 Overview for Data Providers
 banner_description: An identity solution for the future.
+banner_icon: 'dataProviders'
+banner_text_color: ''
+banner_text_color_dark: ''
+banner_background_color: ''
+banner_background_color_dark: ''
 displayed_sidebar: sidebarDataProviders
 ---
 

docs/overviews/overview-dsps.md

@@ -6,6 +6,11 @@ sidebar_position: 06
 use_banner: true
 banner_title: UID2 Overview for DSPs
 banner_description: Enable data strategies with a more durable identifier.
+banner_icon: 'dsps'
+banner_text_color: ''
+banner_text_color_dark: ''
+banner_background_color: ''
+banner_background_color_dark: ''
 displayed_sidebar: sidebarDSPs
 ---
 

docs/overviews/overview-publishers.md

@@ -6,6 +6,11 @@ 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: 'publishers'
+banner_text_color: ''
+banner_text_color_dark: ''
+banner_background_color: ''
+banner_background_color_dark: ''
 displayed_sidebar: sidebarPublishers
 ---
 

src/components/DocsBanner/index.tsx

@@ -1,32 +1,71 @@
-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";
+import IconDocuments from "@site/static/img/documents-icon.svg";
+import IconAdvertisers from "@site/static/img/icon-page-advertisers.svg";
+import IconDataProviders from "@site/static/img/icon-page-dataproviders.svg";
+import IconDsps from "@site/static/img/icon-page-dsps.svg";
+import IconPublishers from "@site/static/img/icon-page-publishers.svg";
+
+const icons: Record<string, ComponentType<SVGProps<SVGSVGElement>>> = {
+  documents: IconDocuments,
+  advertisers: IconAdvertisers,
+  dataProviders: IconDataProviders,
+  dsps: IconDsps,
+  publishers: IconPublishers,
+};
 
 type DocsBannerProps = {
   title: string;
   description: string;
+  icon?: string;
+  textColor?: string;
+  textColorDark?: string;
+  backgroundColor?: string;
+  backgroundColorDark?: string;
 };
 
 export default function DocsBanner({
   title,
   description,
+  icon,
+  textColor,
+  textColorDark,
+  backgroundColor,
+  backgroundColorDark,
 }: DocsBannerProps): JSX.Element {
+  const Icon = (icon && icons[icon]) || icons.documents;
+
+  textColor ||= "var(--c-eleven-o-clock)"; // default banner text color
+  textColorDark ||= "var(--c-off-white)"; // default banner text color dark theme
+
+  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={
+        {
+          "--text-docs-banner": textColor,
+          "--text-docs-banner-dark": textColorDark,
+          "--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/styles.module.scss

@@ -3,13 +3,13 @@
   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;
 
   h1,
   p {
-    color: var(--c-eleven-o-clock);
+    color: var(--text-docs-banner); // var is set in html styles
     text-align: center;
 
     @media only screen and (min-width: 996px) {
@@ -34,11 +34,11 @@
   }
 
   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 {
-      color: var(--c-off-white);
+      color: var(--text-docs-banner-dark); // var is set in html styles
     }
   }
 }
@@ -55,10 +55,10 @@
 .icon {
   order: 1;
   margin-bottom: 1.3125rem;
-  color: var(--c-eleven-o-clock);
+  color: var(--text-docs-banner); // var is set in html styles
 
   html[data-theme="dark"] & {
-    color: var(--c-off-white);
+    color: var(--text-docs-banner-dark); // var is set in html styles
   }
 
   @media only screen and (min-width: 996px) {

src/theme/DocItem/Layout/index.tsx

@@ -21,6 +21,11 @@ type CustomDocFrontMatter = DocFrontMatter & {
   use_banner?: boolean;
   banner_title?: string;
   banner_description?: string;
+  banner_icon?: string;
+  banner_text_color?: string;
+  banner_text_color_dark?: string;
+  banner_background_color?: string;
+  banner_background_color_dark?: string;
 };
 
 /**
@@ -83,7 +88,17 @@ 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}
+                textColor={customFrontMatter.banner_text_color}
+                textColorDark={customFrontMatter.banner_text_color_dark}
+                backgroundColor={customFrontMatter.banner_background_color}
+                backgroundColorDark={
+                  customFrontMatter.banner_background_color_dark
+                }
+              />
             )}
             <DocVersionBadge />
             <DocItemContent>{children}</DocItemContent>