@automattic/launchpad 1.0.0 → 1.0.1

package/dist/cjs/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/dist/cjs/index.js

@@ -1,14 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setUpActionsForTasks = exports.Launchpad = exports.ChecklistItem = exports.Checklist = void 0;
+exports.setUpActionsForTasks = exports.Launchpad = exports.LaunchpadContainer = exports.LaunchpadInternal = exports.ChecklistItem = exports.Checklist = void 0;
 const tslib_1 = require("tslib");
 var checklist_1 = require("./checklist");
 Object.defineProperty(exports, "Checklist", { enumerable: true, get: function () { return tslib_1.__importDefault(checklist_1).default; } });
 var checklist_item_1 = require("./checklist-item");
 Object.defineProperty(exports, "ChecklistItem", { enumerable: true, get: function () { return tslib_1.__importDefault(checklist_item_1).default; } });
+var launchpad_internal_1 = require("./launchpad-internal");
+Object.defineProperty(exports, "LaunchpadInternal", { enumerable: true, get: function () { return tslib_1.__importDefault(launchpad_internal_1).default; } });
+var launchpad_container_1 = require("./launchpad-container");
+Object.defineProperty(exports, "LaunchpadContainer", { enumerable: true, get: function () { return tslib_1.__importDefault(launchpad_container_1).default; } });
 var launchpad_1 = require("./launchpad");
 Object.defineProperty(exports, "Launchpad", { enumerable: true, get: function () { return tslib_1.__importDefault(launchpad_1).default; } });
 var setup_actions_1 = require("./setup-actions");
 Object.defineProperty(exports, "setUpActionsForTasks", { enumerable: true, get: function () { return setup_actions_1.setUpActionsForTasks; } });
+tslib_1.__exportStar(require("./action-components"), exports);
 tslib_1.__exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,yCAAmD;AAA1C,+HAAA,OAAO,OAAa;AAC7B,mDAA4D;AAAnD,wIAAA,OAAO,OAAiB;AACjC,yCAAmD;AAA1C,+HAAA,OAAO,OAAa;AAC7B,iDAAuD;AAA9C,qHAAA,oBAAoB,OAAA;AAC7B,kDAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,yCAAmD;AAA1C,+HAAA,OAAO,OAAa;AAC7B,mDAA4D;AAAnD,wIAAA,OAAO,OAAiB;AACjC,2DAAoE;AAA3D,gJAAA,OAAO,OAAqB;AACrC,6DAAsE;AAA7D,kJAAA,OAAO,OAAsB;AACtC,yCAAmD;AAA1C,+HAAA,OAAO,OAAa;AAC7B,iDAAuD;AAA9C,qHAAA,oBAAoB,OAAA;AAC7B,8DAAoC;AACpC,kDAAwB"}

package/dist/cjs/launchpad-container/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+require("./style.scss");
+const LaunchpadContainer = ({ className, headerClassName, contentClassName, sidebarClassName, mainContentClassName, header, sidebar, children, }) => {
+    return ((0, jsx_runtime_1.jsxs)("main", { className: (0, clsx_1.default)('launchpad-container', className), children: [header && ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('launchpad-container__header', headerClassName), children: header })), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('launchpad-container__content', contentClassName), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('launchpad-container__sidebar', sidebarClassName), children: sidebar }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('launchpad-container__main-content', mainContentClassName), children: children })] })] }));
+};
+exports.default = LaunchpadContainer;
+//# sourceMappingURL=index.js.map

