fix list-item

fixes #281
2024-11-28 14:10:04 +02:00 · 2017-02-27 15:41:08 +00:00 · 2017-02-27 15:41:08 +00:00 · 7f2c92b730
commit 7f2c92b730
parent 017f133611
19 changed files with 379 additions and 265 deletions
--- a/frontend/src/components/service/item.js
+++ b/frontend/src/components/service/item.js
@ -1,8 +1,7 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 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 PropTypes from '@root/prop-types';

@ -40,12 +39,8 @@ const ServiceItem = ({
    <ListItemTitle>{service.name}</ListItemTitle>
  ) : (
    <ListItemTitle>
-      <Link to={to}>
-        {AnchorFn(
-          <Anchor secondary>
-            {service.name}
-          </Anchor>
-        )}
+      <Link secondary to={to}>
+        {service.name}
      </Link>
    </ListItemTitle>
  );
--- a/ui/src/components/anchor/index.js
+++ b/ui/src/components/anchor/index.js
@ -1,22 +1,29 @@
 import { is } from '../../shared/functions';
 import { colors } from '../../shared/constants';
 import { Baseline } from '../../shared/composers';
-import styled from 'styled-components';
-import React from 'react';
+import { Link as BaseLink } from 'react-router-dom';
+import styled, { css } from 'styled-components';

-const StyledAnchor = styled.a`
-  color: ${colors.base.primary} !important;
+const style = css`
+  color: ${colors.base.primary};

  ${is('secondary')`
-    color: ${colors.base.secondary} !important;
+    color: ${colors.base.white};
  `}
 `;

+const StyledAnchor = styled.a`
+  ${style}
+`;
+
+const StyledLink = styled(BaseLink)`
+  ${style}
+`;
+
 export default Baseline(
  StyledAnchor
 );

-export const fn = (element) => (props) => React.cloneElement(element, {
-  ...element.props,
-  ...props
-}, element.props.children);
+export const Link = Baseline(
+  StyledLink
+);
--- a/ui/src/components/base-elements/index.js
+++ b/ui/src/components/base-elements/index.js
@ -1,12 +1,10 @@
 /* eslint react/prop-types: 0 */

+import { remcalc } from '../../shared/functions';
+import { Baseline, bold } from '../../shared/composers';
 import styled, { css } from 'styled-components';
 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
 // before using !important
 const elements = [{
--- a/ui/src/components/base/index.js
+++ b/ui/src/components/base/index.js
@ -1,13 +1,8 @@
 import { colors } from '../../shared/constants';
+import { libreFranklin, bodyColor, regular } from '../../shared/composers';
 import styled from 'styled-components';
 import global from './global';

-import {
-  libreFranklin,
-  bodyColor,
-  regular
-} from '../../shared/composers/typography';
-
 export default styled.div`
  font-size: 1rem;
  line-height: 1.5;
--- a/ui/src/components/button/index.js
+++ b/ui/src/components/button/index.js
@ -160,11 +160,14 @@ const Button = (props) => {
  const View = Views.reduce((sel, view) => sel ? sel : view(), null);

  return (
-    <View {...props} />
+    <View {...props}>
+      {props.children}
+    </View>
  );
 };

 Button.propTypes = {
+  children: React.PropTypes.node,
  href: React.PropTypes.string,
  rr: React.PropTypes.bool,
  to: React.PropTypes.string
--- a/ui/src/components/list/description.js
+++ b/ui/src/components/list/description.js
@ -1,49 +1,55 @@
+import { Subscriber } from 'react-broadcast';
 import { Baseline } from '../../shared/composers';
-import { remcalc, is } from '../../shared/functions';
+import { remcalc, is, isNot } from '../../shared/functions';
 import styled from 'styled-components';
 import Title from './title';
 import React from 'react';

-const xs = (props) => props.collapsed
-  ? 6
-  : 12;
-
 const StyledTitle = styled(Title)`
-  ${is('collapsed')`
+  font-weight: normal;
+  flex-grow: 2;
+
+  ${isNot('collapsed')`
    position: absolute;
    bottom: 0;
    padding-bottom: ${remcalc(12)};
    padding-top: 0;
  `};
-
-  font-weight: normal;
-  flex-grow: 2;
 `;

 const InnerDescription = styled.div`
  justify-content: flex-start;

  ${is('collapsed')`
-    margin-left: auto;
    justify-content: flex-end;
+    margin-left: auto;
  `};
 `;

 const Description = ({
  children,
-  collapsed,
  ...props
-}) => (
-  <StyledTitle
-    {...props}
-    name='list-item-description'
-    xs={xs(props)}
-  >
-    <InnerDescription collapsed={collapsed}>
-      {children}
-    </InnerDescription>
-  </StyledTitle>
-);
+}) => {
+  const render = ({
+    collapsed = false
+  }) => (
+    <StyledTitle
+      collapsed={collapsed}
+      name='list-item-description'
+      xs={collapsed ? 6 : 12}
+    >
+      <InnerDescription collapsed={collapsed}>
+        {children}
+      </InnerDescription>
+    </StyledTitle>
+  );
+
+  return (
+    <Subscriber channel='list-item'>
+      {render}
+    </Subscriber>
+  );
+};

 Description.propTypes = {
  children: React.PropTypes.node,
--- a/ui/src/components/list/group-view.js
+++ b/ui/src/components/list/group-view.js
@ -1,15 +1,13 @@
 import { Baseline } from '../../shared/composers';
 import { colors } from '../../shared/constants';
 import { remcalc } from '../../shared/functions';
-import { raw as View } from './view';
+import View from './view';
 import styled from 'styled-components';

 const GroupView = styled(View)`
  display: block;
-  padding-top: ${remcalc(62)};
-  padding-left: ${remcalc(23)};
-  padding-right: ${remcalc(23)};
-  padding-bottom: ${remcalc(5)};
+  padding: ${remcalc(62, 23, 5, 23)};
+
  background-color: ${colors.inactive.default};
 `;

--- a/ui/src/components/list/header.js
+++ b/ui/src/components/list/header.js
@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { Broadcast, Subscriber } from 'react-broadcast';
 import { remcalc } from '../../shared/functions';
 import { Baseline } from '../../shared/composers';
 import { colors } from '../../shared/constants';
@ -8,9 +9,8 @@ import Item from './item';
 const StyledItem = styled(Item)`
  position: absolute;

-  background-color: #3B4AAF;
-
-  border: solid ${remcalc(1)} #2D3884;
+  background-color: ${colors.base.primary};
+  border: solid ${remcalc(1)} ${colors.base.primaryDesaturatedActive};
  box-shadow: none;

  width: calc(100% + ${remcalc(2)});
@ -19,29 +19,38 @@ const StyledItem = styled(Item)`
  top: ${remcalc(-1)};
  left: ${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) => {
-  return React.cloneElement(c, {
-    ...c.props,
-    fromHeader: true
-  });
-});
+const Header = ({
+  children,
+  ...props
+}) => {
+  const render = (value) => {
+    const newValue = {
+      ...value,
+      fromHeader: true
+    };

-const Header = (props) => (
-  <StyledItem
-    collapsed
-    headed
-    name='list-item-header'
-  >
-    {addFromHeader(props.children)}
-  </StyledItem>
-);
+    return (
+      <Broadcast channel='list-item' value={newValue}>
+        <StyledItem
+          collapsed
+          name='list-item-header'
+          headed
+          {...props}
+        >
+          {children}
+        </StyledItem>
+      </Broadcast>
+    );
+  };
+
+  return (
+    <Subscriber channel='list-item'>
+      {render}
+    </Subscriber>
+  );
+};

 Header.propTypes = {
  children: React.PropTypes.node
--- a/ui/src/components/list/item.js
+++ b/ui/src/components/list/item.js
@ -1,19 +1,19 @@
 import styled from 'styled-components';
-import transferProps from '../../shared/transfer-props';
+import { Broadcast, Subscriber } from 'react-broadcast';
 import { Baseline } from '../../shared/composers';
 import { boxes, colors } from '../../shared/constants';
-import { remcalc, is } from '../../shared/functions';
+import { remcalc, is, isAnd } from '../../shared/functions';
 import Row from '../row';
 import React from 'react';

 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(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};
 `;

-const Item = styled(Row)`
+const StyledItem = styled(Row)`
  position: relative;
  height: auto;
  min-height: ${remcalc(126)};
@ -23,35 +23,65 @@ const Item = styled(Row)`
  box-shadow: ${boxes.bottomShaddow};

  ${is('collapsed')`
-    height: ${remcalc(48)};
    min-height: auto;
-
-    ${is('headed')`
-      box-shadow: ${boxes.bottomShaddowDarker};
-    `};
+    height: ${remcalc(48)};
+    margin-bottom: ${remcalc(16)};
  `};

-  ${is('stacked')`
-    box-shadow: ${paper};
-    margin-bottom: ${remcalc(16)};
+  ${isAnd('collapsed', 'headed')`
+    box-shadow: ${boxes.bottomShaddowDarker};
  `};

  ${is('flat')`
    box-shadow: none;
  `};
+
+  ${is('stacked')`
+    margin-bottom: ${remcalc(16)};
+    box-shadow: ${paper};
+  `};
 `;

-export default Baseline(
-  transferProps([
-    'collapsed',
-    'headed'
-  ], ({
-    children,
-    ...props
-  }) => (
-    <Item name='list-item' {...props}>
-      {children}
-    </Item>
-  ))
-);
+const Item = ({
+  children,
+  collapsed = false,
+  headed = false,
+  ...props
+}) => {
+  const render = (value) => {
+    const newValue = {
+      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
+);
--- a/ui/src/components/list/meta.js
+++ b/ui/src/components/list/meta.js
@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import transferProps from '../../shared/transfer-props';
+import { Subscriber } from 'react-broadcast';
 import { Baseline } from '../../shared/composers';
 import { is } from '../../shared/functions';
 import Column from '../column';
@ -7,10 +7,6 @@ import Row from '../row';
 import View from './view';
 import React from 'react';

-const md = (props) => props.collapsed
-  ? 12
-  : 6;
-
 const InnerRow = styled(Row)`
  display: block;
  height: 100%;
@ -20,34 +16,50 @@ const InnerRow = styled(Row)`
  `};
 `;

-const Meta = transferProps([
-  'collapsed',
-  'headed',
-  'fromHeader'
-], ({
+const Meta = ({
  children,
-  collapsed,
  ...props
 }) => {
-  const meta = (
-    <Column
-      md={md(props)}
-      name='list-item-meta'
-      xs={12}
-      {...props}
-    >
-      <InnerRow collapsed={collapsed}>
-        {children}
-      </InnerRow>
-    </Column>
-  );
+  const render = ({
+    collapsed = false,
+    fromHeader = false,
+    headed = false
+  }) => {
+    const meta = (
+      <Column
+        name='list-item-meta'
+        xs={collapsed ? 12 : 6}
+        collapsed={collapsed}
+        fromHeader={fromHeader}
+        headed={headed}
+        {...props}
+      >
+        <InnerRow collapsed={collapsed}>
+          {children}
+        </InnerRow>
+      </Column>
+    );

-  return !props.fromHeader ? meta : (
-    <View collapsed fromHeader>
-      {meta}
-    </View>
+    return !fromHeader ? meta : (
+      <View collapsed fromHeader>
+        {meta}
+      </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(
  Meta
--- a/ui/src/components/list/mini-metric-data.js
+++ b/ui/src/components/list/mini-metric-data.js
@ -1,105 +1,103 @@
-/*eslint-disable */
-
 export default [{
  firstQuartile: 15,
  thirdQuartile: 15,
  median: 15,
  max: 15,
-  min: 15,
+  min: 15
 }, {
  firstQuartile: 26,
  thirdQuartile: 26,
  median: 26,
  max: 26,
-  min: 26,
+  min: 26
 }, {
  firstQuartile: 17,
  thirdQuartile: 17,
  median: 17,
  max: 17,
-  min: 17,
+  min: 17
 }, {
  firstQuartile: 15,
  thirdQuartile: 25,
  median: 19,
  max: 19,
-  min: 20,
+  min: 20
 }, {
  firstQuartile: 19,
  thirdQuartile: 25,
  median: 21,
  max: 20,
-  min: 25,
+  min: 25
 }, {
  firstQuartile: 24,
  thirdQuartile: 30,
  median: 25,
  max: 26,
-  min: 27,
+  min: 27
 }, {
  firstQuartile: 28,
  thirdQuartile: 34,
  median: 30,
  max: 30,
-  min: 30,
+  min: 30
 }, {
  firstQuartile: 30,
  thirdQuartile: 45,
  median: 35,
  max: 40,
-  min: 40,
+  min: 40
 }, {
  firstQuartile: 20,
  thirdQuartile: 55,
  median: 45,
  max: 44,
-  min: 44,
+  min: 44
 }, {
  firstQuartile: 55,
  thirdQuartile: 55,
  median: 55,
  max: 55,
-  min: 55,
+  min: 55
 }, {
  firstQuartile: 57,
  thirdQuartile: 56,
  median: 57,
  max: 58,
-  min: 57,
+  min: 57
 }, {
  firstQuartile: 57,
  thirdQuartile: 56,
  median: 56,
  max: 56,
-  min: 56,
+  min: 56
 }, {
  firstQuartile: 60,
  thirdQuartile: 56,
  median: 60,
  max: 60,
-  min: 60,
+  min: 60
 }, {
  firstQuartile: 57,
  thirdQuartile: 57,
  median: 57,
  max: 57,
-  min: 57,
+  min: 57
 }, {
  firstQuartile: 57,
  thirdQuartile: 55,
  median: 55,
  max: 55,
-  min: 55,
+  min: 55
 }, {
  firstQuartile: 20,
  thirdQuartile: 45,
  median: 45,
  max: 45,
-  min: 45,
+  min: 45
 }, {
  firstQuartile: 15,
  thirdQuartile: 40,
  median: 30,
  max: 49,
-  min: 30,
-}];
+  min: 30
+}];
--- a/ui/src/components/list/options.js
+++ b/ui/src/components/list/options.js
@ -1,14 +1,15 @@
+import { Subscriber } from 'react-broadcast';
 import styled from 'styled-components';
 import { Baseline } from '../../shared/composers';
 import { colors } from '../../shared/constants';
 import { remcalc, is } from '../../shared/functions';
-import transferProps from '../../shared/transfer-props';
 import Button from '../button';
 import React from 'react';

 const Nav = styled.nav`
  flex: 0 0 ${remcalc(47)};
  border-left: ${remcalc(1)} solid ${colors.base.grey};
+  box-sizing: border-box;

  ${is('fromHeader')`
    border-left-color: ${colors.base.primary};
@ -19,8 +20,13 @@ const StyledButton = styled(Button)`
  border-width: 0;
  box-shadow: none;
  width: 100%;
+  min-width: auto;
  height: ${remcalc(124)};

+  display: flex;
+  overflow-x: visible;
+  overflow-y: visible;
+
  ${is('collapsed')`
    height: ${remcalc(46)};
  `};
@ -40,31 +46,37 @@ const StyledButton = styled(Button)`
  }
 `;

-const Options = transferProps([
-  'collapsed',
-  'headed',
-  'fromHeader'
-], ({
+const Options = ({
  children,
-  fromHeader,
  ...props
-}) => (
-  <Nav
-    fromHeader={fromHeader}
-    name='list-item-options'
-  >
-    <StyledButton
-      rect
-      secondary={!fromHeader}
-      {...props}
-    >
-      {children}
-    </StyledButton>
-  </Nav>
-));
+}) => {
+  const render = ({
+    fromHeader = false,
+    collapsed = false
+  }) => (
+    <Nav fromHeader={fromHeader} name='list-item-options'>
+      <StyledButton
+        secondary={!fromHeader}
+        collapsed={collapsed}
+        rect
+        {...props}
+      >
+        {children}
+      </StyledButton>
+    </Nav>
+  );
+
+  return (
+    <Subscriber channel='list-item'>
+      {render}
+    </Subscriber>
+  );
+};

 Options.propTypes = {
-  children: React.PropTypes.node
+  children: React.PropTypes.node,
+  collapsed: React.PropTypes.bool,
+  fromHeader: React.PropTypes.bool
 };

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

 Outlet.propTypes = {
-  children: React.PropTypes.node
+  children: React.PropTypes.node,
+  collapsed: React.PropTypes.bool
 };

 export default Baseline(
--- a/ui/src/components/list/subtitle.js
+++ b/ui/src/components/list/subtitle.js
@ -1,6 +1,8 @@
+import { Subscriber } from 'react-broadcast';
 import styled from 'styled-components';
-import { Baseline } from '../../shared/composers';
+import { Baseline, regular } from '../../shared/composers';
 import { remcalc, is } from '../../shared/functions';
+import { colors } from '../../shared/constants';
 import Title from './title';
 import React from 'react';

@ -18,12 +20,18 @@ const Span = styled.span`
  ${is('collapsed')`
    display: flex;
  `};
+
+  ${is('fromHeader')`
+    color: ${colors.base.white};
+  `};
 `;

 const StyledTitle = styled(Title)`
  display: inline-block;
  padding: 0 ${remcalc(18)};

+  ${regular};
+
  ${is('collapsed')`
    display: flex;
    padding: 0;
@ -32,18 +40,35 @@ const StyledTitle = styled(Title)`

 const Subtitle = ({
  children,
-  fromHeader,
  ...props
-}) => (
-  <StyledTitle name='list-item-subtitle' {...props}>
-    <Span fromHeader={fromHeader}>
-      {children}
-    </Span>
-  </StyledTitle>
-);
+}) => {
+  const render = ({
+    fromHeader = false,
+    collapsed = false
+  }) => (
+    <StyledTitle
+      name='list-item-subtitle'
+      fromHeader={fromHeader}
+      collapsed={collapsed}
+      {...props}
+    >
+      <Span fromHeader={fromHeader} collapsed={collapsed}>
+        {children}
+      </Span>
+    </StyledTitle>
+  );
+
+  return (
+    <Subscriber channel='list-item'>
+      {render}
+    </Subscriber>
+  );
+};
+

 Subtitle.propTypes = {
  children: React.PropTypes.node,
+  collapsed: React.PropTypes.bool,
  fromHeader: React.PropTypes.bool
 };

--- a/ui/src/components/list/title.js
+++ b/ui/src/components/list/title.js
@ -1,20 +1,18 @@
+import { Subscriber } from 'react-broadcast';
 import isString from 'lodash.isstring';
-import { Baseline } from '../../shared/composers';
+import { Baseline, bold } from '../../shared/composers';
 import { colors } from '../../shared/constants';
 import { remcalc, is } from '../../shared/functions';
 import styled from 'styled-components';
 import React from 'react';

-const xs = (props) => props.collapsed
-  ? 6
-  : 12;
-
 const Container = styled.div`
  font-size: ${remcalc(16)};
-  font-weight: 600;
  line-height: 1.5;
  color: ${colors.base.secondary};

+  ${bold}
+
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
@ -24,6 +22,10 @@ const Container = styled.div`

  padding: ${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)};

+  ${is('fromHeader')`
+    color: ${colors.base.white};
+  `};
+
  ${is('collapsed')`
    flex-grow: 0;
    flex-direction: column;
@ -31,10 +33,6 @@ const Container = styled.div`
    justify-content: center;
    padding: 0 ${remcalc(18)};
  `};
-
-  ${is('fromHeader')`
-    color: ${colors.base.primary};
-  `};
 `;

 const Span = styled.span`
@ -49,30 +47,38 @@ const Span = styled.span`

 const Title = ({
  children,
-  collapsed,
  ...props
 }) => {
  const _children = !isString(children) ? children : (
    <Span>{children}</Span>
  );

-  return (
+  const render = ({
+    collapsed = false,
+    fromHeader = false
+  }) => (
    <Container
      collapsed={collapsed}
+      fromHeader={fromHeader}
      name='list-item-title'
-      xs={xs({
-        collapsed 
-      })}
+      xs={collapsed ? 6 : 12}
      {...props}
    >
      {_children}
    </Container>
  );
+
+  return (
+    <Subscriber channel='list-item'>
+      {render}
+    </Subscriber>
+  );
 };

 Title.propTypes = {
  children: React.PropTypes.node,
-  collapsed: React.PropTypes.bool
+  collapsed: React.PropTypes.bool,
+  fromHeader: React.PropTypes.bool
 };

 export default Baseline(
--- a/ui/src/components/list/view.js
+++ b/ui/src/components/list/view.js
@ -1,6 +1,6 @@
+import { Subscriber } from 'react-broadcast';
 import styled from 'styled-components';
 import { Baseline } from '../../shared/composers';
-import transferProps from '../../shared/transfer-props';
 import { remcalc, is } from '../../shared/functions';
 import Row from '../row';
 import React from 'react';
@ -10,29 +10,48 @@ const StyledView = styled(Row)`
  margin: 0;
  height: auto;
  padding-top: 0;
+  min-width: auto;

  ${is('headed')`
    padding-top: ${remcalc(47)};
  `};

-  ${is('fromHeader')`
-    padding-top: 0;
-  `};
-
  ${is('collapsed')`
    height: ${remcalc(48)};
  `};
+
+  ${is('fromHeader')`
+    padding-top: 0;
+  `};
 `;

-const View = (props) => {
-  const hide = props.headed &&
-              !props.fromHeader &&
-               props.collapsed;
+const View = ({
+  children,
+  ...props
+}) => {
+  const render = (value) => {
+    const newValue = {
+      ...value,
+      ...props
+    };

-  return hide ? null : (
-    <StyledView name='list-item-view' {...props}>
-      {props.children}
-    </StyledView>
+    const hide = (
+      newValue.headed &&
+      !newValue.fromHeader &&
+      newValue.collapsed
+    );
+
+    return hide ? null : (
+      <StyledView name='list-item-view' {...newValue}>
+        {children}
+      </StyledView>
+    );
+  };
+
+  return (
+    <Subscriber channel='list-item'>
+      {render}
+    </Subscriber>
  );
 };

@ -43,14 +62,6 @@ View.propTypes = {
  headed: React.PropTypes.bool
 };

-const BaselineView = Baseline(
+export default Baseline(
  View
 );
-
-export default transferProps([
-  'collapsed',
-  'headed',
-  'fromHeader'
-], BaselineView);
-
-export const raw = BaselineView;
--- a/ui/src/shared/composers/index.js
+++ b/ui/src/shared/composers/index.js
@ -97,3 +97,13 @@ export const clearfix = css`
    clear:both;
  }
 `;
+
+export {
+  libreFranklin,
+  libreFranklinSemiBold,
+  libreFranklinBold,
+  bold,
+  regular,
+  titleColor,
+  bodyColor
+} from './typography';
--- a/ui/src/shared/functions.js
+++ b/ui/src/shared/functions.js
@ -33,14 +33,30 @@ const unitcalc = (...values) => flatten(

 const cssCalc = (str) => calc(`calc(${str})`);

-const is = (prop) => (...args) => (props) => props[prop]
-  ? css(...args)
-  : css``;
+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``;

 export {
  unitcalc,
  remcalc,
  cssCalc as calc,
  rndId,
-  is
+  is,
+  isNot,
+  isAnd
 };
--- a/ui/src/shared/transfer-props.js
+++ b/ui/src/shared/transfer-props.js
@ -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>
-  );
-};