diff --git a/projects/js-packages/components/changelog/update-rna-jetpack-footer-to-ts b/projects/js-packages/components/changelog/update-rna-jetpack-footer-to-ts new file mode 100644 index 0000000000000..36350d7f8c046 --- /dev/null +++ b/projects/js-packages/components/changelog/update-rna-jetpack-footer-to-ts @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +JS Components: Convert JetpackFooter component to TypeScript diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.tsx similarity index 59% rename from projects/js-packages/components/components/jetpack-footer/index.jsx rename to projects/js-packages/components/components/jetpack-footer/index.tsx index 9befaac1a84e1..648ef0aca9895 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.jsx +++ b/projects/js-packages/components/components/jetpack-footer/index.tsx @@ -1,19 +1,24 @@ import { __ } from '@wordpress/i18n'; import classnames from 'classnames'; -import PropTypes from 'prop-types'; import React from 'react'; import AutomatticBylineLogo from '../automattic-byline-logo'; import './style.scss'; import JetpackLogo from '../jetpack-logo'; +import type { JetpackFooterProps } from './types'; /** * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right. * - * @param {object} props - Component properties. - * @returns {React.Component} JetpackFooter component. + * @param {JetpackFooterProps} props - Component properties. + * @returns {React.ReactNode} JetpackFooter component. */ -const JetpackFooter = props => { - const { a8cLogoHref, moduleName, className, moduleNameHref, ...otherProps } = props; +const JetpackFooter: React.FC< JetpackFooterProps > = ( { + a8cLogoHref = 'https://automattic.com', + moduleName = __( 'Jetpack', 'jetpack' ), + className, + moduleNameHref = 'https://jetpack.com', + ...otherProps +} ) => { return (
@@ -43,22 +48,4 @@ const JetpackFooter = props => { ); }; -JetpackFooter.defaultProps = { - a8cLogoHref: 'https://automattic.com', - moduleName: __( 'Jetpack', 'jetpack' ), - className: '', - moduleNameHref: 'https://jetpack.com', -}; - -JetpackFooter.propTypes = { - /** Link for 'An Automattic Airline'. */ - a8cLogoHref: PropTypes.string, - /** Name of the module, e.g. 'Jetpack Search'. */ - moduleName: PropTypes.string, - /** additional className of the wrapper, `jp-dashboard-footer` always included. */ - className: PropTypes.string, - /** Link that the Module name will link to (optional). */ - moduleNameHref: PropTypes.string, -}; - export default JetpackFooter; diff --git a/projects/js-packages/components/components/jetpack-footer/stories/index.jsx b/projects/js-packages/components/components/jetpack-footer/stories/index.jsx deleted file mode 100644 index 5583653d8420a..0000000000000 --- a/projects/js-packages/components/components/jetpack-footer/stories/index.jsx +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable react/react-in-jsx-scope */ -import React from 'react'; -import JetpackFooter from '../index.jsx'; - -export default { - title: 'JS Packages/Components/Jetpack Footer', - component: JetpackFooter, -}; - -const Template = args => ; - -const DefaultArgs = { - moduleName: 'The Module Name', -}; - -export const _default = Template.bind( {} ); -_default.args = DefaultArgs; diff --git a/projects/js-packages/components/components/jetpack-footer/stories/index.tsx b/projects/js-packages/components/components/jetpack-footer/stories/index.tsx new file mode 100644 index 0000000000000..ef2c0c0e22cdc --- /dev/null +++ b/projects/js-packages/components/components/jetpack-footer/stories/index.tsx @@ -0,0 +1,19 @@ +import JetpackFooter from '../index'; +import type { ComponentStory, ComponentMeta } from '@storybook/react'; + +export default { + title: 'JS Packages/Components/Jetpack Footer', + component: JetpackFooter, +} as ComponentMeta< typeof JetpackFooter >; + +const Template: ComponentStory< typeof JetpackFooter > = args => ; + +const DefaultArgs = { + a8cLogoHref: 'https://automattic.com', + moduleName: 'Jetpack', + className: '', + moduleNameHref: 'https://jetpack.com', +}; + +export const _default = Template.bind( {} ); +_default.args = DefaultArgs; diff --git a/projects/js-packages/components/components/jetpack-footer/test/component.jsx b/projects/js-packages/components/components/jetpack-footer/test/component.jsx deleted file mode 100644 index 4a9f2c9346fc9..0000000000000 --- a/projects/js-packages/components/components/jetpack-footer/test/component.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import { render } from '@testing-library/react'; -import JetpackFooter from '../index'; - -describe( 'JetpackFooter', () => { - const testProps = { - className: 'sample-classname', - }; - - describe( 'Render the JetpackFooter component', () => { - const { container } = render( ); - - it( 'validate the class name', () => { - // eslint-disable-next-line testing-library/no-node-access - expect( container.firstChild ).toHaveClass( 'sample-classname' ); - } ); - } ); -} ); diff --git a/projects/js-packages/components/components/jetpack-footer/test/component.tsx b/projects/js-packages/components/components/jetpack-footer/test/component.tsx new file mode 100644 index 0000000000000..0c197a3ceb830 --- /dev/null +++ b/projects/js-packages/components/components/jetpack-footer/test/component.tsx @@ -0,0 +1,45 @@ +import { render, screen } from '@testing-library/react'; +import JetpackFooter from '../index'; + +describe( 'JetpackFooter', () => { + const testProps = { + className: 'sample-classname', + }; + + describe( 'Render the JetpackFooter component', () => { + it( 'validate the class name', () => { + const { container } = render( ); + // eslint-disable-next-line testing-library/no-node-access + expect( container.firstChild ).toHaveClass( 'sample-classname' ); + } ); + + it( 'validates Jetpack logo', () => { + render( ); + + expect( screen.getByLabelText( 'Jetpack logo' ) ).toBeInTheDocument(); + } ); + + it( 'tests for module name and link', () => { + render( + + ); + + const element = screen.getByLabelText( 'Test module' ); + + expect( element ).toBeInTheDocument(); + expect( element ).toBeInstanceOf( HTMLAnchorElement ); + expect( element ).toHaveAttribute( 'href', 'https://jetpack.com/path/to-some-page' ); + } ); + + it( 'validates the a8c label', () => { + render( ); + + for ( const element of screen.getAllByLabelText( 'An Automattic Airline' ) ) { + expect( element ).toBeInTheDocument(); + } + } ); + } ); +} ); diff --git a/projects/js-packages/components/components/jetpack-footer/types.ts b/projects/js-packages/components/components/jetpack-footer/types.ts new file mode 100644 index 0000000000000..3737a381eb4c0 --- /dev/null +++ b/projects/js-packages/components/components/jetpack-footer/types.ts @@ -0,0 +1,21 @@ +export type JetpackFooterProps = { + /** + * Link for 'An Automattic Airline'. + */ + a8cLogoHref?: string; + + /** + * Name of the module, e.g. 'Jetpack Search'. + */ + moduleName?: string; + + /** + * additional className of the wrapper, `jp-dashboard-footer` always included. + */ + className?: string; + + /** + * Link that the Module name will link to (optional). + */ + moduleNameHref?: string; +}; diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json index f35137b9e175a..962a57f2c87e9 100644 --- a/projects/js-packages/components/package.json +++ b/projects/js-packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@automattic/jetpack-components", - "version": "0.17.1", + "version": "0.17.2-alpha", "description": "Jetpack Components Package", "author": "Automattic", "license": "GPL-2.0-or-later",