diff --git a/README.md b/README.md index 8838d132..22009305 100644 --- a/README.md +++ b/README.md @@ -177,7 +177,7 @@ to render your OpenAPI definition, refer to the [**Redoc quickstart guide**](https://redocly.com/docs/redoc/quickstart/) and [**How to use the HTML element**](https://redocly.com/docs/redoc/deployment/html/). ## Redoc CLI -For more information on Redoc's commmand-line interface, refer to +For more information on Redoc's command-line interface, refer to [**Using the Redoc CLI**](https://redocly.com/docs/redoc/deployment/cli/). diff --git a/src/components/Parameters/Parameters.tsx b/src/components/Parameters/Parameters.tsx index 3f4275df..93d39152 100644 --- a/src/components/Parameters/Parameters.tsx +++ b/src/components/Parameters/Parameters.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel'; +import { DropdownOrLabel, DropdownOrLabelProps } from '../DropdownOrLabel/DropdownOrLabel'; import { ParametersGroup } from './ParametersGroup'; import { UnderlinedHeader } from '../../common-elements'; @@ -11,6 +11,8 @@ import { Schema } from '../Schema'; import { Markdown } from '../Markdown/Markdown'; import { ConstraintsView } from '../Fields/FieldContstraints'; +import { RequiredLabel } from '../../common-elements/fields'; +import styled from '../../styled-components'; function safePush(obj, prop, item) { if (!obj[prop]) { @@ -49,21 +51,37 @@ export class Parameters extends React.PureComponent { const bodyDescription = body && body.description; + const bodyRequired = body && body.required; + return ( <> {paramsPlaces.map(place => ( ))} - {bodyContent && } + {bodyContent && ( + + )} ); } } -function DropdownWithinHeader(props) { +function DropdownWithinHeader({ + bodyRequired, + ...props +}: DropdownOrLabelProps & { bodyRequired?: boolean }) { + const isRequired = typeof bodyRequired === 'boolean' && !!bodyRequired; + const isOptional = typeof bodyRequired === 'boolean' && !bodyRequired; + return ( Request Body schema: + {isRequired && required} + {isOptional && optional} ); } @@ -71,11 +89,15 @@ function DropdownWithinHeader(props) { export function BodyContent(props: { content: MediaContentModel; description?: string; + bodyRequired?: boolean; }): JSX.Element { - const { content, description } = props; + const { content, description, bodyRequired } = props; const { isRequestType } = content; return ( - + } + > {({ schema }) => { return ( <> @@ -95,3 +117,18 @@ export function BodyContent(props: { ); } + +const commonStyles = ` + text-transform: lowercase; + margin-left: 0; + line-height: 1.5em; +`; + +const RequiredBody = styled(RequiredLabel)` + ${commonStyles} +`; + +const OptionalBody = styled('div')` + ${commonStyles} + color: ${({ theme }) => theme.colors.text.secondary}; +`;