@automattic/launchpad 1.0.0

package/dist/types/badge/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import './style.scss';
+export interface BadgeProps {
+    type?: 'warning' | 'warning-clear' | 'success' | 'info' | 'info-blue' | 'info-green' | 'info-purple' | 'error';
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const Badge: React.FunctionComponent<BadgeProps>;
+export default Badge;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,UAAU;IAC1B,IAAI,CAAC,EACF,SAAS,GACT,eAAe,GACf,SAAS,GACT,MAAM,GACN,WAAW,GACX,YAAY,GACZ,aAAa,GACb,OAAO,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAE,UAAU,CAM/C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/types/checklist/index.d.ts

@@ -0,0 +1,12 @@
+import { Task } from '../types';
+import './style.scss';
+interface ChecklistProps {
+    tasks: Task[] | null;
+    makeLastTaskPrimaryAction?: boolean;
+}
+declare const Checklist: {
+    ({ tasks, makeLastTaskPrimaryAction }: ChecklistProps): import("react/jsx-runtime").JSX.Element;
+    Placeholder(): import("react/jsx-runtime").JSX.Element;
+};
+export default Checklist;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/checklist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/checklist/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,cAAc,CAAC;AAEtB,UAAU,cAAc;IACvB,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,QAAA,MAAM,SAAS;2CAA2C,cAAc;;CAkBvE,CAAC;AAaF,eAAe,SAAS,CAAC"}

package/dist/types/checklist-item/index.d.ts

@@ -0,0 +1,11 @@
+import { Task } from '../types';
+import './style.scss';
+declare const ChecklistItem: {
+    ({ task, isPrimaryAction }: {
+        task: Task;
+        isPrimaryAction?: boolean | undefined;
+    }): import("react/jsx-runtime").JSX.Element;
+    Placeholder(): import("react/jsx-runtime").JSX.Element;
+};
+export default ChecklistItem;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/checklist-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/checklist-item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,cAAc,CAAC;AAEtB,QAAA,MAAM,aAAa;;cAAwC,IAAI;;;;CA0E9D,CAAC;AAYF,eAAe,aAAa,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Checklist } from './checklist';
+export { default as ChecklistItem } from './checklist-item';
+export { default as Launchpad } from './launchpad';
+export { setUpActionsForTasks } from './setup-actions';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,cAAc,SAAS,CAAC"}

package/dist/types/launchpad.d.ts

@@ -0,0 +1,12 @@
+import type { Task } from './types';
+import type { UseLaunchpadOptions } from '@automattic/data-stores';
+export interface LaunchpadProps {
+    siteSlug: string | null;
+    checklistSlug?: string | 0 | null | undefined;
+    makeLastTaskPrimaryAction?: boolean;
+    taskFilter?: (tasks: Task[]) => Task[];
+    useLaunchpadOptions?: UseLaunchpadOptions;
+}
+declare const Launchpad: ({ siteSlug, checklistSlug, taskFilter, makeLastTaskPrimaryAction, useLaunchpadOptions, }: LaunchpadProps) => import("react/jsx-runtime").JSX.Element;
+export default Launchpad;
+//# sourceMappingURL=launchpad.d.ts.map

