jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
28 lines (25 loc) • 1.42 kB
JavaScript
import React__default from 'react';
import Spacing from '../../../02-atoms/06-layout/07-spacing/index.js';
import { CheckDoubleIcon } from '../../../../icons/CheckDouble.js';
import { WrappButton, SelectableBox, CheckCircle, StyledCheckIcon, MiddleIcon } from './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(WrappButton, { onClick: onClick },
React__default.createElement(SelectableBox, { selected: selected, color: color, "data-testid": "selectable-box" },
React__default.createElement(CheckCircle, { selected: selected, color: color }, selected && (React__default.createElement(StyledCheckIcon, null,
React__default.createElement(CheckDoubleIcon, { title: iconTitle })))),
React__default.createElement(MiddleIcon, { color: iconDefColor }, icon),
React__default.createElement(Spacing, { size: "small" }),
children)));
};
export { BoxSelectable };