fix list-item

fixes #281
This commit is contained in:
Sérgio Ramos 2017-02-27 15:41:08 +00:00 committed by Judit Greskovits
parent 017f133611
commit 7f2c92b730
19 changed files with 379 additions and 265 deletions

View File

@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom';
import forceArray from 'force-array'; import forceArray from 'force-array';
import Anchor, { fn as AnchorFn } from '@ui/components/anchor'; import { Link } from '@ui/components/anchor';
import MetricsOutlet from '@components/metrics-outlet'; import MetricsOutlet from '@components/metrics-outlet';
import PropTypes from '@root/prop-types'; import PropTypes from '@root/prop-types';
@ -40,12 +39,8 @@ const ServiceItem = ({
<ListItemTitle>{service.name}</ListItemTitle> <ListItemTitle>{service.name}</ListItemTitle>
) : ( ) : (
<ListItemTitle> <ListItemTitle>
<Link to={to}> <Link secondary to={to}>
{AnchorFn(
<Anchor secondary>
{service.name} {service.name}
</Anchor>
)}
</Link> </Link>
</ListItemTitle> </ListItemTitle>
); );

View File

@ -1,22 +1,29 @@
import { is } from '../../shared/functions'; import { is } from '../../shared/functions';
import { colors } from '../../shared/constants'; import { colors } from '../../shared/constants';
import { Baseline } from '../../shared/composers'; import { Baseline } from '../../shared/composers';
import styled from 'styled-components'; import { Link as BaseLink } from 'react-router-dom';
import React from 'react'; import styled, { css } from 'styled-components';
const StyledAnchor = styled.a` const style = css`
color: ${colors.base.primary} !important; color: ${colors.base.primary};
${is('secondary')` ${is('secondary')`
color: ${colors.base.secondary} !important; color: ${colors.base.white};
`} `}
`; `;
const StyledAnchor = styled.a`
${style}
`;
const StyledLink = styled(BaseLink)`
${style}
`;
export default Baseline( export default Baseline(
StyledAnchor StyledAnchor
); );
export const fn = (element) => (props) => React.cloneElement(element, { export const Link = Baseline(
...element.props, StyledLink
...props );
}, element.props.children);

View File

