From f96c481b34f68fd05d29f15b234c1a2172d104d4 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Wed, 25 Jul 2018 13:11:24 +0300
Subject: [PATCH] fix: wrong display when combining multiple auth requirements

fies #577
---
 .../SecurityRequirement.tsx                   | 51 ++++++++++++++-----
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/components/SecurityRequirement/SecurityRequirement.tsx b/src/components/SecurityRequirement/SecurityRequirement.tsx
index ebeada1b..efe4bc42 100644
--- a/src/components/SecurityRequirement/SecurityRequirement.tsx
+++ b/src/components/SecurityRequirement/SecurityRequirement.tsx
@@ -24,12 +24,34 @@ const ScopeName = styled.code`
   }
 `;
 
-const SecurityRequirementWrap = styled.span`
+const SecurityRequirementAndWrap = styled.span`
   &:after {
-    content: ' OR ';
+    content: ' AND ';
+    font-weight: bold;
+  }
+
+  &:last-child:after {
+    content: none;
+  }
+
+  ${linksCss};
+`;
+
+const SecurityRequirementOrWrap = styled.span`
+  &:before {
+    content: '( ';
+    font-weight: bold;
+  }
+  &:after {
+    content: ' ) OR ';
     font-weight: bold;
   }
   &:last-child:after {
+    content: ' )';
+  }
+
+  &:only-child:before,
+  &:only-child:after {
     content: none;
   }
 
@@ -43,17 +65,20 @@ export interface SecurityRequirementProps {
 export class SecurityRequirement extends React.PureComponent<SecurityRequirementProps> {
   render() {
     const security = this.props.security;
-    return security.schemes.map((scheme, idx) => {
-      return (
-        <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 && ' & '}
-        </SecurityRequirementWrap>
-      );
-    });
+    return (
+      <SecurityRequirementOrWrap>
+        {security.schemes.map(scheme => {
+          return (
+            <SecurityRequirementAndWrap 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 && ') '}
+            </SecurityRequirementAndWrap>
+          );
+        })}
+      </SecurityRequirementOrWrap>
+    );
   }
 }