migrate object and list widgets

packages/netlify-cms-ui-default/src/ListItemTopBar.js

@@ -1,9 +1,18 @@
 import React from 'react';
 import styled from 'react-emotion';
 import Icon from './Icon';
-import { colors, lengths } from './styles';
+import { colors, lengths, buttons } from './styles';
+
+const TopBar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  height: 26px;
+  border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
+  position: relative;
+`
 
 const TopBarButton = styled.button`
+  ${buttons.button};
   color: ${colors.controlLabel};
   background: transparent;
   font-size: 16px;
@@ -24,8 +33,8 @@ const DragIcon = styled(TopBarButtonSpan)`
   cursor: move;
 `
 
-const ListItemTopBar = ({ collapsed, onCollapseToggle, onRemove, dragHandleHOC }) => (
-  <div>
+const ListItemTopBar = ({ className, collapsed, onCollapseToggle, onRemove, dragHandleHOC }) => (
+  <TopBar className={className}>
     {
       onCollapseToggle
         ? <TopBarButton onClick={onCollapseToggle}>
@@ -47,7 +56,7 @@ const ListItemTopBar = ({ collapsed, onCollapseToggle, onRemove, dragHandleHOC }
           </TopBarButton>
         : null
     }
-  </div>
+  </TopBar>
 );
 
 const StyledListItemTopBar = styled(ListItemTopBar)`

packages/netlify-cms-ui-default/src/ObjectWidgetTopBar.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled, { css }from 'react-emotion';
+import Icon from './Icon';
+import { colors, buttons } from './styles';
+
+const TopBarContainer = styled.div`
+  align-items: center;
+  background-color: ${colors.textFieldBorder};
+  display: flex;
+  justify-content: space-between;
+  margin: 0 -14px;
+  padding: 13px;
+`
+
+const ExpandButtonContainer = styled.div`
+  ${props => props.hasHeading && css`
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1;
+  `}
+`
+
+const ExpandButton = styled.button`
+  ${buttons.button};
+  padding: 4px;
+  background-color: transparent;
+  color: inherit;
+
+  &:last-of-type {
+    margin-right: 4px;
+  }
+`
+
+const AddButton = styled.button`
+  ${buttons.button};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 12px;
+  font-size: 12px;
+  font-weight: bold;
+  border-radius: 3px;
+
+  ${Icon} {
+    margin-left: 6px;
+  }
+`
+
+const ObjectWidgetTopBar = ({ allowAdd, onAdd, onCollapseToggle, collapsed, heading = null, label }) => (
+  <TopBarContainer>
+    <ExpandButtonContainer hasHeading={!!heading}>
+      <ExpandButton onClick={onCollapseToggle}>
+        <Icon type="chevron" direction={collapsed ? 'right' : 'down'} size="small" />
+      </ExpandButton>
+      {heading}
+    </ExpandButtonContainer>
+    {!allowAdd ? null :
+      <AddButton onClick={onAdd}>
+        Add {label} <Icon type="add" size="xsmall" />
+      </AddButton>
+    }
+  </TopBarContainer>
+);
+
+export default ObjectWidgetTopBar;

packages/netlify-cms-ui-default/src/index.js

@@ -5,6 +5,7 @@ export Loader from './Loader';
 export Toggle, { ToggleContainer, ToggleBackground, ToggleHandle } from './Toggle';
 export AuthenticationPage from './AuthenticationPage';
 export WidgetPreviewContainer from './WidgetPreviewContainer';
+export ObjectWidgetTopBar from './ObjectWidgetTopBar';
 export {
   fonts,
   colorsRaw,

packages/netlify-cms-ui-default/src/styles.js

@@ -253,6 +253,9 @@ const components = {
     font-size: 14px;
     margin-top: 8px;
   `,
+  objectWidgetTopBarContainer: css`
+    padding: 0 14px 14px;
+  `,
 }
 
 injectGlobal`