Add toggle to experimental task item (https://github.com/woocommerce/woocommerce-admin/pull/7632)

* Add toggle to experimental task item

This commit adds a toggle to experimental task item

* Fixed onClick for expandable tasks

* Add changelog

* Fixed changelog

# Conflicts:
#	packages/experimental/CHANGELOG.md

* Add callback

* Fixed class name

* Add useEffect to experimental-list

* Fixed tests

* Fixed experimental-list useEffect

* Add callback to Home screen task list

* Fixed missing border error

* Fixed wrapper classes

* Fixed lint

* Added missing semicolon

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

plugins/woocommerce-admin/client/task-list/task-list.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { Button, Card, CardHeader } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { EllipsisMenu, Badge } from '@woocommerce/components';
@@ -86,10 +86,6 @@ export const TaskList = ( {
 			! dismissedTasks.includes( task.key )
 	);
 
-	const [ currentTask, setCurrentTask ] = useState(
-		incompleteTasks[ 0 ]?.key
-	);
-
 	const possiblyCompleteTaskList = () => {
 		const taskListVariableName = `woocommerce_${ name }_complete`;
 		const taskListToComplete = isComplete
@@ -349,15 +345,9 @@ export const TaskList = ( {
 								title={ task.title }
 								completed={ task.completed }
 								content={ task.content }
-								onClick={
-									! expandingItems || task.completed
-										? task.onClick
-										: () => setCurrentTask( task.key )
-								}
-								expandable={ expandingItems }
-								expanded={
-									expandingItems && currentTask === task.key
-								}
+								expandable={ expandingItems && task.expandable }
+								expanded={ expandingItems && task.expanded }
+								onClick={ task.onClick }
 								onDismiss={
 									task.isDismissable
 										? () => dismissTask( task )
@@ -370,9 +360,12 @@ export const TaskList = ( {
 								}
 								time={ task.time }
 								level={ task.level }
-								action={ task.onClick }
-								actionLabel={ task.action }
+								action={ task.action }
+								actionLabel={ task.actionLabel }
 								additionalInfo={ task.additionalInfo }
+								showActionButton={ task.showActionButton }
+								onExpand={ task.onExpand }
+								onCollapse={ task.onCollapse }
 							/>
 						) ) }
 					</ListComp>

plugins/woocommerce-admin/client/task-list/test/index.js

@@ -92,6 +92,9 @@ describe( 'TaskDashboard and TaskList', () => {
 				type: 'setup',
 				action: 'CTA (optional)',
 				content: 'This is the optional task content',
+				additionalInfo: 'This is the task additional info',
+				expandable: true,
+				expanded: true,
 			},
 			{
 				key: 'required',
@@ -103,7 +106,9 @@ describe( 'TaskDashboard and TaskList', () => {
 				isDismissable: false,
 				type: 'setup',
 				action: 'CTA (required)',
+				actionLabel: 'This is the action label',
 				content: 'This is the required task content',
+				expandable: false,
 			},
 			{
 				key: 'completed',
@@ -730,25 +735,15 @@ describe( 'TaskDashboard and TaskList', () => {
 			},
 		] );
 		await act( async () => {
-			const { container, queryByText } = render(
-				<TaskDashboard query={ {} } />
-			);
+			const { queryByText } = render( <TaskDashboard query={ {} } /> );
 
 			// Expect the first incomplete task to be expanded
 			expect(
-				(
-					await findByText(
-						container,
-						'This is the optional task content'
-					)
-				 ).parentElement.style.maxHeight
-			).not.toBe( '0' );
+				queryByText( 'This is the optional task content' )
+			).not.toBeNull();
 
 			// Expect the second not to be.
-			expect(
-				queryByText( 'This is the required task content' ).parentElement
-					.style.maxHeight
-			).toBe( '0' );
+			expect( queryByText( 'This is the action label' ) ).toBeNull();
 		} );
 	} );
 

plugins/woocommerce-admin/packages/experimental/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 -   Adjust task-item css class to prevent css conflicts. #7593
 -   Update task-item logic to only display content when expanded is true. #7611
+-   Add expandable tasklist item. #7632
 
 # 1.5.1
 

plugins/woocommerce-admin/packages/experimental/src/experimental-list/collapsible-list/index.tsx

@@ -223,6 +223,10 @@ export const ExperimentalCollapsibleList: React.FC< CollapsibleListProps > = ( {
 		'woocommerce-experimental-list'
 	);
 
+	const wrapperClasses = classnames( {
+		'woocommerce-experimental-list-wrapper': ! isCollapsed,
+	} );
+
 	return (
 		<ExperimentalList { ...listProps } className={ listClasses }>
 			{ [
@@ -244,6 +248,7 @@ export const ExperimentalCollapsibleList: React.FC< CollapsibleListProps > = ( {
 						);
 						return (
 							<div
+								className={ wrapperClasses }
 								ref={ collapseContainerRef }
 								style={ transitionStyles }
 							>

plugins/woocommerce-admin/packages/experimental/src/experimental-list/collapsible-list/style.scss

@@ -37,3 +37,7 @@
 		transition: max-height 500ms;
 	}
 }
+
+.woocommerce-experimental-list-wrapper {
+	border-top: 1px solid $gray-100;
+}

plugins/woocommerce-admin/packages/experimental/src/experimental-list/task-item.tsx

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { createElement, Fragment } from '@wordpress/element';
+import {
+	createElement,
+	Fragment,
+	useEffect,
+	useState,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, check } from '@wordpress/icons';
 import { Button, Tooltip } from '@wordpress/components';
@@ -35,8 +40,10 @@ type TaskItemProps = {
 	title: string;
 	completed: boolean;
 	onClick: () => void;
+	onCollapse?: () => void;
 	onDelete?: () => void;
 	onDismiss?: () => void;
+	onExpand?: () => void;
 	remindMeLater?: () => void;
 	additionalInfo?: string;
 	time?: string;
@@ -100,7 +107,9 @@ export const TaskItem: React.FC< TaskItemProps > = ( {
 	completed,
 	title,
 	onDelete,
+	onCollapse,
 	onDismiss,
+	onExpand,
 	remindMeLater,
 	onClick,
 	additionalInfo,
@@ -114,9 +123,14 @@ export const TaskItem: React.FC< TaskItemProps > = ( {
 	actionLabel,
 	...listItemProps
 } ) => {
+	const [ isTaskExpanded, setTaskExpanded ] = useState( expanded );
+	useEffect( () => {
+		setTaskExpanded( expanded );
+	}, [ expanded ] );
+
 	const className = classnames( 'woocommerce-task-list__item', {
 		complete: completed,
-		expanded,
+		expanded: isTaskExpanded,
 		'level-2': level === 2 && ! completed,
 		'level-1': level === 1 && ! completed,
 	} );
@@ -128,11 +142,25 @@ export const TaskItem: React.FC< TaskItemProps > = ( {
 		( ( onDismiss || remindMeLater ) && ! completed ) ||
 		( onDelete && completed );
 
+	const toggleActionVisibility = () => {
+		setTaskExpanded( ! isTaskExpanded );
+		if ( isTaskExpanded && onExpand ) {
+			onExpand();
+		}
+		if ( ! isTaskExpanded && onCollapse ) {
+			onCollapse();
+		}
+	};
+
 	return (
 		<ListItem
 			disableGutters
 			className={ className }
-			onClick={ onClick }
+			onClick={
+				expandable && showActionButton
+					? toggleActionVisibility
+					: onClick
+			}
 			{ ...listItemProps }
 		>
 			<OptionalTaskTooltip level={ level } completed={ completed }>
@@ -159,7 +187,7 @@ export const TaskItem: React.FC< TaskItemProps > = ( {
 					</span>
 					<OptionalExpansionWrapper
 						expandable={ expandable }
-						expanded={ expanded }
+						expanded={ isTaskExpanded }
 					>
 						<div className="woocommerce-task-list__item-expandable-content">
 							{ content }