mirror of
https://github.com/Redocly/redoc.git
synced 2025-07-10 16:22:27 +03:00
SWI-2779 Add Support for Custom Badges
This commit is contained in:
parent
8011affd00
commit
30b81d7efb
|
@ -112,6 +112,9 @@ paths:
|
||||||
summary: Add a new pet to the store
|
summary: Add a new pet to the store
|
||||||
description: Add new pet to the store inventory.
|
description: Add new pet to the store inventory.
|
||||||
operationId: addPet
|
operationId: addPet
|
||||||
|
x-badges:
|
||||||
|
- name: Global
|
||||||
|
type: global
|
||||||
responses:
|
responses:
|
||||||
'405':
|
'405':
|
||||||
description: Invalid input
|
description: Invalid input
|
||||||
|
@ -156,6 +159,9 @@ paths:
|
||||||
summary: Update an existing pet
|
summary: Update an existing pet
|
||||||
description: ''
|
description: ''
|
||||||
operationId: updatePet
|
operationId: updatePet
|
||||||
|
x-badges:
|
||||||
|
- name: US Only
|
||||||
|
type: usonly
|
||||||
responses:
|
responses:
|
||||||
'400':
|
'400':
|
||||||
description: Invalid ID supplied
|
description: Invalid ID supplied
|
||||||
|
@ -186,6 +192,9 @@ paths:
|
||||||
get:
|
get:
|
||||||
description: Retrieve the history information associated with an order.
|
description: Retrieve the history information associated with an order.
|
||||||
operationId: GetOrderHistory
|
operationId: GetOrderHistory
|
||||||
|
x-badges:
|
||||||
|
- name: Success
|
||||||
|
type: success
|
||||||
parameters:
|
parameters:
|
||||||
- description: ''
|
- description: ''
|
||||||
in: path
|
in: path
|
||||||
|
|
|
@ -28,7 +28,15 @@ export interface OperationProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Operation = observer(({ operation }: OperationProps): JSX.Element => {
|
export const Operation = observer(({ operation }: OperationProps): JSX.Element => {
|
||||||
const { name: summary, description, deprecated, externalDocs, isWebhook, httpVerb } = operation;
|
const {
|
||||||
|
name: summary,
|
||||||
|
description,
|
||||||
|
deprecated,
|
||||||
|
badges,
|
||||||
|
externalDocs,
|
||||||
|
isWebhook,
|
||||||
|
httpVerb,
|
||||||
|
} = operation;
|
||||||
const hasDescription = !!(description || externalDocs);
|
const hasDescription = !!(description || externalDocs);
|
||||||
const { showWebhookVerb } = React.useContext(OptionsContext);
|
const { showWebhookVerb } = React.useContext(OptionsContext);
|
||||||
return (
|
return (
|
||||||
|
@ -45,6 +53,16 @@ export const Operation = observer(({ operation }: OperationProps): JSX.Element =
|
||||||
Webhook {showWebhookVerb && httpVerb && '| ' + httpVerb.toUpperCase()}
|
Webhook {showWebhookVerb && httpVerb && '| ' + httpVerb.toUpperCase()}
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
|
{badges.map(badge => {
|
||||||
|
return (
|
||||||
|
badge && (
|
||||||
|
<Badge type={badge.type} key={badge.name}>
|
||||||
|
{' '}
|
||||||
|
{badge.name}{' '}
|
||||||
|
</Badge>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
})}
|
||||||
</H2>
|
</H2>
|
||||||
{options.pathInMiddlePanel && !isWebhook && (
|
{options.pathInMiddlePanel && !isWebhook && (
|
||||||
<Endpoint operation={operation} inverted={true} />
|
<Endpoint operation={operation} inverted={true} />
|
||||||
|
|
|
@ -20,7 +20,12 @@ import { RequestBodyModel } from './RequestBody';
|
||||||
import { ResponseModel } from './Response';
|
import { ResponseModel } from './Response';
|
||||||
import { SideNavStyleEnum } from '../types';
|
import { SideNavStyleEnum } from '../types';
|
||||||
|
|
||||||
import type { OpenAPIExternalDocumentation, OpenAPIServer, OpenAPIXCodeSample } from '../../types';
|
import type {
|
||||||
|
OpenAPIExternalDocumentation,
|
||||||
|
OpenAPIServer,
|
||||||
|
OpenAPIXCodeSample,
|
||||||
|
OperationCustomBadge,
|
||||||
|
} from '../../types';
|
||||||
import type { OpenAPIParser } from '../OpenAPIParser';
|
import type { OpenAPIParser } from '../OpenAPIParser';
|
||||||
import type { RedocNormalizedOptions } from '../RedocNormalizedOptions';
|
import type { RedocNormalizedOptions } from '../RedocNormalizedOptions';
|
||||||
import type { MediaContentModel } from './MediaContent';
|
import type { MediaContentModel } from './MediaContent';
|
||||||
|
@ -72,6 +77,7 @@ export class OperationModel implements IMenuItem {
|
||||||
operationHash?: string;
|
operationHash?: string;
|
||||||
httpVerb: string;
|
httpVerb: string;
|
||||||
deprecated: boolean;
|
deprecated: boolean;
|
||||||
|
badges: OperationCustomBadge[];
|
||||||
path: string;
|
path: string;
|
||||||
servers: OpenAPIServer[];
|
servers: OpenAPIServer[];
|
||||||
security: SecurityRequirementModel[];
|
security: SecurityRequirementModel[];
|
||||||
|
@ -96,6 +102,7 @@ export class OperationModel implements IMenuItem {
|
||||||
this.externalDocs = operationSpec.externalDocs;
|
this.externalDocs = operationSpec.externalDocs;
|
||||||
|
|
||||||
this.deprecated = !!operationSpec.deprecated;
|
this.deprecated = !!operationSpec.deprecated;
|
||||||
|
this.badges = operationSpec['x-badges'] ? operationSpec['x-badges'] : [];
|
||||||
this.httpVerb = operationSpec.httpVerb;
|
this.httpVerb = operationSpec.httpVerb;
|
||||||
this.deprecated = !!operationSpec.deprecated;
|
this.deprecated = !!operationSpec.deprecated;
|
||||||
this.operationId = operationSpec.operationId;
|
this.operationId = operationSpec.operationId;
|
||||||
|
|
21
src/theme.ts
21
src/theme.ts
|
@ -37,6 +37,24 @@ const defaultTheme: ThemeInterface = {
|
||||||
dark: ({ colors }) => darken(colors.tonalOffset, colors.error.main),
|
dark: ({ colors }) => darken(colors.tonalOffset, colors.error.main),
|
||||||
contrastText: ({ colors }) => readableColor(colors.error.main),
|
contrastText: ({ colors }) => readableColor(colors.error.main),
|
||||||
},
|
},
|
||||||
|
global: {
|
||||||
|
main: '#7c1cfc',
|
||||||
|
light: ({ colors }) => lighten(colors.tonalOffset, colors.global.main),
|
||||||
|
dark: ({ colors }) => darken(colors.tonalOffset, colors.global.main),
|
||||||
|
contrastText: ({ colors }) => readableColor(colors.global.main),
|
||||||
|
},
|
||||||
|
usonly: {
|
||||||
|
main: '#079cee',
|
||||||
|
light: ({ colors }) => lighten(colors.tonalOffset, colors.usonly.main),
|
||||||
|
dark: ({ colors }) => darken(colors.tonalOffset, colors.usonly.main),
|
||||||
|
contrastText: ({ colors }) => readableColor(colors.global.main),
|
||||||
|
},
|
||||||
|
experimental: {
|
||||||
|
main: '#8c03fc',
|
||||||
|
light: ({ colors }) => lighten(colors.tonalOffset, colors.experimental.main),
|
||||||
|
dark: ({ colors }) => darken(colors.tonalOffset, colors.experimental.main),
|
||||||
|
contrastText: ({ colors }) => readableColor(colors.experimental.main),
|
||||||
|
},
|
||||||
gray: {
|
gray: {
|
||||||
50: '#FAFAFA',
|
50: '#FAFAFA',
|
||||||
100: '#F5F5F5',
|
100: '#F5F5F5',
|
||||||
|
@ -267,6 +285,9 @@ export interface ResolvedThemeInterface {
|
||||||
success: ColorSetting;
|
success: ColorSetting;
|
||||||
warning: ColorSetting;
|
warning: ColorSetting;
|
||||||
error: ColorSetting;
|
error: ColorSetting;
|
||||||
|
global: ColorSetting;
|
||||||
|
usonly: ColorSetting;
|
||||||
|
experimental: ColorSetting;
|
||||||
gray: {
|
gray: {
|
||||||
50: string;
|
50: string;
|
||||||
100: string;
|
100: string;
|
||||||
|
|
|
@ -64,6 +64,20 @@ export interface OpenAPIPath {
|
||||||
$ref?: string;
|
$ref?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type OperationCustomBadgeType =
|
||||||
|
| 'primary'
|
||||||
|
| 'success'
|
||||||
|
| 'warning'
|
||||||
|
| 'error'
|
||||||
|
| 'global'
|
||||||
|
| 'usonly'
|
||||||
|
| 'experimental';
|
||||||
|
|
||||||
|
export interface OperationCustomBadge {
|
||||||
|
name: string;
|
||||||
|
type: OperationCustomBadgeType;
|
||||||
|
}
|
||||||
|
|
||||||
export interface OpenAPIXCodeSample {
|
export interface OpenAPIXCodeSample {
|
||||||
lang: string;
|
lang: string;
|
||||||
label?: string;
|
label?: string;
|
||||||
|
@ -83,6 +97,7 @@ export interface OpenAPIOperation {
|
||||||
deprecated?: boolean;
|
deprecated?: boolean;
|
||||||
security?: OpenAPISecurityRequirement[];
|
security?: OpenAPISecurityRequirement[];
|
||||||
servers?: OpenAPIServer[];
|
servers?: OpenAPIServer[];
|
||||||
|
'x-badges'?: OperationCustomBadge[];
|
||||||
'x-codeSamples'?: OpenAPIXCodeSample[];
|
'x-codeSamples'?: OpenAPIXCodeSample[];
|
||||||
'x-code-samples'?: OpenAPIXCodeSample[]; // deprecated
|
'x-code-samples'?: OpenAPIXCodeSample[]; // deprecated
|
||||||
}
|
}
|
||||||
|
|
|
@ -662,6 +662,7 @@ export function isRedocExtension(key: string): boolean {
|
||||||
'x-traitTag': true,
|
'x-traitTag': true,
|
||||||
'x-additionalPropertiesName': true,
|
'x-additionalPropertiesName': true,
|
||||||
'x-explicitMappingOnly': true,
|
'x-explicitMappingOnly': true,
|
||||||
|
'x-badges': true,
|
||||||
};
|
};
|
||||||
|
|
||||||
return key in redocExtensions;
|
return key in redocExtensions;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user