@automattic/launchpad 1.0.0 → 1.0.1

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

@@ -0,0 +1,159 @@
+@import "@automattic/typography/styles/variables";
+
+.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-customize {
+		color: var(--studio-blue-50);
+		font-size: 0.875rem;
+		display: inline-flex;
+		flex-direction: row;
+		justify-content: start;
+		gap: 6px;
+		padding: 0;
+		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;
+	}
+
+	.share-site-modal__modal-upsell-content-highlight {
+		font-weight: bold;
+	}
+
+	.share-site-modal__modal-view-site {
+		display: flex;
+		gap: 4px;
+
+		font-weight: 500;
+		/* stylelint-disable-next-line */
+		font-size: 14px;
+		line-height: 20px;
+		letter-spacing: -0.154px;
+		color: #101517;
+	}
+
+	.share-site-modal__modal-view-site:visited {
+		color: #101517;
+	}
+
+	.share-site-modal__modal-view-site:hover:not(:disabled) {
+		text-decoration: underline;
+	}
+}
+
+.share-site-modal__popover {
+	outline: none;
+	z-index: 100000;
+	.popover__inner {
+		border: 0;
+		box-shadow: none;
+		border-radius: 2px;
+		color: var(--color-text-inverted);
+		background: var(--color-neutral-60);
+		font-size: $font-body-extra-small;
+		padding: 6px 10px;
+		text-align: left;
+	}
+
+	.popover__arrow {
+		display: none;
+	}
+}

package/src/badge/index.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 import './style.scss';
 
