diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-15 18:27:56 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-15 18:27:56 +0800 |
commit | eee0640b07bcddccbddf68618f2772b1de92a18d (patch) | |
tree | 98f132b1b36c507f9bfb66042b7ee6e01338766e /packages/react-shared/src/components/markdown_section.tsx | |
parent | 4298da118f8cb7ca54b255576894bc98b7f7b374 (diff) | |
download | dexon-sol-tools-eee0640b07bcddccbddf68618f2772b1de92a18d.tar dexon-sol-tools-eee0640b07bcddccbddf68618f2772b1de92a18d.tar.gz dexon-sol-tools-eee0640b07bcddccbddf68618f2772b1de92a18d.tar.bz2 dexon-sol-tools-eee0640b07bcddccbddf68618f2772b1de92a18d.tar.lz dexon-sol-tools-eee0640b07bcddccbddf68618f2772b1de92a18d.tar.xz dexon-sol-tools-eee0640b07bcddccbddf68618f2772b1de92a18d.tar.zst dexon-sol-tools-eee0640b07bcddccbddf68618f2772b1de92a18d.zip |
chore: many small stylistic changes
Diffstat (limited to 'packages/react-shared/src/components/markdown_section.tsx')
-rw-r--r-- | packages/react-shared/src/components/markdown_section.tsx | 25 |
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..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> ); |