conte-box in core. p2

Author: tonypizzicato

ashes/src/components/activity-notifications/panel.jsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 // components
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import NotificationItem from '../activity-notifications/item';
 import { PrimaryButton } from 'components/core/button';
 

ashes/src/components/common/totals.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import Currency from './currency';
 
 const TotalsFooter = props => {

ashes/src/components/core/content-box/content-box.css

@@ -0,0 +1,32 @@
+.box {
+  color: #484848;
+  position: relative;
+  border: 1px solid #d9d9d9;
+  margin-bottom: 20px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  padding: 22px 20px 21px;
+
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #d9d9d9;
+
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.title {
+  flex: 1;
+}
+
+.controls {
+
+}
+
+.body {
+  padding: 20px;
+  background-color: #fff;
+}

ashes/src/components/core/content-box/content-box.jsx

@@ -0,0 +1,47 @@
+/* @flow */
+
+// libs
+import { isEmpty } from 'lodash';
+import classNames from 'classnames';
+import React, { Element } from 'react';
+
+// styles
+import s from './content-box.css';
+
+type Props = {
+  id: string,
+  title: string | Element<any>,
+  className: string,
+  bodyClassName: string,
+  actionBlock: Element<any>,
+  children: Element<any>,
+  footer: Element<any>,
+  indentContent: boolean,
+  renderContent: Function,
+  viewContent: Element<any>,
+}
+
+export default (props: Props) => {
+  let body = props.children;
+
+  if (isEmpty(body)) {
+    if (props.renderContent) {
+      body = props.renderContent();
+    } else if (props.viewContent) {
+      body = props.viewContent;
+    }
+  }
+
+  return (
+    <div id={props.id} className={classNames(s.box, props.className)}>
+      <header className={s.header}>
+        <div className={s.title}>{props.title}</div>
+        <div className={s.controls}>{props.actionBlock}</div>
+      </header>
+      <div className={classNames(s.body, props.bodyClassName)}>
+        { body }
+      </div>
+      {props.footer}
+    </div>
+  );
+};

ashes/src/components/core/content-box/index.js

@@ -0,0 +1 @@
+export default from './content-box';

ashes/src/components/coupons/form/coupon-codes.jsx

@@ -7,7 +7,7 @@ import { autobind } from 'core-decorators';
 import { connect } from 'react-redux';
 
 // components
-import ContentBox from '../../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import RadioButton from 'components/core/radio-button';
 import Counter from 'components/core/counter';
 import FormField from '../../forms/formfield';

ashes/src/components/coupons/form/usage-rules.jsx

@@ -6,7 +6,7 @@ import React, { Component, Element } from 'react';
 import { autobind } from 'core-decorators';
 
 // components
-import ContentBox from '../../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import RadioButton from 'components/core/radio-button';
 import Counter from 'components/core/counter';
 

ashes/src/components/customers/account-password.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 
 export default class CustomerAccountPassword extends React.Component {
 

ashes/src/components/customers/account-status.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import { SliderCheckbox } from 'components/core/checkbox';
 import { connect } from 'react-redux';
 import * as CustomersActions from '../../modules/customers/details';

ashes/src/components/customers/address-book.jsx

@@ -2,7 +2,7 @@
 import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import Addresses, { createAddressBox } from '../addresses/addresses';
 import AddressBox from '../addresses/address-box';
 import AddressForm from '../addresses/address-form';