Skip to content

Commit 36ccc98

Browse files
bnchrchbnchrch
authored
update(docs): Update metadata callout style (#38296)
1 parent 5237a1f commit 36ccc98

File tree

7 files changed

+141
-69
lines changed

7 files changed

+141
-69
lines changed

‎docusaurus/src/components/Callout.jsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from "react";
2+
import classNames from "classnames";
3+
import styles from "./Callout.module.css";
4+
5+
export const Callout = ({ className, ...rest }) => (
6+
<div className={classNames(className, styles.callout)} {...rest} />
7+
);

‎docusaurus/src/components/Callout.module.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.callout {
2+
background: var(--color-blue-30);
3+
border-radius: 0.3125rem;
4+
width: 100%;
5+
padding: 0.625rem 1.25rem;
6+
}

‎docusaurus/src/components/Chip.jsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from "react";
2+
import classNames from "classnames";
3+
import styles from "./Chip.module.css";
4+
5+
export const Chip = ({ className, ...rest }) => (
6+
<span className={classNames(className, styles.chip)} {...rest} />
7+
);

‎docusaurus/src/components/Chip.module.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.chip {
2+
display: inline-flex;
3+
align-items: center;
4+
justify-content: center;
5+
padding: 0.125rem 0.375rem;
6+
background-color: var(--color-grey-100);
7+
border-radius: 0.625rem;
8+
font-size: 0.625rem;
9+
line-height: 0.8rem;
10+
text-transform: uppercase;
11+
font-weight: var(--ifm-font-weight-semibold);
12+
color: var(--color-grey-900);
13+
}
14+
a .chip:hover {
15+
text-decoration: none;
16+
color: var(--ifm-link-color);
17+
}

‎docusaurus/src/components/HeaderDecoration.jsx

+75-52
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React from "react";
22
import styles from "./HeaderDecoration.module.css";
3-
4-
const capitalizeFirstLetter = (string) => {
5-
return string.charAt(0).toUpperCase() + string.slice(1);
6-
};
3+
import { Chip } from "./Chip";
4+
import { Callout } from "./Callout";
75

86
const CHECK_ICON = (
97
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
@@ -24,6 +22,65 @@ const CROSS_ICON = (
2422
</svg>
2523
);
2624

25+
26+
const MetadataStat = ({ label, children }) => (
27+
<div className={styles.metadataStat}>
28+
<dt className={styles.metadataStatLabel}>{`${label}: `}</dt>
29+
<dd className={styles.metadataStatValue}>{children}</dd>
30+
</div>
31+
);
32+
33+
const EnabledIcon = ({ isEnabled }) => {
34+
return isEnabled ? CHECK_ICON : CROSS_ICON;
35+
};
36+
37+
const ConnectorMetadataCallout = ({ isCloud, isOss, isPypiPublished, supportLevel, github_url, dockerImageTag }) => (
38+
<Callout className={styles.connectorMetadataCallout}>
39+
<dl className={styles.connectorMetadata}>
40+
<MetadataStat label="Availability">
41+
<div className={styles.availability}>
42+
<Chip className={isCloud ? styles.available : styles.unavailable}>
43+
<EnabledIcon isEnabled={isCloud} /> Airbyte Cloud
44+
</Chip>
45+
<Chip className={isOss ? styles.available : styles.unavailable}>
46+
<EnabledIcon isEnabled={isOss} /> Airbyte OSS
47+
</Chip>
48+
<Chip className={isPypiPublished ? styles.available : styles.unavailable}>
49+
<EnabledIcon isEnabled={isPypiPublished} /> PyAirbyte
50+
</Chip>
51+
</div>
52+
</MetadataStat>
53+
<MetadataStat label="Support Level">
54+
<a href="/integrations/connector-support-levels/">
55+
<Chip>{supportLevel}</Chip>
56+
</a>
57+
</MetadataStat>
58+
{supportLevel !== "archived" && (
59+
<MetadataStat label="Connector Version">
60+
<a href={github_url} target="_blank">
61+
{dockerImageTag}
62+
</a>
63+
</MetadataStat>
64+
)}
65+
</dl>
66+
</Callout>
67+
);
68+
69+
const ConnectorTitle = ({ iconUrl, originalTitle, originalId, isArchived }) => (
70+
<div className={styles.header}>
71+
<img src={iconUrl} alt="" className={styles.connectorIcon} />
72+
<h1 id={originalId}>
73+
{isArchived ? (
74+
<span>
75+
{originalTitle} <span style={{ color: "gray" }}>[ARCHIVED]</span>
76+
</span>
77+
) : (
78+
originalTitle
79+
)}
80+
</h1>
81+
</div>
82+
);
83+
2784
export const HeaderDecoration = ({
2885
isOss: isOssString,
2986
isCloud: isCloudString,
@@ -42,54 +99,20 @@ export const HeaderDecoration = ({
4299

43100
return (
44101
<>
45-
<dl className={styles.connectorMetadata}>
46-
<div>
47-
<dt>Availability</dt>
48-
<dd className={styles.availability}>
49-
<span className={isCloud ? styles.available : styles.unavailable}>
50-
{isCloud ? CHECK_ICON : CROSS_ICON} Airbyte Cloud
51-
</span>
52-
<span className={isOss ? styles.available : styles.unavailable}>
53-
{isOss ? CHECK_ICON : CROSS_ICON} Airbyte OSS
54-
</span>
55-
<span className={isPypiPublished ? styles.available : styles.unavailable}>
56-
{isPypiPublished ? CHECK_ICON : CROSS_ICON} PyAirbyte
57-
</span>
58-
</dd>
59-
</div>
60-
<div>
61-
<dt>Support Level</dt>
62-
<dd>
63-
<a href="/integrations/connector-support-levels/">
64-
{capitalizeFirstLetter(supportLevel)}
65-
</a>
66-
</dd>
67-
</div>
68-
{supportLevel !== "archived" && (
69-
<div>
70-
<dt>Latest Version</dt>
71-
72-
<dd>
73-
<a href={github_url} target="_blank">
74-
{dockerImageTag}
75-
</a>
76-
</dd>
77-
</div>
78-
)}
79-
</dl>
80-
81-
<div className={styles.header}>
82-
<img src={iconUrl} alt="" className={styles.connectorIcon} />
83-
<h1 id={originalId}>
84-
{isArchived ? (
85-
<span>
86-
{originalTitle} <span style={{ color: "gray" }}>[ARCHIVED]</span>
87-
</span>
88-
) : (
89-
originalTitle
90-
)}
91-
</h1>
92-
</div>
102+
<ConnectorTitle
103+
iconUrl={iconUrl}
104+
originalTitle={originalTitle}
105+
originalId={originalId}
106+
isArchived={isArchived}
107+
/>
108+
<ConnectorMetadataCallout
109+
isCloud={isCloud}
110+
isOss={isOss}
111+
isPypiPublished={isPypiPublished}
112+
supportLevel={supportLevel}
113+
github_url={github_url}
114+
dockerImageTag={dockerImageTag}
115+
/>
93116
</>
94117
);
95118
};

‎docusaurus/src/components/HeaderDecoration.module.css

+25-17
Original file line numberDiff line numberDiff line change
@@ -5,46 +5,54 @@
55
margin-right: 10px;
66
}
77

8+
div.connectorMetadataCallout {
9+
margin-bottom: 15px;
10+
}
11+
812
.connectorMetadata {
9-
background: var(--ifm-color-info-contrast-background);
10-
border-radius: 2px;
1113
width: 100%;
12-
font-size: smaller;
1314
margin: 0;
14-
padding: 5px;
15-
margin-bottom: 15px;
15+
display: flex;
16+
flex-direction: column;
17+
row-gap: 2px;
1618
}
1719

18-
.connectorMetadata > div {
20+
.metadataStat {
1921
display: flex;
2022
align-items: center;
21-
gap: 0.2em;
23+
font-size: 0.75rem;
24+
font-weight: var(--ifm-font-weight-normal);
2225
}
2326

24-
.connectorMetadata dt {
25-
display: inline;
26-
font-weight: bold;
27+
.metadataStatLabel {
28+
display: inline-flex;
29+
align-items: center;
30+
31+
font-weight: var(--ifm-font-weight-semibold);
32+
margin-right: 10px;
2733
}
2834

29-
.connectorMetadata dd {
30-
display: inline;
35+
.metadataStatValue {
36+
display: inline-flex;
37+
align-items: center;
3138
margin: 0;
3239
}
3340

34-
.connectorMetadata dt::after {
35-
content: ": ";
41+
.metadataStatValue > * {
42+
display: inline-flex;
43+
align-items: center;
3644
}
3745

3846
.connectorMetadata .availability {
3947
display: inline-flex;
40-
gap: 8px;
41-
margin-left: 2px;
48+
align-items: center;
49+
column-gap: 8px;
4250
}
4351

4452
.connectorMetadata .availability > span {
4553
display: inline-flex;
4654
align-items: center;
47-
gap: 2px;
55+
column-gap: 2px;
4856
}
4957

5058
.connectorMetadata .availability .unavailable {

‎docusaurus/src/css/custom.css

+4
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,11 @@
2727
--color-active-nav-item-text: var(--ifm-color-primary-darker);
2828

2929
--color-grey-40: hsl(240, 25%, 98%);
30+
--color-grey-100: hsl(240, 12%, 92%);
3031
--color-grey-400: hsl(240, 10%, 59%);
32+
--color-grey-900: hsl(240, 19%, 18%);
3133
--color-green-50: hsl(184, 67%, 92%);
34+
--color-blue-30: hsl(240, 100%, 98%);
3235
}
3336

3437
/* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -47,6 +50,7 @@ html[data-theme="dark"] {
4750
--color-grey-40: hsl(240, 14%, 14%);
4851
--color-grey-400: hsl(240, 13%, 72%);
4952
--color-green-50: hsl(184, 100%, 12%);
53+
--color-blue-30: hsl(252, 25%, 18%);
5054
}
5155

5256
.docusaurus-highlight-code-line {

0 commit comments

Comments
 (0)