update(docs): Update metadata callout style (#38296)

airbytehq · May 22, 2024 · 36ccc98 · 36ccc98
1 parent 5237a1f
commit 36ccc98
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 69 deletions.
diff --git a/docusaurus/src/components/Callout.jsx b/docusaurus/src/components/Callout.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+import classNames from "classnames";
+import styles from "./Callout.module.css";
+
+export const Callout = ({ className, ...rest }) => (
+  <div className={classNames(className, styles.callout)} {...rest} />
+);
diff --git a/docusaurus/src/components/Callout.module.css b/docusaurus/src/components/Callout.module.css
@@ -0,0 +1,6 @@
+.callout {
+  background: var(--color-blue-30);
+  border-radius: 0.3125rem;
+  width: 100%;
+  padding: 0.625rem 1.25rem;
+}
diff --git a/docusaurus/src/components/Chip.jsx b/docusaurus/src/components/Chip.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+import classNames from "classnames";
+import styles from "./Chip.module.css";
+
+export const Chip = ({ className, ...rest }) => (
+  <span className={classNames(className, styles.chip)} {...rest} />
+);
diff --git a/docusaurus/src/components/Chip.module.css b/docusaurus/src/components/Chip.module.css
@@ -0,0 +1,17 @@
+.chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem 0.375rem;
+  background-color: var(--color-grey-100);
+  border-radius: 0.625rem;
+  font-size: 0.625rem;
+  line-height: 0.8rem;
+  text-transform: uppercase;
+  font-weight: var(--ifm-font-weight-semibold);
+  color: var(--color-grey-900);
+}
+a .chip:hover {
+  text-decoration: none;
+  color: var(--ifm-link-color);
+}
diff --git a/docusaurus/src/components/HeaderDecoration.jsx b/docusaurus/src/components/HeaderDecoration.jsx
@@ -1,9 +1,7 @@
 import React from "react";
 import styles from "./HeaderDecoration.module.css";
