[Ashes] ContentBox in core

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/channels/amazon.jsx

@@ -9,7 +9,7 @@ import { bindActionCreators } from 'redux';
 // components
 import { PageTitle } from 'components/section-title';
 import { PrimaryButton } from 'components/core/button';
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import FormField from 'components/forms/formfield';
 import Spinner from 'components/core/spinner';
 

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-groups/group-details.jsx

@@ -34,7 +34,7 @@ import BulkMessages from 'components/bulk-actions/bulk-messages';
 import { SelectableSearchList, makeTotalCounter } from 'components/list-page';
 import { PrimaryButton, Button } from 'components/core/button';
 import MultiSelectRow from 'components/table/multi-select-row';
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import Criterion from './editor/criterion-view';
 import CustomerGroupStats from './stats';
 import SearchCustomersModal from './customers/search-modal';

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';

ashes/src/components/customers/contacts.jsx

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import * as CustomerContactActions from '../../modules/customers/contacts';
 
 // components
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import FormField from '../forms/formfield';
 import Form from '../forms/form';
 import { ApiErrors } from 'components/utils/errors';

ashes/src/components/customers/credit-cards.jsx

@@ -6,7 +6,7 @@ import { autobind } from 'core-decorators';
 
 import * as CustomerCreditCardActions from '../../modules/customers/credit-cards';
 
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import EmptyText from '../content-box/empty-text';
 import CreditCardBox from '../credit-cards/card-box';
 import ConfirmationModal from 'components/core/confirmation-modal';

ashes/src/components/customers/groups/groups.jsx

@@ -9,7 +9,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import { AddButton, DeleteButton } from 'components/core/button';
 import SearchGroupModal from './search-group-modal';
 

