jobiqo-cl/lib/src/components/04-organisms/02-actions/02-box-selectable/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 index$1 = require('../../../02-atoms/06-layout/07-spacing/index.js');
var CheckDouble = require('../../../../icons/CheckDouble.js');
var styles = require('./styles.js');

/**
 * @file index.tsx
 *
 * @fileoverview An boxed component that the user can select.
 */
/**
 * A selectable box can be used for multi selection steps or pages like inside an onboarding wizard. Used
 * for the same functionality as checkboxes but in a more stylistic way.
 */
const BoxSelectable = ({ selected = false, onClick, icon, iconTitle, color = 'primary', children }) => {
    // Check if a color was passed.
    const iconDefColor = selected ? color : 'gray2';
    return (React__default.createElement(styles.WrappButton, { onClick: onClick },
        React__default.createElement(styles.SelectableBox, { selected: selected, color: color, "data-testid": "selectable-box" },
            React__default.createElement(styles.CheckCircle, { selected: selected, color: color }, selected && (React__default.createElement(styles.StyledCheckIcon, null,
                React__default.createElement(CheckDouble.CheckDoubleIcon, { title: iconTitle })))),
            React__default.createElement(styles.MiddleIcon, { color: iconDefColor }, icon),
            React__default.createElement(index$1.default, { size: "small" }),
            children)));
};

exports.BoxSelectable = BoxSelectable;