Text.js

import { has } from 'lodash'
import { th } from '@pubsweet/ui-toolkit'
import styled, { css } from 'styled-components'

const textHelper = props => {
  if (has(props, 'secondary')) {
    return css`
      color: ${th('colorSecondary')};
      font-family: ${th('fontReading')};
    `
  }
  if (has(props, 'customId')) {
    return css`
      color: ${th('colorPrimary')};
      font-family: ${th('fontInterface')};
    `
  }
  return css`
    color: ${th('colorText')};
    font-family: ${th('fontReading')};
  `
}

const fontSize = css`
  font-size: ${props =>
    props.small ? th('fontSizeBaseSmall') : th('fontSizeBase')};
  line-height: ${props =>
    props.small ? th('lineHeightBaseSmall') : th('lineHeightBase')};
`

export default styled.span`
  ${fontSize};
  ${textHelper};
`