@wix/design-system
Version:
@wix/design-system
28 lines • 1.89 kB
JavaScript
import React from 'react';
import FluidColumns from '../common/FluidColumns';
import Text from '../Text';
import { st, classes } from './TestimonialList.st.css.js';
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.defaultProps = {
cols: 3,
testimonials: [],
};
export default TestimonialList;
//# sourceMappingURL=TestimonialList.js.map