diff --git a/docs/css.md b/docs/css.md new file mode 100644 index 00000000..13739c02 --- /dev/null +++ b/docs/css.md @@ -0,0 +1,67 @@ +--- +title: Redoc CSS Guide +--- + +# Custom CSS Overrides Guide + +Certain components and containers in this project have been given unique classNames to allow for easier CSS overriding. + +## List of Unique ClassNames + +### Operations + + - `middle-panel`: top level container for content in the middle panel of an **Operation** + - `right-panel`: top level container for content in the right panel of an **Operation** + - `operation-header`: `

` that contains the **Operation** header/summary + - `operation-description`: container for the **Operation** description + +### Security + + - `operation-security`: top level container for the Security/Auth section in an **Operation** + - `security-details`: container for an individual security method in the Security/Auth section + +### Parameters + - `operation-parameters`: container for **Operation** query/path/header/form parameters + +### Requests + + - `operation-request-samples`: top level container for the **Request Samples** section in the right panel + - `request-code-sample`: container for the request code samples in the right panel + - `request-payload`: container for the request payload sample in the right panel + +### Responses + + - `operation-responses`: top level container for the **Responses** section in the middle panel + - `response`: container for individual responses in the **Responses** section + - `response-headers`: `` for response headers for an individual response + - `operation-response-samples`: top level container for the **Response Samples** section in the right panel + - `response-sample`: container for the response payload sample in the right panel + +### Callbacks + + - `callbacks`: top level container for the **Callbacks** section in the middle panel + - `callback`: container for individual callbacks in the **Callbacks** section + - `operation-callback-samples`: top level container for the **Callback Samples** section in the right panel + - `callback-sample`: container for the callback payload sample in the right panel + +### Schemas + + - `array-schema`: container for array schema + - `object-schema`: `` for object schema + - `oneOf-schema`: container for oneOf schema + - `recursive-schema` container for recursive schema + +### Fields + + - `field`: `` for individual fields inside a **Schema** + - `field-details`: container for details on an individual **Field** + - `field-constraints`: `` for constraints on an individual **Field** inside the field details + - `field-deprecated`: deprecated badge for an individual **Field** inside the field details + - `field-example`: example value for an individual **Field** inside the field details + - `field-pattern`: regex pattern for an individual **Field** inside the field details + +### Other + + - `side-menu`: top level container for the sidebar menu + - `endpoint`: container for the endpoint URL used in multiple places + - `request-body-description`: container for the description of a request body used in multiple places diff --git a/src/components/CallbackSamples/CallbackReqSamples.tsx b/src/components/CallbackSamples/CallbackReqSamples.tsx index e7a51723..b9a188f6 100644 --- a/src/components/CallbackSamples/CallbackReqSamples.tsx +++ b/src/components/CallbackSamples/CallbackReqSamples.tsx @@ -23,7 +23,7 @@ export class CallbackPayloadSample extends React.Component { } return ( - + ); diff --git a/src/components/CallbackSamples/CallbackSamples.tsx b/src/components/CallbackSamples/CallbackSamples.tsx index 60bdf5a6..2279f0a8 100644 --- a/src/components/CallbackSamples/CallbackSamples.tsx +++ b/src/components/CallbackSamples/CallbackSamples.tsx @@ -56,7 +56,7 @@ export class CallbackSamples extends React.Component { }); return ( -
+
Callback payload samples diff --git a/src/components/Callbacks/CallbackDetails.tsx b/src/components/Callbacks/CallbackDetails.tsx index ce003c56..481c5d97 100644 --- a/src/components/Callbacks/CallbackDetails.tsx +++ b/src/components/Callbacks/CallbackDetails.tsx @@ -24,7 +24,7 @@ export class CallbackDetails extends React.Component { const hasDescription = !!(description || externalDocs); return ( - + {hasDescription && ( {description !== undefined && } diff --git a/src/components/Callbacks/CallbacksList.tsx b/src/components/Callbacks/CallbacksList.tsx index 8ef40654..6409d1c0 100644 --- a/src/components/Callbacks/CallbacksList.tsx +++ b/src/components/Callbacks/CallbacksList.tsx @@ -17,7 +17,7 @@ export class CallbacksList extends React.PureComponent { } return ( -
+
Callbacks {callbacks.map(callback => { return callback.operations.map((operation, index) => { diff --git a/src/components/Endpoint/Endpoint.tsx b/src/components/Endpoint/Endpoint.tsx index 9579eeca..f5723a5c 100644 --- a/src/components/Endpoint/Endpoint.tsx +++ b/src/components/Endpoint/Endpoint.tsx @@ -48,7 +48,7 @@ export class Endpoint extends React.Component { return ( {options => ( - + {operation.httpVerb} diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx index 5c35b04b..0ed14046 100644 --- a/src/components/Fields/Field.tsx +++ b/src/components/Fields/Field.tsx @@ -90,7 +90,7 @@ export class Field extends React.Component { return ( <> - + {paramName} diff --git a/src/components/Fields/FieldContstraints.tsx b/src/components/Fields/FieldContstraints.tsx index c92e8f5c..7e5c831f 100644 --- a/src/components/Fields/FieldContstraints.tsx +++ b/src/components/Fields/FieldContstraints.tsx @@ -11,7 +11,7 @@ export class ConstraintsView extends React.PureComponent { return null; } return ( - + {' '} {this.props.constraints.map(constraint => ( {constraint} diff --git a/src/components/Fields/FieldDetail.tsx b/src/components/Fields/FieldDetail.tsx index 53fb89bf..b24619a8 100644 --- a/src/components/Fields/FieldDetail.tsx +++ b/src/components/Fields/FieldDetail.tsx @@ -16,7 +16,8 @@ function FieldDetailComponent({ value, label, raw }: FieldDetailProps) { return (
- {label} {stringifyValue} + {label} {' '} + {stringifyValue}
); } diff --git a/src/components/Fields/FieldDetails.tsx b/src/components/Fields/FieldDetails.tsx index 4a7f66d1..ede3fd48 100644 --- a/src/components/Fields/FieldDetails.tsx +++ b/src/components/Fields/FieldDetails.tsx @@ -57,7 +57,7 @@ export const FieldDetailsComponent = observer((props: FieldProps) => { : schema.default; return ( -
+
{schema.typePrefix} {schema.displayType} @@ -92,7 +92,7 @@ export const FieldDetailsComponent = observer((props: FieldProps) => { {isArrayType && schema.items && }
{deprecated && ( -
+
{l('deprecated')}
)} diff --git a/src/components/Fields/Pattern.tsx b/src/components/Fields/Pattern.tsx index 3b0c17ea..57d324e3 100644 --- a/src/components/Fields/Pattern.tsx +++ b/src/components/Fields/Pattern.tsx @@ -18,7 +18,7 @@ export function Pattern(props: { schema: SchemaModel }) { return ( <> - + {isPatternShown || pattern.length < MAX_PATTERN_LENGTH ? pattern : `${pattern.substr(0, MAX_PATTERN_LENGTH)}...`} diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx index b6904f62..e135c31e 100644 --- a/src/components/Operation/Operation.tsx +++ b/src/components/Operation/Operation.tsx @@ -35,8 +35,8 @@ export const Operation = observer(({ operation }: OperationProps): JSX.Element = {options => ( - -

+ +

{summary} {deprecated && Deprecated } {isWebhook && ( @@ -50,7 +50,7 @@ export const Operation = observer(({ operation }: OperationProps): JSX.Element = )} {hasDescription && ( - + {description !== undefined && } {externalDocs && } @@ -61,7 +61,7 @@ export const Operation = observer(({ operation }: OperationProps): JSX.Element = - + {!options.pathInMiddlePanel && !isWebhook && } diff --git a/src/components/Parameters/Parameters.tsx b/src/components/Parameters/Parameters.tsx index 3f4275df..099fbb6c 100644 --- a/src/components/Parameters/Parameters.tsx +++ b/src/components/Parameters/Parameters.tsx @@ -79,7 +79,9 @@ export function BodyContent(props: { {({ schema }) => { return ( <> - {description !== undefined && } + {description !== undefined && ( + + )} {schema?.type === 'object' && ( )} diff --git a/src/components/Parameters/ParametersGroup.tsx b/src/components/Parameters/ParametersGroup.tsx index 99cf32c1..68b3503f 100644 --- a/src/components/Parameters/ParametersGroup.tsx +++ b/src/components/Parameters/ParametersGroup.tsx @@ -21,7 +21,7 @@ export class ParametersGroup extends React.PureComponent +
{place} Parameters diff --git a/src/components/Redoc/Redoc.tsx b/src/components/Redoc/Redoc.tsx index a3d0eef7..1a225c27 100644 --- a/src/components/Redoc/Redoc.tsx +++ b/src/components/Redoc/Redoc.tsx @@ -53,7 +53,7 @@ export class Redoc extends React.Component { /> )) || null} - + diff --git a/src/components/RequestSamples/RequestSamples.tsx b/src/components/RequestSamples/RequestSamples.tsx index 7a06d89f..7588ab5b 100644 --- a/src/components/RequestSamples/RequestSamples.tsx +++ b/src/components/RequestSamples/RequestSamples.tsx @@ -26,7 +26,7 @@ export class RequestSamples extends React.Component { const hideTabList = samples.length === 1 ? this.context.hideSingleRequestSampleTab : false; return ( (hasSamples && ( -
+
{l('requestSamples')} @@ -40,7 +40,7 @@ export class RequestSamples extends React.Component { {samples.map(sample => ( {isPayloadSample(sample) ? ( -
+
) : ( diff --git a/src/components/ResponseSamples/ResponseSamples.tsx b/src/components/ResponseSamples/ResponseSamples.tsx index 72384fe5..2f703c65 100644 --- a/src/components/ResponseSamples/ResponseSamples.tsx +++ b/src/components/ResponseSamples/ResponseSamples.tsx @@ -23,7 +23,7 @@ export class ResponseSamples extends React.Component { return ( (responses.length > 0 && ( -
+
{l('responseSamples')} @@ -36,7 +36,7 @@ export class ResponseSamples extends React.Component { {responses.map(response => ( -
+
diff --git a/src/components/Responses/Response.tsx b/src/components/Responses/Response.tsx index 117b8fb5..9fe82c39 100644 --- a/src/components/Responses/Response.tsx +++ b/src/components/Responses/Response.tsx @@ -28,7 +28,7 @@ export const ResponseView = observer(({ response }: ResponseViewProps): React.Re ); return ( -
+
response.toggle()} type={type} diff --git a/src/components/Responses/ResponseHeaders.tsx b/src/components/Responses/ResponseHeaders.tsx index 0e97e175..7da94a76 100644 --- a/src/components/Responses/ResponseHeaders.tsx +++ b/src/components/Responses/ResponseHeaders.tsx @@ -19,7 +19,7 @@ export class ResponseHeaders extends React.PureComponent { return ( Response Headers - + {mapWithLast(headers, (header, isLast) => ( ))} diff --git a/src/components/Responses/ResponsesList.tsx b/src/components/Responses/ResponsesList.tsx index e578a1cf..30447fd7 100644 --- a/src/components/Responses/ResponsesList.tsx +++ b/src/components/Responses/ResponsesList.tsx @@ -26,7 +26,7 @@ export class ResponsesList extends React.PureComponent { } return ( -
+
{isCallback ? l('callbackResponses') : l('responses')} {responses.map(response => { return ; diff --git a/src/components/Schema/ArraySchema.tsx b/src/components/Schema/ArraySchema.tsx index 84bd716a..2fce3e97 100644 --- a/src/components/Schema/ArraySchema.tsx +++ b/src/components/Schema/ArraySchema.tsx @@ -34,7 +34,7 @@ export class ArraySchema extends React.PureComponent { } return ( -
+
Array {minMaxItems} diff --git a/src/components/Schema/ObjectSchema.tsx b/src/components/Schema/ObjectSchema.tsx index 145ea98d..686d113b 100644 --- a/src/components/Schema/ObjectSchema.tsx +++ b/src/components/Schema/ObjectSchema.tsx @@ -50,7 +50,7 @@ export const ObjectSchema = observer( return ( {showTitle && {title}} - + {mapWithLast(filteredFields, (field, isLast) => { return ( { const activeSchema = oneOf[schema.activeOneOf]; return ( -
+
{schema.oneOfType} {oneOf.map((subSchema, idx) => ( diff --git a/src/components/Schema/RecursiveSchema.tsx b/src/components/Schema/RecursiveSchema.tsx index ad730d5f..ead4aea1 100644 --- a/src/components/Schema/RecursiveSchema.tsx +++ b/src/components/Schema/RecursiveSchema.tsx @@ -7,7 +7,7 @@ import type { SchemaProps } from '.'; export const RecursiveSchema = observer(({ schema }: SchemaProps) => { return ( -
+
{schema.displayType} {schema.title && {schema.title} } {l('recursive')} diff --git a/src/components/SecurityRequirement/SecurityRequirement.tsx b/src/components/SecurityRequirement/SecurityRequirement.tsx index ca8e27a7..56b0c5a9 100644 --- a/src/components/SecurityRequirement/SecurityRequirement.tsx +++ b/src/components/SecurityRequirement/SecurityRequirement.tsx @@ -37,7 +37,7 @@ export function SecurityRequirements(props: SecurityRequirementsProps) { return ( <> - + setExpanded(!expanded)}> Authorizations: @@ -56,7 +56,7 @@ export function SecurityRequirements(props: SecurityRequirementsProps) { {expanded && operationSecuritySchemes?.length && operationSecuritySchemes.map((scheme, idx) => ( - +
{AUTH_TYPES[scheme.type] || scheme.type}: {scheme.id}
diff --git a/src/components/SourceCode/SourceCode.tsx b/src/components/SourceCode/SourceCode.tsx index 9a6e352f..b74525c9 100644 --- a/src/components/SourceCode/SourceCode.tsx +++ b/src/components/SourceCode/SourceCode.tsx @@ -19,7 +19,7 @@ export const SourceCodeWithCopy = (props: SourceCodeProps) => { return ( {({ renderCopyButton }) => ( - + {renderCopyButton()} diff --git a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap index 5f865af5..ffcfbdb0 100644 --- a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap @@ -2856,7 +2856,9 @@ exports[`Components SchemaView discriminator should correctly render SchemaView exports[`Components SchemaView discriminator should correctly render discriminator dropdown 1`] = ` - + +
@@ -30,7 +32,9 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
-
+
Security Scheme Type: OpenID Connect
Connect URL: https://gitlab.com/.well-known/openid-configuration

basicAuth

Security Scheme Type: HTTP
HTTP Authorization Scheme: basic
" `; -exports[`SecurityRequirement should render authDefinition 1`] = `"
Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth
,"`; +exports[`SecurityRequirement should render authDefinition 1`] = `"
Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth
,"`; exports[`SecurityRequirement should render authDefinition 2`] = ` -"
Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth (write:petsread:pets)
OAuth2: petstore_auth

Get access to data while protecting your account credentials. +"

Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth (write:petsread:pets)
OAuth2: petstore_auth

Get access to data while protecting your account credentials. OAuth2 is also a safer and more secure way to give you access.

Flow type: implicit
Authorization URL: http://petstore.swagger.io/api/oauth/dialog
Required scopes: write:pets read:pets
Scopes:
  • write:pets -

    modify pets in your account

  • read:pets -

    read your pets

    -
API Key: GitLab_PersonalAccessToken

GitLab Personal Access Token description

-
Header parameter name: PRIVATE-TOKEN
OpenID Connect: GitLab_OpenIdConnect

GitLab OpenIdConnect description

-
Connect URL: https://gitlab.com/.well-known/openid-configuration
HTTP: basicAuth
HTTP Authorization Scheme: basic
," +
API Key: GitLab_PersonalAccessToken

GitLab Personal Access Token description

+
Header parameter name: PRIVATE-TOKEN
OpenID Connect: GitLab_OpenIdConnect

GitLab OpenIdConnect description

+
Connect URL: https://gitlab.com/.well-known/openid-configuration
HTTP: basicAuth
HTTP Authorization Scheme: basic
," `;