diff --git a/docs/redoc-vendor-extensions.md b/docs/redoc-vendor-extensions.md index 9ed239ce..2ff4d83e 100644 --- a/docs/redoc-vendor-extensions.md +++ b/docs/redoc-vendor-extensions.md @@ -120,12 +120,13 @@ Extends the OpenAPI [Info Object](https://redocly.com/docs/openapi-visual-refere The information about API logo #### Fixed fields -| Field Name | Type | Description | -| :-------------- | :------: | :---------- | +| Field Name | Type | Description | +| :-------------- | :------: |:---------------------------------------------------------------------------------------------------------------------------------------------------| | 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. | -| href | string | The URL pointing to the contact page. Default to 'info.contact.url' field of the OAS. | +| 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. | +| href | string | The URL pointing to the contact page. Default to 'info.contact.url' field of the OAS. | +| hrefTarget | string | The target of the generated anchor tag. | #### x-logo example diff --git a/src/components/ApiLogo/ApiLogo.tsx b/src/components/ApiLogo/ApiLogo.tsx index bd959e38..dac9bdc2 100644 --- a/src/components/ApiLogo/ApiLogo.tsx +++ b/src/components/ApiLogo/ApiLogo.tsx @@ -13,6 +13,7 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> { } const logoHref = logoInfo.href || (info.contact && info.contact.url); + const logoHrefTarget = logoInfo.hrefTarget; // Use the english word logo if no alt text is provided const altText = logoInfo.altText ? logoInfo.altText : 'logo'; @@ -20,7 +21,7 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> { const logo = ; return ( - {logoHref ? LinkWrap(logoHref)(logo) : logo} + {logoHref ? LinkWrap({ url: logoHref, target: logoHrefTarget })(logo) : logo} ); } diff --git a/src/components/ApiLogo/styled.elements.tsx b/src/components/ApiLogo/styled.elements.tsx index 54339089..fd2ed791 100644 --- a/src/components/ApiLogo/styled.elements.tsx +++ b/src/components/ApiLogo/styled.elements.tsx @@ -17,5 +17,12 @@ const Link = styled.a` display: inline-block; `; -// eslint-disable-next-line react/display-name -export const LinkWrap = url => Component => {Component}; +export const LinkWrap = + ({ url, target }) => + // eslint-disable-next-line react/display-name + Component => + ( + + {Component} + + );