fix: tidy up non-redoc vendor extension presentation (#847)

Redocly · Mar 15, 2019 · b21cd3d · b21cd3d
1 parent 26f6b3d
commit b21cd3d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts
@@ -88,6 +88,8 @@ export const ExampleValue = styled(FieldLabel)`
   ${extensionsHook('ExampleValue')};
 `;
 
+export const ExtensionValue = styled(ExampleValue)``;
+
 export const ConstraintItem = styled(FieldLabel)`
   border-radius: 2px;
   ${({ theme }) => `

diff --git a/src/components/Fields/Extensions.tsx b/src/components/Fields/Extensions.tsx
@@ -1,19 +1,17 @@
 import * as React from 'react';
+
+import { ExtensionValue, FieldLabel } from '../../common-elements/fields';
+
 import styled from '../../styled-components';
 
 import { OptionsContext } from '../OptionsProvider';
 
 import { StyledMarkdownBlock } from '../Markdown/styled.elements';
 
 const Extension = styled(StyledMarkdownBlock)`
-  opacity: 0.9;
   margin: 2px 0;
 `;
 
-const ExtensionLable = styled.span`
-  font-style: italic;
-`;
-
 export interface ExtensionsProps {
   extensions: {
     [k: string]: any;
@@ -29,8 +27,10 @@ export class Extensions extends React.PureComponent<ExtensionsProps> {
             {options.showExtensions &&
               Object.keys(this.props.extensions).map(key => (
                 <Extension key={key}>
-                  <ExtensionLable>{key}</ExtensionLable>:{' '}
-                  <code>{JSON.stringify(this.props.extensions[key])}</code>
+                  <FieldLabel> {key.substring(2)}: </FieldLabel>{' '}
+                  <ExtensionValue>
+                    {JSON.stringify(this.props.extensions[key]).replace(/(^")|("$)/g, '')}
+                  </ExtensionValue>
                 </Extension>
               ))}
           </>