@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
52 lines • 2.25 kB
JavaScript
const _excluded = ["children", "onClick", "onKeyDown", "stacked", "align", "className"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
/**
* GenTeaserContainer module.
* @module @massds/mayflower-react/GenTeaserContainer
* @requires module:@massds/mayflower-assets/scss/03-organisms/gen-teaser
*/
import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
const GenTeaserContainer = props => {
var _classNames;
const children = props.children,
onClick = props.onClick,
onKeyDown = props.onKeyDown,
stacked = props.stacked,
align = props.align,
className = props.className,
rest = _objectWithoutPropertiesLoose(props, _excluded);
const teaserClasses = classNames((_classNames = {
'ma__gen-teaser': true,
'ma__gen-teaser--clickable': onClick,
'ma__gen-teaser--stacked': stacked
}, _classNames["ma__gen-teaser--align-" + align] = align, _classNames["" + className] = !!className, _classNames));
const role = onClick ? 'button' : null;
return (
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
React.createElement("section", _extends({
className: teaserClasses,
onClick: onClick,
onKeyDown: onKeyDown,
role: role
}, rest), children)
);
};
GenTeaserContainer.propTypes = process.env.NODE_ENV !== "production" ? {
/** A custom on click function */
onClick: PropTypes.func,
/** A custom on key down function */
onKeyDown: PropTypes.func,
/** React children to render */
children: PropTypes.node,
/** whether to stack image on top */
stacked: PropTypes.bool,
/** alignment for description relative to image */
align: PropTypes.oneOf(['top', 'center']),
/** A custom class. */
className: PropTypes.string
} : {};
export default GenTeaserContainer;