59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useIntl } from '@edx/frontend-platform/i18n';
|
|
import {
|
|
OverlayTrigger,
|
|
Tooltip,
|
|
} from '@openedx/paragon';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import messages from './messages';
|
|
|
|
const CourseLockUp = (
|
|
{
|
|
outlineLink,
|
|
org,
|
|
number,
|
|
title,
|
|
},
|
|
) => {
|
|
const intl = useIntl();
|
|
|
|
return (
|
|
<OverlayTrigger
|
|
placement="bottom"
|
|
overlay={(
|
|
<Tooltip id="course-lock-up">
|
|
{title}
|
|
</Tooltip>
|
|
)}
|
|
>
|
|
<Link
|
|
className="course-title-lockup mr-2"
|
|
to={outlineLink}
|
|
aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
|
|
data-testid="course-lock-up-block"
|
|
>
|
|
<span className="d-block small m-0 text-gray-800" data-testid="course-org-number">{org} {number}</span>
|
|
<span className="d-block m-0 font-weight-bold text-gray-800" data-testid="course-title">{title}</span>
|
|
</Link>
|
|
</OverlayTrigger>
|
|
);
|
|
};
|
|
|
|
CourseLockUp.propTypes = {
|
|
number: PropTypes.string,
|
|
org: PropTypes.string,
|
|
title: PropTypes.string,
|
|
outlineLink: PropTypes.string,
|
|
};
|
|
|
|
CourseLockUp.defaultProps = {
|
|
number: null,
|
|
org: null,
|
|
title: null,
|
|
outlineLink: null,
|
|
};
|
|
|
|
export default CourseLockUp;
|