GroupView ui component for ListItem

ui/src/components/list/group-view.js

@@ -0,0 +1,26 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const React = require('react');
+const View = require('./view').raw;
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+module.exports = styled(View)`
+  display: block;
+  padding-top: ${remcalc(62)};
+  padding-left: ${remcalc(23)};
+  padding-right: ${remcalc(23)};
+  padding-bottom: ${remcalc(15)};
+  background-color: ${colors.brandInactive};
+`;

ui/src/components/list/index.js

@@ -1,6 +1,7 @@
 module.exports = {
   ListItemDescription: require('./description'),
   ListItemHeader: require('./header'),
+  ListItemGroupView: require('./group-view'),
   ListItem: require('./item'),
   ListItemMeta: require('./meta'),
   ListItemOptions: require('./options'),

ui/src/components/list/item.js

@@ -23,16 +23,22 @@ const paper = `
   0 8px 0 -5px #fafafa,
   0 8px 1px -4px ${colors.borderSecondary},
   0 16px 0 -10px #fafafa,
-  0 16px 1px -9px ${colors.borderSecondary},
-  0 18px 1px -11px ${colors.borderSecondary};
+  0 16px 1px -9px ${colors.borderSecondary};
 `;
 
 const height = (props) => props.collapsed
   ? remcalc(48)
+  : 'auto';
+
+const minHeight = (props) => props.collapsed
+  ? 'auto'
   : remcalc(126);
 
+// remcalc(126)
 const shadow = (props) => props.stacked
   ? paper
+  : props.flat
+    ? 'none'
     : props.collapsed && props.headed
       ? boxes.bottomShaddowDarker
       : boxes.bottomShaddow;
@@ -40,7 +46,8 @@ const shadow = (props) => props.stacked
 const Item = styled(Row)`
   position: relative;
 
-  height: ${height}
+  height: ${height};
+  min-height: ${minHeight};
   box-shadow: ${shadow};
   border: 1px solid ${colors.borderSecondary};
   background-color: ${colors.brandSecondary};

ui/src/components/list/subtitle.js

@@ -1,4 +1,5 @@
 const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
 const Title = require('./title');
 const React = require('react');
 const Styled = require('styled-components');
@@ -7,10 +8,18 @@ const {
   colors
 } = constants;
 
+const {
+  remcalc
+} = fns;
+
 const {
   default: styled
 } = Styled;
 
+const padding = (props) => !props.collapsed
+  ? `0 ${remcalc(18)}`
+  : `0`;
+
 const color = (props) => props.fromHeader
   ? colors.brandPrimaryColor
   : '#646464';
@@ -18,23 +27,28 @@ const color = (props) => props.fromHeader
 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: ${color};
+
+  justify-content: flex-end;
+`;
+
+const StyledTitle = styled(Title)`
+  padding: ${padding};
 `;
 
 const Subtitle = (props) => (
-  <Title name='list-item-subtitle' {...props}>
+  <StyledTitle name='list-item-subtitle' {...props}>
     <Span
       fromHeader={props.fromHeader}
     >
       {props.children}
     </Span>
-  </Title>
+  </StyledTitle>
 );
 
 Subtitle.propTypes = {

ui/src/components/list/title.js

@@ -20,6 +20,10 @@ const color = (props) => !props.fromHeader
   ? colors.brandSecondaryColor
   : colors.brandPrimaryColor;
 
+const padding = (props) => !props.collapsed
+  ? `${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)}`
+  : `0 ${remcalc(18)}`;
+
 const justify = (props) => props.collapsed ? 'center' : 'flex-start';
 const width = (props) => props.collapsed ? 'auto' : '100%';
 const direction = (props) => props.collapsed ? 'column' : 'row';
@@ -39,8 +43,7 @@ const Container = styled.div`
   flex-grow: ${grow};
   width: ${width};
 
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding: ${padding};
 `;
 
 const Span = styled.span`

ui/src/components/list/view.js

@@ -1,8 +1,8 @@
 const fns = require('../../shared/functions');
-const transferProps = require('./transfer-props');
 const React = require('react');
 const Row = require('../row');
 const Styled = require('styled-components');
+const transferProps = require('./transfer-props');
 
 const {
   remcalc
@@ -20,7 +20,7 @@ const display = (props) => props.headed && !props.fromHeader && props.collapsed
   ? 'none'
   : 'flex';
 
-const View = styled(Row)`
+const StyledView = styled(Row)`
   flex: 1;
   margin: 0;
   height: 100%;
@@ -28,12 +28,16 @@ const View = styled(Row)`
   display: ${display};
 `;
 
+const View = (props) => (
+  <StyledView name='list-item-view' {...props}>
+    {props.children}
+  </StyledView>
+);
+
 module.exports = transferProps([
   'collapsed',
   'headed',
   'fromHeader'
-], (props) => (
-  <View name='list-item-view' {...props}>
-    {props.children}
-  </View>
-));
+], View);
+
+module.exports.raw = View;

ui/stories/index.js

@@ -24,7 +24,8 @@ const {
     ListItemOutlet,
     ListItemSubTitle,
     ListItemTitle,
-    ListItemView
+    ListItemView,
+    ListItemGroupView
   },
   MiniMetric,
   Modal,
@@ -637,4 +638,41 @@ storiesOf('ListItem', module)
         </ListItemOptions>
       </ListItem>
     </Base>
+  ))
+  .add('view-group', () => (
+    <Base>
+      <ListItem headed>
+        <ListItemHeader>
+          <ListItemMeta>
+            <ListItemTitle>Percona</ListItemTitle>
+            <ListItemSubTitle>5 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOptions>…</ListItemOptions>
+        </ListItemHeader>
+        <ListItemGroupView>
+          <ListItem flat>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+              </ListItemMeta>
+              <ListItemOutlet>
+                Metrics
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+          <ListItem stacked flat>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+                <ListItemSubTitle>5 instances</ListItemSubTitle>
+              </ListItemMeta>
+              <ListItemOutlet>
+                Metrics
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+        </ListItemGroupView>
+      </ListItem>
+    </Base>
   ));