diff --git a/plugins/woocommerce-admin/client/task-list/index.js b/plugins/woocommerce-admin/client/task-list/index.js index afa99090560..026cdbd2f6f 100644 --- a/plugins/woocommerce-admin/client/task-list/index.js +++ b/plugins/woocommerce-admin/client/task-list/index.js @@ -21,7 +21,7 @@ import './style.scss'; import CartModal from '../dashboard/components/cart-modal'; import { getAllTasks } from './tasks'; import { getCountryCode } from '../dashboard/utils'; -import TaskList from './list'; +import TaskList from './task-list'; import { DisplayOption } from '../header/activity-panel/display-options'; import { TaskStep } from './task-step'; diff --git a/plugins/woocommerce-admin/client/task-list/list.js b/plugins/woocommerce-admin/client/task-list/task-list.js similarity index 90% rename from plugins/woocommerce-admin/client/task-list/list.js rename to plugins/woocommerce-admin/client/task-list/task-list.js index 3cf5f926a15..fe35def76e5 100644 --- a/plugins/woocommerce-admin/client/task-list/list.js +++ b/plugins/woocommerce-admin/client/task-list/task-list.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _n, sprintf } from '@wordpress/i18n'; import { useEffect, useRef } from '@wordpress/element'; import { Button, Card, CardBody, CardHeader } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -9,6 +9,7 @@ import { EllipsisMenu, Badge, __experimentalList as List, + __experimentalCollapsibleList as CollapsibleList, } from '@woocommerce/components'; import { updateQueryString } from '@woocommerce/navigation'; import { OPTIONS_STORE_NAME, ONBOARDING_STORE_NAME } from '@woocommerce/data'; @@ -246,6 +247,31 @@ export const TaskList = ( { return
; } + const expandLabel = sprintf( + /* translators: %i = number of hidden tasks */ + _n( + 'Show %i more task.', + 'Show %i more tasks.', + listTasks.length - 2, + 'woocommerce-admin' + ), + listTasks.length - 2 + ); + const collapseLabel = __( 'Show less', 'woocommerce-admin' ); + const ListComp = name === 'task_list' ? List : CollapsibleList; + + const listProps = + name === 'task_list' + ? {} + : { + collapseLabel, + expandLabel, + show: 2, + onCollapse: () => + recordEvent( 'extended_tasklist_collapse' ), + onExpand: () => recordEvent( 'extended_tasklist_expand' ), + }; + return ( <>