package/dist/types/launchpad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"launchpad.d.ts","sourceRoot":"","sources":["../../src/launchpad.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,UAAU,CAAC,EAAE,CAAE,KAAK,EAAE,IAAI,EAAE,KAAM,IAAI,EAAE,CAAC;IACzC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;CAC1C;AAED,QAAA,MAAM,SAAS,6FAMZ,cAAc,4CAsBhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/types/setup-actions.d.ts

@@ -0,0 +1,3 @@
+import type { LaunchpadTaskActionsProps, Task } from './types';
+export declare const setUpActionsForTasks: ({ siteSlug, tasks, tracksData, extraActions, uiContext, }: LaunchpadTaskActionsProps) => Task[];
+//# sourceMappingURL=setup-actions.d.ts.map

package/dist/types/setup-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-actions.d.ts","sourceRoot":"","sources":["../../src/setup-actions.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,yBAAyB,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAW/D,eAAO,MAAM,oBAAoB,8DAM9B,yBAAyB,KAAI,IAAI,EAiJnC,CAAC"}

package/dist/types/types.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+export interface TaskExtraData {
+    about_page_id?: number;
+}
+export interface Task {
+    id: string;
+    completed: boolean;
+    disabled: boolean;
+    title?: string;
+    subtitle?: string | React.ReactNode | null;
+    badge_text?: string;
+    actionDispatch?: () => void;
+    isLaunchTask?: boolean;
+    extra_data?: TaskExtraData;
+    calypso_path?: string;
+    target_repetitions?: number;
+    repetition_count?: number;
+    order?: number;
+}
+export type LaunchpadChecklist = Task[];
+export type LaunchpadTracksData = {
+    checklistSlug: string;
+    launchpadContext: string;
+    recordTracksEvent: (event: string, properties: Record<string, unknown>) => void;
+    tasklistCompleted: boolean;
+};
+export interface LaunchpadFlowTaskList {
+    [string: string]: string[];
+}
+export interface TranslatedLaunchpadStrings {
+    flowName: string;
+    title: string;
+    launchTitle?: string;
+    subtitle: string;
+}
+export interface LaunchpadStatuses {
+    links_edited?: boolean;
+    site_edited?: boolean;
+    site_launched?: boolean;
+    first_post_published?: boolean;
+    video_uploaded?: boolean;
+    publish_first_course?: boolean;
+    plan_selected?: boolean;
+    plan_completed?: boolean;
+    domain_upsell_deferred?: boolean;
+}
+export interface LaunchpadResponse {
+    site_intent: string;
+    launchpad_screen: boolean | string;
+    checklist_statuses: LaunchpadStatuses[];
+}
+export interface PermittedActions {
+    setShareSiteModalIsOpen?: (isOpen: boolean) => void;
+    siteLaunched?: () => void;
+    setActiveChecklist: (siteSlug: string, activeChecklistSlug: string) => void;
+}
+export interface LaunchpadTaskActionsProps {
+    siteSlug: string | null;
+    tasks: Task[];
+    tracksData: LaunchpadTracksData;
+    extraActions: PermittedActions;
+    uiContext?: 'calypso';
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":";AAAA,MAAM,WAAW,aAAa;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AACD,MAAM,WAAW,IAAI;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,EAAE,CAAC;AAExC,MAAM,MAAM,mBAAmB,GAAG;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,CAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,KAAM,IAAI,CAAC;IACpF,iBAAiB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACrC,CAAE,MAAM,EAAE,MAAM,GAAI,MAAM,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,0BAA0B;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,MAAM,WAAW,iBAAiB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC;IACnC,kBAAkB,EAAE,iBAAiB,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,gBAAgB;IAChC,uBAAuB,CAAC,EAAE,CAAE,MAAM,EAAE,OAAO,KAAM,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,kBAAkB,EAAE,CAAE,QAAQ,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,KAAM,IAAI,CAAC;CAC9E;AAED,MAAM,WAAW,yBAAyB;IACzC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,EAAE,mBAAmB,CAAC;IAChC,YAAY,EAAE,gBAAgB,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	preset: '../../test/packages/jest-preset.js',
+	testEnvironment: 'jsdom',
+	transformIgnorePatterns: [ 'node_modules/(?!gridicons)(?!.*\\.svg)' ],
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@automattic/launchpad",
+  "version": "1.0.0",
+  "description": "Launchpad components",
+  "homepage": "https://github.com/Automattic/wp-calypso",
+  "license": "GPL-2.0-or-later",
+  "author": "Automattic Inc.",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "calypso:src": "src/index.ts",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Automattic/wp-calypso.git",
+    "directory": "packages/launchpad"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": "https://github.com/Automattic/wp-calypso/issues",
+  "types": "dist/types",
+  "scripts": {
+    "clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
+    "build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets",
+    "prepack": "yarn run clean && yarn run build",
+    "watch": "tsc --build ./tsconfig.json --watch"
+  },
+  "dependencies": {
+    "@automattic/components": "^2.0.1",
+    "@automattic/data-stores": "^3.0.1",
+    "@automattic/i18n-utils": "^1.2.0",
+    "classnames": "^2.3.1",
+    "tslib": "^2.3.0",
+    "utility-types": "^3.10.0",
+    "wpcom-proxy-request": "^7.0.4"
+  },
+  "devDependencies": {
+    "@automattic/calypso-build": "^10.0.0",
+    "@automattic/calypso-typescript-config": "^1.0.0",
+    "postcss": "^8.4.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "redux": "^4.2.1",
+    "typescript": "^5.2.2",
+    "webpack": "^5.68.0"
+  },
+  "peerDependencies": {
+    "@wordpress/data": "^9.11.0",
+    "@wordpress/element": "^5.18.0",
+    "@wordpress/i18n": "^4.41.0",
+    "debug": "^4.3.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "redux": "^4.2.1"
+  }
+}

package/src/badge/index.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+
+import './style.scss';
+
+export interface BadgeProps {
+	type?:
+		| 'warning'
+		| 'warning-clear'
+		| 'success'
+		| 'info'
+		| 'info-blue'
+		| 'info-green'
+		| 'info-purple'
+		| 'error';
+	className?: string;
+	children?: React.ReactNode;
+}
+
+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>
+	);
+};
+
+export default Badge;

