jobiqo-cl/lib/src/components/04-organisms/02-actions/01-box-action/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index = require('../../../02-atoms/01-forms/01-button/index.js');
var index$6 = require('../../../02-atoms/06-layout/07-spacing/index.js');
var index$1 = require('../../../02-atoms/07-box/index.js');

/**
 * @file index.tsx
 *
 * @fileoverview An action boxed in a Box component together with an icon.
 * The component has 2 "slots", content and action.
 */
const StyledBox = styled__default(index$1.default) `
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  padding: ${props => props.theme.boxAction.padding};
  color: ${props => props.theme.boxAction.color};
  transition: ${props => props.theme.boxAction.transition};
  &:hover {
    background: ${props => props.theme.boxAction.hover.background};
    transform: ${props => props.theme.boxAction.hover.transform};
  }
`;
const StyledIcon = styled__default.span `
  svg {
    height: 5rem;
    width: auto;
    fill: ${props => props.theme.colors[props.iconColor]};
  }
`;
const BoxFooter = styled__default.div ``;
/**
 * A box action can be used to show contents and a call to action inside a box. Useful for empty
 * panes and other call to action boxes.
 */
const BoxAction = ({ onClick, icon, iconTitle, iconColor, children, actionText }) => {
    // Check if a color was passed.
    const iconDefColor = iconColor ? iconColor : 'gray2';
    return (React__default.createElement(StyledBox, { "data-testid": "box-action" },
        React__default.createElement(StyledIcon, { iconColor: iconDefColor }, icon),
        React__default.createElement(index$6.default, { size: "small" }),
        children,
        React__default.createElement(index$6.default, { size: "medium" }),
        React__default.createElement(BoxFooter, null,
            React__default.createElement(index.default, Object.assign({}, (onClick ? { onClick } : null), { buttonStyle: "primary" }), actionText))));
};

exports.BoxAction = BoxAction;