@automattic/launchpad 1.0.0 → 1.0.1

package/src/checklist-item/style.scss

@@ -2,8 +2,8 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@automattic/typography/styles/variables";
 
-.checklist-item__task-content {
-	align-items: flex-start;
+.checklist-item__task-content.components-button {
+	align-items: center;
 	background-color: transparent;
 	border-bottom: 1px solid var(--studio-gray-5);
 	border-left: none;
@@ -15,10 +15,51 @@
 	width: 100%;
 	margin: 0;
 	color: var(--color-neutral-100);
+	height: auto;
+	font-family: $sans;
+	font-size: $font-body-small;
+	line-height: 22px;
+	outline: 0;
+	overflow: hidden;
+	text-decoration: none;
+	padding-left: 2px;
+
+	&:is(button, a) {
+		cursor: pointer;
+	}
+
+	&:is(div) {
+		cursor: default;
+	}
+
+	&:visited {
+		color: var(--color-neutral-100);
+	}
+
+	&:disabled {
+		opacity: 1;
+		color: var(--color-neutral-20);
+	}
 
 	&.is-placeholder {
 		padding: 16px 0 16px 0;
 	}
+
+	&:focus-visible {
+		outline: var(--color-primary);
+		box-shadow: 0 0 0 2px var(--color-primary-light);
+	}
+
+	.badge {
+		margin-left: auto;
+		background-color: var(--studio-blue-5);
+		color: var(--studio-blue-80);
+		font-size: $font-body-extra-small;
+	}
+
+	.checklist-item__chevron {
+		width: auto;
+	}
 }
 
 .checklist-item__content {
@@ -38,27 +79,28 @@
 	}
 }
 
-.button.checklist-item__task-content:hover:not([disabled]),
-.button.checklist-item__task-content:focus:not([disabled]) {
-	fill: var(--studio-blue-50);
-	color: var(--studio-blue-50);
-	border-bottom: 1px solid var(--studio-gray-5);
+.checklist-item__task-content {
+	&.is-placeholder {
+		padding: 5px 0 5px 0;
+	}
 }
 
-.checklist-item__task-content .badge {
-	margin-left: auto;
-	background-color: var(--studio-blue-5);
-	color: var(--studio-blue-80);
-	font-size: $font-body-extra-small;
+.checklist-item__task-content.components-button:hover:not([disabled]),
+.checklist-item__task-content.components-button:focus:not([disabled]) {
+	&:is(button, a) {
+		fill: var(--studio-blue-50);
+		color: var(--studio-blue-50);
+	}
+	border-bottom: 1px solid var(--studio-gray-5);
 }
 
-.checklist-item__task-content[disabled],
-.checklist-item__task-content[disabled]:focus {
+.checklist-item__task-content.components-button[disabled],
+.checklist-item__task-content.components-button[disabled]:focus {
 	background-color: transparent;
 	pointer-events: none;
 }
 
-.checklist-item__task-content[data-task="verify_email"] {
+.checklist-item__task-content.components-button[data-task="verify_email"] {
 	color: var(--color-text);
 }
 
@@ -68,11 +110,13 @@
 }
 
 .checklist-item__checkmark-container {
-	margin-right: 8px;
+	margin-right: 7px;
 	width: 20px;
+	display: flex;
+	margin-left: 1px;
+	margin-bottom: -2px;
 
 	.checklist-item__checkmark {
-		top: 2px;
 		vertical-align: text-bottom;
 	}
 }
@@ -103,7 +147,7 @@
 	}
 }
 
-.checklist-item__task-content:hover .checklist-item__subtext {
+.checklist-item__task-content.components-button:hover .checklist-item__subtext {
 	color: var(--color-neutral-100);
 }
 
@@ -125,6 +169,18 @@
 	}
 }
 
+.checklist-item__task.expanded {
+	.checklist-item__task-content,
+	.checklist-item__task-content:hover,
+	.checklist-item__task-content:focus {
+		border-bottom: none;
+	}
+
+	.checklist-item__task-content {
+		padding-bottom: 0;
+	}
+}
+
 // completed tasks (both enabled and disabled)
 .checklist-item__task.completed.disabled,
 .checklist-item__task.completed.enabled {
@@ -145,8 +201,10 @@
 }
 
 // pending tasks and completed enabled
