Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Convert Title component to TS (https://github.com/woocommerce/woocommerce-blocks/pull/6115)

This commit is contained in:
Alba Rincón 2022-03-29 12:16:17 +02:00 committed by GitHub
parent f344d192d9
commit adca9b0c30
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
plugins/woocommerce-blocks/assets/js/base/components/title/index.js → plugins/woocommerce-blocks/assets/js/base/components/title/index.tsx
View File

@ -2,7 +2,7 @@
* External dependencies
*/
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { ReactNode } from 'react';
/**
* Internal dependencies
@ -20,12 +20,17 @@ import './style.scss';
* @param {string} props.headingLevel Heading level for title.
* @param {Object} [props.props] Rest of props passed through to component.
*/
const Title = ( { children, className, headingLevel, ...props } ) => {
const Title = ( {
children,
className,
headingLevel,
...props
}: TitleProps ): JSX.Element => {
const buttonClassName = classNames(
'wc-block-components-title',
className
);
const TagName = `h${ headingLevel }`;
const TagName = `h${ headingLevel }` as keyof JSX.IntrinsicElements;
return (
<TagName className={ buttonClassName } { ...props }>
@ -34,11 +39,10 @@ const Title = ( { children, className, headingLevel, ...props } ) => {
);
};
Title.propTypes = {
headingLevel: PropTypes.oneOf( [ '1', '2', '3', '4', '5', '6' ] )
.isRequired,
className: PropTypes.string,
children: PropTypes.node,
};
interface TitleProps {
headingLevel: '1' | '2' | '3' | '4' | '5' | '6';
className: string;
children: ReactNode;
}
export default Title;