@wix/design-system
Version:
@wix/design-system
31 lines • 1.36 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { dataHooks } from './constants';
import { st, classes, vars } from './FluidColumns.st.css.js';
/** A fluid columns component*/
class FluidColumns extends React.PureComponent {
render() {
const { dataHook, className, cols, children } = this.props;
return (React.createElement("div", { className: st(classes.root, className), "data-hook": dataHook, style: { [vars.cols]: cols } }, React.Children.map(children, (child, index) => {
return (React.createElement("div", { key: index, "data-hook": dataHooks.item, className: classes.item }, child));
})));
}
}
FluidColumns.displayName = 'FluidColumns';
FluidColumns.propTypes = {
/** Applied as 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.
* @internal
*/
className: PropTypes.string,
/** Define the number of columns. It is used for the grid in order to define how many features will be displayed in a row. The default value is 3. */
cols: PropTypes.number,
/** Children to render. */
children: PropTypes.node.isRequired,
};
FluidColumns.defaultProps = {
cols: 3,
};
export default FluidColumns;
//# sourceMappingURL=FluidColumns.js.map