Adds TS linter

components/anchor/index.tsx

@@ -6,23 +6,24 @@ import * as React from 'react'
 import StyledAnchor from './style'
 
 export interface AnchorTheme {
-  textDecoration?: string,
-  color?: string,
-  fontSize?: string,
+  textDecoration?: string
+  color?: string
+  fontSize?: string
   userSelect?: string
 }
 
 export interface AnchorProps {
-  id?: string,
-  href: string,
-  target?: '_blank' | '_parent' | '_self' | '_top',
-  text?: string | number,
+  id?: string
+  href: string
+  target?: '_blank' | '_parent' | '_self' | '_top'
+  text?: string | number
   theme?: AnchorTheme
 }
 
 class Anchor extends React.PureComponent<AnchorProps, {}> {
   render () {
     const { id, href, target, theme, text } = this.props
+
     return (
       <StyledAnchor
         id={id}

components/anchor/style.ts

@@ -16,4 +16,3 @@ const StyledAnchor = styled.a`
 ` as any
 
 export default StyledAnchor
-

components/boxedContent/index.tsx

@@ -7,15 +7,15 @@ import * as React from 'react'
 import StyledBoxedContent from './style'
 
 export interface BoxedContentTheme {
-  maxWidth?: string,
-  margin?: string,
-  fontFamily?: string,
+  maxWidth?: string
+  margin?: string
+  fontFamily?: string
   color?: string
 }
 
 export interface BoxedContentProps {
-  id?: string,
-  theme?: BoxedContentTheme,
+  id?: string
+  theme?: BoxedContentTheme
   children?: React.ReactNode
 }
 

components/clock/index.tsx

@@ -2,9 +2,9 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
- import * as React  from 'react'
+import * as React from 'react'
 
- import {
+import {
    StyledClock,
    StyledPeriod,
    StyledTime,
@@ -15,12 +15,12 @@ export interface ClockTheme {
   color?: string
 }
 export interface ClockProps {
-  id?: string,
+  id?: string
   theme?: ClockTheme
 }
 
 export interface ClockState {
-  currentTime: Array<{type: string, value: string}>,
+  currentTime: Array<{type: string, value: string}>
   date: Date
 }
 
@@ -91,4 +91,4 @@ class Clock extends React.PureComponent<ClockProps, ClockState> {
   }
 }
 
- export default Clock
+export default Clock

components/clock/style.ts

@@ -56,4 +56,3 @@ export {
   StyledPeriod,
   StyledTimeSeparator
 }
-

components/contentToggleArrow/index.tsx

@@ -13,12 +13,12 @@ import {
 } from './style'
 
 export interface ContentToggleArrowProps {
-  id?: string,
-  summary: string,
-  open?: boolean,
-  defaultOpen?: boolean,
-  withSeparator?: boolean,
-  children?: React.ReactNode,
+  id?: string
+  summary: string
+  open?: boolean
+  defaultOpen?: boolean
+  withSeparator?: boolean
+  children?: React.ReactNode
   onClick?: (e: any) => void
 }
 
@@ -31,7 +31,7 @@ class ContentToggleArrow extends React.PureComponent<ContentToggleArrowProps, Co
     super(props)
     // defaultOpen is only valid when there's no user activity
     // which means open is undefined
-    this.state = { open: props.open != null ? props.open : props.defaultOpen }
+    this.state = { open: props.open !== undefined ? props.open : props.defaultOpen }
     this.handleClick = this.handleClick.bind(this)
   }
 
@@ -42,7 +42,7 @@ class ContentToggleArrow extends React.PureComponent<ContentToggleArrowProps, Co
   }
 
   handleClick (e: any) {
-    this.setState((prevState: ContentToggleArrowState) => ({open: !prevState.open}))
+    this.setState((prevState: ContentToggleArrowState) => ({ open: !prevState.open }))
 
     this.props.onClick!({
       target: {
@@ -52,7 +52,7 @@ class ContentToggleArrow extends React.PureComponent<ContentToggleArrowProps, Co
     })
   }
 
-  render() {
+  render () {
     const { id, summary, withSeparator, children } = this.props
     const { open } = this.state
 

components/dataBlock/index.tsx

@@ -9,8 +9,8 @@ import {
 } from './style'
 
 export interface DataProps {
-  id?: string,
-  asList?: boolean,
+  id?: string
+  asList?: boolean
   children?: React.ReactNode
 }
 
@@ -23,18 +23,18 @@ class DataBlock extends React.PureComponent<DataProps, {}> {
   }
 }
 export interface DataItemTheme {
-  counterColor?: string,
-  descriptionColor?: string,
+  counterColor?: string
+  descriptionColor?: string
   userSelect?: string
 }
 
 export interface DataItemProps {
-  id?: string,
-  counter?: string | number,
-  text?: string,
-  description?: string,
-  size?: 'medium' | 'small',
-  onClick?: (e: any) => void,
+  id?: string
+  counter?: string | number
+  text?: string
+  description?: string
+  size?: 'medium' | 'small'
+  onClick?: (e: any) => void
   theme?: DataItemTheme
 }
 
@@ -54,10 +54,14 @@ class DataItem extends React.PureComponent<DataItemProps, {}> {
       <StyledDataItem id={id} theme={theme} onClick={onClick} size={size}>
         <StyledDataItemCounter theme={theme} size={size}>{counter}</StyledDataItemCounter>
           {
-            text && <StyledDataItemText theme={theme} size={size}>{text}</StyledDataItemText>
+            text
+            ? <StyledDataItemText theme={theme} size={size}>{text}</StyledDataItemText>
+            : null
           }
           {
-          description && <StyledDataItemDescription theme={theme} size={size}>{description}</StyledDataItemDescription>
+            description
+            ? <StyledDataItemDescription theme={theme} size={size}>{description}</StyledDataItemDescription>
+            : null
           }
       </StyledDataItem>
     )

components/gridSystem/index.tsx

@@ -6,22 +6,22 @@ import * as React from 'react'
 import { StyledGrid, StyledColumn } from './style'
 
 export interface GridTheme {
-  padding?: string,
-  gridGap?: string,
-  maxWidth?: string,
-  height?: string,
-  color?: string,
+  padding?: string
+  gridGap?: string
+  maxWidth?: string
+  height?: string
+  color?: string
   backgroundColor?: string
   margin?: string
   alignItems?: string
 }
 
 export interface GridProps {
-  id?: string,
-  disabled?: boolean,
-  columns?: number,
-  onClick?: (e: any) => void,
-  children?: React.ReactNode,
+  id?: string
+  disabled?: boolean
+  columns?: number
+  onClick?: (e: any) => void
+  children?: React.ReactNode
   theme?: GridTheme
 }
 
@@ -43,19 +43,19 @@ class Grid extends React.PureComponent<GridProps, {}> {
 }
 
 export interface ColumnTheme {
-  justifyContent?: string,
-  alignItems?: string,
-  backgroundColor?: string,
-  flexDirection?: string,
-  flexWrap?: string,
+  justifyContent?: string
+  alignItems?: string
+  backgroundColor?: string
+  flexDirection?: string
+  flexWrap?: string
   overflow?: string
 }
 
 export interface ColumnProps {
-  id?: string,
-  size?: number | string,
-  theme?: ColumnTheme,
-  onClick?: (e: any) => void,
+  id?: string
+  size?: number | string
+  theme?: ColumnTheme
+  onClick?: (e: any) => void
   children?: React.ReactNode
 }
 

components/headings/index.tsx

@@ -14,8 +14,8 @@ import {
 } from './style'
 
 export interface TitleHeadingProps {
-  id?: string,
-  text?: string,
+  id?: string
+  text?: string
   label?: string
 }
 
@@ -26,15 +26,17 @@ class TitleHeading extends React.PureComponent<TitleHeadingProps, {}> {
       <StyledHeadingTitle id={id}>
         {text}
         {
-          label && <StyledHeadingTitleLabel>{label}</StyledHeadingTitleLabel>
+          label
+          ? <StyledHeadingTitleLabel>{label}</StyledHeadingTitleLabel>
+          : null
         }
       </StyledHeadingTitle>
     )
   }
 }
 
 export interface SectionHeadingProps {
-  id?: string,
+  id?: string
   text?: string
 }
 
@@ -48,7 +50,7 @@ class SectionHeading extends React.PureComponent<SectionHeadingProps, {}> {
 }
 
 export interface FeatureHeadingProps {
-  id?: string,
+  id?: string
   text?: string
 }
 
@@ -62,16 +64,16 @@ class FeatureHeading extends React.PureComponent<FeatureHeadingProps, {}> {
 }
 
 export interface HeadingTheme {
-  color?: string,
-  fontFamily?: string,
-  fontWeight?: string,
+  color?: string
+  fontFamily?: string
+  fontWeight?: string
   margin?: string
 }
 
 export interface HeadingProps {
-  id?: string,
-  level?: 1 | 2 | 3 | 4 | 5 | 6,
-  text?: string,
+  id?: string
+  level?: 1 | 2 | 3 | 4 | 5 | 6
+  text?: string
   theme?: HeadingTheme
 }
 
@@ -99,7 +101,7 @@ class Heading extends React.PureComponent<HeadingProps, {}> {
 
 export {
   TitleHeading, // to be used as a page's title
-  SectionHeading, // the main title coveering one/more features
+  SectionHeading, // the main title covering one/more features
   FeatureHeading, // to be used as a feature title
   Heading // general heading styles ranging from 1-6
 }

components/headings/style.ts

@@ -24,7 +24,7 @@ const StyledHeadingTitle = StyledSharedHeading.withComponent('h1').extend`
   white-space: nowrap;
   font-size: 28px;
   color: rgb(255, 80, 0);
-` as any
+`
 
 const StyledHeadingTitleLabel = styled.sup`
   box-sizing: border-box;
@@ -37,15 +37,15 @@ const StyledSectionHeading = StyledSharedHeading.withComponent('h2').extend`
   font-size: 20px;
   margin: 0 0 20px;
   font-weight: 400;
-` as any
+`
 
 const StyledFeatureHeading = StyledSharedHeading.withComponent('h2').extend`
   color: #444444;
   font-weight: normal;
   font-size: 14px;
   margin: 18px 0 8px;
   min-width: 160px;
-` as any
+`
 
 const StyledH1 = styled.h1`
   box-sizing: border-box;

components/mediaContent/index.tsx

@@ -11,14 +11,14 @@ import {
 } from './style'
 
 export interface MediaTheme {
-  width?: string,
+  width?: string
   margin?: string
 }
 
 export interface MediaContentProps {
-  id?: string,
-  media?: string,
-  children?: React.ReactNode,
+  id?: string
+  media?: string
+  children?: React.ReactNode
   theme?: MediaTheme
 }