feat: indicate whether request body is required or optional

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/).
 
 

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<ParametersProps> {
 
     const bodyDescription = body && body.description;
 
+    const bodyRequired = body && body.required;
+
     return (
       <>
         {paramsPlaces.map(place => (
           <ParametersGroup key={place} place={place} parameters={paramsMap[place]} />
         ))}
-        {bodyContent && <BodyContent content={bodyContent} description={bodyDescription} />}
+        {bodyContent && (
+          <BodyContent
+            content={bodyContent}
+            description={bodyDescription}
+            bodyRequired={bodyRequired}
+          />
+        )}
       </>
     );
   }
 }
 
-function DropdownWithinHeader(props) {
+function DropdownWithinHeader({
+  bodyRequired,
+  ...props
+}: DropdownOrLabelProps & { bodyRequired?: boolean }) {
+  const isRequired = typeof bodyRequired === 'boolean' && !!bodyRequired;
+  const isOptional = typeof bodyRequired === 'boolean' && !bodyRequired;
+
   return (
     <UnderlinedHeader key="header">
       Request Body schema: <DropdownOrLabel {...props} />
+      {isRequired && <RequiredBody>required</RequiredBody>}
+      {isOptional && <OptionalBody>optional</OptionalBody>}
     </UnderlinedHeader>
   );
 }
@@ -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 (
-    <MediaTypesSwitch content={content} renderDropdown={DropdownWithinHeader}>
+    <MediaTypesSwitch
+      content={content}
+      renderDropdown={props => <DropdownWithinHeader bodyRequired={bodyRequired} {...props} />}
+    >
       {({ schema }) => {
         return (
           <>
@@ -95,3 +117,18 @@ export function BodyContent(props: {
     </MediaTypesSwitch>
   );
 }
+
+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};
+`;