51b0744bcc
Setting up example routing Adding routing spike Topology proof of concept Add breadcrumb Add sections menu Add App wrapper Rebase and remove menu placeholder Sort out services routes Add all exisiting routes Linting Tests Remove bold font Change services topology and list pathnames Remove console.logs Rebuild routing for clarity and flatter dom structure Simplify strings and /create instead of /~create for new billing Rebuild routing for clarity and flatter dom structure
87 lines
1.6 KiB
JavaScript
87 lines
1.6 KiB
JavaScript
import { Subscriber } from 'react-broadcast';
|
|
import isString from 'lodash.isstring';
|
|
import { Baseline, typography } from '../../shared/composers';
|
|
import { colors } from '../../shared/constants';
|
|
import { remcalc, is } from '../../shared/functions';
|
|
import styled from 'styled-components';
|
|
import React from 'react';
|
|
|
|
const Container = styled.div`
|
|
font-size: ${remcalc(15)};
|
|
line-height: 1.5;
|
|
color: ${colors.base.secondary};
|
|
|
|
${typography.medium}
|
|
|
|
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: ${colors.base.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,
|
|
...props
|
|
}) => {
|
|
const _children = !isString(children) ? children : (
|
|
<Span>{children}</Span>
|
|
);
|
|
|
|
const render = ({
|
|
collapsed = false,
|
|
fromHeader = false
|
|
}) => (
|
|
<Container
|
|
collapsed={collapsed}
|
|
fromHeader={fromHeader}
|
|
name='list-item-title'
|
|
xs={collapsed ? 6 : 12}
|
|
{...props}
|
|
>
|
|
{_children}
|
|
</Container>
|
|
);
|
|
|
|
return (
|
|
<Subscriber channel='list-item'>
|
|
{render}
|
|
</Subscriber>
|
|
);
|
|
};
|
|
|
|
Title.propTypes = {
|
|
children: React.PropTypes.node,
|
|
collapsed: React.PropTypes.bool,
|
|
fromHeader: React.PropTypes.bool
|
|
};
|
|
|
|
export default Baseline(
|
|
Title
|
|
);
|