chore: update security-requirement ui

src/components/Markdown/styled.elements.ts

@@ -10,6 +10,21 @@ import styled, {
   withProps,
 } from '../../styled-components';
 
+export const linksCss = css`
+  a {
+    text-decoration: none;
+    color: ${props => props.theme.links.color};
+
+    &:visited {
+      color: ${props => props.theme.links.visited};
+    }
+
+    &:hover {
+      color: ${props => props.theme.links.hover};
+    }
+  }
+`;
+
 export const StyledMarkdownBlock = withProps<{ dense?: boolean; inline?: boolean }>(styled.div)`
 
   font-family: ${props => props.theme.baseFont.family};
@@ -136,16 +151,5 @@ export const StyledMarkdownBlock = withProps<{ dense?: boolean; inline?: boolean
 
   ${extensionsHook('Markdown')};
 
-  a {
-    text-decoration: none;
-    color: ${props => props.theme.links.color};
-
-    &:visited {
-      color: ${props => props.theme.links.visited};
-    }
-
-    &:hover {
-      color: ${props => props.theme.links.hover};
-    }
-  }
+  ${linksCss}
 `;

src/components/SecurityRequirement/SecuirityRequirement.tsx

@@ -5,6 +5,7 @@ import styled from '../../styled-components';
 
 import { UnderlinedHeader } from '../../common-elements/headers';
 import { SecurityRequirementModel } from '../../services/models/SecurityRequirement';
+import { linksCss } from '../Markdown/styled.elements';
 
 const ScopeName = styled.code`
   font-size: ${props => props.theme.code.fontSize};
@@ -14,6 +15,25 @@ const ScopeName = styled.code`
   padding: 0.2em;
   display: inline-block;
   line-height: 1;
+
+  &:after {
+    content: ',';
+  }
+  &:last-child:after {
+    content: none;
+  }
+`;
+
+const SecurityRequirementWrap = styled.span`
+  &:after {
+    content: ' OR ';
+    font-weight: bold;
+  }
+  &:last-child:after {
+    content: none;
+  }
+
+  ${linksCss};
 `;
 
 export interface SecurityRequirementProps {
@@ -25,13 +45,13 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
     const security = this.props.security;
     return security.schemes.map((scheme, idx) => {
       return (
-        <div key={scheme.id}>
+        <SecurityRequirementWrap key={scheme.id}>
           <a href={'#' + scheme.sectionId}>{scheme.id}</a>
           {scheme.scopes.length > 0 && ' ('}
           {scheme.scopes.map(scope => <ScopeName key={scope}>{scope}</ScopeName>)}
           {scheme.scopes.length > 0 && ') '}
-          {idx < security.schemes.length - 1 && ' and '}
-        </div>
+          {idx < security.schemes.length - 1 && ' & '}
+        </SecurityRequirementWrap>
       );
     });
   }

src/services/models/SecurityRequirement.ts

@@ -1,11 +1,10 @@
-import { OpenAPISecurityRequirement } from '../../types';
+import { OpenAPISecurityRequirement, OpenAPISecurityScheme } from '../../types';
 import { SECURITY_SCHEMES_SECTION } from '../../utils/openapi';
 import { OpenAPIParser } from '../OpenAPIParser';
 
-export interface SecurityScheme {
+export interface SecurityScheme extends OpenAPISecurityScheme {
   id: string;
   sectionId: string;
-  type: string;
   scopes: string[];
 }
 
@@ -26,9 +25,9 @@ export class SecurityRequirementModel {
         }
 
         return {
+          ...scheme,
           id,
           sectionId: SECURITY_SCHEMES_SECTION + id,
-          type: scheme.type,
           scopes,
         };
       })