diff --git a/src/components/ApiInfo/ApiInfo.tsx b/src/components/ApiInfo/ApiInfo.tsx index 019a1cec..e1fcaaea 100644 --- a/src/components/ApiInfo/ApiInfo.tsx +++ b/src/components/ApiInfo/ApiInfo.tsx @@ -101,11 +101,7 @@ export class ApiInfo extends React.Component { null} - {externalDocs && ( -

- -

- )} + {externalDocs && } diff --git a/src/components/ContentItems/ContentItems.tsx b/src/components/ContentItems/ContentItems.tsx index 293d7e6a..02efc389 100644 --- a/src/components/ContentItems/ContentItems.tsx +++ b/src/components/ContentItems/ContentItems.tsx @@ -82,9 +82,7 @@ export class SectionItem extends React.Component { {externalDocs && ( -

- -

+
)} diff --git a/src/components/ExternalDocumentation/ExternalDocumentation.tsx b/src/components/ExternalDocumentation/ExternalDocumentation.tsx index d46bda55..eb76b414 100644 --- a/src/components/ExternalDocumentation/ExternalDocumentation.tsx +++ b/src/components/ExternalDocumentation/ExternalDocumentation.tsx @@ -1,16 +1,18 @@ import { observer } from 'mobx-react'; import * as React from 'react'; -import styled from '../../styled-components'; +import styled, { withProps } from '../../styled-components'; import { OpenAPIExternalDocumentation } from '../../types'; import { linksCss } from '../Markdown/styled.elements'; -const Link = styled.span` +const LinkWrap = withProps<{ compact?: boolean }>(styled.div)` ${linksCss}; + ${({ compact }) => (!compact ? 'margin: 1em 0' : '')} `; @observer export class ExternalDocumentation extends React.Component<{ externalDocs: OpenAPIExternalDocumentation; + compact?: boolean; }> { render() { const { externalDocs } = this.props; @@ -19,9 +21,9 @@ export class ExternalDocumentation extends React.Component<{ } return ( - + {externalDocs.description || externalDocs.url} - + ); } } diff --git a/src/components/Fields/FieldDetails.tsx b/src/components/Fields/FieldDetails.tsx index 246f3ae1..2651d54b 100644 --- a/src/components/Fields/FieldDetails.tsx +++ b/src/components/Fields/FieldDetails.tsx @@ -55,9 +55,7 @@ export class FieldDetails extends React.PureComponent { {schema.externalDocs && ( -
- -
+ )} {(renderDiscriminatorSwitch && renderDiscriminatorSwitch(this.props)) || null} diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx index da647bde..320a6621 100644 --- a/src/components/Operation/Operation.tsx +++ b/src/components/Operation/Operation.tsx @@ -26,7 +26,7 @@ const OperationRow = styled(Row)` overflow: hidden; `; -const Description = styled(Markdown)` +const Description = styled.div` margin-bottom: ${({ theme }) => theme.spacing.unit * 6}px; `; @@ -40,6 +40,8 @@ export class Operation extends React.Component { const { operation } = this.props; const { name: summary, description, deprecated, externalDocs } = operation; + const hasDescription = !!(description || externalDocs); + return ( {options => ( @@ -50,11 +52,11 @@ export class Operation extends React.Component { {summary} {deprecated && Deprecated } {options.pathInMiddlePanel && } - {description !== undefined && } - {externalDocs && ( -

- -

+ {hasDescription && ( + + {description !== undefined && } + {externalDocs && } + )}