wix-style-react
Version:
wix-style-react
48 lines • 2.67 kB
JavaScript
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 (React.createElement("div", { className: st(classes.root, className), "data-hook": dataHook },
React.createElement(FluidColumns, { cols: cols }, features.map((feature, index) => {
return (React.createElement(FeatureItem, { dataHook: dataHooks.feature, key: index, index: index, image: feature.image, title: feature.title, text: feature.text }));
}))));
}
}
const FeatureItem = ({ dataHook, index, image, title, text }) => (React.createElement("div", { className: classes.featureItem, "data-hook": dataHook },
image && (React.createElement("div", { className: classes.featureItemImageContainer, "data-hook": `${dataHooks.featureImage}${index}`, children: image })),
React.createElement("div", { className: classes.featureItemTextContainer },
title && (React.createElement("div", { className: classes.featureItemTitleContainer },
React.createElement(Text, { dataHook: `${dataHooks.featureTitle}${index}`, size: "medium", weight: "bold" }, title))),
text && (React.createElement(Text, { dataHook: `${dataHooks.featureText}${index}`, size: "small" }, text)))));
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;
//# sourceMappingURL=FeatureList.js.map