From 568ce74077735b32f63bdad405bd3d8cb8b0ab5e Mon Sep 17 00:00:00 2001
From: Sheila Kelly <36901025+viralanomaly@users.noreply.github.com>
Date: Thu, 2 Aug 2018 07:27:38 -0500
Subject: [PATCH] feat: Add x-logo alt text support (#584)

Fixes #546
---
 demo/big-openapi.json              | 3 ++-
 demo/openapi.yaml                  | 1 +
 demo/swagger.yaml                  | 1 +
 docs/redoc-vendor-extensions.md    | 5 ++++-
 src/components/ApiLogo/ApiLogo.tsx | 9 ++++++++-
 5 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/demo/big-openapi.json b/demo/big-openapi.json
index 802918a6..fa23ccfa 100644
--- a/demo/big-openapi.json
+++ b/demo/big-openapi.json
@@ -25,7 +25,8 @@
     "termsOfService": "https://www.rebilly.com/terms/",
     "x-logo": {
       "url": "https://rebilly.github.io/RebillyAPI/rb_apiLogo.svg",
-      "backgroundColor": "#0033A0"
+      "backgroundColor": "#0033A0",
+      "altText": "Rebilly API logo"
     },
     "description": "# Introduction\nThe Rebilly API is built on HTTP.  Our API is RESTful.  It has predictable\nresource URLs.  It returns HTTP response codes to indicate errors.  It also\naccepts and returns JSON in the HTTP body.  You can use your favorite\nHTTP/REST library for your programming language to use Rebilly's API, or\nyou can use one of our SDKs (currently available in [PHP](https://github.com/Rebilly/rebilly-php)\nand [C#](https://github.com/Rebilly/rebilly-dotnet-client)).\n\n# Authentication\nWhen you sign up for an account, you are given your first API key.\nYou can generate additional API keys, and delete API keys (as you may\nneed to rotate your keys in the future). You authenticate to the\nRebilly API by providing your secret key in the request header.\n\nRebilly offers three forms of authentication:  private key, JSON Web Tokens, and\npublic key.\n- private key: authenticates each request by searching for the presence\nof an HTTP header: REB-APIKEY.\n- JWT: authenticates each request by the HTTP header: Authorization.\n- public key: authenticates by the HTTP header: REB-AUTH (read more on this below).\n\nRebilly also offers JSON Web Tokens (JWT) authentication, where you can control\nthe specific granular permissions and expiration for that JWT.  We call our resource\nfor generating JWT [Sessions](#tag/Sessions).\n\nRebilly also has a client-side authentication scheme that uses an\napiUser and HMAC-SHA1 signature (only for the Tokens resource), so\nthat you may safely create tokens from the client-side without compromising\nyour secret keys.\n\nNever share your secret keys. Keep them guarded and secure.\nThe client-side authentication scheme uses one HTTP header named REB-AUTH.\n\n\n\n# PHP SDK\nFor all PHP SDK examples provided in this spec you will need to configure `$client`.\nYou may do it like this:\n\n```php\n$client = new Rebilly\\Client([\n    'apiKey' => 'YourApiKeyHere',\n    'baseUrl' => 'https://api.rebilly.com',\n]);\n```\n"
   },
diff --git a/demo/openapi.yaml b/demo/openapi.yaml
index bec9abd2..94ca4d11 100644
--- a/demo/openapi.yaml
+++ b/demo/openapi.yaml
@@ -49,6 +49,7 @@ info:
     url: https://github.com/Rebilly/ReDoc
   x-logo:
     url: 'https://rebilly.github.io/ReDoc/petstore-logo.png'
+    altText: Petstore logo
   license:
     name: Apache 2.0
     url: 'http://www.apache.org/licenses/LICENSE-2.0.html'
diff --git a/demo/swagger.yaml b/demo/swagger.yaml
index 8f297975..f298383c 100644
--- a/demo/swagger.yaml
+++ b/demo/swagger.yaml
@@ -42,6 +42,7 @@ info:
     url: https://github.com/Rebilly/ReDoc
   x-logo:
     url: 'https://rebilly.github.io/ReDoc/petstore-logo.png'
+    altText: Petstore logo
   license:
     name: Apache 2.0
     url: 'http://www.apache.org/licenses/LICENSE-2.0.html'
diff --git a/docs/redoc-vendor-extensions.md b/docs/redoc-vendor-extensions.md
index 72168426..062aec3c 100644
--- a/docs/redoc-vendor-extensions.md
+++ b/docs/redoc-vendor-extensions.md
@@ -95,6 +95,7 @@ The information about API logo
 | :-------------- | :------: | :---------- |
 | url             | string   | The URL pointing to the spec logo. MUST be in the format of a URL. It SHOULD be an absolute URL so your API definition is usable from any location
 | backgroundColor | string   | background color to be used. MUST be RGB color in [hexadecimal format] (https://en.wikipedia.org/wiki/Web_colors#Hex_triplet)
+| altText        | string   | Text to use for alt tag on the logo. Defaults to 'logo' if nothing is provided.
 
 
 ###### x-logo example
@@ -106,7 +107,8 @@ json
     "title": "Swagger Petstore",
     "x-logo": {
       "url": "https://rebilly.github.io/ReDoc/petstore-logo.png",
-      "backgroundColor": "#FFFFFF"
+      "backgroundColor": "#FFFFFF",
+      "altText": "Petstore logo"
     }
   }
 }
@@ -119,6 +121,7 @@ info:
   x-logo:
     url: "https://rebilly.github.io/ReDoc/petstore-logo.png"
     backgroundColor: "#FFFFFF"
+    altText: "Petstore logo"
 ```
 
 
diff --git a/src/components/ApiLogo/ApiLogo.tsx b/src/components/ApiLogo/ApiLogo.tsx
index d08b2b4b..290b862d 100644
--- a/src/components/ApiLogo/ApiLogo.tsx
+++ b/src/components/ApiLogo/ApiLogo.tsx
@@ -12,8 +12,15 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
       return null;
     }
 
+    // Use the english word logo if no alt text is provided
+    const altText = logoInfo.altText ? logoInfo.altText : 'logo';
+
     const logo = (
-      <LogoImgEl src={logoInfo.url} style={{ backgroundColor: logoInfo.backgroundColor }} />
+      <LogoImgEl
+        src={logoInfo.url}
+        style={{ backgroundColor: logoInfo.backgroundColor }}
+        alt={altText}
+      />
     );
     return (
       <LogoWrap>