@ -1,12 +1,10 @@
/* eslint react/prop-types: 0 */ /* eslint react/prop-types: 0 */
import { remcalc } from '../../shared/functions';
import { Baseline, bold } from '../../shared/composers';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import React from 'react'; import React from 'react';
import { remcalc } from '../../shared/functions';
import { Baseline } from '../../shared/composers';
import { bold } from '../../shared/composers/typography';
// If specificity is an issue (i.e nested elements) check base/index.js first // If specificity is an issue (i.e nested elements) check base/index.js first
// before using !important // before using !important
const elements = [{ const elements = [{

View File

@ -1,13 +1,8 @@
import { colors } from '../../shared/constants'; import { colors } from '../../shared/constants';
import { libreFranklin, bodyColor, regular } from '../../shared/composers';
import styled from 'styled-components'; import styled from 'styled-components';
import global from './global'; import global from './global';
import {
libreFranklin,
bodyColor,
regular
} from '../../shared/composers/typography';
export default styled.div` export default styled.div`
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;

View File

@ -160,11 +160,14 @@ const Button = (props) => {
const View = Views.reduce((sel, view) => sel ? sel : view(), null); const View = Views.reduce((sel, view) => sel ? sel : view(), null);
return ( return (
<View {...props} /> <View {...props}>
{props.children}
</View>
); );
}; };
Button.propTypes = { Button.propTypes = {
children: React.PropTypes.node,
href: React.PropTypes.string, href: React.PropTypes.string,
rr: React.PropTypes.bool, rr: React.PropTypes.bool,
to: React.PropTypes.string to: React.PropTypes.string

View File

@ -1,49 +1,55 @@
import { Subscriber } from 'react-broadcast';
import { Baseline } from '../../shared/composers'; import { Baseline } from '../../shared/composers';
import { remcalc, is } from '../../shared/functions'; import { remcalc, is, isNot } from '../../shared/functions';
import styled from 'styled-components'; import styled from 'styled-components';
import Title from './title'; import Title from './title';
import React from 'react'; import React from 'react';
const xs = (props) => props.collapsed
? 6
: 12;
const StyledTitle = styled(Title)` const StyledTitle = styled(Title)`
${is('collapsed')` font-weight: normal;
flex-grow: 2;
${isNot('collapsed')`
position: absolute; position: absolute;
bottom: 0; bottom: 0;
padding-bottom: ${remcalc(12)}; padding-bottom: ${remcalc(12)};
padding-top: 0; padding-top: 0;
`}; `};
font-weight: normal;
flex-grow: 2;
`; `;
const InnerDescription = styled.div` const InnerDescription = styled.div`
justify-content: flex-start; justify-content: flex-start;
${is('collapsed')` ${is('collapsed')`
margin-left: auto;
justify-content: flex-end; justify-content: flex-end;
margin-left: auto;
`}; `};
`; `;
const Description = ({ const Description = ({
children, children,
collapsed,
...props ...props
}) => ( }) => {
const render = ({
collapsed = false
}) => (
<StyledTitle <StyledTitle
{...props} collapsed={collapsed}
name='list-item-description' name='list-item-description'
xs={xs(props)} xs={collapsed ? 6 : 12}
> >
<InnerDescription collapsed={collapsed}> <InnerDescription collapsed={collapsed}>
{children} {children}
</InnerDescription> </InnerDescription>
</StyledTitle> </StyledTitle>
); );
return (
<Subscriber channel='list-item'>
{render}
</Subscriber>
);
};
Description.propTypes = { Description.propTypes = {
children: React.PropTypes.node, children: React.PropTypes.node,

View File

@ -1,15 +1,13 @@
import { Baseline } from '../../shared/composers'; import { Baseline } from '../../shared/composers';
import { colors } from '../../shared/constants'; import { colors } from '../../shared/constants';
import { remcalc } from '../../shared/functions'; import { remcalc } from '../../shared/functions';
import { raw as View } from './view'; import View from './view';
import styled from 'styled-components'; import styled from 'styled-components';
const GroupView = styled(View)` const GroupView = styled(View)`
display: block; display: block;
padding-top: ${remcalc(62)}; padding: ${remcalc(62, 23, 5, 23)};
padding-left: ${remcalc(23)};
padding-right: ${remcalc(23)};
padding-bottom: ${remcalc(5)};
background-color: ${colors.inactive.default}; background-color: ${colors.inactive.default};
`; `;

View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Broadcast, Subscriber } from 'react-broadcast';
import { remcalc } from '../../shared/functions'; import { remcalc } from '../../shared/functions';
import { Baseline } from '../../shared/composers'; import { Baseline } from '../../shared/composers';
import { colors } from '../../shared/constants'; import { colors } from '../../shared/constants';
@ -8,9 +9,8 @@ import Item from './item';
const StyledItem = styled(Item)` const StyledItem = styled(Item)`
position: absolute; position: absolute;
background-color: #3B4AAF; background-color: ${colors.base.primary};
border: solid ${remcalc(1)} ${colors.base.primaryDesaturatedActive};
border: solid ${remcalc(1)} #2D3884;
box-shadow: none; box-shadow: none;
width: calc(100% + ${remcalc(2)}); width: calc(100% + ${remcalc(2)});
@ -19,29 +19,38 @@ const StyledItem = styled(Item)`
top: ${remcalc(-1)}; top: ${remcalc(-1)};
left: ${remcalc(-1)}; left: ${remcalc(-1)};
right: ${remcalc(-1)}; right: ${remcalc(-1)};
& [name="list-item-subtitle"],
& [name="list-item-title"] {
color: ${colors.base.white};
}
`; `;
const addFromHeader = (children) => React.Children.map(children, (c) => { const Header = ({
return React.cloneElement(c, { children,
...c.props, ...props
}) => {
const render = (value) => {
const newValue = {
...value,
fromHeader: true fromHeader: true
}); };
});
const Header = (props) => ( return (
<Broadcast channel='list-item' value={newValue}>
<StyledItem <StyledItem
collapsed collapsed
headed
name='list-item-header' name='list-item-header'
headed
{...props}
> >
{addFromHeader(props.children)} {children}
</StyledItem> </StyledItem>
); </Broadcast>
);
};
return (
<Subscriber channel='list-item'>
{render}
</Subscriber>
);
};
Header.propTypes = { Header.propTypes = {
children: React.PropTypes.node children: React.PropTypes.node

View File

@ -1,19 +1,19 @@
import styled from 'styled-components'; import styled from 'styled-components';
import transferProps from '../../shared/transfer-props'; import { Broadcast, Subscriber } from 'react-broadcast';
import { Baseline } from '../../shared/composers'; import { Baseline } from '../../shared/composers';
import { boxes, colors } from '../../shared/constants'; import { boxes, colors } from '../../shared/constants';
import { remcalc, is } from '../../shared/functions'; import { remcalc, is, isAnd } from '../../shared/functions';
import Row from '../row'; import Row from '../row';
import React from 'react'; import React from 'react';
const paper = ` const paper = `
0 ${remcalc(8)} 0 ${remcalc(-5)} ${colors.base.grey}, 0 ${remcalc(8)} 0 ${remcalc(-5)} ${colors.base.background},
0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.grey}, 0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.grey},
0 ${remcalc(16)} 0 ${remcalc(-10)} ${colors.base.grey}, 0 ${remcalc(16)} 0 ${remcalc(-10)} ${colors.base.background},
0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.grey}; 0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.grey};
`; `;
const Item = styled(Row)` const StyledItem = styled(Row)`
position: relative; position: relative;
height: auto; height: auto;
min-height: ${remcalc(126)}; min-height: ${remcalc(126)};
@ -23,35 +23,65 @@ const Item = styled(Row)`
box-shadow: ${boxes.bottomShaddow}; box-shadow: ${boxes.bottomShaddow};
${is('collapsed')` ${is('collapsed')`
height: ${remcalc(48)};
min-height: auto; min-height: auto;
height: ${remcalc(48)};
${is('headed')`
box-shadow: ${boxes.bottomShaddowDarker};
`};
`};
${is('stacked')`
box-shadow: ${paper};
margin-bottom: ${remcalc(16)}; margin-bottom: ${remcalc(16)};
`}; `};
${isAnd('collapsed', 'headed')`
box-shadow: ${boxes.bottomShaddowDarker};
`};
${is('flat')` ${is('flat')`
box-shadow: none; box-shadow: none;
`}; `};
${is('stacked')`
margin-bottom: ${remcalc(16)};
box-shadow: ${paper};
`};
`; `;
export default Baseline( const Item = ({
transferProps([
'collapsed',
'headed'
], ({
children, children,
collapsed = false,
headed = false,
...props ...props
}) => ( }) => {
<Item name='list-item' {...props}> const render = (value) => {
{children} const newValue = {
</Item> fromHeader: (value || {}).fromHeader,
)) headed,
); collapsed
};
return (
<Broadcast channel='list-item' value={newValue}>
<StyledItem
name='list-item'
collapsed={collapsed}
headed={headed}
{...props}
>
{children}
</StyledItem>
</Broadcast>
);
};
return (
<Subscriber channel='list-item'>
{render}
</Subscriber>
);
};
Item.propTypes = {
children: React.PropTypes.node,
collapsed: React.PropTypes.bool,
headed: React.PropTypes.bool
};
export default Baseline(
Item
);

View File

@ -1,5 +1,5 @@
import styled from 'styled-components'; import styled from 'styled-components';
import transferProps from '../../shared/transfer-props'; import { Subscriber } from 'react-broadcast';
import { Baseline } from '../../shared/composers'; import { Baseline } from '../../shared/composers';
import { is } from '../../shared/functions'; import { is } from '../../shared/functions';
import Column from '../column'; import Column from '../column';
@ -7,10 +7,6 @@ import Row from '../row';
import View from './view'; import View from './view';
import React from 'react'; import React from 'react';
const md = (props) => props.collapsed
? 12
: 6;
const InnerRow = styled(Row)` const InnerRow = styled(Row)`
display: block; display: block;
height: 100%; height: 100%;
@ -20,20 +16,22 @@ const InnerRow = styled(Row)`
`}; `};
`; `;
const Meta = transferProps([ const Meta = ({
'collapsed',
'headed',
'fromHeader'
], ({
children, children,
collapsed,
...props ...props
}) => { }) => {
const render = ({
collapsed = false,
fromHeader = false,
headed = false
}) => {
const meta = ( const meta = (
<Column <Column
md={md(props)}
name='list-item-meta' name='list-item-meta'
xs={12} xs={collapsed ? 12 : 6}
collapsed={collapsed}
fromHeader={fromHeader}
headed={headed}
{...props} {...props}
> >
<InnerRow collapsed={collapsed}> <InnerRow collapsed={collapsed}>
@ -42,12 +40,26 @@ const Meta = transferProps([
</Column> </Column>
); );
return !props.fromHeader ? meta : ( return !fromHeader ? meta : (
<View collapsed fromHeader> <View collapsed fromHeader>
{meta} {meta}
</View> </View>
); );
}); };
return (
<Subscriber channel='list-item'>
{render}
</Subscriber>
);
};
Meta.propTypes = {
children: React.PropTypes.node,
collapsed: React.PropTypes.bool,
fromHeader: React.PropTypes.bool,
headed: React.PropTypes.bool
};
export default Baseline( export default Baseline(
Meta Meta

View File

@ -1,105 +1,103 @@
/*eslint-disable */
export default [{ export default [{
firstQuartile: 15, firstQuartile: 15,
thirdQuartile: 15, thirdQuartile: 15,
median: 15, median: 15,
max: 15, max: 15,
min: 15, min: 15
}, { }, {
firstQuartile: 26, firstQuartile: 26,
thirdQuartile: 26, thirdQuartile: 26,
median: 26, median: 26,
max: 26, max: 26,
min: 26, min: 26
}, { }, {
firstQuartile: 17, firstQuartile: 17,
thirdQuartile: 17, thirdQuartile: 17,
median: 17, median: 17,
max: 17, max: 17,
min: 17, min: 17
}, { }, {
firstQuartile: 15, firstQuartile: 15,
thirdQuartile: 25, thirdQuartile: 25,
median: 19, median: 19,
max: 19, max: 19,
min: 20, min: 20
}, { }, {
firstQuartile: 19, firstQuartile: 19,
thirdQuartile: 25, thirdQuartile: 25,
median: 21, median: 21,
max: 20, max: 20,
min: 25, min: 25
}, { }, {
firstQuartile: 24, firstQuartile: 24,
thirdQuartile: 30, thirdQuartile: 30,
median: 25, median: 25,
max: 26, max: 26,
min: 27, min: 27
}, { }, {
firstQuartile: 28, firstQuartile: 28,
thirdQuartile: 34, thirdQuartile: 34,
median: 30, median: 30,
max: 30, max: 30,
min: 30, min: 30
}, { }, {
firstQuartile: 30, firstQuartile: 30,
thirdQuartile: 45, thirdQuartile: 45,
median: 35, median: 35,
max: 40, max: 40,
min: 40, min: 40
}, { }, {
firstQuartile: 20, firstQuartile: 20,
thirdQuartile: 55, thirdQuartile: 55,
median: 45, median: 45,
max: 44, max: 44,
min: 44, min: 44
}, { }, {
firstQuartile: 55, firstQuartile: 55,
thirdQuartile: 55, thirdQuartile: 55,
median: 55, median: 55,
max: 55, max: 55,
min: 55, min: 55
}, { }, {
firstQuartile: 57, firstQuartile: 57,
thirdQuartile: 56, thirdQuartile: 56,
median: 57, median: 57,
max: 58, max: 58,
min: 57, min: 57
}, { }, {
firstQuartile: 57, firstQuartile: 57,
thirdQuartile: 56, thirdQuartile: 56,
median: 56, median: 56,
max: 56, max: 56,
min: 56, min: 56
}, { }, {
firstQuartile: 60, firstQuartile: 60,
thirdQuartile: 56, thirdQuartile: 56,
median: 60, median: 60,
max: 60, max: 60,
min: 60, min: 60
}, { }, {
firstQuartile: 57, firstQuartile: 57,
thirdQuartile: 57, thirdQuartile: 57,
median: 57, median: 57,
max: 57, max: 57,
min: 57, min: 57
}, { }, {
firstQuartile: 57, firstQuartile: 57,
thirdQuartile: 55, thirdQuartile: 55,
median: 55, median: 55,
max: 55, max: 55,
min: 55, min: 55
}, { }, {
firstQuartile: 20, firstQuartile: 20,
thirdQuartile: 45, thirdQuartile: 45,
median: 45, median: 45,
max: 45, max: 45,
min: 45, min: 45
}, { }, {
firstQuartile: 15, firstQuartile: 15,
thirdQuartile: 40, thirdQuartile: 40,
median: 30, median: 30,
max: 49, max: 49,
min: 30, min: 30
}]; }];

View File

@ -1,14 +1,15 @@
import { Subscriber } from 'react-broadcast';
import styled from 'styled-components'; import styled from 'styled-components';
import { Baseline } from '../../shared/composers'; import { Baseline } from '../../shared/composers';
import { colors } from '../../shared/constants'; import { colors } from '../../shared/constants';
import { remcalc, is } from '../../shared/functions'; import { remcalc, is } from '../../shared/functions';
import transferProps from '../../shared/transfer-props';
import Button from '../button'; import Button from '../button';
import React from 'react'; import React from 'react';
const Nav = styled.nav` const Nav = styled.nav`
flex: 0 0 ${remcalc(47)}; flex: 0 0 ${remcalc(47)};
border-left: ${remcalc(1)} solid ${colors.base.grey}; border-left: ${remcalc(1)} solid ${colors.base.grey};
box-sizing: border-box;
${is('fromHeader')` ${is('fromHeader')`
border-left-color: ${colors.base.primary}; border-left-color: ${colors.base.primary};
@ -19,8 +20,13 @@ const StyledButton = styled(Button)`
border-width: 0; border-width: 0;
box-shadow: none; box-shadow: none;
width: 100%; width: 100%;
min-width: auto;
height: ${remcalc(124)}; height: ${remcalc(124)};
display: flex;
overflow-x: visible;
overflow-y: visible;
${is('collapsed')` ${is('collapsed')`
height: ${remcalc(46)}; height: ${remcalc(46)};
`}; `};
@ -40,31 +46,37 @@ const StyledButton = styled(Button)`
} }
`; `;
const Options = transferProps([ const Options = ({
'collapsed',
'headed',
'fromHeader'
], ({
children, children,
fromHeader,
...props ...props
}) => ( }) => {
<Nav const render = ({
fromHeader={fromHeader} fromHeader = false,
name='list-item-options' collapsed = false
> }) => (
<Nav fromHeader={fromHeader} name='list-item-options'>
<StyledButton <StyledButton
rect
secondary={!fromHeader} secondary={!fromHeader}
collapsed={collapsed}
rect
{...props} {...props}
> >
{children} {children}
</StyledButton> </StyledButton>
</Nav> </Nav>
)); );
return (
<Subscriber channel='list-item'>
{render}
</Subscriber>
);
};
Options.propTypes = { Options.propTypes = {
children: React.PropTypes.node children: React.PropTypes.node,
collapsed: React.PropTypes.bool,
fromHeader: React.PropTypes.bool
}; };
export default Baseline( export default Baseline(

View File

@ -1,3 +1,4 @@
import { Subscriber } from 'react-broadcast';
import { is } from '../../shared/functions'; import { is } from '../../shared/functions';
import { Baseline } from '../../shared/composers'; import { Baseline } from '../../shared/composers';
import Column from '../column'; import Column from '../column';
@ -15,19 +16,30 @@ const StyledColumn = styled(Column)`
const Outlet = ({ const Outlet = ({
children, children,
...props ...props
}) => ( }) => {
const render = ({
collapsed = false
}) => (
<StyledColumn <StyledColumn
md={6}
name='list-item-outlet' name='list-item-outlet'
xs={12} collapsed={collapsed}
xs={6}
{...props} {...props}
> >
{children} {children}
</StyledColumn> </StyledColumn>
); );
return (
<Subscriber channel='list-item'>
{render}
</Subscriber>
);
};
Outlet.propTypes = { Outlet.propTypes = {
children: React.PropTypes.node children: React.PropTypes.node,
collapsed: React.PropTypes.bool
}; };
export default Baseline( export default Baseline(

View File

@ -1,6 +1,8 @@
import { Subscriber } from 'react-broadcast';
import styled from 'styled-components'; import styled from 'styled-components';
import { Baseline } from '../../shared/composers'; import { Baseline, regular } from '../../shared/composers';
import { remcalc, is } from '../../shared/functions'; import { remcalc, is } from '../../shared/functions';
import { colors } from '../../shared/constants';
import Title from './title'; import Title from './title';
import React from 'react'; import React from 'react';
@ -18,12 +20,18 @@ const Span = styled.span`
${is('collapsed')` ${is('collapsed')`
display: flex; display: flex;
`}; `};
${is('fromHeader')`
color: ${colors.base.white};
`};
`; `;
const StyledTitle = styled(Title)` const StyledTitle = styled(Title)`
display: inline-block; display: inline-block;
padding: 0 ${remcalc(18)}; padding: 0 ${remcalc(18)};
${regular};
${is('collapsed')` ${is('collapsed')`
display: flex; display: flex;
padding: 0; padding: 0;
@ -32,18 +40,35 @@ const StyledTitle = styled(Title)`
const Subtitle = ({ const Subtitle = ({
children, children,
fromHeader,
...props ...props
}) => ( }) => {
<StyledTitle name='list-item-subtitle' {...props}> const render = ({
<Span fromHeader={fromHeader}> fromHeader = false,
collapsed = false
}) => (
<StyledTitle
name='list-item-subtitle'
fromHeader={fromHeader}
collapsed={collapsed}
{...props}
>
<Span fromHeader={fromHeader} collapsed={collapsed}>
{children} {children}
</Span> </Span>
</StyledTitle> </StyledTitle>
); );
return (
<Subscriber channel='list-item'>
{render}
</Subscriber>
);
};
Subtitle.propTypes = { Subtitle.propTypes = {
children: React.PropTypes.node, children: React.PropTypes.node,
collapsed: React.PropTypes.bool,
fromHeader: React.PropTypes.bool fromHeader: React.PropTypes.bool
}; };

View File

@ -1,20 +1,18 @@
import { Subscriber } from 'react-broadcast';
import isString from 'lodash.isstring'; import isString from 'lodash.isstring';
import { Baseline } from '../../shared/composers'; import { Baseline, bold } from '../../shared/composers';
import { colors } from '../../shared/constants'; import { colors } from '../../shared/constants';
import { remcalc, is } from '../../shared/functions'; import { remcalc, is } from '../../shared/functions';
import styled from 'styled-components'; import styled from 'styled-components';
import React from 'react'; import React from 'react';
const xs = (props) => props.collapsed
? 6
: 12;
const Container = styled.div` const Container = styled.div`
font-size: ${remcalc(16)}; font-size: ${remcalc(16)};
font-weight: 600;
line-height: 1.5; line-height: 1.5;
color: ${colors.base.secondary}; color: ${colors.base.secondary};
${bold}
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
@ -24,6 +22,10 @@ const Container = styled.div`
padding: ${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)}; padding: ${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)};
${is('fromHeader')`
color: ${colors.base.white};
`};
${is('collapsed')` ${is('collapsed')`
flex-grow: 0; flex-grow: 0;
flex-direction: column; flex-direction: column;
@ -31,10 +33,6 @@ const Container = styled.div`
justify-content: center; justify-content: center;
padding: 0 ${remcalc(18)}; padding: 0 ${remcalc(18)};
`}; `};
${is('fromHeader')`
color: ${colors.base.primary};
`};
`; `;
const Span = styled.span` const Span = styled.span`
@ -49,30 +47,38 @@ const Span = styled.span`
const Title = ({ const Title = ({
children, children,
collapsed,
...props ...props
}) => { }) => {
const _children = !isString(children) ? children : ( const _children = !isString(children) ? children : (
<Span>{children}</Span> <Span>{children}</Span>
); );
return ( const render = ({
collapsed = false,
fromHeader = false
}) => (
<Container <Container
collapsed={collapsed} collapsed={collapsed}
fromHeader={fromHeader}
name='list-item-title' name='list-item-title'
xs={xs({ xs={collapsed ? 6 : 12}
collapsed
})}
{...props} {...props}
> >
{_children} {_children}
</Container> </Container>
); );
return (
<Subscriber channel='list-item'>
{render}
</Subscriber>
);
}; };
Title.propTypes = { Title.propTypes = {
children: React.PropTypes.node, children: React.PropTypes.node,
collapsed: React.PropTypes.bool collapsed: React.PropTypes.bool,
fromHeader: React.PropTypes.bool
}; };
export default Baseline( export default Baseline(

View File

@ -1,6 +1,6 @@
import { Subscriber } from 'react-broadcast';
import styled from 'styled-components'; import styled from 'styled-components';
import { Baseline } from '../../shared/composers'; import { Baseline } from '../../shared/composers';
import transferProps from '../../shared/transfer-props';
import { remcalc, is } from '../../shared/functions'; import { remcalc, is } from '../../shared/functions';
import Row from '../row'; import Row from '../row';
import React from 'react'; import React from 'react';
@ -10,30 +10,49 @@ const StyledView = styled(Row)`
margin: 0; margin: 0;
height: auto; height: auto;
padding-top: 0; padding-top: 0;
min-width: auto;
${is('headed')` ${is('headed')`
padding-top: ${remcalc(47)}; padding-top: ${remcalc(47)};
`}; `};
${is('fromHeader')`
padding-top: 0;
`};
${is('collapsed')` ${is('collapsed')`
height: ${remcalc(48)}; height: ${remcalc(48)};
`}; `};
${is('fromHeader')`
padding-top: 0;
`};
`; `;
const View = (props) => { const View = ({
const hide = props.headed && children,
!props.fromHeader && ...props
props.collapsed; }) => {
const render = (value) => {
const newValue = {
...value,
...props
};
const hide = (
newValue.headed &&
!newValue.fromHeader &&
newValue.collapsed
);
return hide ? null : ( return hide ? null : (
<StyledView name='list-item-view' {...props}> <StyledView name='list-item-view' {...newValue}>
{props.children} {children}
</StyledView> </StyledView>
); );
};
return (
<Subscriber channel='list-item'>
{render}
</Subscriber>
);
}; };
View.propTypes = { View.propTypes = {
@ -43,14 +62,6 @@ View.propTypes = {
headed: React.PropTypes.bool headed: React.PropTypes.bool
}; };
const BaselineView = Baseline( export default Baseline(
View View
); );
export default transferProps([
'collapsed',
'headed',
'fromHeader'
], BaselineView);
export const raw = BaselineView;

View File

@ -97,3 +97,13 @@ export const clearfix = css`
clear:both; clear:both;
} }
`; `;
export {
libreFranklin,
libreFranklinSemiBold,
libreFranklinBold,
bold,
regular,
titleColor,
bodyColor
} from './typography';

View File

@ -33,7 +33,21 @@ const unitcalc = (...values) => flatten(
const cssCalc = (str) => calc(`calc(${str})`); const cssCalc = (str) => calc(`calc(${str})`);
const is = (prop) => (...args) => (props) => props[prop] const is = (prop) =>
(...args) =>
(props) => props[prop]
? css(...args)
: css``;
const isNot = (prop) =>
(...args) =>
(props) => !props[prop]
? css(...args)
: css``;
const isAnd = (...names) =>
(...args) =>
(props) => names.every((name) => props[name])
? css(...args) ? css(...args)
: css``; : css``;
@ -42,5 +56,7 @@ export {
remcalc, remcalc,
cssCalc as calc, cssCalc as calc,
rndId, rndId,
is is,
isNot,
isAnd
}; };

View File

@ -1,29 +0,0 @@
import isString from 'lodash.isstring';
import React from 'react';
const transfer = (parentProps, props) => {
// eslint-disable-next-line react/prop-types
return React.Children.map(props.children, (c) => {
return c && React.cloneElement(c, {
...c.props,
...parentProps.reduce((sum, name) => ({
...sum,
[name]: props[name]
}), {})
});
});
};
export default (parentProps, Component) => (props) => {
// eslint-disable-next-line react/prop-types
const _children = !isString(props.children)
? transfer(parentProps, props)
// eslint-disable-next-line react/prop-types
: props.children;
return (
<Component {...props}>
{_children}
</Component>
);
};