-.checklist-item__task.completed.enabled:hover,
-.checklist-item__task.pending:hover,
+.checklist-item__task.completed.enabled > button:hover,
+.checklist-item__task.pending > button:hover,
+.checklist-item__task.completed.enabled > a:hover,
+.checklist-item__task.pending > a:hover,
 .checklist-item__task.completed.enabled > a:focus,
 .checklist-item__task.pending > a:focus {
 	.checklist-item__text {
@@ -171,7 +229,7 @@
 // pending disabled tasks
 .checklist-item__task.pending.disabled {
 	.checklist-item__text {
-		color: inherit;
+		color: var(--color-neutral-20);
 	}
 }
 
@@ -191,14 +249,20 @@
 	font-weight: 600;
 }
 
-.checklist-item__checklist-primary-button {
+.checklist-item__checklist-expanded-action-button.components-button,
+.checklist-item__checklist-primary-button.components-button {
 	width: 100%;
 	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);
@@ -211,4 +275,60 @@
 		border-color: var(--color-primary-10);
 		color: var(--color-text-inverted);
 	}
+
+	&:disabled {
+		opacity: 1;
+		&:hover {
+			color: var(--color-text-inverted);
+		}
+	}
+}
+
+.checklist-item__checklist-expanded-action-button.components-button {
+	display: block;
+	margin: 16px 0;
+}
+
+.checklist-item__expanded-content {
+	padding-left: 2px;
+	font-family: $sans;
+	font-size: $font-body-small;
+
+	p {
+		margin: 12px 0;
+	}
+}
+
+.checklist-item__checklist-secondary-button.components-button {
+	width: 100%;
+	font-weight: 500;
+	padding: 11px;
+	margin-top: 12px;
+	background-color: var(--studio-white);
+	border: 1px solid var(--studio-gray-100);
+	border-radius: 4px;
+	color: var(--color-text);
+	justify-content: center;
+	font-size: $font-body-small;
+	height: auto;
+	line-height: 22px;
+
+	&:hover:not([disabled]) {
+		background-color: var(--studio-gray-0);
+		border-color: var(--color-neutral-40);
+		color: var(--color-text);
+	}
+
+	&[disabled] {
+		background-color: var(--studio-gray-0);
+		border: none;
+		color: var(--color-neutral-40);
+	}
+
+	&:disabled {
+		opacity: 1;
+		&:hover {
+			color: var(--color-neutral-40);
+		}
+	}
 }

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

