From 878e848b9b61a71b5e5e04ed2e1a953b63ea1b53 Mon Sep 17 00:00:00 2001
From: Mahtis Michel <mathis.michel@outlook.de>
Date: Mon, 18 Jul 2022 22:55:26 +0200
Subject: [PATCH] feat: provide Topbar Logo as a wrappable component (#7521)

* docs(logo): added logo replace docs

Co-authored-by: Tim Lai <timothy.lai@gmail.com>
---
 docs/customization/plug-points.md | 15 +++++++++++++++
 src/plugins/topbar/index.js       |  4 +++-
 src/plugins/topbar/logo.jsx       |  8 ++++++++
 src/plugins/topbar/topbar.jsx     |  4 ++--
 4 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/plugins/topbar/logo.jsx

diff --git a/docs/customization/plug-points.md b/docs/customization/plug-points.md
index 3bac23c5005..f687e4642f2 100644
--- a/docs/customization/plug-points.md
+++ b/docs/customization/plug-points.md
@@ -41,6 +41,21 @@ const MultiplePhraseFilterPlugin = function() {
   }
 }
 ```
+### Logo component
+While using the Standalone Preset the SwaggerUI logo is rendered in the Top Bar.
+The logo can be exchanged by replacing the `Logo` component via the plugin api:
+
+```jsx
+import React from "react";
+const MyLogoPlugin = {
+  components: {
+    Logo: () => (
+      <img alt="My Logo" height="40" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTM3IiBoZWlnaHQ9IjEzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMy40Nzc2OSAwIDAgMy4yNjA2NyAtNjczLjEyOCAtNjkxLjk5MykiIHN0cm9rZT0iIzAwMCIgZm9udC1zdHlsZT0ibm9ybWFsIiBmb250LXdlaWdodD0ibm9ybWFsIiB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ic3RhcnQiIGZvbnQtZmFtaWx5PSInT3BlbiBTYW5zIEV4dHJhQm9sZCciIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfMSIgeT0iMjQxLjIyMTkyIiB4PSIxOTYuOTY5MjEiIHN0cm9rZS13aWR0aD0iMCIgZmlsbD0iIzYyYTAzZiI+TXkgTG9nbzwvdGV4dD4KICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im0zOTUuNjAyNSw1MS4xODM1OWw1My44Nzc3MSwwbDE2LjY0ODYzLC01MS4xODM1OGwxNi42NDg2NCw1MS4xODM1OGw1My44Nzc3LDBsLTQzLjU4NzksMzEuNjMyODNsMTYuNjQ5NDksNTEuMTgzNThsLTQzLjU4NzkyLC0zMS42MzM2OWwtNDMuNTg3OTEsMzEuNjMzNjlsMTYuNjQ5NDksLTUxLjE4MzU4bC00My41ODc5MiwtMzEuNjMyODN6IiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzYyYTAzZiIvPgogPC9nPgo8L3N2Zz4="/>
+    )
+  }
+}
+```
+
 
 ### JSON Schema components
 In swagger there are so called JSON Schema components. These are used to render inputs for parameters and components of request bodies with `application/x-www-form-urlencoded` or `multipart/*` media-type.
diff --git a/src/plugins/topbar/index.js b/src/plugins/topbar/index.js
index 48c1d705218..dc00e514577 100644
--- a/src/plugins/topbar/index.js
+++ b/src/plugins/topbar/index.js
@@ -1,9 +1,11 @@
 import Topbar from "./topbar"
+import Logo from "./logo"
 
 export default function () {
   return {
     components: {
-      Topbar
+      Topbar,
+      Logo
     }
   }
 }
diff --git a/src/plugins/topbar/logo.jsx b/src/plugins/topbar/logo.jsx
new file mode 100644
index 00000000000..bbfc59927fe
--- /dev/null
+++ b/src/plugins/topbar/logo.jsx
@@ -0,0 +1,8 @@
+import React from "react"
+import SwaggerUILogo from "./logo_small.svg"
+
+export const Logo = () => (
+  <img height="40" src={ SwaggerUILogo } alt="Swagger UI"/>
+)
+
+export default Logo
diff --git a/src/plugins/topbar/topbar.jsx b/src/plugins/topbar/topbar.jsx
index 4b73a505d57..3549ece5a7c 100644
--- a/src/plugins/topbar/topbar.jsx
+++ b/src/plugins/topbar/topbar.jsx
@@ -2,7 +2,6 @@ import React, { cloneElement } from "react"
 import PropTypes from "prop-types"
 
 //import "./topbar.less"
-import Logo from "./logo_small.svg"
 import {parseSearch, serializeSearch} from "../../core/utils"
 
 export default class Topbar extends React.Component {
@@ -113,6 +112,7 @@ export default class Topbar extends React.Component {
     let { getComponent, specSelectors, getConfigs } = this.props
     const Button = getComponent("Button")
     const Link = getComponent("Link")
+    const Logo = getComponent("Logo")
 
     let isLoading = specSelectors.loadingStatus() === "loading"
     let isFailed = specSelectors.loadingStatus() === "failed"
@@ -150,7 +150,7 @@ export default class Topbar extends React.Component {
         <div className="wrapper">
           <div className="topbar-wrapper">
             <Link>
-              <img height="40" src={ Logo } alt="Swagger UI"/>
+              <Logo/>
             </Link>
             <form className="download-url-wrapper" onSubmit={formOnSubmit}>
               {control.map((el, i) => cloneElement(el, { key: i }))}