Skip to content

Commit 8cfea17

Browse files
ibgravibgrav
authored
Merge pull request #807 from IABTechLab/ibg-TTD-786-banners
ibg-TTD-786-banners
2 parents 7a148e0 + fd22f7a commit 8cfea17

File tree

12 files changed

+131
-17
lines changed

12 files changed

+131
-17
lines changed

‎docs/overviews/overview-advertisers.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ sidebar_position: 04
66
use_banner: true
77
banner_title: UID2 Overview for Advertisers
88
banner_description: Upgrade campaign activation with Unified ID 2.0.
9+
banner_icon: 'advertisers'
10+
banner_text_color: ''
11+
banner_text_color_dark: ''
12+
banner_background_color: ''
13+
banner_background_color_dark: ''
914
displayed_sidebar: sidebarAdvertisers
1015
---
1116

‎docs/overviews/overview-data-providers.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ sidebar_position: 08
66
use_banner: true
77
banner_title: UID2 Overview for Data Providers
88
banner_description: An identity solution for the future.
9+
banner_icon: 'dataProviders'
10+
banner_text_color: ''
11+
banner_text_color_dark: ''
12+
banner_background_color: ''
13+
banner_background_color_dark: ''
914
displayed_sidebar: sidebarDataProviders
1015
---
1116

‎docs/overviews/overview-dsps.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ sidebar_position: 06
66
use_banner: true
77
banner_title: UID2 Overview for DSPs
88
banner_description: Enable data strategies with a more durable identifier.
9+
banner_icon: 'dsps'
10+
banner_text_color: ''
11+
banner_text_color_dark: ''
12+
banner_background_color: ''
13+
banner_background_color_dark: ''
914
displayed_sidebar: sidebarDSPs
1015
---
1116

‎docs/overviews/overview-publishers.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ sidebar_position: 02
66
use_banner: true
77
banner_title: UID2 Overview for Publishers
88
banner_description: Maintain audience targeting in the ever-changing advertising industry for better impression monetization and more relevance.
9+
banner_icon: 'publishers'
10+
banner_text_color: ''
11+
banner_text_color_dark: ''
12+
banner_background_color: ''
13+
banner_background_color_dark: ''
914
displayed_sidebar: sidebarPublishers
1015
---
1116

‎package-lock.json‎

Lines changed: 4 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/DocsBanner/index.tsx‎

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,71 @@
1-
import React from "react";
1+
import React, { CSSProperties, ComponentType, SVGProps } from "react";
22
import clsx from "clsx";
33
import styles from "./styles.module.scss";
4-
import DocumentsSvg from "@site/static/img/documents-icon.svg";
4+
import IconDocuments from "@site/static/img/documents-icon.svg";
5+
import IconAdvertisers from "@site/static/img/icon-page-advertisers.svg";
6+
import IconDataProviders from "@site/static/img/icon-page-dataproviders.svg";
7+
import IconDsps from "@site/static/img/icon-page-dsps.svg";
8+
import IconPublishers from "@site/static/img/icon-page-publishers.svg";
9+
10+
const icons: Record<string, ComponentType<SVGProps<SVGSVGElement>>> = {
11+
documents: IconDocuments,
12+
advertisers: IconAdvertisers,
13+
dataProviders: IconDataProviders,
14+
dsps: IconDsps,
15+
publishers: IconPublishers,
16+
};
517

618
type DocsBannerProps = {
719
title: string;
820
description: string;
21+
icon?: string;
22+
textColor?: string;
23+
textColorDark?: string;
24+
backgroundColor?: string;
25+
backgroundColorDark?: string;
926
};
1027

