@wix/design-system
Version:
@wix/design-system
32 lines • 2.3 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
import { classes, st, vars } from './TimelineItem.st.css.js';
import { dataHooks } from './Timeline.constants';
import { isString } from '../utils/StringUtils';
/** A timeline item is a display of a timeline event */
function TimelineItem({ idx, item, dataHook, gap, skin = 'dark', }) {
const { customPrefix, suffix, label, labelAction, line = 'filled' } = item;
return (React.createElement("li", { className: st(classes.event, { skin }), "data-hook": dataHook },
React.createElement(React.Fragment, null,
React.createElement("div", { className: classes.prefix },
customPrefix ? (React.createElement("div", { "data-hook": `${dataHooks.timelineBulletIndicator}-${idx}` }, customPrefix)) : (React.createElement("div", { "data-hook": `${dataHooks.timelineDefaultPrefix}-${idx}`, className: classes.defaultIndicator })),
React.createElement("div", { className: st(classes.line, { line }) })),
React.createElement("div", { className: st(classes.label, { withSuffix: !!suffix }), style: { [vars.marginBottom]: gap } },
isString(label) ? (React.createElement(Text, { dataHook: `${dataHooks.timelineLabel}-${idx}`, weight: "thin", size: "small", className: classes.labelText }, label)) : (label),
labelAction ? (React.createElement("div", { className: classes.labelAction, "data-hook": `${dataHooks.timelineLabelAction}-${idx}` }, labelAction)) : null),
suffix ? (React.createElement("div", { className: classes.suffix, "data-hook": `${dataHooks.timelineSuffix}-${idx}` }, isString(suffix) ? (React.createElement(Text, { dataHook: `${dataHooks.timelineTextSuffix}-${idx}`, weight: "thin", light: true, secondary: true, size: "small" }, suffix)) : (suffix))) : null)));
}
TimelineItem.displayName = 'TimelineItem';
TimelineItem.propTypes = {
dataHook: PropTypes.string,
idx: PropTypes.number,
item: PropTypes.shape({
label: PropTypes.node,
labelAction: PropTypes.node,
customPrefix: PropTypes.node,
suffix: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
}).isRequired,
};
export default TimelineItem;
//# sourceMappingURL=TimelineItem.js.map