wix-style-react/dist/src/TestimonialList/TestimonialList.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 _FluidColumns = _interopRequireDefault(require("../common/FluidColumns"));
var _Text = _interopRequireDefault(require("../Text"));
var _TestimonialListSt = require("./TestimonialList.st.css");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/TestimonialList/TestimonialList.js";
/** TestimonialList is a group of layouts that display avatar, description and name. It's used in a footer of a marketing page layout. */
class TestimonialList extends _react.default.Component {
  render() {
    var {
      className,
      dataHook,
      testimonials,
      cols
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _TestimonialListSt.st)(_TestimonialListSt.classes.root, className),
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 16,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_FluidColumns.default, {
      cols: cols,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 17,
        columnNumber: 9
      }
    }, testimonials.map((testimonial, index) => {
      return /*#__PURE__*/_react.default.createElement(TestimonialItem, {
        dataHook: _constants.dataHooks.testimonial,
        key: index,
        index: index,
        avatar: testimonial.avatar,
        text: testimonial.text,
        authorName: testimonial.authorName,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 20,
          columnNumber: 15
        }
      });
    })));
  }
}
var TestimonialItem = _ref => {
  var {
    index,
    avatar,
    text,
    authorName,
    dataHook
  } = _ref;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _TestimonialListSt.classes.testimonialItem,
    "data-hook": dataHook,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 37,
      columnNumber: 3
    }
  }, avatar && /*#__PURE__*/_react.default.createElement("div", {
    className: _TestimonialListSt.classes.testimonialItemAvatar,
    "data-hook": "".concat(_constants.dataHooks.testimonialAvatar).concat(index),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 39,
      columnNumber: 7
    }
  }, avatar), /*#__PURE__*/_react.default.createElement("div", {
    className: _TestimonialListSt.classes.testimonialItemTextArea,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 46,
      columnNumber: 5
    }
  }, text && /*#__PURE__*/_react.default.createElement("div", {
    className: _TestimonialListSt.classes.testimonialItemText,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 48,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    dataHook: "".concat(_constants.dataHooks.testimonialText).concat(index),
    size: "small",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 49,
      columnNumber: 11
    }
  }, text)), authorName && /*#__PURE__*/_react.default.createElement(_Text.default, {
    dataHook: "".concat(_constants.dataHooks.testimonialAuthorName).concat(index),
    size: "small",
    weight: "bold",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 55,
      columnNumber: 9
    }
  }, authorName)));
};
TestimonialList.displayName = 'TestimonialList';
TestimonialList.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 testimonials. It accepts following properties:
   *  * `avatar` - use to pass an avatar image
   *  * `text` - use for testimonial itself
   *  * `authorName` - use to specify testimonial author.
   */
  testimonials: _propTypes.default.arrayOf(_propTypes.default.shape({
    avatar: _propTypes.default.node,
    text: _propTypes.default.string,
    authorName: _propTypes.default.string
  }))
};
TestimonialList.defaultProps = {
  cols: 3,
  testimonials: []
};
var _default = exports.default = TestimonialList;
//# sourceMappingURL=TestimonialList.js.map