@@ -0,0 +1,232 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React, { ComponentProps } from 'react';
+import ChecklistItem from '..';
+import { buildTask } from '../../test/lib/fixtures';
+import '@testing-library/jest-dom';
+
+describe( 'ChecklistItem', () => {
+	const defaultProps = {
+		task: buildTask( {
+			completed: false,
+			disabled: false,
+			actionDispatch: jest.fn(),
+		} ),
+	};
+
+	const renderComponent = ( props: Partial< ComponentProps< typeof ChecklistItem > > ) =>
+		render( <ChecklistItem { ...defaultProps } { ...props } /> );
+
+	it( 'displays a badge', () => {
+		const badge_text = 'Badge Text';
+		renderComponent( { task: buildTask( { badge_text } ) } );
+
+		expect( screen.getByText( badge_text ) ).toBeVisible();
+	} );
+
+	it( 'hides the task complete icon when the task is not completed', () => {
+		renderComponent( { task: buildTask( { completed: false } ) } );
+		const taskCompleteIcon = screen.queryByLabelText( 'Task complete' );
+
+		expect( taskCompleteIcon ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders a button when it has the onClick event', () => {
+		const onClick = jest.fn();
+		renderComponent( { onClick } );
+
+		const taskButton = screen.getByRole( 'button' );
+
+		expect( taskButton ).toBeInTheDocument();
+	} );
+
+	it( 'calls onClick when the task is clicked', async () => {
+		const onClick = jest.fn();
+		renderComponent( { onClick } );
+
+		const taskButton = screen.getByRole( 'button' );
+		await userEvent.click( taskButton );
+
+		expect( onClick ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'uses the task action dispatch when the task is clicked and no custom onClick prop is used', async () => {
+		const actionDispatch = jest.fn();
+		renderComponent( {
+			task: buildTask( { actionDispatch, completed: false, disabled: false } ),
+		} );
+
+		const taskButton = screen.getByRole( 'button' );
+		await userEvent.click( taskButton );
+
+		expect( actionDispatch ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'calls the onclick when calypso path is available', async () => {
+		const onClick = jest.fn();
+		renderComponent( {
+			onClick,
+			isPrimaryAction: true,
+			task: buildTask( {
+				useCalypsoPath: true,
+				disabled: false,
+				calypso_path: 'https://wordpress.com',
+			} ),
+		} );
+
+		const taskButton = screen.getByRole( 'link' );
+		await userEvent.click( taskButton );
+
+		expect( onClick ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'calls the task action dispatch when calypso path is available', async () => {
+		const actionDispatch = jest.fn();
+		renderComponent( {
+			isPrimaryAction: true,
+			task: buildTask( {
+				useCalypsoPath: true,
+				disabled: false,
+				calypso_path: 'https://wordpress.com',
+				actionDispatch,
+			} ),
+		} );
+
+		const taskButton = screen.getByRole( 'link' );
+		await userEvent.click( taskButton );
+
+		expect( actionDispatch ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'renders a span when it does not have the click or a link', () => {
+		const title = 'Task';
+		const { container } = renderComponent( { task: buildTask( { title } ) } );
+
+		const taskButton = container.querySelector( '.components-button' )!;
+
+		expect( taskButton.tagName ).toEqual( 'DIV' );
+	} );
+
+	describe( 'when the task is disabled', () => {
+		it( 'disables the button', () => {
+			renderComponent( { task: buildTask( { disabled: true } ), onClick: () => {} } );
+			const taskButton = screen.queryByRole( 'button' );
+
+			expect( taskButton ).toBeDisabled();
+		} );
+
+		it( 'hides the task enabled icon', () => {
+			renderComponent( { task: buildTask( { disabled: true } ) } );
+			const taskEnabledIcon = screen.queryByLabelText( 'Task enabled' );
+
+			expect( taskEnabledIcon ).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'when the task is completed', () => {
+		it( 'shows the task completed icon', () => {
+			renderComponent( { task: buildTask( { completed: true } ) } );
+			const taskCompleteIcon = screen.queryByLabelText( 'Task complete' );
+
+			expect( taskCompleteIcon ).toBeVisible();
+		} );
+
+		it( 'hides the task enabled icon', () => {
+			renderComponent( { task: buildTask( { completed: true } ) } );
+			const taskEnabledIcon = screen.queryByLabelText( 'Task enabled' );
+			expect( taskEnabledIcon ).not.toBeInTheDocument();
+		} );
+
+		it( 'disables the task', () => {
+			renderComponent( { task: buildTask( { completed: true } ), onClick: () => {} } );
+			const taskButton = screen.queryByRole( 'button' );
+
+			expect( taskButton ).toBeDisabled();
+		} );
+
+		describe( 'and the task is kept enabled', () => {
+			it( 'hides the task enabled icon', () => {
+				renderComponent( { task: buildTask( { completed: true, disabled: false } ) } );
+				const taskEnabledIcon = screen.queryByLabelText( 'Task enabled' );
+
+				expect( taskEnabledIcon ).not.toBeInTheDocument();
+			} );
+
+			it( 'enables the task', () => {
+				renderComponent( {
+					task: buildTask( { completed: true, disabled: false } ),
+					onClick: () => {},
+				} );
+				const taskButton = screen.queryByRole( 'button' );
+
+				expect( taskButton ).toBeEnabled();
+			} );
+		} );
+	} );
+
+	describe( 'when a task is a primary action', () => {
+		it( 'displays a primary button', () => {
+			renderComponent( { isPrimaryAction: true } );
+			const taskButton = screen.queryByRole( 'button' );
+
+			expect( taskButton?.className ).toContain( 'checklist-item__checklist-primary-button' );
+		} );
+	} );
+
+	describe( 'when it has expandable content', () => {
+		describe( 'and when it is open', () => {
+			it( 'displays the content', () => {
+				renderComponent( { expandable: { isOpen: true, content: <div>Expanded</div> } } );
+
+				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> },
+				} );
+
+				expect(
+					container.querySelector( '.checklist-item__task' )?.classList.contains( 'expanded' )
+				).toBeTruthy();
+			} );
+		} );
+
+		describe( 'and when it is not open', () => {
+			it( 'does not display the content', () => {
+				renderComponent( { expandable: { isOpen: false, content: <div>Expanded</div> } } );
+
+				expect( screen.queryByText( 'Expanded' ) ).not.toBeInTheDocument();
+			} );
+
+			it( 'does not have the expanded class', () => {
+				const { container } = renderComponent( {
+					expandable: { isOpen: false, content: <div>Expanded</div> },
+				} );
+
+				expect(
+					container.querySelector( '.checklist-item__task' )?.classList.contains( 'expanded' )
+				).toBeFalsy();
+			} );
+		} );
+	} );
+} );

package/src/index.ts

@@ -1,5 +1,8 @@
 export { default as Checklist } from './checklist';
 export { default as ChecklistItem } from './checklist-item';
+export { default as LaunchpadInternal } from './launchpad-internal';
+export { default as LaunchpadContainer } from './launchpad-container';
 export { default as Launchpad } from './launchpad';
 export { setUpActionsForTasks } from './setup-actions';
+export * from './action-components';
 export * from './types';

package/src/launchpad-container/index.tsx

@@ -0,0 +1,45 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import './style.scss';
+
+export interface ContainerProps {
+	className?: string;
+	headerClassName?: string;
+	contentClassName?: string;
+	sidebarClassName?: string;
+	mainContentClassName?: string;
+	header?: React.ReactNode;
+	sidebar: React.ReactNode;
+	children: React.ReactNode;
+}
+
+const LaunchpadContainer: React.FunctionComponent< ContainerProps > = ( {
+	className,
+	headerClassName,
+	contentClassName,
+	sidebarClassName,
+	mainContentClassName,
+	header,
+	sidebar,
+	children,
+} ) => {
+	return (
+		<main className={ clsx( 'launchpad-container', className ) }>
+			{ header && (
+				<div className={ clsx( 'launchpad-container__header', headerClassName ) }>{ header }</div>
+			) }
+
+			<div className={ clsx( 'launchpad-container__content', contentClassName ) }>
+				<div className={ clsx( 'launchpad-container__sidebar', sidebarClassName ) }>
+					{ sidebar }
+				</div>
+				<div className={ clsx( 'launchpad-container__main-content', mainContentClassName ) }>
+					{ children }
+				</div>
+			</div>
+		</main>
+	);
+};
+
+export default LaunchpadContainer;

package/src/launchpad-container/style.scss

@@ -0,0 +1,59 @@
+@import "@wordpress/base-styles/mixins";
+@import "@wordpress/base-styles/breakpoints";
+
+.launchpad-container {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+// Launchpad Content.
+.launchpad-container__content {
+	display: flex;
+	flex-direction: column;
+
+	@include break-large {
+		height: 100%;
+		min-height: calc(100vh - 60px); // Discount margin-top from `.step-route`.
+		flex-direction: row;
+	}
+}
+
+// Launchpad Sidebar.
+.launchpad-container__sidebar {
+	display: flex;
+	flex-direction: column;
+	max-width: 100%;
+
+	@include break-large {
+		max-width: 360px;
+	}
+
+	// TODO: Migrate to the checklist components. The checklist could receive a special className as prop that would be responsible for this.
+	.launchpad-container .checklist__tasks .checklist-item__task-content.is-placeholder .checklist-item__content {
+		/* Override default placeholder colours to align with other elements on the page. */
+		background-color: var(--color-neutral-5);
+	}
+}
+
+// Main content.
+.launchpad-container__main-content {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+// Container spacings.
+.launchpad-container__sidebar,
+.launchpad-container__main-content {
+	padding: 16px;
+
+	@include break-large {
+		padding: 40px;
+
+		// Exception for the sidebar.
+		&.launchpad-container__sidebar {
+			padding-right: 32px;
+		}
+	}
+}

package/src/launchpad-container/test/index.tsx

@@ -0,0 +1,72 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import LaunchpadContainer from '../';
+
+describe( 'LaunchpadContainer', () => {
+	it( 'renders the container with sidebar and content', () => {
+		const { getByText } = render(
+			<LaunchpadContainer sidebar={ <div>Sidebar</div> }>My Content</LaunchpadContainer>
+		);
+
+		expect( getByText( 'Sidebar' ) ).toBeInTheDocument();
+		expect( getByText( 'My Content' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders the container with header', () => {
+		const { getByText } = render(
+			<LaunchpadContainer sidebar={ <div>Sidebar</div> } header={ <div>Header</div> }>
+				My Content
+			</LaunchpadContainer>
+		);
+
+		expect( getByText( 'Header' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders the container without header', () => {
+		const { container } = render(
+			<LaunchpadContainer sidebar={ <div>Sidebar</div> }>My Content</LaunchpadContainer>
+		);
+
+		expect( container.querySelector( '.launchpad-container__header' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders the container with custom classes', () => {
+		const { container } = render(
+			<LaunchpadContainer
+				className="classname"
+				headerClassName="header-classname"
+				contentClassName="content-classname"
+				sidebarClassName="sidebar-classname"
+				mainContentClassName="main-content-classname"
+				sidebar={ <div>Sidebar</div> }
+				header={ <div>Header</div> }
+			>
+				My Content
+			</LaunchpadContainer>
+		);
+
+		expect(
+			container.querySelector( '.launchpad-container' )?.classList.contains( 'classname' )
+		).toBeTruthy();
+		expect(
+			container
+				.querySelector( '.launchpad-container__header' )
+				?.classList.contains( 'header-classname' )
+		).toBeTruthy();
+		expect(
+			container
+				.querySelector( '.launchpad-container__content' )
+				?.classList.contains( 'content-classname' )
+		).toBeTruthy();
+		expect(
+			container
+				.querySelector( '.launchpad-container__sidebar' )
+				?.classList.contains( 'sidebar-classname' )
+		).toBeTruthy();
+		expect(
+			container
+				.querySelector( '.launchpad-container__main-content' )
+				?.classList.contains( 'main-content-classname' )
+		).toBeTruthy();
+	} );
+} );