wix-style-react/src/TestimonialList/TestimonialList.js

wix-style-react

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 (
      <div className={st(classes.root, className)} data-hook={dataHook}>
        <FluidColumns cols={cols}>
          {testimonials.map((testimonial, index) => {
            return (
              <TestimonialItem
                dataHook={dataHooks.testimonial}
                key={index}
                index={index}
                avatar={testimonial.avatar}
                text={testimonial.text}
                authorName={testimonial.authorName}
              />
            );
          })}
        </FluidColumns>
      </div>
    );
  }
}

const TestimonialItem = ({ index, avatar, text, authorName, dataHook }) => (
  <div className={classes.testimonialItem} data-hook={dataHook}>
    {avatar && (
      <div
        className={classes.testimonialItemAvatar}
        data-hook={`${dataHooks.testimonialAvatar}${index}`}
      >
        {avatar}
      </div>
    )}
    <div className={classes.testimonialItemTextArea}>
      {text && (
        <div className={classes.testimonialItemText}>
          <Text dataHook={`${dataHooks.testimonialText}${index}`} size="small">
            {text}
          </Text>
        </div>
      )}
      {authorName && (
        <Text
          dataHook={`${dataHooks.testimonialAuthorName}${index}`}
          size="small"
          weight="bold"
        >
          {authorName}
        </Text>
      )}
    </div>
  </div>
);

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;