aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-shared
diff options
context:
space:
mode:
Diffstat (limited to 'packages/react-shared')
-rw-r--r--packages/react-shared/CHANGELOG.md3
-rw-r--r--packages/react-shared/src/components/markdown_section.tsx3
-rw-r--r--packages/react-shared/src/components/nested_sidebar_menu.tsx9
-rw-r--r--packages/react-shared/src/components/section_header.tsx4
-rw-r--r--packages/react-shared/src/utils/utils.ts3
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,