1128
export default function DocsBanner({
1229
title,
1330
description,
31+
icon,
32+
textColor,
33+
textColorDark,
34+
backgroundColor,
35+
backgroundColorDark,
1436
}: DocsBannerProps): JSX.Element {
37+
const Icon = (icon && icons[icon]) || icons.documents;
38+
39+
textColor ||= "var(--c-eleven-o-clock)"; // default banner text color
40+
textColorDark ||= "var(--c-off-white)"; // default banner text color dark theme
41+
42+
backgroundColor ||= "var(--c-dirty-socks)"; // default banner bg color
43+
backgroundColorDark ||= "var(--c-primary-gray)"; // default banner bg color dark theme
44+
1545
//remove the dulpicate html <header> + h1 tags within the .markdown
1646
React.useEffect(() => {
1747
const header = document.querySelector(".markdown > header");
18-
if (header) {
19-
header.remove();
20-
}
48+
if (header) header.remove();
2149
}, []);
2250

2351
return (
24-
<header className={clsx(styles.docsBanner)}>
52+
<header
53+
className={clsx(styles.docsBanner)}
54+
style={
55+
{
56+
"--text-docs-banner": textColor,
57+
"--text-docs-banner-dark": textColorDark,
58+
"--bg-docs-banner": backgroundColor,
59+
"--bg-docs-banner-dark": backgroundColorDark,
60+
} as CSSProperties
61+
}
62+
>
2563
<div className={styles.docsBannerLeft}>
2664
<h1 className="type-gamma">{title}</h1>
2765
<p className="type-paragraph">{description}</p>
2866
</div>
29-
<DocumentsSvg className={styles.icon} />
67+
68+
<Icon className={styles.icon} />
3069
</header>
3170
);
3271
}

‎src/components/DocsBanner/styles.module.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
padding: 1.25rem;
44
display: flex;
55
flex-direction: column;
6-
background-color: var(--c-dirty-socks);
6+
background-color: var(--bg-docs-banner); // var is set in html styles
77
margin-bottom: 1.875rem;
88
align-items: center;
99

1010
h1,
1111
p {
12-
color: var(--c-eleven-o-clock);
12+
color: var(--text-docs-banner); // var is set in html styles
1313
text-align: center;
1414

1515
@media only screen and (min-width: 996px) {
@@ -34,11 +34,11 @@
3434
}
3535

3636
html[data-theme="dark"] & {
37-
background-color: var(--c-primary-gray);
37+
background-color: var(--bg-docs-banner-dark); // var is set in html styles
3838

3939
h1,
4040
p {
41-
color: var(--c-off-white);
41+
color: var(--text-docs-banner-dark); // var is set in html styles
4242
}
4343
}
4444
}
@@ -55,10 +55,10 @@
5555
.icon {
5656
order: 1;
5757
margin-bottom: 1.3125rem;
58-
color: var(--c-eleven-o-clock);
58+
color: var(--text-docs-banner); // var is set in html styles
5959

6060
html[data-theme="dark"] & {
61-
color: var(--c-off-white);
61+
color: var(--text-docs-banner-dark); // var is set in html styles
6262
}
6363

6464
@media only screen and (min-width: 996px) {

‎src/theme/DocItem/Layout/index.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ type CustomDocFrontMatter = DocFrontMatter & {
2121
use_banner?: boolean;
2222
banner_title?: string;
2323
banner_description?: string;
24+
banner_icon?: string;
25+
banner_text_color?: string;
26+
banner_text_color_dark?: string;
27+
banner_background_color?: string;
28+
banner_background_color_dark?: string;
2429
};
2530

2631
/**
@@ -83,7 +88,17 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
8388
{docTOC.mobile}
8489
<DocBreadcrumbs />
8590
{useBanner && (
86-
<DocsBanner title={bannerTitle} description={bannerDescription} />
91+
<DocsBanner
92+
title={bannerTitle}
93+
description={bannerDescription}
94+
icon={customFrontMatter.banner_icon}
95+
textColor={customFrontMatter.banner_text_color}
96+
textColorDark={customFrontMatter.banner_text_color_dark}
97+
backgroundColor={customFrontMatter.banner_background_color}
98+
backgroundColorDark={
99+
customFrontMatter.banner_background_color_dark
100+
}
101+
/>
87102
)}
88103
<DocVersionBadge />
89104
<DocItemContent>{children}</DocItemContent>

‎static/img/icon-page-advertisers.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎static/img/icon-page-dataproviders.svg‎

Lines changed: 6 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)