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