@@ -19,9 +19,7 @@ export interface BadgeProps {
 const Badge: React.FunctionComponent< BadgeProps > = ( props ) => {
 	const className = props.className;
 	const type = props.type || 'warning';
-	return (
-		<div className={ classNames( `badge badge--${ type }`, className ) }>{ props.children }</div>
-	);
+	return <div className={ clsx( `badge badge--${ type }`, className ) }>{ props.children }</div>;
 };
 
 export default Badge;

package/src/checklist/index.stories.tsx

@@ -0,0 +1,45 @@
+import ChecklistItem from '../checklist-item';
+import Checklist from './';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta< typeof Checklist > = {
+	title: 'Launchpad/Checklist',
+	component: Checklist,
+	decorators: [
+		( Story ) => (
+			<div style={ { width: 300 } }>
+				<Story />
+			</div>
+		),
+	],
+	args: {
+		children: [
+			<ChecklistItem
+				key="1"
+				task={ { id: '1', title: 'Task 1', completed: true, disabled: true } }
+				onClick={ () => {} }
+			/>,
+			<ChecklistItem
+				key="2"
+				task={ { id: '2', title: 'Task 2', disabled: false, completed: false } }
+				onClick={ () => {} }
+			/>,
+			<ChecklistItem
+				key="3"
+				task={ { id: '3', title: 'Task 3', disabled: false, completed: false } }
+				onClick={ () => {} }
+			/>,
+		],
+	},
+};
+
+type Story = StoryObj< typeof meta >;
+export const Default: Story = {};
+
+export const WithMakeLastTaskPrimaryAction: Story = {
+	args: {
+		makeLastTaskPrimaryAction: true,
+	},
+};
+
+export default meta;

package/src/checklist/index.tsx

@@ -1,41 +1,42 @@
-import classNames from 'classnames';
-import ChecklistItem from '../checklist-item';
-import { Task } from '../types';
-
+import clsx from 'clsx';
+import { Children, cloneElement, type FC, type ReactElement, type ComponentProps } from 'react';
+import ChecklistItem, { Placeholder as ChecklistItemPlaceholder } from '../checklist-item';
 import './style.scss';
 
-interface ChecklistProps {
-	tasks: Task[] | null;
+interface Props {
 	makeLastTaskPrimaryAction?: boolean;
+	children?:
+		| ReactElement< ComponentProps< typeof ChecklistItem > >
+		| ReactElement< ComponentProps< typeof ChecklistItem > >[];
 }
 
-const Checklist = ( { tasks, makeLastTaskPrimaryAction }: ChecklistProps ) => {
+const Checklist: FC< Props > = ( { children, makeLastTaskPrimaryAction } ) => {
+	const lastChildIndex = Children.count( children ) - 1;
+
 	return (
 		<ul
-			className={ classNames( 'checklist__tasks', {
+			className={ clsx( 'checklist__tasks', {
 				'checklist__has-primary-action': makeLastTaskPrimaryAction,
 			} ) }
 			aria-label="Launchpad Checklist"
 		>
-			{ tasks &&
-				tasks.map( ( task: Task, index: number ) => (
-					<ChecklistItem
-						key={ task.id }
-						task={ task }
-						isPrimaryAction={ makeLastTaskPrimaryAction && index === tasks.length - 1 }
-					/>
-				) ) }
+			{ Children.map( children || [], ( child, index ) => {
+				if ( index === lastChildIndex ) {
+					return cloneElement( child, { isPrimaryAction: makeLastTaskPrimaryAction } );
+				}
+				return child;
+			} ) }
 		</ul>
 	);
 };
 
-Checklist.Placeholder = () => {
+export const Placeholder = () => {
 	return (
 		<ul className="checklist__tasks" aria-label="Launchpad Checklist">
-			<ChecklistItem.Placeholder />
-			<ChecklistItem.Placeholder />
-			<ChecklistItem.Placeholder />
-			<ChecklistItem.Placeholder />
+			<ChecklistItemPlaceholder />
+			<ChecklistItemPlaceholder />
+			<ChecklistItemPlaceholder />
+			<ChecklistItemPlaceholder />
 		</ul>
 	);
 };

package/src/checklist/test/index.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import Checklist from '../';
+import ChecklistItem from '../../checklist-item';
+import { buildTask } from '../../test/lib/fixtures';
+import '@testing-library/jest-dom';
+
+describe( 'Checklist', () => {
+	it( 'renders the list of items', () => {
+		render(
+			<Checklist>
+				<ChecklistItem key={ 0 } task={ buildTask( {} ) } />
+				<ChecklistItem key={ 1 } task={ buildTask( {} ) } />
+			</Checklist>
+		);
+		const checklistItems = screen.getAllByRole( 'listitem' );
+		expect( checklistItems.length ).toBe( 2 );
+	} );
+
+	it( 'renders a empty list when provided no tasks', () => {
+		render( <Checklist /> );
+		const checklistItems = screen.queryByRole( 'listitem' );
+
+		expect( checklistItems ).not.toBeInTheDocument();
+	} );
+} );

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

@@ -0,0 +1,92 @@
+import ChecklistItem from './';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta< typeof ChecklistItem > = {
+	title: 'Launchpad/ChecklistItem',
+	component: ChecklistItem,
+	decorators: [
+		( Story ) => (
+			<div style={ { width: 300 } }>
+				<ul className="checklist__tasks">
+					<Story />
+				</ul>
+			</div>
+		),
+	],
+};
+
+type Story = StoryObj< typeof meta >;
+const baseTask = {
+	id: '1',
+	title: 'Task 1',
+	completed: false,
+	disabled: false,
+};
+
+export const Default: Story = {
+	args: {
+		onClick: () => {},
+		task: baseTask,
+	},
+};
+
+export const Completed: Story = {
+	args: {
+		onClick: () => {},
+		task: { ...baseTask, completed: true },
+	},
+};
+
+export const Disabled: Story = {
+	args: {
+		onClick: () => {},
+		task: { ...baseTask, disabled: true },
+	},
+};
+
+export const WithBadgetText: Story = {
+	args: {
+		onClick: () => {},
+		task: { ...baseTask, badge_text: 'Upgrade plan' },
+	},
+};
+
+export const WithTaskCounter: Story = {
+	args: {
+		onClick: () => {},
+		task: { ...baseTask, repetition_count: 1, target_repetitions: 3 },
+	},
+};
+
+export const WithSubtitle: Story = {
+	args: {
+		onClick: () => {},
+		task: { ...baseTask, subtitle: 'This is a subtitle' },
+	},
+};
+
+export const Expanded: Story = {
+	args: {
+		task: baseTask,
+		expandable: {
+			content: <p>This is the expanded content.</p>,
+			isOpen: true,
+		},
+	},
+};
+
+export const ExpandedWithAction: Story = {
+	args: {
+		task: baseTask,
+		expandable: {
+			content: <p>This is the expanded content.</p>,
+			isOpen: true,
+			action: {
+				label: 'Next',
+				onClick: () => {},
+			},
+		},
+	},
+};
+
+export default meta;

package/src/checklist-item/index.tsx

@@ -1,52 +1,79 @@
-import { Badge, Button, Gridicon } from '@automattic/components';
-import classnames from 'classnames';
+import { Badge, Gridicon } from '@automattic/components';
+import { Button } from '@wordpress/components';
+import clsx from 'clsx';
 import { translate, useRtl } from 'i18n-calypso';
-import { Task } from '../types';
+import type { Task, Expandable } from '../types';
+import type { FC, Key } from 'react';
 
 import './style.scss';
 
-const ChecklistItem = ( { task, isPrimaryAction }: { task: Task; isPrimaryAction?: boolean } ) => {
+interface Props {
+	key?: Key;
+	task: Task;
+	isPrimaryAction?: boolean;
+	expandable?: Expandable;
+	onClick?: () => void;
+}
+
+const ChecklistItem: FC< Props > = ( { task, isPrimaryAction, expandable, onClick } ) => {
 	const isRtl = useRtl();
-	const { id, completed, disabled, title, subtitle, actionDispatch } = task;
+	const { id, completed, disabled = false, title, subtitle, actionDispatch } = task;
 
-	// Display chevron if task is incomplete. Don't display chevron and badge at the same time.
-	const shouldDisplayChevron = ! completed && ! disabled && ! task.badge_text;
+	// If the task says we should use the Calypso path, ensure we use that link for the button's href.
+	// This allows the UI routing code to hook into the URL changes and should reduce full-page (re)loads
+	// when clicking on the task list items.
+	const buttonHref = task.useCalypsoPath && task.calypso_path ? task.calypso_path : undefined;
 
-	const handlePrimaryAction = () => {
-		localStorage.removeItem( 'launchpad_siteSlug' );
-		actionDispatch && actionDispatch();
+	// The Button component does not accept the `disabled` and `href` props together.
+	// This code will only add href property if the disabled variable is false.
+	const buttonProps = {
+		disabled,
+		...( disabled ? {} : { href: buttonHref } ),
 	};
 
+	const onClickHandler = onClick || actionDispatch;
+	const isClickable = !! ( buttonProps.href || onClickHandler );
+
+	// Display chevron if task is incomplete.
+	// Don't display chevron and badge at the same time.
+	// Don't display chevron if item is not clickable.
+	const shouldDisplayChevron = ! completed && ! disabled && ! task.badge_text && isClickable;
+
 	// Display task counter if task is incomplete and has the count properties;
 	const shouldDisplayTaskCounter =
 		task.target_repetitions &&
 		null !== task.repetition_count &&
 		undefined !== task.repetition_count;
 
+	// Make sure the button keeps the button styles if it is not clickable.
+	const buttonClassName = isClickable ? '' : 'components-button';
+	const ButtonElement = isClickable ? Button : 'div';
+
 	return (
 		<li
-			className={ classnames( 'checklist-item__task', {
+			className={ clsx( 'checklist-item__task', {
 				completed: completed,
 				pending: ! completed,
 				enabled: ! disabled,
 				disabled: disabled,
+				expanded: expandable && expandable.isOpen,
 			} ) }
 		>
 			{ isPrimaryAction ? (
-				<Button
-					className="checklist-item__checklist-primary-button"
-					disabled={ disabled }
+				<ButtonElement
+					className={ clsx( 'checklist-item__checklist-primary-button', buttonClassName ) }
 					data-task={ id }
-					onClick={ handlePrimaryAction }
+					onClick={ onClickHandler }
+					{ ...buttonProps }
 				>
 					{ title }
-				</Button>
+				</ButtonElement>
 			) : (
-				<Button
-					className="checklist-item__task-content"
-					disabled={ disabled }
+				<ButtonElement
+					className={ clsx( 'checklist-item__task-content', buttonClassName ) }
 					data-task={ id }
-					onClick={ actionDispatch }
+					onClick={ onClickHandler }
+					{ ...buttonProps }
 				>
 					{ completed && (
 						// show checkmark for completed tasks regardless if they are disabled or kept active
@@ -75,13 +102,26 @@ const ChecklistItem = ( { task, isPrimaryAction }: { task: Task; isPrimaryAction
 						/>
 					) }
 					{ subtitle && <p className="checklist-item__subtext">{ subtitle }</p> }
-				</Button>
+				</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>
 			) }
 		</li>
 	);
 };
 
-ChecklistItem.Placeholder = () => {
+export const Placeholder: FC = () => {
 	return (
 		<div className="checklist-item__task-content is-placeholder">
 			<div className="checklist-item__content">