package/src/badge/style.scss

@@ -0,0 +1,50 @@
+.badge {
+	display: inline-block;
+	// A number large enough to exceed height of any badge to make it look like a pill
+	border-radius: 1000px; /* stylelint-disable-line scales/radii */
+	padding: $badge-padding-y $badge-padding-x;
+	font-size: $font-body-small;
+	line-height: 17px;
+	height: 18px;
+}
+
+.badge--warning-clear {
+	color: var(--color-warning);
+	border: 1px solid var(--color-warning);
+	border-radius: 12px; /* stylelint-disable-line scales/radii */
+}
+
+.badge--warning {
+	color: var(--color-warning-80);
+	background-color: var(--color-warning-20);
+}
+
+.badge--success {
+	color: var(--color-text-inverted);
+	background-color: var(--color-success);
+}
+
+.badge--info {
+	color: var(--color-neutral-70);
+	background-color: var(--color-neutral-5);
+}
+
+.badge--info-blue {
+	background-color: var(--studio-blue-50);
+	color: var(--color-text-inverted);
+}
+
+.badge--info-green {
+	color: var(--studio-green-80);
+	background-color: rgba(184, 230, 191, 0.64);
+}
+
+.badge--info-purple {
+	color: var(--studio-woocommerce-purple-80);
+	background-color: var(--studio-woocommerce-purple-5);
+}
+
+.badge--error {
+	background-color: var(--color-error);
+	color: var(--color-text-inverted);
+}

package/src/checklist/index.tsx

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import ChecklistItem from '../checklist-item';
+import { Task } from '../types';
+
+import './style.scss';
+
+interface ChecklistProps {
+	tasks: Task[] | null;
+	makeLastTaskPrimaryAction?: boolean;
+}
+
+const Checklist = ( { tasks, makeLastTaskPrimaryAction }: ChecklistProps ) => {
+	return (
+		<ul
+			className={ classNames( '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 }
+					/>
+				) ) }
+		</ul>
+	);
+};
+
+Checklist.Placeholder = () => {
+	return (
+		<ul className="checklist__tasks" aria-label="Launchpad Checklist">
+			<ChecklistItem.Placeholder />
+			<ChecklistItem.Placeholder />
+			<ChecklistItem.Placeholder />
+			<ChecklistItem.Placeholder />
+		</ul>
+	);
+};
+
+export default Checklist;

package/src/checklist/style.scss

@@ -0,0 +1,9 @@
+@import "@wordpress/base-styles/mixins";
+@import "@wordpress/base-styles/breakpoints";
+@import "@automattic/typography/styles/variables";
+
+.checklist__tasks {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}

