fix: markdown in examples descriptions + minor ui tweaks

src/common-elements/dropdown.ts

@@ -55,7 +55,7 @@ export const StyledDropdown = styled(Dropdown)`
     display: block;
     height: 0;
     position: absolute;
-    right: 0.35em;
+    right: 0.6em;
     top: 50%;
     margin-top: -0.125em;
     width: 0;

src/components/MediaTypeSwitch/MediaTypesSwitch.tsx

@@ -12,6 +12,8 @@ export interface MediaTypeChildProps {
 
 export interface MediaTypesSwitchProps {
   content?: MediaContentModel;
+  withLabel?: boolean;
+
   renderDropdown: (props: DropdownProps) => JSX.Element;
   children: (activeMime: MediaTypeModel) => JSX.Element;
 }
@@ -38,16 +40,25 @@ export class MediaTypesSwitch extends React.Component<MediaTypesSwitchProps> {
       };
     });
 
-    return (
+    const Wrapper = ({ children }) =>
-      <>
+      this.props.withLabel ? (
         <DropdownWrapper>
           <DropdownLabel>Content type</DropdownLabel>
+          {children}
+        </DropdownWrapper>
+      ) : (
+        children
+      );
+
+    return (
+      <>
+        <Wrapper>
           {this.props.renderDropdown({
             value: options[activeMimeIdx],
             options,
             onChange: this.switchMedia,
           })}
-        </DropdownWrapper>
+        </Wrapper>
         {this.props.children(content.active)}
       </>
     );

src/components/PayloadSamples/MediaTypeSamples.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 
 import { DropdownProps } from '../../common-elements';
 import { MediaTypeModel } from '../../services/models';
-
+import { Markdown } from '../Markdown/Markdown';
 import { Example } from './Example';
-import { Description, DropdownLabel, DropdownWrapper, NoSampleLabel } from './styled.elements';
+import { DropdownLabel, DropdownWrapper, NoSampleLabel } from './styled.elements';
 
 export interface PayloadSamplesProps {
   mediaType: MediaTypeModel;
@@ -35,6 +35,7 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
     if (examplesNames.length === 0) {
       return noSample;
     }
+
     if (examplesNames.length > 1) {
       const options = examplesNames.map((name, idx) => {
         return {
@@ -42,6 +43,10 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
           value: idx.toString(),
         };
       });
+
+      const example = examples[examplesNames[activeIdx]];
+      const description = example.description;
+
       return (
         <>
           <DropdownWrapper>
@@ -52,27 +57,18 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
               onChange: this.switchMedia,
             })}
           </DropdownWrapper>
-          {examplesNames.map(name => {
+          <div>
-            const description = examples[name].description;
+            {description && <Markdown source={description} />}
-            const activeValue = options[activeIdx].label;
+            <Example example={example} mimeType={mimeType} />
-
-            return (
-              (name === activeValue || examples[name].summary === activeValue) && (
-                <div key={name}>
-                  {description && <Description>{description}</Description>}
-                  <Example example={examples[name]} mimeType={mimeType} />
           </div>
-              )
-            );
-          })}
         </>
       );
     } else {
-      const name = examplesNames[0];
+      const example = examples[examplesNames[0]];
       return (
         <div>
-          {examples[name].description && <Description>{examples[name].description}</Description>}
+          {example.description && <Markdown source={example.description} />}
-          <Example example={examples[name]} mimeType={mimeType} />
+          <Example example={example} mimeType={mimeType} />
         </div>
       );
     }

src/components/PayloadSamples/PayloadSamples.tsx

@@ -22,7 +22,7 @@ export class PayloadSamples extends React.Component<PayloadSamplesProps> {
     }
 
     return (
-      <MediaTypesSwitch content={mimeContent} renderDropdown={this.renderDropdown}>
+      <MediaTypesSwitch content={mimeContent} renderDropdown={this.renderDropdown} withLabel={true}>
         {mediaType => (
           <SamplesWrapper>
             <MediaTypeSamples

src/components/PayloadSamples/styled.elements.ts

@@ -32,7 +32,6 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)`
   margin-left: 10px;
   text-transform: none;
   font-size: 0.929em;
-  padding: 12px;
   margin: 0 0 10px 0;
   display: block;
   background-color: ${({ theme }) => transparentize(0.6, theme.rightPanel.backgroundColor)};
@@ -43,7 +42,7 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)`
   .Dropdown-control:hover {
     font-size: 1em;
     border: none;
-    padding: 0 1.2em 0 0;
+    padding: 0.9em 1.6em 0.9em 0.9em;
     background: transparent;
     color: ${({ theme }) => theme.rightPanel.textColor};
     box-shadow: none;
@@ -63,8 +62,3 @@ export const NoSampleLabel = styled.div`
   font-size: 12px;
   color: #ee807f;
 `;
-
-export const Description = styled.span`
-  font-size: 12px;
-  color: ${({ theme }) => transparentize(0.6, theme.rightPanel.textColor)};
-`;