import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import omit from 'lodash.omit';

import { DialogBase } from './index';
import { Banner, COLORS, Heading3 } from '../../index';

class Dialog extends PureComponent {
  getHeader = () => {
    const { headerColor, headerIcon, onCloseClick, title } = this.props;

    return (
      <Banner color={headerColor} fullWidth icon={headerIcon} onClose={onCloseClick}>
        <Heading3>{title}</Heading3>
      </Banner>
    );
  };

  render() {
    const { children, title, ...otherProps } = this.props;

    const restProps = omit(otherProps, ['headerColor', 'onCloseClick']);

    return (
      <DialogBase {...restProps}>
        {title && this.getHeader()}
        {children}
      </DialogBase>
    );
  }
}

Dialog.propTypes = {
  headerColor: PropTypes.oneOf(COLORS),
  headerIcon: PropTypes.element,
  onCloseClick: PropTypes.func,
  title: PropTypes.string,
};

Dialog.defaultProps = {
  headerColor: 'neutral',
};

export default Dialog;

@@ -162,16 +162,37 @@
  Banner,
+ Button, ButtonGroup,
  COLORS,
@@ -522,16 +522,563 @@
 ;%0A  %7D;%0A%0A
+  getFooter = () =%3E %7B%0A    const %7B tertiaryAction, secondaryAction, primaryAction %7D = this.props;%0A%0A    return (%0A      %3CButtonGroup justifyContent=%22flex-end%22 padding=%7B4%7D%3E%0A        %7BtertiaryAction && %3CButton label=%7BtertiaryAction.label%7D onMouseUp=%7BtertiaryAction.onMouseUp%7D level=%22link%22 /%3E%7D%0A        %7BsecondaryAction && %3CButton label=%7BsecondaryAction.label%7D onMouseUp=%7BsecondaryAction.onMouseUp%7D /%3E%7D%0A        %7BprimaryAction && %3CButton label=%7BprimaryAction.label%7D onMouseUp=%7BprimaryAction.onMouseUp%7D level=%22primary%22 /%3E%7D%0A      %3C/ButtonGroup%3E%0A    );%0A  %7D;%0A%0A
   render
@@ -1211,16 +1211,52 @@
 seClick'
+, 'primaryAction', 'secondaryAction'
 %5D);%0A%0A   
@@ -1354,16 +1354,43 @@
 ildren%7D%0A
+        %7Bthis.getFooter()%7D%0A
       %3C/
@@ -1541,16 +1541,124 @@
 s.func,%0A
+  primaryAction: PropTypes.object,%0A  secondaryAction: PropTypes.object,%0A  tertiaryAction: PropTypes.object,%0A
   title:
@@ -1730,16 +1730,37 @@
 utral',%0A
+  primaryAction: %7B%7D,%0A
 %7D;%0A%0Aexpo

Add dialog footer