wix-style-react/dist/src/FeatureList/FeatureList.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _FeatureListSt = require("./FeatureList.st.css");
var _constants = require("./constants");
var _FluidColumns = _interopRequireDefault(require("../common/FluidColumns"));
var _Text = _interopRequireDefault(require("../Text"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/FeatureList/FeatureList.js";
/** FeatureList is a group of layouts that displays image, description and title. It's used in a footer of a marketing page to list product features. */
class FeatureList extends _react.default.Component {
  render() {
    var {
      dataHook,
      className,
      features,
      cols
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _FeatureListSt.st)(_FeatureListSt.classes.root, className),
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 15,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_FluidColumns.default, {
      cols: cols,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 16,
        columnNumber: 9
      }
    }, features.map((feature, index) => {
      return /*#__PURE__*/_react.default.createElement(FeatureItem, {
        dataHook: _constants.dataHooks.feature,
        key: index,
        index: index,
        image: feature.image,
        title: feature.title,
        text: feature.text,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 19,
          columnNumber: 15
        }
      });
    })));
  }
}
var FeatureItem = _ref => {
  var {
    dataHook,
    index,
    image,
    title,
    text
  } = _ref;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _FeatureListSt.classes.featureItem,
    "data-hook": dataHook,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36,
      columnNumber: 3
    }
  }, image && /*#__PURE__*/_react.default.createElement("div", {
    className: _FeatureListSt.classes.featureItemImageContainer,
    "data-hook": "".concat(_constants.dataHooks.featureImage).concat(index),
    children: image,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _FeatureListSt.classes.featureItemTextContainer,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 44,
      columnNumber: 5
    }
  }, title && /*#__PURE__*/_react.default.createElement("div", {
    className: _FeatureListSt.classes.featureItemTitleContainer,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 46,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    dataHook: "".concat(_constants.dataHooks.featureTitle).concat(index),
    size: "medium",
    weight: "bold",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47,
      columnNumber: 11
    }
  }, title)), text && /*#__PURE__*/_react.default.createElement(_Text.default, {
    dataHook: "".concat(_constants.dataHooks.featureText).concat(index),
    size: "small",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 57,
      columnNumber: 9
    }
  }, text)));
};
FeatureList.displayName = 'FeatureList';
FeatureList.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** Specifies a CSS class name to be appended to the component’s root element */
  className: _propTypes.default.string,
  /** Defines the number of columns. It is used to define how many features will be displayed in a single row. */
  cols: _propTypes.default.number,
  /**
   * Specifies an array of features. It accepts following properties:
   *  * `image` - use to pass a visual representation of a feature
   *  * `title` - use to specify feature title
   *  * `text` - use to specify a short feature description.q
   */
  features: _propTypes.default.arrayOf(_propTypes.default.shape({
    image: _propTypes.default.node,
    title: _propTypes.default.string,
    text: _propTypes.default.string
  }))
};
FeatureList.defaultProps = {
  cols: 3,
  features: []
};
var _default = exports.default = FeatureList;
//# sourceMappingURL=FeatureList.js.map