diff --git a/README.md b/README.md index 64eff3a8..292a23aa 100644 --- a/README.md +++ b/README.md @@ -217,6 +217,7 @@ You can use all of the following options with the standalone version of the ` const FloatingButton = styled.div` outline: none; user-select: none; - background-color: #f2f2f2; + background-color: ${({ theme }) => theme.fab.backgroundColor}; color: ${props => props.theme.colors.primary.main}; display: none; cursor: pointer; @@ -74,6 +74,9 @@ const FloatingButton = styled.div` width: 60px; height: 60px; padding: 0 20px; + svg { + color: ${({ theme }) => theme.fab.color}; + } @media print { display: none; @@ -140,9 +143,11 @@ export class StickyResponsiveSidebar extends React.Component< > {this.props.children} - - - + {!this.context.hideFab && ( + + + + )} ); } diff --git a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap index d5856568..5475840f 100644 --- a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap @@ -80,6 +80,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "expandSingleSchemaField": false, "generatedPayloadSamplesMaxDepth": 10, "hideDownloadButton": false, + "hideFab": false, "hideHostname": false, "hideSchemaPattern": false, "hideSchemaTitles": false, @@ -186,6 +187,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, }, "extensionsHook": undefined, + "fab": Object { + "backgroundColor": "#f2f2f2", + "color": "#0065FB", + }, "logo": Object { "gutter": "2px", "maxHeight": "260px", @@ -320,6 +325,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "expandSingleSchemaField": false, "generatedPayloadSamplesMaxDepth": 10, "hideDownloadButton": false, + "hideFab": false, "hideHostname": false, "hideSchemaPattern": false, "hideSchemaTitles": false, @@ -426,6 +432,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, }, "extensionsHook": undefined, + "fab": Object { + "backgroundColor": "#f2f2f2", + "color": "#0065FB", + }, "logo": Object { "gutter": "2px", "maxHeight": "260px", @@ -536,6 +546,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "expandSingleSchemaField": false, "generatedPayloadSamplesMaxDepth": 10, "hideDownloadButton": false, + "hideFab": false, "hideHostname": false, "hideSchemaPattern": false, "hideSchemaTitles": false, @@ -642,6 +653,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, }, "extensionsHook": undefined, + "fab": Object { + "backgroundColor": "#f2f2f2", + "color": "#0065FB", + }, "logo": Object { "gutter": "2px", "maxHeight": "260px", @@ -817,6 +832,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "expandSingleSchemaField": false, "generatedPayloadSamplesMaxDepth": 10, "hideDownloadButton": false, + "hideFab": false, "hideHostname": false, "hideSchemaPattern": false, "hideSchemaTitles": false, @@ -923,6 +939,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, }, "extensionsHook": undefined, + "fab": Object { + "backgroundColor": "#f2f2f2", + "color": "#0065FB", + }, "logo": Object { "gutter": "2px", "maxHeight": "260px", @@ -1057,6 +1077,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "expandSingleSchemaField": false, "generatedPayloadSamplesMaxDepth": 10, "hideDownloadButton": false, + "hideFab": false, "hideHostname": false, "hideSchemaPattern": false, "hideSchemaTitles": false, @@ -1163,6 +1184,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, }, "extensionsHook": undefined, + "fab": Object { + "backgroundColor": "#f2f2f2", + "color": "#0065FB", + }, "logo": Object { "gutter": "2px", "maxHeight": "260px", @@ -1273,6 +1298,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "expandSingleSchemaField": false, "generatedPayloadSamplesMaxDepth": 10, "hideDownloadButton": false, + "hideFab": false, "hideHostname": false, "hideSchemaPattern": false, "hideSchemaTitles": false, @@ -1379,6 +1405,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, }, "extensionsHook": undefined, + "fab": Object { + "backgroundColor": "#f2f2f2", + "color": "#0065FB", + }, "logo": Object { "gutter": "2px", "maxHeight": "260px", @@ -1512,6 +1542,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "expandSingleSchemaField": false, "generatedPayloadSamplesMaxDepth": 10, "hideDownloadButton": false, + "hideFab": false, "hideHostname": false, "hideSchemaPattern": false, "hideSchemaTitles": false, @@ -1618,6 +1649,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, }, "extensionsHook": undefined, + "fab": Object { + "backgroundColor": "#f2f2f2", + "color": "#0065FB", + }, "logo": Object { "gutter": "2px", "maxHeight": "260px", @@ -1790,6 +1825,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "expandSingleSchemaField": false, "generatedPayloadSamplesMaxDepth": 10, "hideDownloadButton": false, + "hideFab": false, "hideHostname": false, "hideSchemaPattern": false, "hideSchemaTitles": false, @@ -1896,6 +1932,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, }, "extensionsHook": undefined, + "fab": Object { + "backgroundColor": "#f2f2f2", + "color": "#0065FB", + }, "logo": Object { "gutter": "2px", "maxHeight": "260px", @@ -2030,6 +2070,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "expandSingleSchemaField": false, "generatedPayloadSamplesMaxDepth": 10, "hideDownloadButton": false, + "hideFab": false, "hideHostname": false, "hideSchemaPattern": false, "hideSchemaTitles": false, @@ -2136,6 +2177,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, }, "extensionsHook": undefined, + "fab": Object { + "backgroundColor": "#f2f2f2", + "color": "#0065FB", + }, "logo": Object { "gutter": "2px", "maxHeight": "260px", @@ -2246,6 +2291,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "expandSingleSchemaField": false, "generatedPayloadSamplesMaxDepth": 10, "hideDownloadButton": false, + "hideFab": false, "hideHostname": false, "hideSchemaPattern": false, "hideSchemaTitles": false, @@ -2352,6 +2398,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView }, }, "extensionsHook": undefined, + "fab": Object { + "backgroundColor": "#f2f2f2", + "color": "#0065FB", + }, "logo": Object { "gutter": "2px", "maxHeight": "260px", diff --git a/src/services/RedocNormalizedOptions.ts b/src/services/RedocNormalizedOptions.ts index 065f4166..96b8d015 100644 --- a/src/services/RedocNormalizedOptions.ts +++ b/src/services/RedocNormalizedOptions.ts @@ -53,6 +53,7 @@ export interface RedocRawOptions { ignoreNamedSchemas?: string[] | string; hideSchemaPattern?: boolean; generatedPayloadSamplesMaxDepth?: number; + hideFab?: boolean; } export function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): boolean { @@ -245,6 +246,7 @@ export class RedocNormalizedOptions { ignoreNamedSchemas: Set; hideSchemaPattern: boolean; generatedPayloadSamplesMaxDepth: number; + hideFab: boolean; constructor(raw: RedocRawOptions, defaults: RedocRawOptions = {}) { raw = { ...defaults, ...raw }; @@ -315,5 +317,6 @@ export class RedocNormalizedOptions { RedocNormalizedOptions.normalizeGeneratedPayloadSamplesMaxDepth( raw.generatedPayloadSamplesMaxDepth, ); + this.hideFab = argValueToBoolean(raw.hideFab); } } diff --git a/src/theme.ts b/src/theme.ts index 8856451f..13f969b4 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -162,6 +162,10 @@ const defaultTheme: ThemeInterface = { codeBlock: { backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor), }, + fab: { + backgroundColor: '#f2f2f2', + color: '#0065FB', + }, }; export default defaultTheme; @@ -338,6 +342,10 @@ export interface ResolvedThemeInterface { codeBlock: { backgroundColor: string; }; + fab: { + backgroundColor: string; + color: string; + }; extensionsHook?: (name: string, props: any) => string; }