SSO pages: Teleport Single Sign-On Integrations

config.json

@@ -6,7 +6,8 @@
     },
     {
       "name": "18.x",
-      "branch": "branch/v18",
+      "branch": "aatuvai/sso-pages-teleport-sso-integrations",
+      "repo_path": "aatuvai/teleport",
       "isDefault": true
     },
     {

src/components/InlineCTA/InlineCTA.module.css

@@ -0,0 +1,10 @@
+.inlineCTA {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--m-1);
+  font-weight: var(--fw-bold);
+  text-decoration: underline;
+  color: var(--color-dark-purple);
+  margin-left: var(--m-1);
+  vertical-align: middle;
+}

src/components/InlineCTA/InlineCTA.tsx

@@ -0,0 +1,24 @@
+import Link, { Props as LinkProps } from "@docusaurus/Link";
+import * as images from "./images";
+import styles from "./InlineCTA.module.css";
+
+interface InlineCTAProps extends LinkProps {
+  imageName: keyof typeof images;
+  children: React.ReactNode;
+}
+
+const InlineCTA: React.FC<InlineCTAProps> = ({
+  imageName,
+  children,
+  ...rest
+}) => {
+  return (
+    <Link className={styles.inlineCTA} {...rest}>
+      <img src={images[imageName]} alt="" width={140} height={40} />
+      {children}
+    </Link>
+  );
+};
+
+export default InlineCTA;
+export { InlineCTAProps };

src/components/InlineCTA/images.ts

@@ -0,0 +1 @@
+export { default as ssoIntegrations } from "./imgs/sso-integrations.png";

src/components/InlineCTA/types.ts

@@ -0,0 +1,19 @@
+declare module "*.png" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.jpg" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.jpeg" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.webp" {
+  const value: string;
+  export default value;
+}

src/theme/MDXComponents/index.tsx

@@ -26,6 +26,7 @@ import TileGrid from "/src/components/TileGrid";
 import { Var } from "/src/components/Variables";
 import EnterpriseFeatureCallout from "/src/components/EnterpriseFeatureCallout";
 import { ChangelogLink } from "/src/components/ChangelogLink";
+import InlineCTA from "/src/components/InlineCTA/InlineCTA";
 
 const MDXComponents: MDXComponentsObject = {
   ...OriginalMDXComponents,
@@ -63,6 +64,7 @@ const MDXComponents: MDXComponentsObject = {
   Checkpoint,
   EnterpriseFeatureBadge,
   EnterpriseFeatureCallout,
+  InlineCTA,
 };
 
 export default MDXComponents;