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