@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
61 lines • 1.92 kB
JavaScript
/**
* ArrowNav module.
* @module @massds/mayflower-react/ArrowNav
* @requires module:@massds/mayflower-assets/scss/02-molecules/arrow-nav
* @requires module:@massds/mayflower-assets/scss/01-atoms/arrow-button
*/
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import ArrowButton from "../ArrowButton/index.mjs";
const ArrowNav = props => {
var _classNames;
const sectionClasses = classNames((_classNames = {
'js-clickable-link': true,
'ma__arrow-nav': true
}, _classNames["ma__arrow-nav--" + props.direction] = props.direction, _classNames));
const Element = props.href ? 'a' : 'section';
const onClickCallback = e => {
if (typeof props.onClick === 'function') {
e.preventDefault();
props.onClick(e);
}
};
return /*#__PURE__*/React.createElement(Element, {
className: sectionClasses,
onClick: e => onClickCallback(e),
href: props.href,
title: props.info
}, /*#__PURE__*/React.createElement(ArrowButton, {
direction: props.direction
}), /*#__PURE__*/React.createElement("h2", {
className: "ma__arrow-nav__title",
"data-label": props.label
}, /*#__PURE__*/React.createElement("span", null, props.title)), /*#__PURE__*/React.createElement("div", {
className: "ma__arrow-nav__text"
}, props.text));
};
ArrowNav.propTypes = process.env.NODE_ENV !== "production" ? {
/** Top label information */
label: PropTypes.string.isRequired,
/** Title */
title: PropTypes.string.isRequired,
/** Link information */
info: PropTypes.string,
/** Arrow Direction */
direction: PropTypes.oneOf(['left', 'right']),
/** Link href */
href: PropTypes.string,
/** Function */
onClick: PropTypes.func,
/** Bottom Link text */
text: PropTypes.string
} : {};
ArrowNav.defaultProps = {
info: '',
href: '',
onClick: '',
text: '',
direction: 'left'
};
export default ArrowNav;