ashes/src/components/customers/notification-settings.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import { SliderCheckbox } from 'components/core/checkbox';
 
 export default class CustomerNotificationSettings extends React.Component {

ashes/src/components/customers/roles.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 CustomerRoles extends React.Component {
 

ashes/src/components/customers/suggest-products.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import { Button } from 'components/core/button';
 
 import Api from 'lib/api';

ashes/src/components/discounts-panel/discounts-panel.jsx

@@ -4,7 +4,7 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
 
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import PanelHeader from 'components/panel-header/panel-header';
 import DiscountRow from './discount-row';
 import TableView from 'components/table/tableview';

ashes/src/components/merchant-applications/details.jsx

@@ -10,7 +10,7 @@ import _ from 'lodash';
 import { Dropdown } from 'components/dropdown';
 import { PageTitle } from 'components/section-title';
 import { PrimaryButton } from 'components/core/button';
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import Spinner from 'components/core/spinner';
 
 // redux

ashes/src/components/object-form/object-form.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import ObjectFormInner from './object-form-inner';
 
 type Props = {

ashes/src/components/object-page/object-details-deux.jsx

@@ -14,7 +14,7 @@ import { addKeys } from 'lib/react-utils';
 
 // components
 import { Form } from 'components/forms';
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import ObjectFormInner from 'components/object-form/object-form-inner';
 import ObjectScheduler from 'components/object-scheduler/object-scheduler';
 import Tags from 'components/tags/tags';

ashes/src/components/object-page/object-details.jsx

@@ -11,7 +11,7 @@ import { expandRefs } from 'lib/object-schema';
 import { addKeys } from 'lib/react-utils';
 
 // components
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import ObjectFormInner from '../object-form/object-form-inner';
 import ObjectScheduler from '../object-scheduler/object-scheduler';
 import { Form } from '../forms';

ashes/src/components/orders/order-coupons.jsx

@@ -3,7 +3,7 @@
 import React, { Component, Element } from 'react';
 import _ from 'lodash';
 
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import CouponsPanel from 'components/coupons-panel/coupons-panel';
 import PanelHeader from 'components/panel-header/panel-header';
 

ashes/src/components/orders/order-line-items.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import SkuLineItems from 'components/sku-line-items/sku-line-items';
 
 import OrderParagon from 'paragons/order';

ashes/src/components/orders/payments.jsx

@@ -2,7 +2,7 @@
 
 import React, { Element } from 'react';
 
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import PanelHeader from 'components/panel-header/panel-header';
 import PaymentsPanel from 'components/payments-panel/payments-panel';
 

ashes/src/components/orders/shipments/shipment.jsx

@@ -6,7 +6,7 @@ import React, { Component, Element } from 'react';
 import { autobind } from 'core-decorators';
 
 // components
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import TableView from 'components/table/tableview';
 import ShipmentRow from './shipment-row';
 

ashes/src/components/orders/shipments/unshipped-items.jsx

@@ -9,7 +9,7 @@ import { autobind } from 'core-decorators';
 import { itemStateTitles, itemReasonsTitles } from 'paragons/shipment';
 
 // components
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import TableView from 'components/table/tableview';
 import TableRow from 'components/table/row';
 import TableCell from 'components/table/cell';

ashes/src/components/orders/shipping-address.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import AddressDetails from '../addresses/address-details';
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 
 type Props = {
   order: Object,

ashes/src/components/origin-integrations/details.jsx

@@ -10,7 +10,7 @@ import { getUserId } from 'lib/claims';
 // components
 import { PageTitle } from 'components/section-title';
 import { PrimaryButton } from 'components/core/button';
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import FormField from 'components/forms/formfield';
 import Spinner from 'components/core/spinner';
 

ashes/src/components/payment/payment.jsx

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import TableView from '../table/tableview';
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 
 export default class RmaPayment extends React.Component {
   render() {

ashes/src/components/products/options/option-entry.jsx

@@ -9,7 +9,7 @@ import { autobind } from 'core-decorators';
 import { assoc } from 'sprout-data';
 
 // components
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import ValueEntry from './value-entry';
 import ValueEditDialog from './value-edit-dialog';
 

ashes/src/components/products/options/option-list.jsx

@@ -10,7 +10,7 @@ import { autoAssignVariants } from 'paragons/variants';
 import { skuId } from 'paragons/product';
 
 // components
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import ConfirmationModal from 'components/core/confirmation-modal';
 import OptionEntry from './option-entry';
 import OptionEditDialog from './option-edit-dialog';

ashes/src/components/products/product-amazon.jsx

@@ -22,7 +22,7 @@ import * as schemaActions from 'modules/object-schema';
 
 // components
 import Spinner from 'components/core/spinner';
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import SaveCancel from 'components/core/save-cancel';
 import Form from 'components/forms/form';
 import ProductAmazonMain from './product-amazon-main';

ashes/src/components/products/skus/sku-content-box.jsx

@@ -9,7 +9,7 @@ import _ from 'lodash';
 import { assoc, dissoc } from 'sprout-data';
 
 // components
-import ContentBox from 'components/content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import SkuList from './sku-list';
 import ConfirmationModal from 'components/core/confirmation-modal';
 import { Checkbox } from 'components/core/checkbox';

ashes/src/components/rmas/payment.jsx

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import TableView from '../table/tableview';
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 
 export default class RmaPayment extends React.Component {
   render() {

ashes/src/components/rmas/rma.jsx

@@ -8,7 +8,7 @@ import { PageTitle } from '../section-title';
 import { PrimaryButton } from 'components/core/button';
 import PageNav from 'components/core/page-nav';
 import { PanelList, PanelListItem } from '../panel/panel-list';
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import State from '../common/state';
 
 import * as rmaActions from '../../modules/rmas/details';

ashes/src/components/shipping/shipping-method.jsx

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import EditableContentBox from '../content-box/editable-content-box';
-import ContentBox from '../content-box/content-box';
+import ContentBox from 'components/core/content-box';
 import TableView from '../table/tableview';
 import ShippingMethodRow from './shipping-method-row';