list item ui component

ui/src/components/list/collapsed.js

@@ -0,0 +1,18 @@
+const React = require('react');
+
+module.exports = (Component) => (props) => {
+  // eslint-disable-next-line react/prop-types
+  const _children = React.Children.map(props.children, (c) => {
+    return React.cloneElement(c, {
+      ...c.props,
+      // eslint-disable-next-line react/prop-types
+      collapsed: props.collapsed
+    });
+  });
+
+  return (
+    <Component {...props}>
+      {_children}
+    </Component>
+  );
+};

ui/src/components/list/description.js

@@ -0,0 +1,43 @@
+const Title = require('./title');
+const Styled = require('styled-components');
+const React = require('react');
+
+const {
+  default: styled
+} = Styled;
+
+const margin = (props) => props.collapsed ? `
+  margin-left: auto;
+` : '';
+
+const justify = (props) => props.collapsed ? 'flex-end' : 'flex-start';
+const xs = (props) => props.collapsed ? 6 : 12;
+
+const StyledTitle = styled(Title)`
+  font-weight: normal !important;
+  flex-grow: 2;
+`;
+
+const InnerDescription = styled.div`
+  ${margin}
+  justify-content: ${justify};
+`;
+
+const Description = (props) => (
+  <StyledTitle
+    collapsed={props.collapsed}
+    name='list-item-description'
+    xs={xs(props)}
+  >
+    <InnerDescription collapsed={props.collapsed}>
+      {props.children}
+    </InnerDescription>
+  </StyledTitle>
+);
+
+Description.propTypes = {
+  children: React.PropTypes.node,
+  collapsed: React.PropTypes.bool
+};
+
+module.exports = Description;

ui/src/components/list/index.js

@@ -0,0 +1,10 @@
+module.exports = {
+  ListItem: require('./item'),
+  ListItemView: require('./view'),
+  ListItemTitle: require('./title'),
+  ListItemSubTitle: require('./subtitle'),
+  ListItemDescription: require('./description'),
+  ListItemMeta: require('./meta'),
+  ListItemOutlet: require('./outlet'),
+  ListItemOptions: require('./options')
+};

ui/src/components/list/item.js

