From 1f9dc8d9f78c2cb4ae2f9e92aeaf1fe57cb240e2 Mon Sep 17 00:00:00 2001
From: Eduardo Perez <eperez@pindrop.com>
Date: Wed, 10 Oct 2018 10:58:16 -0400
Subject: [PATCH] add classNames to various places to allow for more control of
 styling

---
 src/common-elements/fields-layout.ts                       | 4 +++-
 src/common-elements/fields.ts                              | 4 +++-
 src/common-elements/headers.ts                             | 4 +++-
 src/common-elements/panels.ts                              | 1 +
 src/common-elements/shelfs.tsx                             | 3 ++-
 src/components/ApiInfo/ApiInfo.tsx                         | 2 +-
 src/components/ApiLogo/ApiLogo.tsx                         | 3 ++-
 src/components/Markdown/SanitizedMdBlock.tsx               | 2 +-
 src/components/Operation/Operation.tsx                     | 2 +-
 src/components/RequestSamples/RequestSamples.tsx           | 2 +-
 src/components/ResponseSamples/ResponseSamples.tsx         | 2 +-
 src/components/SecurityRequirement/SecurityRequirement.tsx | 6 ++++--
 src/components/SecuritySchemes/SecuritySchemes.tsx         | 2 +-
 src/components/SideMenu/SideMenu.tsx                       | 2 +-
 14 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/common-elements/fields-layout.ts b/src/common-elements/fields-layout.ts
