From 0832f1282c10803c3d4baf06c50abac6df41acdf Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 1 Jul 2022 17:54:44 +0530 Subject: [PATCH 1/9] [not verified] Convert JetpackFooter component to TypeScript --- .../jetpack-footer/{index.jsx => index.tsx} | 35 ++++++------------- .../components/jetpack-footer/types.ts | 21 +++++++++++ 2 files changed, 32 insertions(+), 24 deletions(-) rename projects/js-packages/components/components/jetpack-footer/{index.jsx => index.tsx} (57%) create mode 100644 projects/js-packages/components/components/jetpack-footer/types.ts diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.tsx similarity index 57% rename from projects/js-packages/components/components/jetpack-footer/index.jsx rename to projects/js-packages/components/components/jetpack-footer/index.tsx index 9befaac1a84e1..ede97cdb9bcaf 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'; +import type React from 'react'; /** * 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/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; +}; From 5e5c25573ce2b39d45129f557128f2a941cb3b24 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 1 Jul 2022 17:55:02 +0530 Subject: [PATCH 2/9] [not verified] Convert JetpackFooter stories to TypeScript --- .../jetpack-footer/stories/index.jsx | 17 ----------------- .../jetpack-footer/stories/index.tsx | 18 ++++++++++++++++++ 2 files changed, 18 insertions(+), 17 deletions(-) delete mode 100644 projects/js-packages/components/components/jetpack-footer/stories/index.jsx create mode 100644 projects/js-packages/components/components/jetpack-footer/stories/index.tsx 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..ce7c19a16f099 --- /dev/null +++ b/projects/js-packages/components/components/jetpack-footer/stories/index.tsx @@ -0,0 +1,18 @@ +import JetpackFooter from '../index'; +import type { ComponentStory, ComponentMeta } from '@storybook/react'; + +const meta: ComponentMeta< typeof JetpackFooter > = { + title: 'JS Packages/Components/Jetpack Footer', + component: JetpackFooter, +}; + +export default meta; + +const Template: ComponentStory< typeof JetpackFooter > = args => ; + +const DefaultArgs = { + moduleName: 'The Module Name', +}; + +export const _default = Template.bind( {} ); +_default.args = DefaultArgs; From ed9942e0413443a05498f68e8e12869eb0a93e04 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 1 Jul 2022 18:50:01 +0530 Subject: [PATCH 3/9] [not verified] Convert JetpackFooter tests to TypeScript --- .../jetpack-footer/test/{component.jsx => component.tsx} | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) rename projects/js-packages/components/components/jetpack-footer/test/{component.jsx => component.tsx} (85%) diff --git a/projects/js-packages/components/components/jetpack-footer/test/component.jsx b/projects/js-packages/components/components/jetpack-footer/test/component.tsx similarity index 85% rename from projects/js-packages/components/components/jetpack-footer/test/component.jsx rename to projects/js-packages/components/components/jetpack-footer/test/component.tsx index 4a9f2c9346fc9..0c19d5555df5b 100644 --- a/projects/js-packages/components/components/jetpack-footer/test/component.jsx +++ b/projects/js-packages/components/components/jetpack-footer/test/component.tsx @@ -7,9 +7,8 @@ describe( 'JetpackFooter', () => { }; describe( 'Render the JetpackFooter component', () => { - const { container } = render( ); - it( 'validate the class name', () => { + const { container } = render( ); // eslint-disable-next-line testing-library/no-node-access expect( container.firstChild ).toHaveClass( 'sample-classname' ); } ); From 330ab9843b8206eacce41052b8fb76be0edf0735 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 1 Jul 2022 18:50:21 +0530 Subject: [PATCH 4/9] [not verified] Add more test cases --- .../jetpack-footer/test/component.tsx | 31 ++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/jetpack-footer/test/component.tsx b/projects/js-packages/components/components/jetpack-footer/test/component.tsx index 0c19d5555df5b..0c197a3ceb830 100644 --- a/projects/js-packages/components/components/jetpack-footer/test/component.tsx +++ b/projects/js-packages/components/components/jetpack-footer/test/component.tsx @@ -1,4 +1,4 @@ -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import JetpackFooter from '../index'; describe( 'JetpackFooter', () => { @@ -12,5 +12,34 @@ describe( 'JetpackFooter', () => { // 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(); + } + } ); } ); } ); From 77a1ac313b2f97a7a6ac37a3a49911eae890ab5c Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 22 Jul 2022 19:31:15 +0530 Subject: [PATCH 5/9] [not verified] Fix story source not loading --- .../components/components/jetpack-footer/stories/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/projects/js-packages/components/components/jetpack-footer/stories/index.tsx b/projects/js-packages/components/components/jetpack-footer/stories/index.tsx index ce7c19a16f099..b8188589360a2 100644 --- a/projects/js-packages/components/components/jetpack-footer/stories/index.tsx +++ b/projects/js-packages/components/components/jetpack-footer/stories/index.tsx @@ -1,12 +1,10 @@ import JetpackFooter from '../index'; import type { ComponentStory, ComponentMeta } from '@storybook/react'; -const meta: ComponentMeta< typeof JetpackFooter > = { +export default { title: 'JS Packages/Components/Jetpack Footer', component: JetpackFooter, -}; - -export default meta; +} as ComponentMeta< typeof JetpackFooter >; const Template: ComponentStory< typeof JetpackFooter > = args => ; From bf5c35b63c090f9930a100f82c98804a58aaa387 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Wed, 27 Jul 2022 17:41:10 +0530 Subject: [PATCH 6/9] Add changelog --- .../components/changelog/update-rna-jetpack-footer-to-ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/js-packages/components/changelog/update-rna-jetpack-footer-to-ts 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 From e5d209b34781e4a8d50e3d346b0eb944197f2a51 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Wed, 27 Jul 2022 18:16:08 +0530 Subject: [PATCH 7/9] E2E tests expect React to be in scope :shrug: --- .../js-packages/components/components/jetpack-footer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/jetpack-footer/index.tsx b/projects/js-packages/components/components/jetpack-footer/index.tsx index ede97cdb9bcaf..648ef0aca9895 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.tsx +++ b/projects/js-packages/components/components/jetpack-footer/index.tsx @@ -1,10 +1,10 @@ import { __ } from '@wordpress/i18n'; import classnames from 'classnames'; +import React from 'react'; import AutomatticBylineLogo from '../automattic-byline-logo'; import './style.scss'; import JetpackLogo from '../jetpack-logo'; import type { JetpackFooterProps } from './types'; -import type React from 'react'; /** * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right. From 1ef53bf61a77739b16ac153a6c7029ded592eb63 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 29 Jul 2022 12:28:38 +0530 Subject: [PATCH 8/9] Fix version --- projects/js-packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From 5f392ff83237839878f7cbcdba0f7f9b7ae7436e Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Mon, 1 Aug 2022 13:35:07 +0530 Subject: [PATCH 9/9] Add default controls for story --- .../components/components/jetpack-footer/stories/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/jetpack-footer/stories/index.tsx b/projects/js-packages/components/components/jetpack-footer/stories/index.tsx index b8188589360a2..ef2c0c0e22cdc 100644 --- a/projects/js-packages/components/components/jetpack-footer/stories/index.tsx +++ b/projects/js-packages/components/components/jetpack-footer/stories/index.tsx @@ -9,7 +9,10 @@ export default { const Template: ComponentStory< typeof JetpackFooter > = args => ; const DefaultArgs = { - moduleName: 'The Module Name', + a8cLogoHref: 'https://automattic.com', + moduleName: 'Jetpack', + className: '', + moduleNameHref: 'https://jetpack.com', }; export const _default = Template.bind( {} );