@automattic/launchpad 1.1.0 → 1.1.1

package/src/action-components/share-site-modal/style.scss

@@ -3,138 +3,45 @@
 .share-site-modal__modal {
 	max-width: 640px;
 
-	.components-modal__header {
-		padding: 48px;
-	}
-
-	.components-modal__content {
-		margin: 0;
-		padding: 0;
-	}
-
-	.share-site-modal__modal-content {
-		padding: 48px;
-		padding-bottom: 40px;
-		display: flex;
-		flex-direction: column;
-		gap: 32px;
-	}
-
-	.share-site-modal__modal-heading {
-		color: var(--studio-gray-100);
-		font-family: Recoleta, "Noto Serif", Georgia, "Times New Roman", Times, serif;
-		font-size: 2rem;
-		line-height: 40px;
-		font-weight: 400;
-		letter-spacing: 0.2px;
-		margin: 0;
-		padding-bottom: 8px;
-	}
-
-	.share-site-modal__modal-domain {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.share-site-modal__modal-body,
-	.share-site-modal__modal-domain-text {
-		margin: 0;
-		color: var(--studio-gray-80);
-		font-size: 1rem;
-		line-height: 24px;
-	}
-
-	.share-site-modal__modal-domain-text {
-		padding: 0 8px;
-
-		// prevent text overflow
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-	}
-
-	.share-site-modal__modal-buttons {
-		display: flex;
-		flex-direction: row;
-		justify-content: end;
-		gap: 16px;
-	}
-
-	.share-site-modal__modal-site {
-		padding: 8px;
-		background: var(--studio-gray-0);
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.launchpad__clipboard-button {
-		opacity: 0;
-	}
-
-	.launchpad__clipboard-button:focus {
-		opacity: 1;
-	}
-
-	.share-site-modal__modal-site:hover {
-		.launchpad__clipboard-button {
-			opacity: 1;
+	.share-site-modal__modal-input-container {
+		input {
+			/* Required to tame the WordPress component's outrageously specific font size */
+			font-size: $font-body !important;
 		}
 	}
 
-	.share-site-modal__modal-customize {
-		color: var(--studio-blue-50);
-		font-size: 0.875rem;
-		display: inline-flex;
-		flex-direction: row;
-		justify-content: start;
-		gap: 6px;
-		padding: 0;
+	.share-site-modal__modal-social {
+		flex-wrap: wrap;
 		margin: 0;
-		margin-top: 16px;
-	}
-
-	.share-site-modal__modal-upsell {
-		border-top: 1px solid var(--studio-gray-5);
-		background: var(--studio-gray-0);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		padding: 32px 48px;
-		gap: 32px;
-
-		.components-button {
-			height: 42px;
-		}
-	}
-
-	.share-site-modal__modal-upsell-content p {
-		margin-bottom: 0;
+		list-style: none;
 	}
 
-	.share-site-modal__modal-upsell-content-highlight {
-		font-weight: bold;
-	}
-
-	.share-site-modal__modal-view-site {
-		display: flex;
+	.share-site-modal__modal-copy-link,
+	.share-site-modal__modal-share-link {
 		gap: 4px;
-
+		display: inline-flex;
+		align-items: center;
 		font-weight: 500;
-		/* stylelint-disable-next-line */
-		font-size: 14px;
+		padding: 4px 8px;
+		font-size: $font-body-small;
 		line-height: 20px;
 		letter-spacing: -0.154px;
 		color: #101517;
+		.share-site-modal__modal-icon {
+			border-radius: 100%;
+			padding: 4px;
+		}
+	}
+
+	.share-site-modal__modal-copy-link:disabled {
+		opacity: 0.5;
 	}
 
-	.share-site-modal__modal-view-site:visited {
+	.share-site-modal__modal-share-link:visited {
 		color: #101517;
 	}
 
-	.share-site-modal__modal-view-site:hover:not(:disabled) {
+	.share-site-modal__modal-share-link:hover:not(:disabled) {
 		text-decoration: underline;
 	}
 }

package/src/checklist/index.tsx

@@ -5,13 +5,15 @@ import './style.scss';
 
 interface Props {
 	makeLastTaskPrimaryAction?: boolean;
+	highlightNextAction?: boolean;
 	children?:
 		| ReactElement< ComponentProps< typeof ChecklistItem > >
 		| ReactElement< ComponentProps< typeof ChecklistItem > >[];
 }
 
-const Checklist: FC< Props > = ( { children, makeLastTaskPrimaryAction } ) => {
+const Checklist: FC< Props > = ( { children, makeLastTaskPrimaryAction, highlightNextAction } ) => {
 	const lastChildIndex = Children.count( children ) - 1;
+	let hasHighlightedItem = false;
 
 	return (
 		<ul
@@ -21,8 +23,18 @@ const Checklist: FC< Props > = ( { children, makeLastTaskPrimaryAction } ) => {
 			aria-label="Launchpad Checklist"
 		>
 			{ Children.map( children || [], ( child, index ) => {
-				if ( index === lastChildIndex ) {
-					return cloneElement( child, { isPrimaryAction: makeLastTaskPrimaryAction } );
+				const shouldHighlightItem =
+					highlightNextAction && ! hasHighlightedItem && child.props.task.completed === false;
+
+				if ( shouldHighlightItem ) {
+					hasHighlightedItem = true;
+				}
+
+				if ( index === lastChildIndex || shouldHighlightItem ) {
+					return cloneElement( child, {
+						isPrimaryAction: makeLastTaskPrimaryAction,
+						isHighlighted: shouldHighlightItem,
+					} );
 				}
 				return child;
 			} ) }

package/src/checklist/test/test-checklist.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import Checklist from '..';
+import ChecklistItem from '../../checklist-item';
+
+describe( 'Checklist', () => {
+	const createTask = ( id: string, completed = false ) => ( {
+		id,
+		title: `Task ${ id }`,
+		completed,
+		onClick: jest.fn(),
+		disabled: false,
+	} );
+
+	it( 'highlights the first incomplete task when highlightNextAction is true', () => {
+		const tasks = [
+			createTask( '1', true ), // completed
+			createTask( '2', false ), // should be highlighted
+			createTask( '3', false ), // should not be highlighted
+		];
+
+		render(
+			<Checklist highlightNextAction>
+				{ tasks.map( ( task ) => (
+					<ChecklistItem key={ task.id } task={ task } />
+				) ) }
+			</Checklist>
+		);
+
+		// Get all checklist items
+		const items = screen.getAllByRole( 'listitem' );
+
+		// Second task should have the highlighted class
+		expect( items[ 1 ] ).toHaveClass( 'highlighted' );
+		// Third task should not be highlighted
+		expect( items[ 2 ] ).not.toHaveClass( 'highlighted' );
+	} );
+} );

package/src/checklist-item/index.stories.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@wordpress/components';
 import ChecklistItem from './';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -79,12 +80,17 @@ export const ExpandedWithAction: Story = {
 	args: {
 		task: baseTask,
 		expandable: {
-			content: <p>This is the expanded content.</p>,
+			content: (
+				<>
+					<p>This is the expanded content.</p>
+					<div>
+						<Button variant="primary" onClick={ () => {} }>
+							Action
+						</Button>
+					</div>
+				</>
+			),
 			isOpen: true,
-			action: {
-				label: 'Next',
-				onClick: () => {},
-			},
 		},
 	},
 };

package/src/checklist-item/index.tsx

@@ -1,6 +1,7 @@
-import { Badge, Gridicon } from '@automattic/components';
-import { Button } from '@wordpress/components';
-import { __, isRTL } from '@wordpress/i18n';
+import { Badge } from '@automattic/components';
+import { Button, Icon } from '@wordpress/components';
+import { __, isRTL, sprintf } from '@wordpress/i18n';
+import { check, chevronLeft, chevronRight } from '@wordpress/icons';
 import clsx from 'clsx';
 import type { Task, Expandable } from '../types';
 import type { FC, Key } from 'react';
@@ -11,11 +12,18 @@ interface Props {
 	key?: Key;
 	task: Task;
 	isPrimaryAction?: boolean;
+	isHighlighted?: boolean;
 	expandable?: Expandable;
 	onClick?: () => void;
 }
 
-const ChecklistItem: FC< Props > = ( { task, isPrimaryAction, expandable, onClick } ) => {
+const ChecklistItem: FC< Props > = ( {
+	task,
+	isPrimaryAction,
+	isHighlighted,
+	expandable,
+	onClick,
+} ) => {
 	const { id, completed, disabled = false, title, subtitle, actionDispatch } = task;
 
 	// If the task says we should use the Calypso path, ensure we use that link for the button's href.
@@ -48,6 +56,29 @@ const ChecklistItem: FC< Props > = ( { task, isPrimaryAction, expandable, onClic
 	const buttonClassName = isClickable ? '' : 'components-button';
 	const ButtonElement = isClickable ? Button : 'div';
 
+	const getStatusText = () => {
+		const taskTitle = typeof title === 'string' ? title : String( title );
+
+		if ( completed ) {
+			/* translators: %s: Task title */
+			return sprintf( __( 'Completed: %s', 'launchpad' ), taskTitle );
+		}
+		if ( disabled ) {
+			/* translators: %s: Task title */
+			return sprintf( __( 'Not available yet: %s', 'launchpad' ), taskTitle );
+		}
+		if ( isClickable ) {
+			if ( isPrimaryAction ) {
+				/* translators: %s: Task title */
+				return sprintf( __( 'Start task: %s', 'launchpad' ), taskTitle );
+			}
+			/* translators: %s: Task title in lowercase */
+			return sprintf( __( 'Select to %s', 'launchpad' ), taskTitle.toLowerCase() );
+		}
+		/* translators: %s: Task title */
+		return sprintf( __( 'To do: %s', 'launchpad' ), taskTitle );
+	};
+
 	return (
 		<li
 			className={ clsx( 'checklist-item__task', {
@@ -56,16 +87,20 @@ const ChecklistItem: FC< Props > = ( { task, isPrimaryAction, expandable, onClic
 				enabled: ! disabled,
 				disabled: disabled,
 				expanded: expandable && expandable.isOpen,
+				highlighted: isHighlighted,
 			} ) }
+			aria-current={ isHighlighted ? 'step' : undefined }
 		>
 			{ isPrimaryAction ? (
 				<ButtonElement
+					variant="primary"
 					className={ clsx( 'checklist-item__checklist-primary-button', buttonClassName ) }
 					data-task={ id }
 					onClick={ onClickHandler }
 					{ ...buttonProps }
 				>
-					{ title }
+					<span className="screen-reader-text">{ getStatusText() }</span>
+					<span aria-hidden="true">{ title }</span>
 				</ButtonElement>
 			) : (
 				<ButtonElement
@@ -75,17 +110,18 @@ const ChecklistItem: FC< Props > = ( { task, isPrimaryAction, expandable, onClic
 					{ ...buttonProps }
 				>
 					{ completed && (
-						// show checkmark for completed tasks regardless if they are disabled or kept active
-						<div className="checklist-item__checkmark-container">
-							<Gridicon
-								aria-label={ __( 'Task complete', 'launchpad' ) }
-								className="checklist-item__checkmark"
-								icon="checkmark"
-								size={ 18 }
-							/>
+						<div
+							className="checklist-item__checkmark-container"
+							aria-hidden="true"
+							data-testid="checklist-item-checkmark"
+						>
+							<Icon icon={ check } className="checklist-item__checkmark" size={ 25 } />
 						</div>
 					) }
-					<span className="checklist-item__text">{ title }</span>
+					<span className="checklist-item__text">
+						<span className="screen-reader-text">{ getStatusText() }</span>
+						<span aria-hidden="true">{ title }</span>
+					</span>
 					{ task.badge_text ? <Badge type="info-blue">{ task.badge_text }</Badge> : null }
 					{ shouldDisplayTaskCounter && (
 						<span className="checklist-item__counter">
@@ -93,28 +129,18 @@ const ChecklistItem: FC< Props > = ( { task, isPrimaryAction, expandable, onClic
 						</span>
 					) }
 					{ shouldDisplayChevron && (
-						<Gridicon
-							aria-label={ __( 'Task enabled', 'launchpad' ) }
+						<Icon
+							aria-hidden="true"
 							className="checklist-item__chevron"
-							icon={ `chevron-${ isRTL() ? 'left' : 'right' }` }
-							size={ 18 }
+							icon={ isRTL() ? chevronLeft : chevronRight }
+							size={ 25 }
 						/>
 					) }
 					{ subtitle && <p className="checklist-item__subtext">{ subtitle }</p> }
 				</ButtonElement>
 			) }
 			{ expandable && expandable.isOpen && (
-				<div className="checklist-item__expanded-content">
-					{ expandable.content }
-					{ expandable.action && (
-						<Button
-							className="checklist-item__checklist-expanded-action-button"
-							onClick={ expandable.action.onClick }
-						>
-							{ expandable.action.label }
-						</Button>
-					) }
-				</div>
+				<div className="checklist-item__expanded-content">{ expandable.content }</div>
 			) }
 		</li>
 	);

package/src/checklist-item/style.scss

@@ -111,7 +111,6 @@
 
 .checklist-item__checkmark-container {
 	margin-right: 7px;
-	width: 20px;
 	display: flex;
 	margin-left: 1px;
 	margin-bottom: -2px;
@@ -191,7 +190,7 @@
 
 	.checklist-item__chevron,
 	.checklist-item__checkmark {
-		fill: var(--color-neutral-40);
+		fill: var(--color-success);
 	}
 	.checklist-item__counter {
 		color: var(--color-neutral-40);
@@ -208,12 +207,12 @@
 .checklist-item__task.completed.enabled > a:focus,
 .checklist-item__task.pending > a:focus {
 	.checklist-item__text {
-		color: var(--studio-blue-50);
+		color: var(--color-accent);
 	}
 
 	.checklist-item__chevron,
 	.checklist-item__checkmark {
-		fill: var(--studio-blue-50);
+		fill: var(--color-accent);
 	}
 
 	// change badge color on hover (Choose a Plan step)
@@ -249,44 +248,30 @@
 	font-weight: 600;
 }
 
-.checklist-item__checklist-expanded-action-button.components-button,
 .checklist-item__checklist-primary-button.components-button {
 	width: 100%;
+}
+
+.checklist-item__checklist-expanded-cta,
+.checklist-item__checklist-primary-button.components-button {
 	font-weight: 500;
 	padding: 11px;
 	margin-top: 12px;
-	background-color: var(--color-primary);
-	border-color: var(--color-primary);
 	border-radius: 4px;
-	color: var(--color-text-inverted);
 	justify-content: center;
 	font-size: $font-body-small;
 	height: auto;
 	line-height: 22px;
+}
 
-	&:hover:not([disabled]) {
-		background-color: var(--color-primary-60);
-		border-color: var(--color-primary-60);
-		color: var(--color-text-inverted);
-	}
-
-	&[disabled] {
-		background-color: var(--color-primary-10);
-		border-color: var(--color-primary-10);
-		color: var(--color-text-inverted);
-	}
-
-	&:disabled {
-		opacity: 1;
-		&:hover {
-			color: var(--color-text-inverted);
-		}
-	}
+// Expanded content
+.checklist-item__checklist-expanded-ctas {
+	display: flex;
+	gap: 16px;
 }
 
-.checklist-item__checklist-expanded-action-button.components-button {
-	display: block;
-	margin: 16px 0;
+.checklist-item__checklist-expanded-cta {
+	flex: 1;
 }
 
 .checklist-item__expanded-content {

package/src/checklist-item/test/index.tsx

@@ -126,7 +126,7 @@ describe( 'ChecklistItem', () => {
 	describe( 'when the task is completed', () => {
 		it( 'shows the task completed icon', () => {
 			renderComponent( { task: buildTask( { completed: true } ) } );
-			const taskCompleteIcon = screen.queryByLabelText( 'Task complete' );
+			const taskCompleteIcon = screen.getByTestId( 'checklist-item-checkmark' );
 
 			expect( taskCompleteIcon ).toBeVisible();
 		} );
@@ -181,25 +181,6 @@ describe( 'ChecklistItem', () => {
 				expect( screen.getByText( 'Expanded' ) ).toBeVisible();
 			} );
 
-			it( 'calls the action click', async () => {
-				const onClick = jest.fn();
-				renderComponent( {
-					expandable: {
-						isOpen: true,
-						content: <div>Expanded</div>,
-						action: {
-							label: 'Action',
-							onClick,
-						},
-					},
-				} );
-
-				const actionButton = screen.queryByRole( 'button', { name: 'Action' } )!;
-				await userEvent.click( actionButton );
-
-				expect( onClick ).toHaveBeenCalled();
-			} );
-
 			it( 'has the expanded class', () => {
 				const { container } = renderComponent( {
 					expandable: { isOpen: true, content: <div>Expanded</div> },

package/src/launchpad-internal.stories.tsx

@@ -30,7 +30,7 @@ const meta: Meta< typeof LaunchpadInternal > = {
 	argTypes: {
 		checklistSlug: {
 			defaultValue: 'free',
-			options: [ 'free', 'link-in-bio' ],
+			options: [ 'free' ],
 			control: { type: 'select' },
 		},
 	},

package/src/launchpad-internal.tsx

@@ -11,6 +11,7 @@ interface Props {
 	siteSlug: string | null;
 	checklistSlug: string | null;
 	makeLastTaskPrimaryAction?: boolean;
+	highlightNextAction?: boolean;
 	taskFilter?: ( tasks: Task[] ) => Task[];
 	useLaunchpadOptions?: UseLaunchpadOptions;
 	launchpadContext: string;
@@ -28,6 +29,7 @@ const LaunchpadInternal: FC< Props > = ( {
 	checklistSlug,
 	taskFilter,
 	makeLastTaskPrimaryAction,
+	highlightNextAction,
 	useLaunchpadOptions = {},
 	launchpadContext,
 } ) => {
@@ -66,7 +68,10 @@ const LaunchpadInternal: FC< Props > = ( {
 	return (
 		<div className="launchpad__checklist-wrapper">
 			{ isFetchedAfterMount ? (
-				<Checklist makeLastTaskPrimaryAction={ makeLastTaskPrimaryAction }>
+				<Checklist
+					makeLastTaskPrimaryAction={ makeLastTaskPrimaryAction }
+					highlightNextAction={ highlightNextAction }
+				>
 					{ tasks.map( ( task ) => (
 						<ChecklistItem
 							task={ task }

package/src/launchpad.tsx

@@ -1,12 +1,11 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import {
-	LaunchpadNavigator,
 	Site,
 	type SiteSelect,
-	sortLaunchpadTasksByCompletionStatus,
+	defaultSuccessCallback,
 	useSortedLaunchpadTasks,
 } from '@automattic/data-stores';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useState } from 'react';
 import { ShareSiteModal } from './action-components';
 import LaunchpadInternal from './launchpad-internal';
@@ -22,6 +21,7 @@ type LaunchpadProps = {
 	onSiteLaunched?: () => void;
 	onTaskClick?: EventHandlers[ 'onTaskClick' ];
 	onPostFilterTasks?: ( tasks: Task[] ) => Task[];
+	highlightNextAction?: boolean;
 };
 
 const Launchpad = ( {
@@ -31,11 +31,11 @@ const Launchpad = ( {
 	onSiteLaunched,
 	onTaskClick,
 	onPostFilterTasks,
+	highlightNextAction,
 }: LaunchpadProps ) => {
 	const {
 		data: { checklist },
 	} = useSortedLaunchpadTasks( siteSlug, checklistSlug, launchpadContext );
-	const { setActiveChecklist } = useDispatch( LaunchpadNavigator.store );
 
 	const tasklistCompleted = checklist?.every( ( task: Task ) => task.completed ) || false;
 
@@ -55,7 +55,6 @@ const Launchpad = ( {
 			siteSlug,
 			tracksData,
 			extraActions: {
-				setActiveChecklist,
 				setShareSiteModalIsOpen,
 			},
 			eventHandlers: {
@@ -72,13 +71,21 @@ const Launchpad = ( {
 	};
 
 	const launchpadOptions = {
-		onSuccess: sortLaunchpadTasksByCompletionStatus,
+		onSuccess: defaultSuccessCallback,
 	};
 
+	if ( ! launchpadContext ) {
+		return null;
+	}
+	const shareSiteTask = checklist?.find( ( task: Task ) => task.id === 'share_site' ) ?? null;
 	return (
 		<>
 			{ shareSiteModalIsOpen && site && (
-				<ShareSiteModal setModalIsOpen={ setShareSiteModalIsOpen } site={ site } />
+				<ShareSiteModal
+					setModalIsOpen={ setShareSiteModalIsOpen }
+					site={ site }
+					task={ shareSiteTask }
+				/>
 			) }
 			<LaunchpadInternal
 				site={ site }
@@ -87,6 +94,7 @@ const Launchpad = ( {
 				taskFilter={ taskFilter }
 				useLaunchpadOptions={ launchpadOptions }
 				launchpadContext={ launchpadContext }
+				highlightNextAction={ highlightNextAction }
 			/>
 		</>
 	);

package/src/msw/resolver.ts

@@ -1,18 +1,9 @@
 import { HttpResponse, HttpResponseResolver, delay } from 'msw';
-import linkInBio from './link-in-bio';
 import free from './setup-free';
 
-export const launchpadResolver: HttpResponseResolver = async ( { request } ) => {
-	const searchParams = new URL( request.url ).searchParams;
-	const checklistSlug = searchParams.get( 'checklist_slug' );
-
+export const launchpadResolver: HttpResponseResolver = async () => {
 	// Random delay to make the UI feel more realistic
-
 	await delay();
 
-	if ( checklistSlug === 'link-in-bio' ) {
-		return HttpResponse.json( linkInBio );
-	}
-
 	return HttpResponse.json( free );
 };

package/src/msw/setup-free.ts

@@ -36,7 +36,7 @@ export default {
 			subtitle: '',
 			badge_text: '',
 			isLaunchTask: false,
-			calypso_path: '/setup/update-design/designSetup?siteSlug=site62798.wordpress.com',
+			calypso_path: '/setup/update-design/design-setup?siteSlug=site62798.wordpress.com',
 		},
 		{
 			id: 'domain_upsell',