@automattic/launchpad 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+
+# Changelog
+
+## 1.0.0
+
+- Initial release

package/README.md

@@ -0,0 +1,35 @@
+# Launchpad
+
+Launchpad is the base component for displaying a checklist in the WordPress.com dashboard. It handles fetching the checklist data and displaying the checklist.
+
+## Usage
+
+First, import the Launchpad component:
+
+```js
+import { Launchpad } from '@automattic/launchpad'
+```
+
+Then, use it in your code:
+
+```js
+function App( { siteSlug, checklistSlug } ) {
+    return (
+        <Launchpad
+            siteSlug={ siteSlug }
+            checklistSlug={ checklistSlug } />
+    );
+}
+```
+
+## Props
+
+### siteSlug
+
+The site slug of the site to display the checklist for.
+
+### checklistSlug
+
+Optional slug of the checklist to display. This is ID of the checklist defined on Jetpack's side. See [Jetpack checklist definitions](https://github.com/Automattic/jetpack/blob/2d37c444fe42eb852f34f1df6c285e94c37e9376/projects/packages/jetpack-mu-wpcom/src/features/launchpad/launchpad.php).
+
+We use the `@automattic/data-stores` package to fetch the checklist data and cache it, through the `useLaunchpad` query.

package/dist/cjs/badge/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+require("./style.scss");
+const Badge = (props) => {
+    const className = props.className;
+    const type = props.type || 'warning';
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(`badge badge--${type}`, className), children: props.children }));
+};
+exports.default = Badge;
+//# sourceMappingURL=index.js.map

package/dist/cjs/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":";;;;AAAA,oEAAoC;AAEpC,wBAAsB;AAgBtB,MAAM,KAAK,GAA0C,CAAE,KAAK,EAAG,EAAE;IAChE,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,SAAS,CAAC;IACrC,OAAO,CACN,gCAAK,SAAS,EAAG,IAAA,oBAAU,EAAE,gBAAiB,IAAK,EAAE,EAAE,SAAS,CAAE,YAAK,KAAK,CAAC,QAAQ,GAAQ,CAC7F,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC"}

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const checklist_item_1 = tslib_1.__importDefault(require("../checklist-item"));
+require("./style.scss");
+const Checklist = ({ tasks, makeLastTaskPrimaryAction }) => {
+    return ((0, jsx_runtime_1.jsx)("ul", { className: (0, classnames_1.default)('checklist__tasks', {
+            'checklist__has-primary-action': makeLastTaskPrimaryAction,
+        }), "aria-label": "Launchpad Checklist", children: tasks &&
+            tasks.map((task, index) => ((0, jsx_runtime_1.jsx)(checklist_item_1.default, { task: task, isPrimaryAction: makeLastTaskPrimaryAction && index === tasks.length - 1 }, task.id))) }));
+};
+Checklist.Placeholder = () => {
+    return ((0, jsx_runtime_1.jsxs)("ul", { className: "checklist__tasks", "aria-label": "Launchpad Checklist", children: [(0, jsx_runtime_1.jsx)(checklist_item_1.default.Placeholder, {}), (0, jsx_runtime_1.jsx)(checklist_item_1.default.Placeholder, {}), (0, jsx_runtime_1.jsx)(checklist_item_1.default.Placeholder, {}), (0, jsx_runtime_1.jsx)(checklist_item_1.default.Placeholder, {})] }));
+};
+exports.default = Checklist;
+//# sourceMappingURL=index.js.map