package/src/checklist-item/index.tsx

@@ -0,0 +1,94 @@
+import { Badge, Button, Gridicon } from '@automattic/components';
+import classnames from 'classnames';
+import { translate, useRtl } from 'i18n-calypso';
+import { Task } from '../types';
+
+import './style.scss';
+
+const ChecklistItem = ( { task, isPrimaryAction }: { task: Task; isPrimaryAction?: boolean } ) => {
+	const isRtl = useRtl();
+	const { id, completed, disabled, 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;
+
+	const handlePrimaryAction = () => {
+		localStorage.removeItem( 'launchpad_siteSlug' );
+		actionDispatch && actionDispatch();
+	};
+
+	// 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;
+
+	return (
+		<li
+			className={ classnames( 'checklist-item__task', {
+				completed: completed,
+				pending: ! completed,
+				enabled: ! disabled,
+				disabled: disabled,
+			} ) }
+		>
+			{ isPrimaryAction ? (
+				<Button
+					className="checklist-item__checklist-primary-button"
+					disabled={ disabled }
+					data-task={ id }
+					onClick={ handlePrimaryAction }
+				>
+					{ title }
+				</Button>
+			) : (
+				<Button
+					className="checklist-item__task-content"
+					disabled={ disabled }
+					data-task={ id }
+					onClick={ actionDispatch }
+				>
+					{ completed && (
+						// show checkmark for completed tasks regardless if they are disabled or kept active
+						<div className="checklist-item__checkmark-container">
+							<Gridicon
+								aria-label={ translate( 'Task complete' ) }
+								className="checklist-item__checkmark"
+								icon="checkmark"
+								size={ 18 }
+							/>
+						</div>
+					) }
+					<span className="checklist-item__text">{ title }</span>
+					{ task.badge_text ? <Badge type="info-blue">{ task.badge_text }</Badge> : null }
+					{ shouldDisplayTaskCounter && (
+						<span className="checklist-item__counter">
+							{ task.repetition_count }/{ task.target_repetitions }
+						</span>
+					) }
+					{ shouldDisplayChevron && (
+						<Gridicon
+							aria-label={ translate( 'Task enabled' ) }
+							className="checklist-item__chevron"
+							icon={ `chevron-${ isRtl ? 'left' : 'right' }` }
+							size={ 18 }
+						/>
+					) }
+					{ subtitle && <p className="checklist-item__subtext">{ subtitle }</p> }
+				</Button>
+			) }
+		</li>
+	);
+};
+
+ChecklistItem.Placeholder = () => {
+	return (
+		<div className="checklist-item__task-content is-placeholder">
+			<div className="checklist-item__content">
+				<div></div>
+			</div>
+		</div>
+	);
+};
+
+export default ChecklistItem;

package/src/checklist-item/style.scss

@@ -0,0 +1,214 @@
+@import "@wordpress/base-styles/mixins";
+@import "@wordpress/base-styles/breakpoints";
+@import "@automattic/typography/styles/variables";
+
+.checklist-item__task-content {
+	align-items: flex-start;
+	background-color: transparent;
+	border-bottom: 1px solid var(--studio-gray-5);
+	border-left: none;
+	border-right: none;
+	border-top: none;
+	display: flex;
+	flex-wrap: wrap;
+	padding: 16px 0;
+	width: 100%;
+	margin: 0;
+	color: var(--color-neutral-100);
+
+	&.is-placeholder {
+		padding: 16px 0 16px 0;
+	}
+}
+
+.checklist-item__content {
+	width: 100%;
+
+	.is-placeholder & {
+		animation: loading-fade 1.6s ease-in-out infinite;
+		background-color: var(--color-neutral-light);
+		color: transparent;
+		min-height: 44px;
+	}
+
+	>div {
+		.is-placeholder & {
+			color: transparent;
+		}
+	}
+}
+
+.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 .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[disabled],
+.checklist-item__task-content[disabled]:focus {
+	background-color: transparent;
+	pointer-events: none;
+}
+
+.checklist-item__task-content[data-task="verify_email"] {
+	color: var(--color-text);
+}
+
+.checklist-item__task-content[data-task="set_up_payments"] .badge {
+	background-color: var(--studio-green-5);
+	cursor: default;
+}
+
+.checklist-item__checkmark-container {
+	margin-right: 8px;
+	width: 20px;
+
+	.checklist-item__checkmark {
+		top: 2px;
+		vertical-align: text-bottom;
+	}
+}
+
+// general styles
+.checklist-item__text {
+	font-weight: 600;
+	flex-grow: 1;
+	text-align: left;
+}
+
+.checklist-item__subtext {
+	flex-basis: 100%;
+	margin-left: 28px;
+	margin-top: 8px;
+	text-align: left;
+	font-size: $font-body-small;
+	line-height: 20px;
+
+	a,
+	a:visited {
+		text-decoration: underline;
+		color: var(--color-neutral-100);
+
+		&:hover {
+			color: var(--studio-blue-50);
+		}
+	}
+}
+
+.checklist-item__task-content:hover .checklist-item__subtext {
+	color: var(--color-neutral-100);
+}
+
+.checklist__has-primary-action .checklist-item__task:nth-last-child(2) {
+
+	// remove bottom border for last checklist item before the primary button
+	.checklist-item__task-content,
+	.checklist-item__task-content:hover,
+	.checklist-item__task-content:focus {
+		border-bottom: none;
+	}
+}
+
+.checklist-item__task:last-child {
+	.checklist-item__task-content,
+	.checklist-item__task-content:hover,
+	.checklist-item__task-content:focus {
+		border-bottom: none;
+	}
+}
+
+// completed tasks (both enabled and disabled)
+.checklist-item__task.completed.disabled,
+.checklist-item__task.completed.enabled {
+	.checklist-item__text {
+		color: var(--color-neutral-40);
+		font-weight: 400;
+	}
+
+	.checklist-item__chevron,
+	.checklist-item__checkmark {
+		fill: var(--color-neutral-40);
+	}
+	.checklist-item__counter {
+		color: var(--color-neutral-40);
+		font-weight: 400;
+		margin-right: 0;
+	}
+}
+
+// pending tasks and completed enabled
+.checklist-item__task.completed.enabled:hover,
+.checklist-item__task.pending:hover,
+.checklist-item__task.completed.enabled > a:focus,
+.checklist-item__task.pending > a:focus {
+	.checklist-item__text {
+		color: var(--studio-blue-50);
+	}
+
+	.checklist-item__chevron,
+	.checklist-item__checkmark {
+		fill: var(--studio-blue-50);
+	}
+
+	// change badge color on hover (Choose a Plan step)
+	.badge {
+		background: var(--studio-blue-10);
+	}
+
+	.checklist-item__task-content[data-task="set_up_payments"] .badge {
+		background-color: var(--studio-green-5);
+	}
+}
+
+// pending disabled tasks
+.checklist-item__task.pending.disabled {
+	.checklist-item__text {
+		color: inherit;
+	}
+}
+
+.checklist-item__chevron {
+	display: flex;
+	line-height: 20px;
+	width: 30px;
+}
+
+.gridicon.checklist-item__chevron {
+	top: 2px;
+	margin-top: 0;
+}
+
+.checklist-item__counter {
+	margin-right: 1em;
+	font-weight: 600;
+}
+
+.checklist-item__checklist-primary-button {
+	width: 100%;
+	font-weight: 500;
+	padding: 11px;
+	margin-top: 12px;
+	background-color: var(--color-primary);
+	border-color: var(--color-primary);
+	color: var(--color-text-inverted);
+
+	&: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);
+	}
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { default as Checklist } from './checklist';
+export { default as ChecklistItem } from './checklist-item';
+export { default as Launchpad } from './launchpad';
+export { setUpActionsForTasks } from './setup-actions';
+export * from './types';