package/dist/cjs/launchpad-container/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/launchpad-container/index.tsx"],"names":[],"mappings":";;;;AAAA,wDAAwB;AAGxB,wBAAsB;AAatB,MAAM,kBAAkB,GAA8C,CAAE,EACvE,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,EACpB,MAAM,EACN,OAAO,EACP,QAAQ,GACR,EAAG,EAAE;IACL,OAAO,CACN,kCAAM,SAAS,EAAG,IAAA,cAAI,EAAE,qBAAqB,EAAE,SAAS,CAAE,aACvD,MAAM,IAAI,CACX,gCAAK,SAAS,EAAG,IAAA,cAAI,EAAE,6BAA6B,EAAE,eAAe,CAAE,YAAK,MAAM,GAAQ,CAC1F,EAED,iCAAK,SAAS,EAAG,IAAA,cAAI,EAAE,8BAA8B,EAAE,gBAAgB,CAAE,aACxE,gCAAK,SAAS,EAAG,IAAA,cAAI,EAAE,8BAA8B,EAAE,gBAAgB,CAAE,YACtE,OAAO,GACJ,EACN,gCAAK,SAAS,EAAG,IAAA,cAAI,EAAE,mCAAmC,EAAE,oBAAoB,CAAE,YAC/E,QAAQ,GACL,IACD,IACA,CACP,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC"}

package/dist/cjs/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/dist/cjs/launchpad-internal.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const data_stores_1 = require("@automattic/data-stores");
+const react_1 = require("react");
+const checklist_1 = tslib_1.__importStar(require("./checklist"));
+const checklist_item_1 = tslib_1.__importDefault(require("./checklist-item"));
+const use_tracking_1 = require("./use-tracking");
+/**
+ * Low-level launchpad component that should only be used in exceptional cases.
+ * Please use the main Launchpad component whenever possible.
+ */
+const LaunchpadInternal = ({ flow, site, siteSlug, checklistSlug, taskFilter, makeLastTaskPrimaryAction, useLaunchpadOptions = {}, launchpadContext, }) => {
+    const launchpadData = (0, data_stores_1.useLaunchpad)(siteSlug || '', checklistSlug, useLaunchpadOptions, launchpadContext);
+    const { isFetchedAfterMount, data } = launchpadData;
+    const { checklist } = data;
+    const tasks = (0, react_1.useMemo)(() => {
+        if (!checklist) {
+            return [];
+        }
+        return taskFilter ? taskFilter(checklist) : checklist;
+        // Array of tasks requires deep comparison
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [JSON.stringify(checklist), taskFilter]);
+    const { trackTaskClick } = (0, use_tracking_1.useTracking)({
+        tasks,
+        checklistSlug,
+        site,
+        context: launchpadContext,
+        flow,
+    });
+    const itemClickHandler = (task) => {
+        trackTaskClick(task);
+        task?.actionDispatch?.();
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "launchpad__checklist-wrapper", children: isFetchedAfterMount ? ((0, jsx_runtime_1.jsx)(checklist_1.default, { makeLastTaskPrimaryAction: makeLastTaskPrimaryAction, children: tasks.map((task) => ((0, jsx_runtime_1.jsx)(checklist_item_1.default, { task: task, onClick: () => itemClickHandler(task) }, task.id))) })) : ((0, jsx_runtime_1.jsx)(checklist_1.Placeholder, {})) }));
+};
+exports.default = LaunchpadInternal;
+//# sourceMappingURL=launchpad-internal.js.map