package/dist/cjs/checklist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checklist/index.tsx"],"names":[],"mappings":";;;;AAAA,oEAAoC;AACpC,+EAA8C;AAG9C,wBAAsB;AAOtB,MAAM,SAAS,GAAG,CAAE,EAAE,KAAK,EAAE,yBAAyB,EAAkB,EAAG,EAAE;IAC5E,OAAO,CACN,+BACC,SAAS,EAAG,IAAA,oBAAU,EAAE,kBAAkB,EAAE;YAC3C,+BAA+B,EAAE,yBAAyB;SAC1D,CAAE,gBACQ,qBAAqB,YAE9B,KAAK;YACN,KAAK,CAAC,GAAG,CAAE,CAAE,IAAU,EAAE,KAAa,EAAG,EAAE,CAAC,CAC3C,uBAAC,wBAAa,IAEb,IAAI,EAAG,IAAI,EACX,eAAe,EAAG,yBAAyB,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,IAFnE,IAAI,CAAC,EAAE,CAGZ,CACF,CAAE,GACA,CACL,CAAC;AACH,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,GAAG,EAAE;IAC5B,OAAO,CACN,gCAAI,SAAS,EAAC,kBAAkB,gBAAY,qBAAqB,aAChE,uBAAC,wBAAa,CAAC,WAAW,KAAG,EAC7B,uBAAC,wBAAa,CAAC,WAAW,KAAG,EAC7B,uBAAC,wBAAa,CAAC,WAAW,KAAG,EAC7B,uBAAC,wBAAa,CAAC,WAAW,KAAG,IACzB,CACL,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@automattic/components");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const i18n_calypso_1 = require("i18n-calypso");
+require("./style.scss");
+const ChecklistItem = ({ task, isPrimaryAction }) => {
+    const isRtl = (0, i18n_calypso_1.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 ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)('checklist-item__task', {
+            completed: completed,
+            pending: !completed,
+            enabled: !disabled,
+            disabled: disabled,
+        }), children: isPrimaryAction ? ((0, jsx_runtime_1.jsx)(components_1.Button, { className: "checklist-item__checklist-primary-button", disabled: disabled, "data-task": id, onClick: handlePrimaryAction, children: title })) : ((0, jsx_runtime_1.jsxs)(components_1.Button, { className: "checklist-item__task-content", disabled: disabled, "data-task": id, onClick: actionDispatch, children: [completed && (
+                // show checkmark for completed tasks regardless if they are disabled or kept active
+                (0, jsx_runtime_1.jsx)("div", { className: "checklist-item__checkmark-container", children: (0, jsx_runtime_1.jsx)(components_1.Gridicon, { "aria-label": (0, i18n_calypso_1.translate)('Task complete'), className: "checklist-item__checkmark", icon: "checkmark", size: 18 }) })), (0, jsx_runtime_1.jsx)("span", { className: "checklist-item__text", children: title }), task.badge_text ? (0, jsx_runtime_1.jsx)(components_1.Badge, { type: "info-blue", children: task.badge_text }) : null, shouldDisplayTaskCounter && ((0, jsx_runtime_1.jsxs)("span", { className: "checklist-item__counter", children: [task.repetition_count, "/", task.target_repetitions] })), shouldDisplayChevron && ((0, jsx_runtime_1.jsx)(components_1.Gridicon, { "aria-label": (0, i18n_calypso_1.translate)('Task enabled'), className: "checklist-item__chevron", icon: `chevron-${isRtl ? 'left' : 'right'}`, size: 18 })), subtitle && (0, jsx_runtime_1.jsx)("p", { className: "checklist-item__subtext", children: subtitle })] })) }));
+};
+ChecklistItem.Placeholder = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "checklist-item__task-content is-placeholder", children: (0, jsx_runtime_1.jsx)("div", { className: "checklist-item__content", children: (0, jsx_runtime_1.jsx)("div", {}) }) }));
+};
+exports.default = ChecklistItem;
+//# sourceMappingURL=index.js.map

