'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.StepHeader = undefined;

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _layout = require('styled-material/dist/src/layout');

var _utils = require('../utils');

var _stepCircle = require('./step-circle');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

/**
 * A step header after [material design](https://material.io/guidelines/components/steppers.html#steppers-specs)
 * renders a step icon and title. Used for building material design based steppers.
 */
var StepHeader = exports.StepHeader = function StepHeader(_ref) {
    var step = _ref.step,
        active = _ref.active,
        page = _ref.page,
        activeColor = _ref.activeColor,
        _ref$alertColor = _ref.alertColor,
        alertColor = _ref$alertColor === undefined ? _utils.defaultAlertColor : _ref$alertColor,
        style = _ref.style,
        onClick = _ref.onClick;
    return React.createElement(_utils.ClickableRow, { disabled: active, horizontal: 'center', style: Object.assign({ paddingBottom: 16 }, style), onClick: onClick }, React.createElement(_stepCircle.StepCircle, { step: step, active: active, status: page.status, activeColor: activeColor, alertColor: alertColor }), React.createElement(_layout.Column, { vertical: 'center' }, React.createElement("span", { style: {
            paddingLeft: 4,
            color: page.status === 'alert' ? alertColor : active ? 'rgba(0, 0, 0, 0.87)' : 'rgba(0, 0, 0, 0.38)',
            fontSize: 14,
            fontWeight: active ? 500 : 400
        } }, page.title)));
};
//# sourceMappingURL=step-header.js.map