@@ -0,0 +1,34 @@
+const Collapsed = require('./collapsed');
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const React = require('react');
+const Row = require('../row');
+const Styled = require('styled-components');
+
+const {
+  boxes,
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const height = (props) => props.collapsed ? remcalc(48) : remcalc(126);
+
+const Item = styled(Row)`
+  height: ${height}
+  box-shadow: ${boxes.bottomShaddow};
+  border: 1px solid ${colors.borderSecondary};
+  background-color: ${colors.brandSecondary};
+`;
+
+module.exports = Collapsed((props) => (
+  <Item name='list-item' {...props}>
+    {props.children}
+  </Item>
+));

ui/src/components/list/meta.js

@@ -0,0 +1,27 @@
+const Collapsed = require('./collapsed');
+const Column = require('../column');
+const Styled = require('styled-components');
+const React = require('react');
+const Row = require('../row');
+
+const {
+  default: styled
+} = Styled;
+
+const xs = (props) => props.collapsed ? 12 : 6;
+
+const InnerRow = styled(Row)`
+  height: 100%;
+`;
+
+module.exports = Collapsed((props) => (
+  <Column
+    name='list-item-meta'
+    xs={xs(props)}
+    {...props}
+  >
+    <InnerRow>
+      {props.children}
+    </InnerRow>
+  </Column>
+));

ui/src/components/list/options.js

@@ -0,0 +1,63 @@
+const Button = require('../button');
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const height = (props) => props.collapsed ? remcalc(46) : remcalc(124);
+
+const Nav = styled.nav`
+  flex: 0 0 ${remcalc(47)};
+  border-left: 1px solid ${colors.borderSecondary};
+`;
+
+const StyledButton = styled(Button)`
+  border-width: 0;
+  box-shadow: none;
+  width: 100%;
+  height: ${height}; /* 100% doest work on safari */
+
+  &:focus {
+    border-width: 0;
+  }
+
+  &:hover {
+    border-width: 0;
+  }
+
+  &:active,
+  &:active:hover,
+  &:active:focus {
+    border-width: 0;
+  }
+`;
+
+const Options = (props) => (
+  <Nav name='list-item-options'>
+    <StyledButton
+      rect
+      secondary
+      {...props}
+    >
+      {props.children}
+    </StyledButton>
+  </Nav>
+);
+
+Options.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Options;

ui/src/components/list/outlet.js

@@ -0,0 +1,25 @@
+const Column = require('../column');
+const React = require('react');
+
+const Outlet = (props) => {
+  if (props.collapsed) {
+    return null;
+  }
+
+  return (
+    <Column
+      name='list-item-outlet'
+      xs={6}
+      {...props}
+    >
+      {props.children}
+    </Column>
+  );
+};
+
+Outlet.propTypes = {
+  children: React.PropTypes.node,
+  collapsed: React.PropTypes.bool
+};
+
+module.exports = Outlet;

ui/src/components/list/subtitle.js

@@ -0,0 +1,33 @@
+const Title = require('./title');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const Span = styled.span`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 14px;
+  color: #646464;
+`;
+
+const Subtitle = (props) => (
+  <Title name='list-item-subtitle' {...props}>
+    <Span>
+      {props.children}
+    </Span>
+  </Title>
+);
+
+Subtitle.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Subtitle;

ui/src/components/list/title.js

@@ -0,0 +1,70 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const isString = require('lodash.isstring');
+const Styled = require('styled-components');
+const React = require('react');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const justify = (props) => props.collapsed ? 'center' : 'flex-start';
+const width = (props) => props.collapsed ? 'auto' : '100%';
+const direction = (props) => props.collapsed ? 'column' : 'row';
+const grow = (props) => props.collapsed ? 0 : 2;
+const xs = (props) => props.collapsed ? 6 : 12;
+
+const Container = styled.div`
+  font-size: ${remcalc(16)};
+  font-weight: 600;
+  line-height: 1.5;
+  color: ${colors.brandSecondaryColor};
+
+  display: flex;
+  flex-direction: ${direction};
+  justify-content: ${justify};
+
+  flex-grow: ${grow};
+  width: ${width};
+
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+`;
+
+const Span = styled.span`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const Title = (props) => {
+  const _children = !isString(props.children) ? props.children : (
+    <Span>{props.children}</Span>
+  );
+
+  return (
+    <Container
+      collapsed={props.collapsed}
+      name='list-item-title'
+      xs={xs(props)}
+      {...props}
+    >
+      {_children}
+    </Container>
+  );
+};
+
+Title.propTypes = {
+  children: React.PropTypes.node,
+  collapsed: React.PropTypes.bool
+};
+
+module.exports = Title;

ui/src/components/list/view.js

@@ -0,0 +1,20 @@
+const Collapsed = require('./collapsed');
+const React = require('react');
+const Row = require('../row');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const View = styled(Row)`
+  flex: 1;
+  margin: 0;
+  height: 100%;
+`;
+
+module.exports = Collapsed((props) => (
+  <View name='list-item-view' {...props}>
+    {props.children}
+  </View>
+));

ui/src/components/radio-group/index.js

@@ -12,7 +12,7 @@ const Item = require('./item');
 const find = require('lodash.find');
 const classNames = require('classnames');
 const React = require('react');
-const styles = require('./style.css');
+// const styles = require('./style.css');
 
 const RadioGroup = React.createClass({
   propTypes: {
@@ -93,8 +93,7 @@ const RadioGroup = React.createClass({
     } = this;
 
     const cn = classNames(
-      className,
-      styles.group
+      className
     );
 
     const _children = React.Children.map(children, (child, i) => {

ui/src/index.js

@@ -6,6 +6,7 @@ module.exports = {
   Column: require('./components/column'),
   Container: require('./components/container'),
   Input: require('./components/input'),
+  List: require('./components/list'),
   Modal: require('./components/modal'),
   MiniMetric: require('./components/mini-metric'),
   Notificaton: require('./components/notification'),

ui/stories/index.js

@@ -14,6 +14,16 @@ const {
   Column,
   Avatar,
   Input,
+  List: {
+    ListItem,
+    ListItemView,
+    ListItemTitle,
+    ListItemSubTitle,
+    ListItemDescription,
+    ListItemMeta,
+    ListItemOutlet,
+    ListItemOptions,
+  },
   MiniMetric,
   Modal,
   Notificaton,
@@ -30,6 +40,8 @@ const {
   RadioGroup
 } = require('../src/');
 
+
+
 const seed = require('./seed');
 const {
 	selectData
@@ -471,3 +483,43 @@ storiesOf('Metrics', module)
       name='Memory'
     />
   ));
+
+storiesOf('ListItem', module)
+  .add('default', () => (
+    <Base>
+      <ListItem>
+        <ListItemView>
+          <ListItemMeta>
+            <ListItemTitle>Nginx 01</ListItemTitle>
+            <ListItemSubTitle>4 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOutlet>
+            Metrics
+          </ListItemOutlet>
+        </ListItemView>
+        <ListItemOptions>
+          …
+        </ListItemOptions>
+      </ListItem>
+    </Base>
+  ))
+  .add('collapsed', () => (
+    <Base>
+      <ListItem collapsed>
+        <ListItemView>
+          <ListItemMeta>
+            <ListItemTitle>Nginx 01</ListItemTitle>
+            <ListItemSubTitle>4 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOutlet>
+            Metrics
+          </ListItemOutlet>
+        </ListItemView>
+        <ListItemOptions>
+          …
+        </ListItemOptions>
+      </ListItem>
+    </Base>
+  ));