package/dist/cjs/checklist-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checklist-item/index.tsx"],"names":[],"mappings":";;;;AAAA,uDAAiE;AACjE,oEAAoC;AACpC,+CAAiD;AAGjD,wBAAsB;AAEtB,MAAM,aAAa,GAAG,CAAE,EAAE,IAAI,EAAE,eAAe,EAA6C,EAAG,EAAE;IAChG,MAAM,KAAK,GAAG,IAAA,qBAAM,GAAE,CAAC;IACvB,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAE1E,2FAA2F;IAC3F,MAAM,oBAAoB,GAAG,CAAE,SAAS,IAAI,CAAE,QAAQ,IAAI,CAAE,IAAI,CAAC,UAAU,CAAC;IAE5E,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAChC,YAAY,CAAC,UAAU,CAAE,oBAAoB,CAAE,CAAC;QAChD,cAAc,IAAI,cAAc,EAAE,CAAC;IACpC,CAAC,CAAC;IAEF,2EAA2E;IAC3E,MAAM,wBAAwB,GAC7B,IAAI,CAAC,kBAAkB;QACvB,IAAI,KAAK,IAAI,CAAC,gBAAgB;QAC9B,SAAS,KAAK,IAAI,CAAC,gBAAgB,CAAC;IAErC,OAAO,CACN,+BACC,SAAS,EAAG,IAAA,oBAAU,EAAE,sBAAsB,EAAE;YAC/C,SAAS,EAAE,SAAS;YACpB,OAAO,EAAE,CAAE,SAAS;YACpB,OAAO,EAAE,CAAE,QAAQ;YACnB,QAAQ,EAAE,QAAQ;SAClB,CAAE,YAED,eAAe,CAAC,CAAC,CAAC,CACnB,uBAAC,mBAAM,IACN,SAAS,EAAC,0CAA0C,EACpD,QAAQ,EAAG,QAAQ,eACP,EAAE,EACd,OAAO,EAAG,mBAAmB,YAE3B,KAAK,GACC,CACT,CAAC,CAAC,CAAC,CACH,wBAAC,mBAAM,IACN,SAAS,EAAC,8BAA8B,EACxC,QAAQ,EAAG,QAAQ,eACP,EAAE,EACd,OAAO,EAAG,cAAc,aAEtB,SAAS,IAAI;gBACd,oFAAoF;gBACpF,gCAAK,SAAS,EAAC,qCAAqC,YACnD,uBAAC,qBAAQ,kBACK,IAAA,wBAAS,EAAE,eAAe,CAAE,EACzC,SAAS,EAAC,2BAA2B,EACrC,IAAI,EAAC,WAAW,EAChB,IAAI,EAAG,EAAE,GACR,GACG,CACN,EACD,iCAAM,SAAS,EAAC,sBAAsB,YAAG,KAAK,GAAS,EACrD,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,uBAAC,kBAAK,IAAC,IAAI,EAAC,WAAW,YAAG,IAAI,CAAC,UAAU,GAAU,CAAC,CAAC,CAAC,IAAI,EAC5E,wBAAwB,IAAI,CAC7B,kCAAM,SAAS,EAAC,yBAAyB,aACtC,IAAI,CAAC,gBAAgB,OAAK,IAAI,CAAC,kBAAkB,IAC7C,CACP,EACC,oBAAoB,IAAI,CACzB,uBAAC,qBAAQ,kBACK,IAAA,wBAAS,EAAE,cAAc,CAAE,EACxC,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAG,WAAY,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAQ,EAAE,EAC9C,IAAI,EAAG,EAAE,GACR,CACF,EACC,QAAQ,IAAI,8BAAG,SAAS,EAAC,yBAAyB,YAAG,QAAQ,GAAM,IAC7D,CACT,GACG,CACL,CAAC;AACH,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,GAAG,EAAE;IAChC,OAAO,CACN,gCAAK,SAAS,EAAC,6CAA6C,YAC3D,gCAAK,SAAS,EAAC,yBAAyB,YACvC,iCAAW,GACN,GACD,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,aAAa,CAAC"}

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setUpActionsForTasks = exports.Launchpad = 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_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("./types"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +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"}

package/dist/cjs/launchpad.js

@@ -0,0 +1,19 @@
+"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.__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, {})) }));
+};
+exports.default = Launchpad;
+//# sourceMappingURL=launchpad.js.map

package/dist/cjs/launchpad.js.map

@@ -0,0 +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"}

