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

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';

import { st, classes } from './FeatureList.st.css';
import { dataHooks } from './constants';

import FluidColumns from '../common/FluidColumns';
import Text from '../Text';

/** 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.Component {
  render() {
    const { dataHook, className, features, cols } = this.props;
    return (
      <div className={st(classes.root, className)} data-hook={dataHook}>
        <FluidColumns cols={cols}>
          {features.map((feature, index) => {
            return (
              <FeatureItem
                dataHook={dataHooks.feature}
                key={index}
                index={index}
                image={feature.image}
                title={feature.title}
                text={feature.text}
              />
            );
          })}
        </FluidColumns>
      </div>
    );
  }
}

const FeatureItem = ({ dataHook, index, image, title, text }) => (
  <div className={classes.featureItem} data-hook={dataHook}>
    {image && (
      <div
        className={classes.featureItemImageContainer}
        data-hook={`${dataHooks.featureImage}${index}`}
        children={image}
      />
    )}
    <div className={classes.featureItemTextContainer}>
      {title && (
        <div className={classes.featureItemTitleContainer}>
          <Text
            dataHook={`${dataHooks.featureTitle}${index}`}
            size="medium"
            weight="bold"
          >
            {title}
          </Text>
        </div>
      )}
      {text && (
        <Text dataHook={`${dataHooks.featureText}${index}`} size="small">
          {text}
        </Text>
      )}
    </div>
  </div>
);

FeatureList.displayName = 'FeatureList';

FeatureList.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 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.arrayOf(
    PropTypes.shape({
      image: PropTypes.node,
      title: PropTypes.string,
      text: PropTypes.string,
    }),
  ),
};

FeatureList.defaultProps = {
  cols: 3,
  features: [],
};

export default FeatureList;