Section Header Cleanup

improved behavior when empty

src/components/SectionHeader/ExpandingMenu.tsx

@@ -52,6 +52,10 @@ export default class ExpandingMenu extends React.Component {
             color: #ffffff;
 
             cursor: pointer;
+
+            @media (min-width: 600px) {
+              color: #000000;
+            }
           `}
           onClick={this.expandMenu}
         >

src/components/SectionHeader/ExpandingTab.tsx

@@ -4,18 +4,8 @@ import { css } from 'react-emotion'
 export default class ExpandingTab extends React.Component<ExpandingTabProps> {
   constructor(props: ExpandingTabProps) {
     super(props)
-    this.state = {
-      underlined: 'none',
-    }
-    this.underlineHovered = this.underlineHovered.bind(this)
-    this.underlineClear = this.underlineClear.bind(this)
-  }
-  public underlineHovered() {
-    this.setState({ underlined: 'underline' })
-  }
-  public underlineClear() {
-    this.setState({ underlined: 'none' })
   }
+
   public render() {
     return (
       <li
@@ -33,7 +23,7 @@ export default class ExpandingTab extends React.Component<ExpandingTabProps> {
         `}
       >
         <a
-          href={this.props.section.link}
+          href={this.props.section.url}
           className={css`
             display: block;
             font-family: Source Sans Pro;
@@ -43,10 +33,11 @@ export default class ExpandingTab extends React.Component<ExpandingTabProps> {
             text-transform: uppercase;
             text-align: left;
             color: #ffffff;
+            text-decoration: none;
+            &:hover {
+              text-decoration: underline;
+            }
           `}
-          style={{ textDecoration: this.state.underlined }}
-          onMouseEnter={this.underlineHovered}
-          onMouseLeave={this.underlineClear}
         >
           {this.props.section.name}
         </a>

src/components/SectionHeader/ExpandingTabs.tsx

@@ -7,16 +7,6 @@ export default class ExpandingTabs extends React.Component<ExpandingTabsProps> {
   constructor(props: ExpandingTabsProps) {
     super(props)
   }
-  public underlineHovered(idTitle: string) {
-    document.getElementById(
-      'SectionHeaderExpandingTab' + idTitle
-    ).style.textDecoration = 'underline'
-  }
-  public underlineClear(idTitle: string) {
-    document.getElementById(
-      'SectionHeaderExpandingTab' + idTitle
-    ).style.textDecoration = 'none'
-  }
   public render() {
     const sections = this.props.sectionList
     const sectionTabList = []

src/components/SectionHeader/SectionTab.tsx

@@ -4,33 +4,20 @@ import { css } from 'react-emotion'
 export default class SectionTab extends React.Component<SectionTabProps> {
   constructor(props: SectionTabProps) {
     super(props)
-    this.state = {
-      underlined: 'none',
-    }
-    this.underlineHovered = this.underlineHovered.bind(this)
-    this.underlineClear = this.underlineClear.bind(this)
-  }
-  public underlineHovered() {
-    this.setState({ underlined: 'underline' })
-  }
-  public underlineClear() {
-    this.setState({ underlined: 'none' })
   }
   public render() {
-    const { underlineState = 'underline' } = this.state.underlined
     return (
       <li
         className={css`
           box-sizing: border-box;
-          text-decoration: none;
           height: 38px;
           display: inline-block;
           padding: 7px 10px;
           background-color: #000000;
         `}
       >
         <a
-          href={this.props.section.link}
+          href={this.props.section.url}
           className={css`
             color: #ffffff;
             font-family: Source Sans Pro;
@@ -39,10 +26,11 @@ export default class SectionTab extends React.Component<SectionTabProps> {
             line-height: normal;
             font-size: 18px;
             text-transform: uppercase;
+            text-decoration: none;
+            &:hover {
+              text-decoration: underline;
+            }
           `}
-          style={{ textDecoration: this.state.underlined }}
-          onMouseEnter={this.underlineHovered}
-          onMouseLeave={this.underlineClear}
         >
           {this.props.section.name}
         </a>

src/components/SectionHeader/index.mdx

@@ -10,7 +10,7 @@ import SectionHeader from '.'
 
 A header to describe the current section the viewer is in
 
-Note that `SectionHeader` expects an array of `SectionLink` objects which include `name` and `link` values.
+Note that `SectionHeader` expects an array of `Link` objects which include `name` and `url` values.
 
 <Props of={SectionHeader} />
 

src/components/SectionHeader/index.tsx

@@ -4,18 +4,18 @@ import { css } from 'react-emotion'
 import SectionTabs from './SectionTabs'
 import ExpandingMenu from './ExpandingMenu'
 
-interface SectionLink {
+interface Link {
   name: string
   link: string
 }
 
 interface SectionHeaderProps {
   name: string
-  sectionList: SectionLink[]
+  sectionList: Link[]
 }
 
 interface ExpandingTabsProps {
-  sectionList: SectionLink[]
+  sectionList: Link[]
 }
 
 interface SectionTabProps {
@@ -57,9 +57,9 @@ export default class SectionHeader extends React.Component<SectionHeaderProps> {
             line-height: 62px;
             height: 55px;
 
-            font-family: Archivo Black, Arial, sans-serif;
+            font-family: Archivo Black, sans-serif;
             font-style: normal;
-            font-weight: normal;
+            font-weight: 900;
             line-height: normal;
             font-size: 48px;
             text-transform: uppercase;

src/components/StoryList/index.tsx

@@ -30,7 +30,8 @@ interface StoryListProps {
   /** An image relating to the most popular story (i.e. the first in the list). */
   image?: ImageContent
   /** Determines the title of the black top-bar (see example below). Defaults to popular stories. */
-  type: StoryListType
+  // type: StoryListType
+  type: string
 }
 
 class StoryList extends React.Component<StoryListProps> {
@@ -58,11 +59,12 @@ class StoryList extends React.Component<StoryListProps> {
       >
         <TopBar
           title={
-            !!this.props.image
+            /* !!this.props.image
               ? 'IN THE NEWS'
               : this.props.type === StoryListType.Popular
               ? 'POPULAR'
-              : 'IN THE PRINT'
+              : 'IN THE PRINT' */
+            this.props.type
           }
         />
         {!!this.props.image && (

src/globals/mainsiteGlobalStyles.tsx

@@ -13,6 +13,7 @@ if (typeof window !== 'undefined') {
         'Lora:700',
         'Lora:400',
         'PT Serif:400',
+        'Source Sans Pro:400',
         'Source Sans Pro:700',
         'Source Sans Pro:900',
       ],