2019-12-02 15:05:47 +00:00
|
|
|
import React from "react";
|
2020-10-16 13:16:01 +00:00
|
|
|
import PropTypes from "prop-types";
|
2021-03-07 11:57:26 +00:00
|
|
|
import StyledHeading from "./styled-heading";
|
2019-07-01 14:05:28 +00:00
|
|
|
|
2021-04-13 11:07:44 +00:00
|
|
|
const Heading = ({ level, color, className, ...rest }) => {
|
2020-10-16 13:16:01 +00:00
|
|
|
return (
|
2021-04-13 11:07:44 +00:00
|
|
|
<StyledHeading
|
|
|
|
className={`${className} not-selectable`}
|
|
|
|
as={`h${level}`}
|
|
|
|
colorProp={color}
|
|
|
|
{...rest}
|
|
|
|
></StyledHeading>
|
2020-10-16 13:16:01 +00:00
|
|
|
);
|
2019-12-06 09:09:56 +00:00
|
|
|
};
|
2019-07-01 14:05:28 +00:00
|
|
|
|
2019-12-06 09:09:56 +00:00
|
|
|
Heading.propTypes = {
|
2021-03-07 11:57:26 +00:00
|
|
|
/** The heading level. It corresponds to the number after the 'H' for the DOM tag. Set the level for semantic accuracy and accessibility. */
|
2020-10-16 13:16:01 +00:00
|
|
|
level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Specifies the headline color */
|
2020-10-16 13:16:01 +00:00
|
|
|
color: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Title */
|
2020-10-16 13:16:01 +00:00
|
|
|
title: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Disables word wrapping */
|
2020-10-16 13:16:01 +00:00
|
|
|
truncate: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Sets the 'display: inline-block' property */
|
2020-10-16 13:16:01 +00:00
|
|
|
isInline: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Sets the size of headline */
|
2020-10-16 13:16:01 +00:00
|
|
|
size: PropTypes.oneOf(["xsmall", "small", "medium", "large", "xlarge"]),
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts css class */
|
2020-10-16 13:16:01 +00:00
|
|
|
className: PropTypes.string,
|
2019-12-06 09:09:56 +00:00
|
|
|
};
|
2019-07-01 14:05:28 +00:00
|
|
|
|
2019-12-06 09:09:56 +00:00
|
|
|
Heading.defaultProps = {
|
2020-10-16 13:16:01 +00:00
|
|
|
title: null,
|
|
|
|
truncate: false,
|
|
|
|
isInline: false,
|
|
|
|
size: "large",
|
|
|
|
level: 1,
|
|
|
|
className: "",
|
2019-12-06 09:09:56 +00:00
|
|
|
};
|
2019-07-01 14:05:28 +00:00
|
|
|
|
2022-03-22 10:46:42 +00:00
|
|
|
export default React.memo(Heading);
|