From b21cd3d3668085ddd9bf29e434f9ffb01e61bc96 Mon Sep 17 00:00:00 2001
From: Jon Nicholson <drjonnicholson@users.noreply.github.com>
Date: Fri, 15 Mar 2019 15:15:06 +0000
Subject: [PATCH] fix: tidy up non-redoc vendor extension presentation (#847)

---
 src/common-elements/fields.ts        |  2 ++
 src/components/Fields/Extensions.tsx | 14 +++++++-------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts
index 4fc3c12c..9ab3a929 100644
--- 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
index d39e40c6..27c03c68 100644
--- a/src/components/Fields/Extensions.tsx
+++ b/src/components/Fields/Extensions.tsx
@@ -1,4 +1,7 @@
 import * as React from 'react';
+
+import { ExtensionValue, FieldLabel } from '../../common-elements/fields';
+
 import styled from '../../styled-components';
 
 import { OptionsContext } from '../OptionsProvider';
@@ -6,14 +9,9 @@ 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>
               ))}
           </>