Add experimental list documentation (https://github.com/woocommerce/woocommerce-admin/pull/7687)

* Moved task-item

* Moved task-item css

* Added readme.md

* Added storybook

* Renamed `remindMeLater

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

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

@@ -8,6 +8,7 @@ import { Meta, Story } from '@storybook/react';
  * Internal dependencies
  */
 import { List, ListItem, CollapsibleList } from '../..';
+import { TaskItem } from '../task-item';
 import { ListProps } from '../experimental-list';
 import './style.scss';
 
@@ -82,3 +83,115 @@ export const CollapsibleListExample: Story = () => {
 };
 
 CollapsibleListExample.storyName = 'List with CollapsibleListItem.';
+
+export const TaskItemExample: Story = ( args ) => (
+	<List { ...args }>
+		<TaskItem
+			action={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Primary action clicked' )
+			}
+			actionLabel="Primary action"
+			completed={ false }
+			content="Task content"
+			expandable={ true }
+			expanded={ true }
+			level={ 1 }
+			onClick={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Task clicked' )
+			}
+			onCollapse={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Task will be expanded' )
+			}
+			onExpand={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Task will be collapsed' )
+			}
+			showActionButton={ true }
+			title="A high-priority task"
+		/>
+		<TaskItem
+			action={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Primary action clicked' )
+			}
+			actionLabel="Primary action"
+			completed={ false }
+			content="Task content"
+			expandable={ false }
+			expanded={ true }
+			level={ 1 }
+			onClick={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Task clicked' )
+			}
+			showActionButton={ false }
+			title="A high-priority task without `Primary action`"
+		/>
+		<TaskItem
+			action={ () => {} }
+			completed={ false }
+			content="Task content"
+			expandable={ false }
+			expanded={ true }
+			level={ 2 }
+			onClick={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Task clicked' )
+			}
+			title="Setup task"
+			onDismiss={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Task dismissed' )
+			}
+			onSnooze={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Task snoozed' )
+			}
+			time="5 minutes"
+		/>
+		<TaskItem
+			action={ () => {} }
+			completed={ false }
+			content="Task content"
+			expandable={ false }
+			expanded={ true }
+			level={ 3 }
+			onClick={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Task clicked' )
+			}
+			title="A low-priority task"
+			onDismiss={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Task dismissed' )
+			}
+			onSnooze={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Task snoozed' )
+			}
+			time="3 minutes"
+		/>
+		<TaskItem
+			action={ () => {} }
+			completed={ true }
+			content="Task content"
+			expandable={ false }
+			expanded={ true }
+			level={ 3 }
+			onClick={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Task clicked' )
+			}
+			title="Another low-priority task"
+			onDelete={ () =>
+				// eslint-disable-next-line no-console
+				console.log( 'Task deleted' )
+			}
+		/>
+	</List>
+);
+
+TaskItemExample.storyName = 'TaskItems.';

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

@@ -9,3 +9,15 @@
 		}
 	}
 }
+
+.woocommerce-experimental-list {
+	li {
+		padding-left: 25px;
+		.components-dropdown {
+			div {
+				position: absolute;
+				right: 0;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,49 @@
+# TaskItem
+
+Use `TaskItem` to display a task item.
+
+## Usage
+
+```jsx
+<TaskItem
+	action={ () => alert( '"My action" button has been clicked' ) }
+	actionLabel="My action"
+	additionalInfo="Additional task information"
+	completed={ true }
+	content="Task content"
+	expandable={ false }
+	expanded={ false }
+	level="Task title"
+	onClick={ () => alert( 'The task has been clicked' ) }
+	onCollapse={ () => alert( 'The task was collapsed' ) }
+	onDelete={ () => alert( 'The task has been deleted' ) }
+	onDismiss={ () => alert( 'The task was dismissed' ) }
+	onExpand={ () => alert( 'The task was expanded' ) }
+	onSnooze={ () => alert( 'The task was snoozed' ) }
+	showActionButton={ false }
+	time="10 minutes"
+	title="Task title"
+/>
+```
+
+### Props
+
+| Name               | Type     | Default | Description                                                  |
+| ------------------ | -------- | ------- | ------------------------------------------------------------ |
+| `action`           | Function | `null`  | A function to be called when the primary action is triggered |
+| `actionLabel`      | String   | `null`  | Primary action label                                         |
+| `additionalInfo`   | String   | `null`  | Additional task information                                  |
+| `completed`        | Boolean  | `null`  | Whether the task is completed or not                         |
+| `content`          | String   | `null`  | Task content                                                 |
+| `expandable`       | Boolean  | `false` | Whether it's an expandable task                              |
+| `expanded`         | Boolean  | `false` | Whether the task is expanded by default                      |
+| `level`            | Number   | `3`     | Task hierarchy level (between 1 and 3)                       |
+| `onClick`          | Function | `null`  | A function to be called after clicking on the task item      |
+| `onCollapse`       | Function | `null`  | A function to be called after the task is collapsed          |
+| `onDelete`         | Function | `null`  | A function to be called after the task is deleted            |
+| `onDismiss`        | Function | `null`  | A function to be called after the task is dismissed          |
+| `onExpand`         | Function | `null`  | A function to be called after the task is expanded           |
+| `onSnooze`         | Function | `null`  | A function to be called after the task is snoozed            |
+| `showActionButton` | Boolean  | `null`  | Whether the primary action (button) will be shown            |
+| `time`             | String   | `null`  | Time to finish the task                                      |
+| `title`            | String   | `null`  | (required) Task title                                        |

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

@@ -18,8 +18,8 @@ import { sanitize } from 'dompurify';
 /**
  * Internal dependencies
  */
-import { Text, ListItem } from '../';
-import { VerticalCSSTransition } from '../vertical-css-transition';
+import { Text, ListItem } from '../../';
+import { VerticalCSSTransition } from '../../vertical-css-transition';
 
 const ALLOWED_TAGS = [ 'a', 'b', 'em', 'i', 'strong', 'p', 'br' ];
 const ALLOWED_ATTR = [ 'target', 'href', 'rel', 'name', 'download' ];

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

@@ -3,5 +3,5 @@
  */
 @import 'experimental-list/style.scss';
 @import 'experimental-list/collapsible-list/style.scss';
-@import 'experimental-list/task-item.scss';
+@import 'experimental-list/task-item/style.scss';
 @import 'inbox-note/style.scss';