diff options
Diffstat (limited to 'packages/react-shared')
5 files changed, 13 insertions, 9 deletions
diff --git a/packages/react-shared/CHANGELOG.md b/packages/react-shared/CHANGELOG.md index bf0fb7ab1..51fb8e4b6 100644 --- a/packages/react-shared/CHANGELOG.md +++ b/packages/react-shared/CHANGELOG.md @@ -3,5 +3,4 @@ ## v0.1.0 - _TBD, 2018_ * Added new colors (#468) - -## v0.0.1 - _March 8, 2018_ + * Fix section and menuItem text display to replace dashes with spaces. diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index d24a43dcb..449e8a045 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -43,6 +43,7 @@ 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.convertDashesToSpaces(sectionName); return ( <div className="md-px1 sm-px2 overflow-hidden" @@ -55,7 +56,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd <span style={{ textTransform: 'capitalize', color: colors.grey700 }}> <AnchorTitle headerSize={headerSize} - title={sectionName} + title={finalSectionName} id={id} shouldShowAnchor={this.state.shouldShowAnchor} /> diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 2225bd197..f49d6fcf7 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -45,7 +45,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N }; public render() { const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => { - const finalSectionName = sectionName.replace(/-/g, ' '); + const finalSectionName = utils.convertDashesToSpaces(sectionName); if (this.props.shouldDisplaySectionHeaders) { const id = utils.getIdFromName(sectionName); return ( @@ -85,6 +85,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N : styles.menuItemWithoutHeaders; const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; const menuItems = _.map(menuItemNames, menuItemName => { + const finalMenuItemName = utils.convertDashesToSpaces(menuItemName); const id = utils.getIdFromName(menuItemName); return ( <div key={menuItemName}> @@ -96,11 +97,11 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N containerId={constants.DOCS_CONTAINER_ID} > <MenuItem - onTouchTap={this._onMenuItemClick.bind(this, menuItemName)} + onTouchTap={this._onMenuItemClick.bind(this, finalMenuItemName)} style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles} > - <span style={{ textTransform: 'capitalize' }}>{menuItemName}</span> + <span style={{ textTransform: 'capitalize' }}>{finalMenuItemName}</span> </MenuItem> </ScrollLink> {this._renderMenuItemSubsections(menuItemName)} @@ -122,7 +123,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N const name = `${menuItemName}-${entityName}`; const id = utils.getIdFromName(name); return ( - <li key={`menuItem-${entityName}`}> + <li key={`menuSubsectionItem-${name}`}> <ScrollLink to={id} offset={0} diff --git a/packages/react-shared/src/components/section_header.tsx b/packages/react-shared/src/components/section_header.tsx index ee34a6c09..0224c2127 100644 --- a/packages/react-shared/src/components/section_header.tsx +++ b/packages/react-shared/src/components/section_header.tsx @@ -35,7 +35,7 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe public render() { const { sectionName, headerSize } = this.props as PropsWithDefaults; - const finalSectionName = this.props.sectionName.replace(/-/g, ' '); + const finalSectionName = utils.convertDashesToSpaces(this.props.sectionName); const id = utils.getIdFromName(finalSectionName); return ( <div @@ -48,7 +48,7 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe title={ <span style={{ - textTransform: 'uppercase', + textTransform: 'capitalize', color: colors.grey, fontFamily: 'Roboto Mono', fontWeight: 300, diff --git a/packages/react-shared/src/utils/utils.ts b/packages/react-shared/src/utils/utils.ts index b3acb081e..1538dd087 100644 --- a/packages/react-shared/src/utils/utils.ts +++ b/packages/react-shared/src/utils/utils.ts @@ -30,6 +30,9 @@ export const utils = { const id = name.replace(/ /g, '-'); return id; }, + convertDashesToSpaces(text: string) { + return text.replace(/-/g, ' '); + }, getEtherScanLinkIfExists( addressOrTxHash: string, networkId: number, |