-
-const capitalizeFirstLetter = (string) => {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-};
+import { Chip } from "./Chip";
+import { Callout } from "./Callout";
 
 const CHECK_ICON = (
   <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
@@ -24,6 +22,65 @@ const CROSS_ICON = (
   </svg>
 );
 
+
+const MetadataStat = ({ label, children }) => (
+  <div className={styles.metadataStat}>
+    <dt className={styles.metadataStatLabel}>{`${label}: `}</dt>
+    <dd className={styles.metadataStatValue}>{children}</dd>
+  </div>
+);
+
+const EnabledIcon = ({ isEnabled }) => {
+  return isEnabled ? CHECK_ICON : CROSS_ICON;
+};
+
+const ConnectorMetadataCallout = ({ isCloud, isOss, isPypiPublished, supportLevel, github_url, dockerImageTag }) => (
+  <Callout className={styles.connectorMetadataCallout}>
+    <dl className={styles.connectorMetadata}>
+      <MetadataStat label="Availability">
+        <div className={styles.availability}>
+          <Chip className={isCloud ? styles.available : styles.unavailable}>
+            <EnabledIcon isEnabled={isCloud} /> Airbyte Cloud
+          </Chip>
+          <Chip className={isOss ? styles.available : styles.unavailable}>
+            <EnabledIcon isEnabled={isOss} /> Airbyte OSS
+          </Chip>
+          <Chip className={isPypiPublished ? styles.available : styles.unavailable}>
+            <EnabledIcon isEnabled={isPypiPublished} /> PyAirbyte
+          </Chip>
+        </div>
+      </MetadataStat>
+      <MetadataStat label="Support Level">
+        <a href="/integrations/connector-support-levels/">
+          <Chip>{supportLevel}</Chip>
+        </a>
+      </MetadataStat>
+      {supportLevel !== "archived" && (
+        <MetadataStat label="Connector Version">
+          <a href={github_url} target="_blank">
+            {dockerImageTag}
+          </a>
+        </MetadataStat>
+      )}
+    </dl>
+  </Callout>
+);
+
+const ConnectorTitle = ({ iconUrl, originalTitle, originalId, isArchived }) => (
+  <div className={styles.header}>
+    <img src={iconUrl} alt="" className={styles.connectorIcon} />
+    <h1 id={originalId}>
+      {isArchived ? (
+        <span>
+          {originalTitle} <span style={{ color: "gray" }}>[ARCHIVED]</span>
+        </span>
+      ) : (
+        originalTitle
+      )}
+    </h1>
+  </div>
+);
+
 export const HeaderDecoration = ({
   isOss: isOssString,
   isCloud: isCloudString,
@@ -42,54 +99,20 @@ export const HeaderDecoration = ({
 
   return (
     <>
-      <dl className={styles.connectorMetadata}>
-        <div>
-          <dt>Availability</dt>
-          <dd className={styles.availability}>
-            <span className={isCloud ? styles.available : styles.unavailable}>
-              {isCloud ? CHECK_ICON : CROSS_ICON} Airbyte Cloud
-            </span>
-            <span className={isOss ? styles.available : styles.unavailable}>
-              {isOss ? CHECK_ICON : CROSS_ICON} Airbyte OSS
-            </span>
-            <span className={isPypiPublished ? styles.available : styles.unavailable}>
-              {isPypiPublished ? CHECK_ICON : CROSS_ICON} PyAirbyte
-            </span>
-          </dd>
-        </div>
-        <div>
-          <dt>Support Level</dt>
-          <dd>
-            <a href="/integrations/connector-support-levels/">
-              {capitalizeFirstLetter(supportLevel)}
-            </a>
-          </dd>
-        </div>
-        {supportLevel !== "archived" && (
-          <div>
-            <dt>Latest Version</dt>
-
-            <dd>
-              <a href={github_url} target="_blank">
-                {dockerImageTag}
-              </a>
-            </dd>
-          </div>
-        )}
-      </dl>
-
-      <div className={styles.header}>
-        <img src={iconUrl} alt="" className={styles.connectorIcon} />
-        <h1 id={originalId}>
-          {isArchived ? (
-            <span>
-              {originalTitle} <span style={{ color: "gray" }}>[ARCHIVED]</span>
-            </span>
-          ) : (
-            originalTitle
-          )}
-        </h1>
-      </div>
+      <ConnectorTitle
+        iconUrl={iconUrl}
+        originalTitle={originalTitle}
+        originalId={originalId}
+        isArchived={isArchived}
+      />
+      <ConnectorMetadataCallout
+        isCloud={isCloud}
+        isOss={isOss}
+        isPypiPublished={isPypiPublished}
+        supportLevel={supportLevel}
+        github_url={github_url}
+        dockerImageTag={dockerImageTag}
+      />
     </>
   );
 };
diff --git a/docusaurus/src/components/HeaderDecoration.module.css b/docusaurus/src/components/HeaderDecoration.module.css
@@ -5,46 +5,54 @@
   margin-right: 10px;
 }
 
+div.connectorMetadataCallout  {
+  margin-bottom: 15px;
+}
+
 .connectorMetadata {
-  background: var(--ifm-color-info-contrast-background);
-  border-radius: 2px;
   width: 100%;
-  font-size: smaller;
   margin: 0;
-  padding: 5px;
-  margin-bottom: 15px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 2px;
 }
 
-.connectorMetadata > div {
+.metadataStat {
   display: flex;
   align-items: center;
-  gap: 0.2em;
+  font-size: 0.75rem;
+  font-weight: var(--ifm-font-weight-normal);
 }
 
-.connectorMetadata dt {
-  display: inline;
-  font-weight: bold;
+.metadataStatLabel {
+  display: inline-flex;
+  align-items: center;
+
+  font-weight: var(--ifm-font-weight-semibold);
+  margin-right: 10px;
 }
 
-.connectorMetadata dd {
-  display: inline;
+.metadataStatValue {
+  display: inline-flex;
+  align-items: center;
   margin: 0;
 }
 
-.connectorMetadata dt::after {
-  content: ": ";
+.metadataStatValue > * {
+  display: inline-flex;
+  align-items: center;
 }
 
 .connectorMetadata .availability {
   display: inline-flex;
-  gap: 8px;
-  margin-left: 2px;
+  align-items: center;
+  column-gap: 8px;
 }
 
 .connectorMetadata .availability > span {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
+  column-gap: 2px;
 }
 
 .connectorMetadata .availability .unavailable {

diff --git a/docusaurus/src/css/custom.css b/docusaurus/src/css/custom.css
@@ -27,8 +27,11 @@
   --color-active-nav-item-text: var(--ifm-color-primary-darker);
 
   --color-grey-40: hsl(240, 25%, 98%);
+  --color-grey-100: hsl(240, 12%, 92%);
   --color-grey-400: hsl(240, 10%, 59%);
+  --color-grey-900: hsl(240, 19%, 18%);
   --color-green-50: hsl(184, 67%, 92%);
+  --color-blue-30: hsl(240, 100%, 98%);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -47,6 +50,7 @@ html[data-theme="dark"] {
   --color-grey-40: hsl(240, 14%, 14%);
   --color-grey-400: hsl(240, 13%, 72%);
   --color-green-50: hsl(184, 100%, 12%);
+  --color-blue-30: hsl(252, 25%, 18%);
 }
 
 .docusaurus-highlight-code-line {