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