From eee0640b07bcddccbddf68618f2772b1de92a18d Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 11:27:56 +0100
Subject: chore: many small stylistic changes

---
 .../src/components/markdown_section.tsx            | 25 ++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

(limited to 'packages/react-shared/src/components/markdown_section.tsx')

diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index e84d2b078..3dc3efe12 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -8,15 +8,18 @@ import { colors } from '../utils/colors';
 import { utils } from '../utils/utils';
 
 import { AnchorTitle } from './anchor_title';
+import { Container } from './container';
 import { Link } from './link';
 import { MarkdownCodeBlock } from './markdown_code_block';
 import { MarkdownLinkBlock } from './markdown_link_block';
+import { MarkdownParagraphBlock } from './markdown_paragraph_block';
 
 export interface MarkdownSectionProps {
     sectionName: string;
     markdownContent: string;
     headerSize?: HeaderSizes;
     githubLink?: string;
+    shouldReformatTitle?: boolean;
 }
 
 interface DefaultMarkdownSectionProps {
@@ -32,6 +35,7 @@ export interface MarkdownSectionState {
 export class MarkdownSection extends React.Component<MarkdownSectionProps, MarkdownSectionState> {
     public static defaultProps: Partial<MarkdownSectionProps> = {
         headerSize: HeaderSizes.H3,
+        shouldReformatTitle: true,
     };
     constructor(props: MarkdownSectionProps) {
         super(props);
@@ -43,7 +47,9 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
         const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;
 
         const id = utils.getIdFromName(sectionName);
-        const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
+        const finalSectionName = this.props.shouldReformatTitle
+            ? utils.convertCamelCaseToSpaces(sectionName)
+            : sectionName;
         return (
             <div
                 className="md-px1 sm-px2 overflow-hidden"
@@ -51,12 +57,12 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >
                 <ScrollElement name={id}>
-                    <div className="clearfix pt3">
+                    <Container className="clearfix" marginBottom="20px">
                         <div className="col lg-col-8 md-col-8 sm-col-12">
-                            <span style={{ textTransform: 'capitalize', color: colors.grey700 }}>
+                            <span style={{ color: colors.grey700 }}>
                                 <AnchorTitle
                                     headerSize={headerSize}
-                                    title={finalSectionName}
+                                    title={_.capitalize(finalSectionName)}
                                     id={id}
                                     shouldShowAnchor={this.state.shouldShowAnchor}
                                 />
@@ -71,16 +77,23 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                                 </div>
                             )}
                         </div>
-                    </div>
-                    <hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
+                    </Container>
                     <ReactMarkdown
                         source={markdownContent}
                         escapeHtml={false}
                         renderers={{
                             code: MarkdownCodeBlock,
                             link: MarkdownLinkBlock,
+                            paragraph: MarkdownParagraphBlock,
                         }}
                     />
+                    <Container
+                        width={'100%'}
+                        height={'1px'}
+                        backgroundColor={colors.grey300}
+                        marginTop={'32px'}
+                        marginBottom={'32px'}
+                    />
                 </ScrollElement>
             </div>
         );
-- 
cgit v1.2.3


From ce151f630d10664353ff1c9172a7495557792abe Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 17:35:40 +0100
Subject: feat: highlighted sidebar as you scroll on doc reference pages

---
 .../react-shared/src/components/markdown_section.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

(limited to 'packages/react-shared/src/components/markdown_section.tsx')

diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index 3dc3efe12..9f5855d16 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -20,6 +20,7 @@ export interface MarkdownSectionProps {
     headerSize?: HeaderSizes;
     githubLink?: string;
     shouldReformatTitle?: boolean;
+    alternativeSectionTitle?: string;
 }
 
 interface DefaultMarkdownSectionProps {
@@ -47,22 +48,25 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
         const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;
 
         const id = utils.getIdFromName(sectionName);
-        const finalSectionName = this.props.shouldReformatTitle
+        const formattedSectionName = this.props.shouldReformatTitle
             ? utils.convertCamelCaseToSpaces(sectionName)
             : sectionName;
+        const title = !_.isUndefined(this.props.alternativeSectionTitle)
+            ? this.props.alternativeSectionTitle
+            : formattedSectionName;
         return (
             <div
                 className="md-px1 sm-px2 overflow-hidden"
                 onMouseOver={this._setAnchorVisibility.bind(this, true)}
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >
-                <ScrollElement name={id}>
-                    <Container className="clearfix" marginBottom="20px">
+                <ScrollElement name={id} style={{ paddingBottom: 20 }}>
+                    <Container className="clearfix" paddingTop="30px" paddingBottom="20px">
                         <div className="col lg-col-8 md-col-8 sm-col-12">
                             <span style={{ color: colors.grey700 }}>
                                 <AnchorTitle
                                     headerSize={headerSize}
-                                    title={_.capitalize(finalSectionName)}
+                                    title={_.capitalize(title)}
                                     id={id}
                                     shouldShowAnchor={this.state.shouldShowAnchor}
                                 />
@@ -87,13 +91,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                             paragraph: MarkdownParagraphBlock,
                         }}
                     />
-                    <Container
-                        width={'100%'}
-                        height={'1px'}
-                        backgroundColor={colors.grey300}
-                        marginTop={'32px'}
-                        marginBottom={'32px'}
-                    />
+                    <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'32px'} />
                 </ScrollElement>
             </div>
         );