package/dist/cjs/launchpad-internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"launchpad-internal.js","sourceRoot":"","sources":["../../src/launchpad-internal.tsx"],"names":[],"mappings":";;;;AAAA,yDAAuD;AACvD,iCAAyC;AACzC,iEAA6E;AAC7E,8EAA6C;AAC7C,iDAA6C;AAe7C;;;GAGG;AACH,MAAM,iBAAiB,GAAgB,CAAE,EACxC,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,UAAU,EACV,yBAAyB,EACzB,mBAAmB,GAAG,EAAE,EACxB,gBAAgB,GAChB,EAAG,EAAE;IACL,MAAM,aAAa,GAAG,IAAA,0BAAY,EACjC,QAAQ,IAAI,EAAE,EACd,aAAa,EACb,mBAAmB,EACnB,gBAAgB,CAChB,CAAC;IAEF,MAAM,EAAE,mBAAmB,EAAE,IAAI,EAAE,GAAG,aAAa,CAAC;IACpD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAE3B,MAAM,KAAK,GAAG,IAAA,eAAO,EAAE,GAAG,EAAE;QAC3B,IAAK,CAAE,SAAS,EAAG,CAAC;YACnB,OAAO,EAAE,CAAC;QACX,CAAC;QACD,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAE,SAAS,CAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QACxD,0CAA0C;QAC1C,uDAAuD;IACxD,CAAC,EAAE,CAAE,IAAI,CAAC,SAAS,CAAE,SAAS,CAAE,EAAE,UAAU,CAAE,CAAE,CAAC;IAEjD,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,0BAAW,EAAE;QACvC,KAAK;QACL,aAAa;QACb,IAAI;QACJ,OAAO,EAAE,gBAAgB;QACzB,IAAI;KACJ,CAAE,CAAC;IAEJ,MAAM,gBAAgB,GAAG,CAAE,IAAU,EAAG,EAAE;QACzC,cAAc,CAAE,IAAI,CAAE,CAAC;QACvB,IAAI,EAAE,cAAc,EAAE,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACN,gCAAK,SAAS,EAAC,8BAA8B,YAC1C,mBAAmB,CAAC,CAAC,CAAC,CACvB,uBAAC,mBAAS,IAAC,yBAAyB,EAAG,yBAAyB,YAC7D,KAAK,CAAC,GAAG,CAAE,CAAE,IAAI,EAAG,EAAE,CAAC,CACxB,uBAAC,wBAAa,IACb,IAAI,EAAG,IAAI,EAEX,OAAO,EAAG,GAAG,EAAE,CAAC,gBAAgB,CAAE,IAAI,CAAE,IADlC,IAAI,CAAC,EAAE,CAEZ,CACF,CAAE,GACQ,CACZ,CAAC,CAAC,CAAC,CACH,uBAAC,uBAAoB,KAAG,CACxB,GACI,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC"}