index baffbeab..4363ecea 100644
--- a/src/common-elements/fields-layout.ts
+++ b/src/common-elements/fields-layout.ts
@@ -74,7 +74,9 @@ export const PropertyNameCell = withProps<{ kind?: string }>(styled(PropertyCell
   ${extensionsHook('PropertyNameCell')};
 `;
 
-export const PropertyDetailsCell = styled.td`
+export const PropertyDetailsCell = styled.td.attrs({
+  className: 'property-details-cell',
+})`
   border-bottom: 1px solid #9fb4be;
   padding: 10px 0;
   width: ${props => props.theme.schema.defaultDetailsWidth};
diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts
index c7bd6c60..ed82c50a 100644
--- a/src/common-elements/fields.ts
+++ b/src/common-elements/fields.ts
@@ -36,7 +36,9 @@ export const TypeTitle = styled(FieldLabel)`
 
 export const TypeFormat = TypeName;
 
-export const RequiredLabel = styled(FieldLabel.withComponent('div'))`
+export const RequiredLabel = styled(FieldLabel.withComponent('div')).attrs({
+  className: 'required-label',
+})`
   color: ${props => props.theme.schema.requireLabelColor};
   font-size: ${props => props.theme.schema.labelsTextSize};
   font-weight: normal;
diff --git a/src/common-elements/headers.ts b/src/common-elements/headers.ts
index f28fccfa..0df2d6b4 100644
--- a/src/common-elements/headers.ts
+++ b/src/common-elements/headers.ts
@@ -33,7 +33,9 @@ export const H3 = styled.h2`
   ${extensionsHook('H3')};
 `;
 
-export const RightPanelHeader = styled.h3`
+export const RightPanelHeader = styled.h3.attrs({
+  className: 'right-panel-header',
+})`
   color: ${({ theme }) => theme.rightPanel.textColor};
 
   ${extensionsHook('RightPanelHeader')};
diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
index 726b139a..f7c4e289 100644
--- a/src/common-elements/panels.ts
+++ b/src/common-elements/panels.ts
@@ -15,6 +15,7 @@ export const MiddlePanel = styled.div`
 export const Section = withProps<{ underlined?: boolean }>(
   styled.div.attrs({
     [SECTION_ATTR]: props => props.id,
+    className: 'section',
   } as any),
 )`
   padding: ${props => props.theme.spacing.sectionVertical}px 0;
diff --git a/src/common-elements/shelfs.tsx b/src/common-elements/shelfs.tsx
index 5b7a63b7..03ed6c33 100644
--- a/src/common-elements/shelfs.tsx
+++ b/src/common-elements/shelfs.tsx
@@ -1,3 +1,4 @@
+import * as classnames from 'classnames';
 import * as React from 'react';
 import styled, { withProps } from '../styled-components';
 
@@ -19,7 +20,7 @@ class IntShelfIcon extends React.PureComponent<{
   render() {
     return (
       <svg
-        className={this.props.className}
+        className={classnames(this.props.className, 'shelf-icon')}
         style={this.props.style}
         version="1.1"
         viewBox="0 0 24 24"
diff --git a/src/components/ApiInfo/ApiInfo.tsx b/src/components/ApiInfo/ApiInfo.tsx
index e1fcaaea..7b1a7408 100644
--- a/src/components/ApiInfo/ApiInfo.tsx
+++ b/src/components/ApiInfo/ApiInfo.tsx
@@ -71,7 +71,7 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
       null;
 
     return (
-      <Section>
+      <Section className="api-info-section">
         <Row>
           <MiddlePanel className="api-info">
             <ApiHeader>
diff --git a/src/components/ApiLogo/ApiLogo.tsx b/src/components/ApiLogo/ApiLogo.tsx
index 290b862d..b30f8e60 100644
--- a/src/components/ApiLogo/ApiLogo.tsx
+++ b/src/components/ApiLogo/ApiLogo.tsx
@@ -22,8 +22,9 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
         alt={altText}
       />
     );
+
     return (
-      <LogoWrap>
+      <LogoWrap className="api-logo">
         {info.contact && info.contact.url ? LinkWrap(info.contact.url)(logo) : logo}{' '}
       </LogoWrap>
     );
diff --git a/src/components/Markdown/SanitizedMdBlock.tsx b/src/components/Markdown/SanitizedMdBlock.tsx
index 9f0a8cb4..2e8e5b03 100644
--- a/src/components/Markdown/SanitizedMdBlock.tsx
+++ b/src/components/Markdown/SanitizedMdBlock.tsx
@@ -18,11 +18,11 @@ export function SanitizedMarkdownHTML(
     <OptionsConsumer>
       {options => (
         <Wrap
+          {...props}
           className={'redoc-markdown ' + (props.className || '')}
           dangerouslySetInnerHTML={{
             __html: sanitize(options.untrustedSpec, props.html),
           }}
-          {...props}
         />
       )}
     </OptionsConsumer>
diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx
index 1283a6ad..4d27b292 100644
--- a/src/components/Operation/Operation.tsx
+++ b/src/components/Operation/Operation.tsx
@@ -48,7 +48,7 @@ export class Operation extends React.Component<OperationProps> {
         {options => (
           <OperationRow>
             <MiddlePanel>
-              <H2>
+              <H2 className="operation-heading">
                 <ShareLink to={operation.id} />
                 {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
               </H2>
diff --git a/src/components/RequestSamples/RequestSamples.tsx b/src/components/RequestSamples/RequestSamples.tsx
index 22d4f43a..7354324b 100644
--- a/src/components/RequestSamples/RequestSamples.tsx
+++ b/src/components/RequestSamples/RequestSamples.tsx
@@ -26,7 +26,7 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
         <div>
           <RightPanelHeader> Request samples </RightPanelHeader>
 
-          <Tabs defaultIndex={0}>
+          <Tabs className="right-panel-tabs" defaultIndex={0}>
             <TabList>
               {hasBodySample && <Tab key="payload"> Payload </Tab>}
               {samples.map(sample => (
diff --git a/src/components/ResponseSamples/ResponseSamples.tsx b/src/components/ResponseSamples/ResponseSamples.tsx
index 3f9eefa0..4187832d 100644
--- a/src/components/ResponseSamples/ResponseSamples.tsx
+++ b/src/components/ResponseSamples/ResponseSamples.tsx
@@ -25,7 +25,7 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
         <div>
           <RightPanelHeader> Response samples </RightPanelHeader>
 
-          <Tabs defaultIndex={0}>
+          <Tabs className="right-panel-tabs" defaultIndex={0}>
             <TabList>
               {responses.map(response => (
                 <Tab className={'tab-' + response.type} key={response.code}>
diff --git a/src/components/SecurityRequirement/SecurityRequirement.tsx b/src/components/SecurityRequirement/SecurityRequirement.tsx
index e6aafb30..8dde495c 100644
--- a/src/components/SecurityRequirement/SecurityRequirement.tsx
+++ b/src/components/SecurityRequirement/SecurityRequirement.tsx
@@ -88,7 +88,9 @@ const AuthHeaderColumn = styled.div`
   flex: 1;
 `;
 
-const SecuritiesColumn = styled.div`
+const SecuritiesColumn = styled.div.attrs({
+  className: 'securities-column',
+})`
   width: ${props => props.theme.schema.defaultDetailsWidth};
 `;
 
@@ -114,7 +116,7 @@ export class SecurityRequirements extends React.PureComponent<SecurityRequiremen
       return null;
     }
     return (
-      <Wrap>
+      <Wrap className="security-requirements">
         <AuthHeaderColumn>
           <AuthHeader>Authorizations: </AuthHeader>
         </AuthHeaderColumn>
diff --git a/src/components/SecuritySchemes/SecuritySchemes.tsx b/src/components/SecuritySchemes/SecuritySchemes.tsx
index 08ca01fd..5bcd52da 100644
--- a/src/components/SecuritySchemes/SecuritySchemes.tsx
+++ b/src/components/SecuritySchemes/SecuritySchemes.tsx
@@ -70,7 +70,7 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
       <Section id={scheme.sectionId} key={scheme.id}>
         <Row>
           <MiddlePanel>
-            <H2>
+            <H2 className="security-defs-heading">
               <ShareLink to={scheme.sectionId} />
               {scheme.id}
             </H2>
diff --git a/src/components/SideMenu/SideMenu.tsx b/src/components/SideMenu/SideMenu.tsx
index bf7c8415..47c141e7 100644
--- a/src/components/SideMenu/SideMenu.tsx
+++ b/src/components/SideMenu/SideMenu.tsx
@@ -21,7 +21,7 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
           wheelPropagation: false,
         }}
       >
-        <MenuItems items={store.items} onActivate={this.activate} root={true} />
+        <MenuItems className="side-menu-items" items={store.items} onActivate={this.activate} root={true} />
         <RedocAttribution>
           <a target="_blank" href="https://github.com/Rebilly/ReDoc">
             Documentation Powered by ReDoc