package/dist/cjs/setup-actions.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setUpActionsForTasks = void 0;
+const tslib_1 = require("tslib");
+const calypso_config_1 = tslib_1.__importDefault(require("@automattic/calypso-config"));
+const data_stores_1 = require("@automattic/data-stores");
+const viewport_1 = require("@automattic/viewport");
+const url_1 = require("@wordpress/url");
+const wpcom_proxy_request_1 = tslib_1.__importDefault(require("wpcom-proxy-request"));
+const TASKS_TO_COMPLETE_ON_CLICK = [
+    'add_about_page',
+    'manage_paid_newsletter_plan',
+    'earn_money',
+    'manage_subscribers',
+    'connect_social_media',
+    'drive_traffic',
+];
+const setUpActionsForTasks = ({ siteSlug, tasks, tracksData, extraActions, uiContext = 'calypso', }) => {
+    const { recordTracksEvent, checklistSlug, tasklistCompleted, launchpadContext } = tracksData;
+    const { setShareSiteModalIsOpen, siteLaunched, setActiveChecklist } = extraActions;
+    //Record click events for tasks
+    const recordTaskClickTracksEvent = (task) => {
+        recordTracksEvent('calypso_launchpad_task_clicked', {
+            checklist_slug: checklistSlug,
+            checklist_completed: tasklistCompleted,
+            task_id: task.id,
+            is_completed: task.completed,
+            context: launchpadContext,
+            order: task.order,
+        });
+    };
+    // Add actions to the tasks.
+    return tasks.map((task) => {
+        let action;
+        let logMissingCalypsoPath = false;
+        if (uiContext === 'calypso' && task.calypso_path !== undefined) {
+            let targetPath = task.calypso_path;
+            if (task.id === 'drive_traffic' && !(0, viewport_1.isMobile)()) {
+                targetPath = (0, url_1.addQueryArgs)(targetPath, { tour: 'marketingConnectionsTour' });
+            }
+            // Enable task in 'calypso' context
+            if (task.id === 'setup_general') {
+                task.disabled = false;
+            }
+            action = () => {
+                if (siteSlug && TASKS_TO_COMPLETE_ON_CLICK.includes(task.id)) {
+                    (0, data_stores_1.updateLaunchpadSettings)(siteSlug, {
+                        checklist_statuses: { [task.id]: true },
+                    });
+                }
+                window.location.assign(targetPath);
+            };
+        }
+        else {
+            switch (task.id) {
+                case 'share_site':
+                    action = () => {
+                        setShareSiteModalIsOpen?.(true);
+                    };
+                    break;
+                case 'site_title':
+                    logMissingCalypsoPath = true;
+                    action = () => {
+                        window.location.assign(`/settings/general/${siteSlug}`);
+                    };
+                    break;
+                case 'domain_claim':
+                case 'domain_upsell':
+                case 'domain_customize':
+                    logMissingCalypsoPath = true;
+                    action = () => {
+                        window.location.assign(`/domains/add/${siteSlug}`);
+                    };
+                    break;
+                case 'drive_traffic':
+                    logMissingCalypsoPath = true;
+                    action = () => {
+                        const url = (0, viewport_1.isMobile)()
+                            ? `/marketing/connections/${siteSlug}`
+                            : `/marketing/connections/${siteSlug}?tour=marketingConnectionsTour`;
+                        window.location.assign(url);
+                    };
+                    break;
+                case 'add_new_page':
+                    logMissingCalypsoPath = true;
+                    action = () => {
+                        window.location.assign(`/page/${siteSlug}`);
+                    };
+                    break;
+                case 'edit_page':
+                    logMissingCalypsoPath = true;
+                    action = () => {
+                        window.location.assign(`/pages/${siteSlug}`);
+                    };
+                    break;
+                case 'update_about_page':
+                    logMissingCalypsoPath = true;
+                    action = () => {
+                        window.location.assign(`/page/${siteSlug}/${task?.extra_data?.about_page_id}`);
+                    };
+                    break;
+                case 'customize_welcome_message':
+                    logMissingCalypsoPath = true;
+                    action = () => {
+                        if (calypso_config_1.default.isEnabled('settings/newsletter-settings-page')) {
+                            window.location.assign(`/settings/newsletter/${siteSlug}`);
+                        }
+                        else {
+                            window.location.assign(`/settings/reading/${siteSlug}#newsletter-settings`);
+                        }
+                    };
+                    break;
+                case 'manage_subscribers':
+                    logMissingCalypsoPath = true;
+                    action = () => {
+                        window.location.assign(`/subscribers/${siteSlug}`);
+                    };
+                    break;
+                case 'site_launched':
+                case 'blog_launched':
+                case 'videopress_launched':
+                case 'link_in_bio_launched':
+                    action = async () => {
+                        await (0, wpcom_proxy_request_1.default)({
+                            path: `/sites/${siteSlug}/launch`,
+                            apiVersion: '1.1',
+                            method: 'post',
+                        });
+                        siteLaunched?.();
+                    };
+                    break;
+                default:
+                    logMissingCalypsoPath = true;
+                    break;
+            }
+        }
+        if (logMissingCalypsoPath) {
+            recordTracksEvent('calypso_launchpad_task_missing_calypso_path', {
+                checklist_slug: checklistSlug,
+                task_id: task.id,
+                is_completed: task.completed,
+                context: launchpadContext,
+            });
+        }
+        const actionDispatch = () => {
+            recordTaskClickTracksEvent(task);
+            if (siteSlug && setActiveChecklist) {
+                setActiveChecklist(siteSlug, checklistSlug);
+            }
+            action?.();
+        };
+        return { ...task, actionDispatch };
+    });
+};
+exports.setUpActionsForTasks = setUpActionsForTasks;
+//# sourceMappingURL=setup-actions.js.map

package/dist/cjs/setup-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-actions.js","sourceRoot":"","sources":["../../src/setup-actions.ts"],"names":[],"mappings":"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"}

package/dist/cjs/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":""}

package/dist/esm/badge/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import './style.scss';
+const Badge = (props) => {
+    const className = props.className;
+    const type = props.type || 'warning';
+    return (_jsx("div", { className: classNames(`badge badge--${type}`, className), children: props.children }));
+};
+export default Badge;
+//# sourceMappingURL=index.js.map

package/dist/esm/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,cAAc,CAAC;AAgBtB,MAAM,KAAK,GAA0C,CAAE,KAAK,EAAG,EAAE;IAChE,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,SAAS,CAAC;IACrC,OAAO,CACN,cAAK,SAAS,EAAG,UAAU,CAAE,gBAAiB,IAAK,EAAE,EAAE,SAAS,CAAE,YAAK,KAAK,CAAC,QAAQ,GAAQ,CAC7F,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}