diff options
Diffstat (limited to 'packages/react-shared')
| -rw-r--r-- | packages/react-shared/src/components/nested_sidebar_menu.tsx | 31 | ||||
| -rw-r--r-- | packages/react-shared/src/utils/colors.ts | 5 |
2 files changed, 29 insertions, 7 deletions
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index c8bddb59a..14b233cd6 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -19,6 +19,7 @@ export interface NestedSidebarMenuProps { selectedVersion?: string; versions?: string[]; onVersionSelected?: (semver: string) => void; + shouldReformatMenuItemNames?: boolean; } export interface NestedSidebarMenuState {} @@ -42,16 +43,16 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N public static defaultProps: Partial<NestedSidebarMenuProps> = { shouldDisplaySectionHeaders: true, onMenuItemClick: _.noop.bind(_), + shouldReformatMenuItemNames: true, }; public render(): React.ReactNode { const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); if (this.props.shouldDisplaySectionHeaders) { // tslint:disable-next-line:no-unused-variable - const id = utils.getIdFromName(sectionName); return ( - <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}> - <div style={{ fontWeight: 'bold', fontSize: 15 }} className="py1"> + <div key={`section-${sectionName}`} className="py1" style={{ color: colors.linkSectionGrey }}> + <div style={{ fontWeight: 'bold', fontSize: 15, letterSpacing: 0.5 }} className="py1"> {finalSectionName.toUpperCase()} </div> {this._renderMenuItems(menuItems)} @@ -86,7 +87,9 @@ 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 finalMenuItemName = this.props.shouldReformatMenuItemNames + ? utils.convertDashesToSpaces(menuItemName) + : menuItemName; const id = utils.getIdFromName(menuItemName); return ( <div key={menuItemName}> @@ -98,8 +101,18 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N duration={constants.DOCS_SCROLL_DURATION_MS} containerId={constants.DOCS_CONTAINER_ID} > - <MenuItem style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles}> - <span style={{ textTransform: 'capitalize' }}>{finalMenuItemName}</span> + <MenuItem + style={menuItemStyles} + innerDivStyle={menuItemInnerDivStyles} + onClick={this._onMenuItemClick.bind(this)} + > + <span + style={{ + textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none', + }} + > + {finalMenuItemName} + </span> </MenuItem> </ScrollLink> {this._renderMenuItemSubsections(menuItemName)} @@ -136,6 +149,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N fontSize: 14, lineHeight: '35px', }} + onClick={this._onMenuItemClick.bind(this)} > {entityName} </MenuItem> @@ -146,4 +160,9 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N </ul> ); } + private _onMenuItemClick(): void { + if (!_.isUndefined(this.props.onMenuItemClick)) { + this.props.onMenuItemClick(); + } + } } diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 7d047a50e..778a5bc20 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -8,6 +8,7 @@ const baseColors = { greyishPink: '#E6E5E5', grey300: '#E0E0E0', beigeWhite: '#E4E4E4', + lightBgGrey: '#EDEDED', grey350: '#cacaca', grey400: '#BDBDBD', lightGrey: '#BBBBBB', @@ -15,6 +16,7 @@ const baseColors = { grey: '#A5A5A5', darkGrey: '#818181', landingLinkGrey: '#919191', + linkSectionGrey: '#999999', grey700: '#616161', grey750: '#515151', grey800: '#424242', @@ -24,8 +26,9 @@ const baseColors = { darkestGrey: '#272727', lightBlue: '#60A4F4', lightBlueA700: '#0091EA', - linkBlue: '#1D5CDE', + lightLinkBlue: '#3289F1', mediumBlue: '#488AEA', + linkBlue: '#1D5CDE', darkBlue: '#4D5481', lightTurquois: '#aefcdc', turquois: '#058789', |