message: fix: wrong display when combining multiple auth requirements
  fies
diff: @@ -24,11 +24,12 @@ 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;
  }
  @@ -36,6 +37,27 @@ const SecurityRequirementWrap = styled.span`
  ${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;
  + }
  +
  + ${linksCss};
  +`;
  +
  export interface SecurityRequirementProps {
  security: SecurityRequirementModel;
  }
  @@ -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}>
  + <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 && ') '}
  - {idx < security.schemes.length - 1 && ' & '}
  - </SecurityRequirementWrap>
  + </SecurityRequirementAndWrap>
  + );
  + })}
  + </SecurityRequirementOrWrap>
  );
  - });
  }
  }
  