import { Subscriber } from 'react-broadcast'; import isString from 'lodash.isstring'; import typography from '../typography'; import Baseline from '../baseline'; import remcalc from 'remcalc'; import is from 'styled-is'; import styled from 'styled-components'; import PropTypes from 'prop-types'; import React from 'react'; const Container = styled.div` font-size: ${remcalc(15)}; line-height: 1.5; color: ${props => props.theme.secondary}; ${typography.fontFamily}; ${typography.semibold}; display: flex; flex-direction: row; justify-content: flex-start; flex-grow: 2; width: 100%; padding: ${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)}; ${is('fromHeader')` color: ${props => props.theme.white}; `}; ${is('collapsed')` flex-grow: 0; flex-direction: column; width: auto; justify-content: center; padding: 0 ${remcalc(18)}; `}; `; const Span = styled.span` display: inline-block; flex-direction: column; justify-content: center; ${is('collapsed')` display: flex; `}; `; const Title = ({ children, ...rest }) => { const _children = isString(children) ? {children} : children; const render = ({ collapsed = false, fromHeader = false }) => {_children} ; return ( {render} ); }; Title.propTypes = { children: PropTypes.node, /** * @ignore */ collapsed: PropTypes.bool, /** * @ignore */ fromHeader: PropTypes.bool }; export default Baseline(Title);