woocommerce/plugins/woocommerce-admin/client/two-column-tasks/completed.js

51 lines
1.2 KiB
JavaScript
Raw Normal View History

Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
/**
* External dependencies
*/
import classnames from 'classnames';
import { Button, Card, CardHeader } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import '../tasks/task-list.scss';
import HeaderImage from './completed.svg';
export const TaskListCompleted = ( { twoColumns, hideTasks, keepTasks } ) => {
return (
<>
<div
className={ classnames(
'woocommerce-task-dashboard__container two-column-experiment',
{ 'two-columns': twoColumns !== false }
) }
>
<Card
size="large"
className="woocommerce-task-card woocommerce-homescreen-card completed"
>
<CardHeader size="medium">
<div className="wooocommerce-task-card__header">
<img src={ HeaderImage } alt="Completed" />
<h2>
{ __(
"You've completed store setup",
'woocommerce-admin'
) }
</h2>
<Button isSecondary onClick={ keepTasks }>
{ __( 'Keep list', 'woocommerce-admin' ) }
</Button>
<Button isPrimary onClick={ hideTasks }>
{ __( 'Hide this list', 'woocommerce-admin' ) }
</Button>
</div>
</CardHeader>
</Card>
</div>
</>
);
};
export default TaskListCompleted;