package/dist/cjs/launchpad-internal.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = exports.Default = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_query_1 = require("@tanstack/react-query");
+const msw_1 = require("msw");
+const launchpad_internal_1 = tslib_1.__importDefault(require("./launchpad-internal"));
+const resolver_1 = require("./msw/resolver");
+const queryClient = new react_query_1.QueryClient();
+const meta = {
+    title: 'Launchpad/LaunchpadInternal',
+    component: launchpad_internal_1.default,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    parameters: {
+        msw: {
+            handlers: [msw_1.http.get('/wpcom/v2/sites/*/launchpad', resolver_1.launchpadResolver)],
+        },
+    },
+    args: {
+        site: null,
+        siteSlug: 'example.wordpress.com',
+        launchpadContext: 'fullscreen',
+        checklistSlug: 'free',
+    },
+    argTypes: {
+        checklistSlug: {
+            defaultValue: 'free',
+            options: ['free', 'link-in-bio'],
+            control: { type: 'select' },
+        },
+    },
+};
+exports.Default = {};
+exports.Loading = {
+    parameters: {
+        msw: {
+            delay: 1000,
+        },
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=launchpad-internal.stories.js.map

package/dist/cjs/launchpad-internal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"launchpad-internal.stories.js","sourceRoot":"","sources":["../../src/launchpad-internal.stories.tsx"],"names":[],"mappings":";;;;;AAAA,uDAAyE;AACzE,6BAA2B;AAC3B,sFAAqD;AACrD,6CAAmD;AAGnD,MAAM,WAAW,GAAG,IAAI,yBAAW,EAAE,CAAC;AAEtC,MAAM,IAAI,GAAqC;IAC9C,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,4BAAiB;IAC5B,UAAU,EAAE;QACX,CAAE,KAAK,EAAG,EAAE,CAAC,CACZ,uBAAC,iCAAmB,IAAC,MAAM,EAAG,WAAW,YACxC,uBAAC,KAAK,KAAG,GACY,CACtB;KACD;IACD,UAAU,EAAE;QACX,GAAG,EAAE;YACJ,QAAQ,EAAE,CAAE,UAAI,CAAC,GAAG,CAAE,6BAA6B,EAAE,4BAAiB,CAAE,CAAE;SAC1E;KACD;IACD,IAAI,EAAE;QACL,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,uBAAuB;QACjC,gBAAgB,EAAE,YAAY;QAC9B,aAAa,EAAE,MAAM;KACrB;IACD,QAAQ,EAAE;QACT,aAAa,EAAE;YACd,YAAY,EAAE,MAAM;YACpB,OAAO,EAAE,CAAE,MAAM,EAAE,aAAa,CAAE;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC3B;KACD;CACD,CAAC;AAGW,QAAA,OAAO,GAAU,EAAE,CAAC;AACpB,QAAA,OAAO,GAAU;IAC7B,UAAU,EAAE;QACX,GAAG,EAAE;YACJ,KAAK,EAAE,IAAI;SACX;KACD;CACD,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/cjs/launchpad.js

@@ -1,19 +1,48 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SITE_STORE = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const calypso_analytics_1 = require("@automattic/calypso-analytics");
 const data_stores_1 = require("@automattic/data-stores");
+const data_1 = require("@wordpress/data");
 const react_1 = require("react");
-const checklist_1 = tslib_1.__importDefault(require("./checklist"));
-const Launchpad = ({ siteSlug, checklistSlug, taskFilter, makeLastTaskPrimaryAction, useLaunchpadOptions = {}, }) => {
-    const launchpadData = (0, data_stores_1.useLaunchpad)(siteSlug || '', checklistSlug, useLaunchpadOptions);
-    const { isFetchedAfterMount, data } = launchpadData;
-    const tasks = (0, react_1.useRef)([]);
-    (0, react_1.useMemo)(() => {
-        const originalTasks = data.checklist || [];
-        tasks.current = taskFilter ? taskFilter(originalTasks) : originalTasks;
-    }, [data, taskFilter]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "launchpad__checklist-wrapper", children: isFetchedAfterMount ? ((0, jsx_runtime_1.jsx)(checklist_1.default, { tasks: tasks.current, makeLastTaskPrimaryAction: makeLastTaskPrimaryAction })) : ((0, jsx_runtime_1.jsx)(checklist_1.default.Placeholder, {})) }));
+const action_components_1 = require("./action-components");
+const launchpad_internal_1 = tslib_1.__importDefault(require("./launchpad-internal"));
+const setup_actions_1 = require("./setup-actions");
+exports.SITE_STORE = data_stores_1.Site.register({ client_id: '', client_secret: '' });
+const Launchpad = ({ siteSlug, checklistSlug, launchpadContext, onSiteLaunched, onTaskClick, onPostFilterTasks, }) => {
+    const { data: { checklist }, } = (0, data_stores_1.useSortedLaunchpadTasks)(siteSlug, checklistSlug, launchpadContext);
+    const { setActiveChecklist } = (0, data_1.useDispatch)(data_stores_1.LaunchpadNavigator.store);
+    const tasklistCompleted = checklist?.every((task) => task.completed) || false;
+    const tracksData = { recordTracksEvent: calypso_analytics_1.recordTracksEvent, checklistSlug, tasklistCompleted, launchpadContext };
+    const site = (0, data_1.useSelect)((select) => {
+        return siteSlug ? select(exports.SITE_STORE).getSite(siteSlug) : null;
+    }, [siteSlug]);
+    const [shareSiteModalIsOpen, setShareSiteModalIsOpen] = (0, react_1.useState)(false);
+    const taskFilter = (tasks) => {
+        const baseTasks = (0, setup_actions_1.setUpActionsForTasks)({
+            tasks,
+            siteSlug,
+            tracksData,
+            extraActions: {
+                setActiveChecklist,
+                setShareSiteModalIsOpen,
+            },
+            eventHandlers: {
+                onSiteLaunched,
+                onTaskClick,
+            },
+        });
+        if (onPostFilterTasks) {
+            return onPostFilterTasks(baseTasks);
+        }
+        return baseTasks;
+    };
+    const launchpadOptions = {
+        onSuccess: data_stores_1.sortLaunchpadTasksByCompletionStatus,
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shareSiteModalIsOpen && site && ((0, jsx_runtime_1.jsx)(action_components_1.ShareSiteModal, { setModalIsOpen: setShareSiteModalIsOpen, site: site })), (0, jsx_runtime_1.jsx)(launchpad_internal_1.default, { site: site, siteSlug: siteSlug, checklistSlug: checklistSlug, taskFilter: taskFilter, useLaunchpadOptions: launchpadOptions, launchpadContext: launchpadContext })] }));
 };
 exports.default = Launchpad;
 //# sourceMappingURL=launchpad.js.map

