aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-shared/src/components/markdown_section.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/react-shared/src/components/markdown_section.tsx')
-rw-r--r--packages/react-shared/src/components/markdown_section.tsx25
1 files changed, 19 insertions, 6 deletions
diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index e84d2b078..e6a7d80d5 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -11,12 +11,14 @@ import { AnchorTitle } from './anchor_title';
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;
+ alternativeSectionTitle?: string;
}
interface DefaultMarkdownSectionProps {
@@ -43,20 +45,23 @@ 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 formattedSectionName = utils.convertCamelCaseToSpaces(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}>
- <div className="clearfix pt3">
+ <ScrollElement name={id} style={{ paddingBottom: 20 }}>
+ <div className="clearfix" style={{ paddingTop: 30, paddingBottom: 20 }}>
<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(title)}
id={id}
shouldShowAnchor={this.state.shouldShowAnchor}
/>
@@ -72,13 +77,21 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
)}
</div>
</div>
- <hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
<ReactMarkdown
source={markdownContent}
escapeHtml={false}
renderers={{
code: MarkdownCodeBlock,
link: MarkdownLinkBlock,
+ paragraph: MarkdownParagraphBlock,
+ }}
+ />
+ <div
+ style={{
+ width: '100%',
+ height: 1,
+ backgroundColor: colors.grey300,
+ marginTop: 32,
}}
/>
</ScrollElement>