wix-style-react
Version:
wix-style-react
48 lines • 2.74 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import FluidColumns from '../common/FluidColumns';
import Text from '../Text';
import { st, classes } from './TestimonialList.st.css';
import { dataHooks } from './constants';
/** 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.Component {
render() {
const { className, dataHook, testimonials, cols } = this.props;
return (React.createElement("div", { className: st(classes.root, className), "data-hook": dataHook },
React.createElement(FluidColumns, { cols: cols }, testimonials.map((testimonial, index) => {
return (React.createElement(TestimonialItem, { dataHook: dataHooks.testimonial, key: index, index: index, avatar: testimonial.avatar, text: testimonial.text, authorName: testimonial.authorName }));
}))));
}
}
const TestimonialItem = ({ index, avatar, text, authorName, dataHook }) => (React.createElement("div", { className: classes.testimonialItem, "data-hook": dataHook },
avatar && (React.createElement("div", { className: classes.testimonialItemAvatar, "data-hook": `${dataHooks.testimonialAvatar}${index}` }, avatar)),
React.createElement("div", { className: classes.testimonialItemTextArea },
text && (React.createElement("div", { className: classes.testimonialItemText },
React.createElement(Text, { dataHook: `${dataHooks.testimonialText}${index}`, size: "small" }, text))),
authorName && (React.createElement(Text, { dataHook: `${dataHooks.testimonialAuthorName}${index}`, size: "small", weight: "bold" }, authorName)))));
TestimonialList.displayName = 'TestimonialList';
TestimonialList.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element */
className: PropTypes.string,
/** Defines the number of columns. It is used to define how many features will be displayed in a single row. */
cols: PropTypes.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.arrayOf(PropTypes.shape({
avatar: PropTypes.node,
text: PropTypes.string,
authorName: PropTypes.string,
})),
};
TestimonialList.defaultProps = {
cols: 3,
testimonials: [],
};
export default TestimonialList;
//# sourceMappingURL=TestimonialList.js.map