package/dist/cjs/launchpad.js.map

@@ -1 +1 @@
-{"version":3,"file":"launchpad.js","sourceRoot":"","sources":["../../src/launchpad.tsx"],"names":[],"mappings":";;;;AAAA,yDAAuD;AACvD,iCAAwC;AACxC,oEAAoC;AAYpC,MAAM,SAAS,GAAG,CAAE,EACnB,QAAQ,EACR,aAAa,EACb,UAAU,EACV,yBAAyB,EACzB,mBAAmB,GAAG,EAAE,GACR,EAAG,EAAE;IACrB,MAAM,aAAa,GAAG,IAAA,0BAAY,EAAE,QAAQ,IAAI,EAAE,EAAE,aAAa,EAAE,mBAAmB,CAAE,CAAC;IACzF,MAAM,EAAE,mBAAmB,EAAE,IAAI,EAAE,GAAG,aAAa,CAAC;IACpD,MAAM,KAAK,GAAG,IAAA,cAAM,EAAY,EAAE,CAAE,CAAC;IAErC,IAAA,eAAO,EAAE,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;QAC3C,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAE,aAAa,CAAE,CAAC,CAAC,CAAC,aAAa,CAAC;IAC1E,CAAC,EAAE,CAAE,IAAI,EAAE,UAAU,CAAE,CAAE,CAAC;IAE1B,OAAO,CACN,gCAAK,SAAS,EAAC,8BAA8B,YAC1C,mBAAmB,CAAC,CAAC,CAAC,CACvB,uBAAC,mBAAS,IACT,KAAK,EAAG,KAAK,CAAC,OAAO,EACrB,yBAAyB,EAAG,yBAAyB,GACpD,CACF,CAAC,CAAC,CAAC,CACH,uBAAC,mBAAS,CAAC,WAAW,KAAG,CACzB,GACI,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"launchpad.js","sourceRoot":"","sources":["../../src/launchpad.tsx"],"names":[],"mappings":";;;;;AAAA,qEAAkE;AAClE,yDAMiC;AACjC,0CAAyD;AACzD,iCAAiC;AACjC,2DAAqD;AACrD,sFAAqD;AACrD,mDAAuD;AAG1C,QAAA,UAAU,GAAG,kBAAI,CAAC,QAAQ,CAAE,EAAE,SAAS,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,CAAE,CAAC;AAWhF,MAAM,SAAS,GAAG,CAAE,EACnB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,iBAAiB,GACD,EAAG,EAAE;IACrB,MAAM,EACL,IAAI,EAAE,EAAE,SAAS,EAAE,GACnB,GAAG,IAAA,qCAAuB,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,CAAE,CAAC;IACzE,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAA,kBAAW,EAAE,gCAAkB,CAAC,KAAK,CAAE,CAAC;IAEvE,MAAM,iBAAiB,GAAG,SAAS,EAAE,KAAK,CAAE,CAAE,IAAU,EAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAE,IAAI,KAAK,CAAC;IAExF,MAAM,UAAU,GAAG,EAAE,iBAAiB,EAAjB,qCAAiB,EAAE,aAAa,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAC;IAE7F,MAAM,IAAI,GAAG,IAAA,gBAAS,EACrB,CAAE,MAAM,EAAG,EAAE;QACZ,OAAO,QAAQ,CAAC,CAAC,CAAG,MAAM,CAAE,kBAAU,CAAkB,CAAC,OAAO,CAAE,QAAQ,CAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACrF,CAAC,EACD,CAAE,QAAQ,CAAE,CACZ,CAAC;IACF,MAAM,CAAE,oBAAoB,EAAE,uBAAuB,CAAE,GAAG,IAAA,gBAAQ,EAAE,KAAK,CAAE,CAAC;IAE5E,MAAM,UAAU,GAAG,CAAE,KAAa,EAAG,EAAE;QACtC,MAAM,SAAS,GAAG,IAAA,oCAAoB,EAAE;YACvC,KAAK;YACL,QAAQ;YACR,UAAU;YACV,YAAY,EAAE;gBACb,kBAAkB;gBAClB,uBAAuB;aACvB;YACD,aAAa,EAAE;gBACd,cAAc;gBACd,WAAW;aACX;SACD,CAAE,CAAC;QAEJ,IAAK,iBAAiB,EAAG,CAAC;YACzB,OAAO,iBAAiB,CAAE,SAAS,CAAE,CAAC;QACvC,CAAC;QAED,OAAO,SAAS,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG;QACxB,SAAS,EAAE,kDAAoC;KAC/C,CAAC;IAEF,OAAO,CACN,6DACG,oBAAoB,IAAI,IAAI,IAAI,CACjC,uBAAC,kCAAc,IAAC,cAAc,EAAG,uBAAuB,EAAG,IAAI,EAAG,IAAI,GAAK,CAC3E,EACD,uBAAC,4BAAiB,IACjB,IAAI,EAAG,IAAI,EACX,QAAQ,EAAG,QAAQ,EACnB,aAAa,EAAG,aAAa,EAC7B,UAAU,EAAG,UAAU,EACvB,mBAAmB,EAAG,gBAAgB,EACtC,gBAAgB,EAAG,gBAAgB,GAClC,IACA,CACH,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/dist/cjs/msw/link-in-bio.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    site_intent: 'free',
+    launchpad_screen: 'full',
+    checklist_statuses: {
+        setup_free: true,
+        setup_general: true,
+        design_completed: true,
+        site_theme_selected: true,
+    },
+    checklist: [
+        {
+            id: 'design_selected',
+            title: 'Select a design',
+            completed: true,
+            disabled: false,
+            subtitle: '',
+            badge_text: '',
+            isLaunchTask: false,
+            calypso_path: '/setup/update-design/designSetup?siteSlug=site62798.wordpress.com',
+        },
+        {
+            id: 'setup_link_in_bio',
+            title: 'Personalize Link in Bio',
+            completed: true,
+            disabled: false,
+            subtitle: '',
+            badge_text: '',
+            isLaunchTask: false,
+            calypso_path: '/setup/link-in-bio-post-setup/linkInBioPostSetup?siteSlug=site62798.wordpress.com',
+        },
+        {
+            id: 'plan_selected',
+            title: 'Choose a plan',
+            completed: true,
+            disabled: false,
+            subtitle: '',
+            badge_text: '',
+            isLaunchTask: false,
+            calypso_path: '/plans/site62798.wordpress.com',
+        },
+        {
+            id: 'links_added',
+            title: 'Add links',
+            completed: false,
+            disabled: false,
+            subtitle: '',
+            badge_text: '',
+            isLaunchTask: false,
+            calypso_path: '/site-editor/site62798.wordpress.com',
+        },
+        {
+            id: 'link_in_bio_launched',
+            title: 'Launch your site',
+            completed: false,
+            disabled: true,
+            subtitle: '',
+            badge_text: '',
+            isLaunchTask: false,
+        },
+    ],
+    is_enabled: true,
+    is_dismissed: false,
+    is_dismissible: false,
+    title: 'Next steps for your site',
+};
+//# sourceMappingURL=link-in-bio.js.map

