Merge branch 'trunk' into add/make-sure-focused-elements-are-visible

assets/home/tasks-section/task-item.js

@@ -3,6 +3,16 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import {
+	Icon,
+	external as externalIcon,
+	info as infoIcon,
+} from '@wordpress/icons';
+import { Tooltip } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -13,18 +23,20 @@ import { isUrlExternal } from '../utils';
 /**
  * WordPress dependencies
  */
-import { Icon, external } from '@wordpress/icons';
 
 /**
  * Tasks item component.
  *
- * @param {Object}  props       Component props.
- * @param {string}  props.title Item title.
- * @param {string}  props.url   Item URL.
- * @param {boolean} props.done  Whether item is completed.
+ * @param {Object}  props          Component props.
+ * @param {string}  props.title    Item title.
+ * @param {string}  props.url      Item URL.
+ * @param {boolean} props.done     Whether item is completed.
+ * @param {boolean} props.disabled Whether item is disabled.
+ * @param {boolean} props.info     Info text.
  */
-const TaskItem = ( { title, url, done } ) => {
-	const Tag = done ? 'span' : 'a';
+const TaskItem = ( { title, url, done, info, disabled } ) => {
+	const isActive = ! done && ! disabled;
+	const Tag = isActive ? 'a' : 'span';
 	const isExternal =
 		isUrlExternal( url ) || url?.indexOf( 'external=true' ) >= 0; // If the URL contains 'external=true', we show the external icon,
 	// It's helpful when it's an internal URL (maybe for tracking purpose) but redirecting to an external one.
@@ -38,7 +50,7 @@ const TaskItem = ( { title, url, done } ) => {
 	return (
 		<li
 			className={ classnames( 'sensei-home-tasks__item', {
-				'sensei-home-tasks__item--done': done,
+				'sensei-home-tasks__item--disabled': ! isActive,
 			} ) }
 		>
 			<Tag className="sensei-home-tasks__link" { ...linkProps }>
@@ -47,14 +59,22 @@ const TaskItem = ( { title, url, done } ) => {
 				) }
 				<span className="sensei-home-tasks__item-title">
 					{ title }
-					{ isExternal && (
+					{ isExternal && isActive && (
 						<Icon
-							icon={ external }
+							icon={ externalIcon }
 							className="sensei-home-tasks__external-icon sensei-home-tasks__icon-with-current-color"
 						/>
 					) }
 				</span>
-				{ ! done && (
+				{ info && (
+					<Tooltip text={ info }>
+						<Icon
+							className="sensei-home-tasks__icon-with-current-color"
+							icon={ infoIcon }
+						/>
+					</Tooltip>
+				) }
+				{ isActive && (
 					<ChevronRightIcon className="sensei-home-tasks__link-chevron" />
 				) }
 			</Tag>

assets/home/tasks-section/task-item.test.js

@@ -3,11 +3,18 @@
  */
 import { render } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { Tooltip } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
 import TaskItem from './task-item';
 
+jest.mock( '@wordpress/components' );
+
 describe( '<TaskItem />', () => {
 	it( 'Should render an anchor when item is not completed', () => {
 		const { container } = render( <TaskItem url="#" /> );
@@ -55,4 +62,38 @@ describe( '<TaskItem />', () => {
 
 		expect( externalIcon ).toBeNull();
 	} );
+
+	it( 'Should not render external icon when task is not active', () => {
+		const { container } = render(
+			<TaskItem
+				url="www.example.com/something?this=false&external=true"
+				showExternalIcon
+				disabled
+			/>
+		);
+
+		const externalIcon = container.querySelector(
+			'.sensei-home-tasks__external-icon'
+		);
+
+		expect( externalIcon ).toBeNull();
+	} );
+
+	it( 'Should render a span when item is disabled', () => {
+		const { container } = render( <TaskItem url="#" disabled /> );
+
+		const renderedTag = container.querySelector(
+			'.sensei-home-tasks__link'
+		).tagName;
+
+		expect( renderedTag ).toEqual( 'SPAN' );
+	} );
+
+	it( 'Should render a task with the info', () => {
+		Tooltip.mockImplementation( ( { text } ) => text );
+
+		const { queryByText } = render( <TaskItem url="#" info="Info text" /> );
+
+		expect( queryByText( 'Info text' ) ).toBeTruthy();
+	} );
 } );

assets/home/tasks-section/tasks.js

@@ -34,6 +34,8 @@ const Tasks = ( { items } ) => (
 					title={ task.title }
 					url={ task.url }
 					done={ task.done }
+					disabled={ task.disabled }
+					info={ task.info }
 				/>
 			) ) }
 		</ul>

assets/home/tasks-section/tasks.scss

@@ -32,7 +32,7 @@
 			border-top: none;
 		}
 
-		&--done {
+		&--disabled {
 			color: $gray-50;
 		}
 	}

includes/admin/home/tasks/class-sensei-home-tasks-provider.php

@@ -100,6 +100,8 @@ private function get_tasks(): array {
 		 * @property {string} `$tasks[]['url']`      Optional. Destination URL for users when clicking on the task.
 		 * @property {string} `$tasks[]['image']`    Optional. Source url or path for the featured image when this task is the first pending one.
 		 * @property {bool}   `$tasks[]['done']`     Whether the task is considered done or not.
+		 * @property {bool}   `$tasks[]['disabled']` Whether the task is considered disabled or not.
+		 * @property {bool}   `$tasks[]['info']`     A text to describe something about the task in an `info` icon.
 		 * @return {array} Filtered tasks.
 		 */
 		return apply_filters( 'sensei_home_tasks', $tasks );