-- 
cgit v1.2.3


From 17fb4d5b5703df2a86be0c2f1210c1327debc033 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 16 Oct 2018 16:38:05 +0100
Subject: chore: Remove unused prop

---
 packages/react-shared/src/components/markdown_section.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

(limited to 'packages/react-shared/src/components/markdown_section.tsx')

diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index 9f5855d16..d5de324c3 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -19,7 +19,6 @@ export interface MarkdownSectionProps {
     markdownContent: string;
     headerSize?: HeaderSizes;
     githubLink?: string;
-    shouldReformatTitle?: boolean;
     alternativeSectionTitle?: string;
 }
 
@@ -36,7 +35,6 @@ export interface MarkdownSectionState {
 export class MarkdownSection extends React.Component<MarkdownSectionProps, MarkdownSectionState> {
     public static defaultProps: Partial<MarkdownSectionProps> = {
         headerSize: HeaderSizes.H3,
-        shouldReformatTitle: true,
     };
     constructor(props: MarkdownSectionProps) {
         super(props);
@@ -48,9 +46,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
         const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;
 
         const id = utils.getIdFromName(sectionName);
-        const formattedSectionName = this.props.shouldReformatTitle
-            ? utils.convertCamelCaseToSpaces(sectionName)
-            : sectionName;
+        const formattedSectionName = utils.convertCamelCaseToSpaces(sectionName);
         const title = !_.isUndefined(this.props.alternativeSectionTitle)
             ? this.props.alternativeSectionTitle
             : formattedSectionName;
-- 
cgit v1.2.3


From 55a3bc8cb6772802672f60f22c5ed5c7e1b2dfdd Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 16 Oct 2018 16:43:43 +0100
Subject: chore: don't use Container in react-shared, react-docs yet

---
 packages/react-shared/src/components/markdown_section.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

(limited to 'packages/react-shared/src/components/markdown_section.tsx')

diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index d5de324c3..e6a7d80d5 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -8,7 +8,6 @@ import { colors } from '../utils/colors';
 import { utils } from '../utils/utils';
 
 import { AnchorTitle } from './anchor_title';
-import { Container } from './container';
 import { Link } from './link';
 import { MarkdownCodeBlock } from './markdown_code_block';
 import { MarkdownLinkBlock } from './markdown_link_block';
@@ -57,7 +56,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >
                 <ScrollElement name={id} style={{ paddingBottom: 20 }}>
-                    <Container className="clearfix" paddingTop="30px" paddingBottom="20px">
+                    <div className="clearfix" style={{ paddingTop: 30, paddingBottom: 20 }}>
                         <div className="col lg-col-8 md-col-8 sm-col-12">
                             <span style={{ color: colors.grey700 }}>
                                 <AnchorTitle
@@ -77,7 +76,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                                 </div>
                             )}
                         </div>
-                    </Container>
+                    </div>
                     <ReactMarkdown
                         source={markdownContent}
                         escapeHtml={false}
@@ -87,7 +86,14 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                             paragraph: MarkdownParagraphBlock,
                         }}
                     />
-                    <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'32px'} />
+                    <div
+                        style={{
+                            width: '100%',
+                            height: 1,
+                            backgroundColor: colors.grey300,
+                            marginTop: 32,
+                        }}
+                    />
                 </ScrollElement>
             </div>
         );
-- 
cgit v1.2.3