package/dist/cjs/msw/link-in-bio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-in-bio.js","sourceRoot":"","sources":["../../../src/msw/link-in-bio.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACd,WAAW,EAAE,MAAM;IACnB,gBAAgB,EAAE,MAAM;IACxB,kBAAkB,EAAE;QACnB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE,IAAI;QACnB,gBAAgB,EAAE,IAAI;QACtB,mBAAmB,EAAE,IAAI;KACzB;IACD,SAAS,EAAE;QACV;YACC,EAAE,EAAE,iBAAiB;YACrB,KAAK,EAAE,iBAAiB;YACxB,SAAS,EAAE,IAAI;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,YAAY,EAAE,KAAK;YACnB,YAAY,EAAE,mEAAmE;SACjF;QACD;YACC,EAAE,EAAE,mBAAmB;YACvB,KAAK,EAAE,yBAAyB;YAChC,SAAS,EAAE,IAAI;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,YAAY,EAAE,KAAK;YACnB,YAAY,EACX,mFAAmF;SACpF;QACD;YACC,EAAE,EAAE,eAAe;YACnB,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE,IAAI;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,YAAY,EAAE,KAAK;YACnB,YAAY,EAAE,gCAAgC;SAC9C;QACD;YACC,EAAE,EAAE,aAAa;YACjB,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,YAAY,EAAE,KAAK;YACnB,YAAY,EAAE,sCAAsC;SACpD;QACD;YACC,EAAE,EAAE,sBAAsB;YAC1B,KAAK,EAAE,kBAAkB;YACzB,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,YAAY,EAAE,KAAK;SACnB;KACD;IACD,UAAU,EAAE,IAAI;IAChB,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,KAAK;IACrB,KAAK,EAAE,0BAA0B;CACjC,CAAC"}

