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

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

import React__default from 'react';
import styled from 'styled-components';
import Button from '../../../02-atoms/01-forms/01-button/index.js';
import Spacing from '../../../02-atoms/06-layout/07-spacing/index.js';
import Box from '../../../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(Box) `
  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.span `
  svg {
    height: 5rem;
    width: auto;
    fill: ${props => props.theme.colors[props.iconColor]};
  }
`;
const BoxFooter = styled.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(Spacing, { size: "small" }),
        children,
        React__default.createElement(Spacing, { size: "medium" }),
        React__default.createElement(BoxFooter, null,
            React__default.createElement(Button, Object.assign({}, (onClick ? { onClick } : null), { buttonStyle: "primary" }), actionText))));
};

export { BoxAction };