jobiqo-cl/lib/src/components/04-organisms/04-landingpage/03-multi-column-icon/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 = require('../../../02-atoms/06-layout/04-grid/index.js');
var styles = require('./styles.js');

/**
 * @file index.tsx
 *
 * @fileoverview Renders multiple columns with some icon and text. Receives an array of icons, text
 * and displays them in a grid.
 */
/**
 * Presents information to a user in a multicolumn way. Useful
 * to show information side by side. Its responsive so no matter how many items
 * are inside it will show as many as possible side by side.
 */
const MultiColumnIcon = ({ introTitle, introText, items }) => {
    return (React__default.createElement("div", null,
        React__default.createElement(styles.Intro, null,
            introTitle,
            introText),
        React__default.createElement(index.default, { gridTemplateColumns: `repeat(auto-fit, minmax(200px, 1fr))` }, items &&
            items.map((item, index) => {
                const { color = 'primary' } = item;
                return (React__default.createElement(styles.IconColumn, { key: index },
                    React__default.createElement(styles.IconWrapper, { color: color, "data-testid": "icon-wrapper" }, item.icon),
                    item.text));
            }))));
};

exports.MultiColumnIcon = MultiColumnIcon;