package/dist/cjs/msw/resolver.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.launchpadResolver = void 0;
+const tslib_1 = require("tslib");
+const msw_1 = require("msw");
+const link_in_bio_1 = tslib_1.__importDefault(require("./link-in-bio"));
+const setup_free_1 = tslib_1.__importDefault(require("./setup-free"));
+const launchpadResolver = async ({ request }) => {
+    const searchParams = new URL(request.url).searchParams;
+    const checklistSlug = searchParams.get('checklist_slug');
+    // Random delay to make the UI feel more realistic
+    await (0, msw_1.delay)();
+    if (checklistSlug === 'link-in-bio') {
+        return msw_1.HttpResponse.json(link_in_bio_1.default);
+    }
+    return msw_1.HttpResponse.json(setup_free_1.default);
+};
+exports.launchpadResolver = launchpadResolver;
+//# sourceMappingURL=resolver.js.map

package/dist/cjs/msw/resolver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolver.js","sourceRoot":"","sources":["../../../src/msw/resolver.ts"],"names":[],"mappings":";;;;AAAA,6BAAgE;AAChE,wEAAsC;AACtC,sEAAgC;AAEzB,MAAM,iBAAiB,GAAyB,KAAK,EAAG,EAAE,OAAO,EAAE,EAAG,EAAE;IAC9E,MAAM,YAAY,GAAG,IAAI,GAAG,CAAE,OAAO,CAAC,GAAG,CAAE,CAAC,YAAY,CAAC;IACzD,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAE,gBAAgB,CAAE,CAAC;IAE3D,kDAAkD;IAElD,MAAM,IAAA,WAAK,GAAE,CAAC;IAEd,IAAK,aAAa,KAAK,aAAa,EAAG,CAAC;QACvC,OAAO,kBAAY,CAAC,IAAI,CAAE,qBAAS,CAAE,CAAC;IACvC,CAAC;IAED,OAAO,kBAAY,CAAC,IAAI,CAAE,oBAAI,CAAE,CAAC;AAClC,CAAC,CAAC;AAbW,QAAA,iBAAiB,qBAa5B"}