@automattic/launchpad 1.0.0 → 1.0.1

package/.storybook/main.ts

@@ -0,0 +1,16 @@
+import storybookDefaultConfig from '@automattic/calypso-storybook';
+const config = storybookDefaultConfig();
+
+export default {
+	...config,
+	staticDirs: [ ...( config.staticDirs ?? [] ), '../static' ],
+	typescript: {
+		...config.typescript,
+		reactDocgen: 'react-docgen-typescript',
+	},
+	core: {
+		...config.core,
+		disableTelemetry: true,
+	},
+	addons: [ ...( config.addons ?? [] ), '@storybook/addon-a11y' ],
+};

package/.storybook/preview.ts

@@ -0,0 +1,6 @@
+import '@automattic/calypso-color-schemes';
+import '@wordpress/components/build-style/style.css';
+import { initialize, mswLoader } from 'msw-storybook-addon';
+initialize();
+
+export const loaders = [ mswLoader ];

package/README.md

@@ -17,7 +17,8 @@ function App( { siteSlug, checklistSlug } ) {
     return (
         <Launchpad
             siteSlug={ siteSlug }
-            checklistSlug={ checklistSlug } />
+            checklistSlug={ checklistSlug }
+            launchpadContext='my-app-context' />
     );
 }
 ```
@@ -30,6 +31,14 @@ 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).
+The 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.
+
+### launchpadContext
+
+A string that specifies what context we are showing the launchpad in. This will generally identify the page or section of the UI where the launchpad is being displayed.
+
+## LaunchpadInternal
+
+For more complex situations, the `LaunchpadInternal` component is also available, but use of this component is **not recommended**. We should aim to improve the API for the `Launchpad` component first, as the `Launchpad` component wires in a number of non-obvious behaviours that we want to use if at all possible.

package/dist/cjs/action-components/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareSiteModal = void 0;
+var share_site_modal_1 = require("./share-site-modal");
+Object.defineProperty(exports, "ShareSiteModal", { enumerable: true, get: function () { return __importDefault(share_site_modal_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/action-components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/action-components/index.ts"],"names":[],"mappings":";;;AAAA,uDAA+D;AAAtD,mIAAA,OAAO,OAAkB"}

package/dist/cjs/action-components/share-site-modal/index.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@automattic/components");
+const data_stores_1 = require("@automattic/data-stores");
+const react_query_1 = require("@tanstack/react-query");
+const components_2 = require("@wordpress/components");
+const icons_1 = require("@wordpress/icons");
+const i18n_calypso_1 = require("i18n-calypso");
+const react_1 = require("react");
+require("./style.scss");
+const ShareSiteModal = ({ setModalIsOpen, site }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const queryClient = (0, react_query_1.useQueryClient)();
+    const getSiteSlug = (site) => {
+        if (!site) {
+            return null;
+        }
+        if (site.slug) {
+            return site.slug;
+        }
+        if (site.URL) {
+            return new URL(site.URL).host;
+        }
+        return null;
+    };
+    const siteSlug = getSiteSlug(site);
+    const [clipboardCopied, setClipboardCopied] = (0, react_1.useState)(false);
+    const clipboardTextEl = (0, react_1.useRef)(null);
+    const copyHandler = async () => {
+        navigator.clipboard.writeText(`https://${siteSlug}`);
+        if (siteSlug) {
+            await (0, data_stores_1.updateLaunchpadSettings)(siteSlug, {
+                checklist_statuses: { share_site: true },
+            });
+        }
+        queryClient.invalidateQueries({ queryKey: ['launchpad'] });
+        setClipboardCopied(true);
+        setTimeout(() => setClipboardCopied(false), 3000);
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_2.Modal, { onRequestClose: () => setModalIsOpen(false), className: "share-site-modal__modal", title: "", children: (0, jsx_runtime_1.jsxs)("div", { className: "share-site-modal__modal-content", children: [(0, jsx_runtime_1.jsxs)("div", { className: "share-site-modal__modal-text", children: [(0, jsx_runtime_1.jsx)("h1", { className: "share-site-modal__modal-heading", children: translate('Share your site') }), (0, jsx_runtime_1.jsx)("p", { className: "share-site-modal__modal-body", children: translate('Now you can head over to your site and share it with the world.') })] }), (0, jsx_runtime_1.jsx)("div", { className: "share-site-modal__modal-actions", children: (0, jsx_runtime_1.jsxs)("div", { className: "share-site-modal__modal-site", children: [(0, jsx_runtime_1.jsxs)("div", { className: "share-site-modal__modal-domain", children: [(0, jsx_runtime_1.jsx)("p", { className: "share-site-modal__modal-domain-text", ref: clipboardTextEl, children: siteSlug }), (0, jsx_runtime_1.jsx)(components_1.Popover, { className: "share-site-modal__popover", isVisible: clipboardCopied, context: clipboardTextEl.current, position: "top", children: translate('Copied to clipboard!') })] }), (0, jsx_runtime_1.jsxs)(components_2.Button, { onClick: copyHandler, className: "share-site-modal__modal-view-site", disabled: !siteSlug, children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { icon: icons_1.link, size: 22 }), (0, jsx_runtime_1.jsx)("span", { className: "share-site-modal__modal-view-site-text", children: translate('Copy') })] })] }) })] }) }) }));
+};
+exports.default = ShareSiteModal;
+//# sourceMappingURL=index.js.map

package/dist/cjs/action-components/share-site-modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/action-components/share-site-modal/index.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/action-components/share-site-modal/style.scss

@@ -0,0 +1,159 @@
+@import "@automattic/typography/styles/variables";
+
+.share-site-modal__modal {
+	max-width: 640px;
+
+	.components-modal__header {
+		padding: 48px;
+	}
+
+	.components-modal__content {
+		margin: 0;
+		padding: 0;
+	}
+
+	.share-site-modal__modal-content {
+		padding: 48px;
+		padding-bottom: 40px;
+		display: flex;
+		flex-direction: column;
+		gap: 32px;
+	}
+
+	.share-site-modal__modal-heading {
+		color: var(--studio-gray-100);
+		font-family: Recoleta, "Noto Serif", Georgia, "Times New Roman", Times, serif;
+		font-size: 2rem;
+		line-height: 40px;
+		font-weight: 400;
+		letter-spacing: 0.2px;
+		margin: 0;
+		padding-bottom: 8px;
+	}
+
+	.share-site-modal__modal-domain {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.share-site-modal__modal-body,
+	.share-site-modal__modal-domain-text {
+		margin: 0;
+		color: var(--studio-gray-80);
+		font-size: 1rem;
+		line-height: 24px;
+	}
+
+	.share-site-modal__modal-domain-text {
+		padding: 0 8px;
+
+		// prevent text overflow
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.share-site-modal__modal-buttons {
+		display: flex;
+		flex-direction: row;
+		justify-content: end;
+		gap: 16px;
+	}
+
+	.share-site-modal__modal-site {
+		padding: 8px;
+		background: var(--studio-gray-0);
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.launchpad__clipboard-button {
+		opacity: 0;
+	}
+
+	.launchpad__clipboard-button:focus {
+		opacity: 1;
+	}
+
+	.share-site-modal__modal-site:hover {
+		.launchpad__clipboard-button {
+			opacity: 1;
+		}
+	}
+
+	.share-site-modal__modal-customize {
+		color: var(--studio-blue-50);
+		font-size: 0.875rem;
+		display: inline-flex;
+		flex-direction: row;
+		justify-content: start;
+		gap: 6px;
+		padding: 0;
+		margin: 0;
+		margin-top: 16px;
+	}
+
+	.share-site-modal__modal-upsell {
+		border-top: 1px solid var(--studio-gray-5);
+		background: var(--studio-gray-0);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 32px 48px;
+		gap: 32px;
+
+		.components-button {
+			height: 42px;
+		}
+	}
+
+	.share-site-modal__modal-upsell-content p {
+		margin-bottom: 0;
+	}
+
+	.share-site-modal__modal-upsell-content-highlight {
+		font-weight: bold;
+	}
+
+	.share-site-modal__modal-view-site {
+		display: flex;
+		gap: 4px;
+
+		font-weight: 500;
+		/* stylelint-disable-next-line */
+		font-size: 14px;
+		line-height: 20px;
+		letter-spacing: -0.154px;
+		color: #101517;
+	}
+
+	.share-site-modal__modal-view-site:visited {
+		color: #101517;
+	}
+
+	.share-site-modal__modal-view-site:hover:not(:disabled) {
+		text-decoration: underline;
+	}
+}
+
+.share-site-modal__popover {
+	outline: none;
+	z-index: 100000;
+	.popover__inner {
+		border: 0;
+		box-shadow: none;
+		border-radius: 2px;
+		color: var(--color-text-inverted);
+		background: var(--color-neutral-60);
+		font-size: $font-body-extra-small;
+		padding: 6px 10px;
+		text-align: left;
+	}
+
+	.popover__arrow {
+		display: none;
+	}
+}

package/dist/cjs/badge/index.js

@@ -2,12 +2,12 @@
 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 clsx_1 = tslib_1.__importDefault(require("clsx"));
 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 }));
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)(`badge badge--${type}`, className), children: props.children });
 };
 exports.default = Badge;
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":";;;;AAAA,wDAAwB;AAExB,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,gCAAK,SAAS,EAAG,IAAA,cAAI,EAAE,gBAAiB,IAAK,EAAE,EAAE,SAAS,CAAE,YAAK,KAAK,CAAC,QAAQ,GAAQ,CAAC;AAChG,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC"}

package/dist/cjs/checklist/index.js

@@ -1,18 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Placeholder = void 0;
 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"));
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const react_1 = require("react");
+const checklist_item_1 = require("../checklist-item");
 require("./style.scss");
-const Checklist = ({ tasks, makeLastTaskPrimaryAction }) => {
-    return ((0, jsx_runtime_1.jsx)("ul", { className: (0, classnames_1.default)('checklist__tasks', {
+const Checklist = ({ children, makeLastTaskPrimaryAction }) => {
+    const lastChildIndex = react_1.Children.count(children) - 1;
+    return ((0, jsx_runtime_1.jsx)("ul", { className: (0, clsx_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))) }));
+        }), "aria-label": "Launchpad Checklist", children: react_1.Children.map(children || [], (child, index) => {
+            if (index === lastChildIndex) {
+                return (0, react_1.cloneElement)(child, { isPrimaryAction: makeLastTaskPrimaryAction });
+            }
+            return child;
+        }) }));
 };
-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, {})] }));
+const Placeholder = () => {
+    return ((0, jsx_runtime_1.jsxs)("ul", { className: "checklist__tasks", "aria-label": "Launchpad Checklist", children: [(0, jsx_runtime_1.jsx)(checklist_item_1.Placeholder, {}), (0, jsx_runtime_1.jsx)(checklist_item_1.Placeholder, {}), (0, jsx_runtime_1.jsx)(checklist_item_1.Placeholder, {}), (0, jsx_runtime_1.jsx)(checklist_item_1.Placeholder, {})] }));
 };
+exports.Placeholder = Placeholder;
 exports.default = Checklist;
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checklist/index.tsx"],"names":[],"mappings":";;;;;AAAA,wDAAwB;AACxB,iCAAgG;AAChG,sDAA2F;AAC3F,wBAAsB;AAStB,MAAM,SAAS,GAAgB,CAAE,EAAE,QAAQ,EAAE,yBAAyB,EAAE,EAAG,EAAE;IAC5E,MAAM,cAAc,GAAG,gBAAQ,CAAC,KAAK,CAAE,QAAQ,CAAE,GAAG,CAAC,CAAC;IAEtD,OAAO,CACN,+BACC,SAAS,EAAG,IAAA,cAAI,EAAE,kBAAkB,EAAE;YACrC,+BAA+B,EAAE,yBAAyB;SAC1D,CAAE,gBACQ,qBAAqB,YAE9B,gBAAQ,CAAC,GAAG,CAAE,QAAQ,IAAI,EAAE,EAAE,CAAE,KAAK,EAAE,KAAK,EAAG,EAAE;YAClD,IAAK,KAAK,KAAK,cAAc,EAAG,CAAC;gBAChC,OAAO,IAAA,oBAAY,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,yBAAyB,EAAE,CAAE,CAAC;YAC9E,CAAC;YACD,OAAO,KAAK,CAAC;QACd,CAAC,CAAE,GACC,CACL,CAAC;AACH,CAAC,CAAC;AAEK,MAAM,WAAW,GAAG,GAAG,EAAE;IAC/B,OAAO,CACN,gCAAI,SAAS,EAAC,kBAAkB,gBAAY,qBAAqB,aAChE,uBAAC,4BAAwB,KAAG,EAC5B,uBAAC,4BAAwB,KAAG,EAC5B,uBAAC,4BAAwB,KAAG,EAC5B,uBAAC,4BAAwB,KAAG,IACxB,CACL,CAAC;AACH,CAAC,CAAC;AATW,QAAA,WAAW,eAStB;AAEF,kBAAe,SAAS,CAAC"}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithMakeLastTaskPrimaryAction = exports.Default = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const checklist_item_1 = tslib_1.__importDefault(require("../checklist-item"));
+const _1 = tslib_1.__importDefault(require("./"));
+const meta = {
+    title: 'Launchpad/Checklist',
+    component: _1.default,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)("div", { style: { width: 300 }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    args: {
+        children: [
+            (0, jsx_runtime_1.jsx)(checklist_item_1.default, { task: { id: '1', title: 'Task 1', completed: true, disabled: true }, onClick: () => { } }, "1"),
+            (0, jsx_runtime_1.jsx)(checklist_item_1.default, { task: { id: '2', title: 'Task 2', disabled: false, completed: false }, onClick: () => { } }, "2"),
+            (0, jsx_runtime_1.jsx)(checklist_item_1.default, { task: { id: '3', title: 'Task 3', disabled: false, completed: false }, onClick: () => { } }, "3"),
+        ],
+    },
+};
+exports.Default = {};
+exports.WithMakeLastTaskPrimaryAction = {
+    args: {
+        makeLastTaskPrimaryAction: true,
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/checklist/index.stories.tsx"],"names":[],"mappings":";;;;;AAAA,+EAA8C;AAC9C,kDAA2B;AAG3B,MAAM,IAAI,GAA6B;IACtC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,UAAS;IACpB,UAAU,EAAE;QACX,CAAE,KAAK,EAAG,EAAE,CAAC,CACZ,gCAAK,KAAK,EAAG,EAAE,KAAK,EAAE,GAAG,EAAE,YAC1B,uBAAC,KAAK,KAAG,GACJ,CACN;KACD;IACD,IAAI,EAAE;QACL,QAAQ,EAAE;YACT,uBAAC,wBAAa,IAEb,IAAI,EAAG,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EACpE,OAAO,EAAG,GAAG,EAAE,GAAE,CAAC,IAFd,GAAG,CAGN;YACF,uBAAC,wBAAa,IAEb,IAAI,EAAG,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EACtE,OAAO,EAAG,GAAG,EAAE,GAAE,CAAC,IAFd,GAAG,CAGN;YACF,uBAAC,wBAAa,IAEb,IAAI,EAAG,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EACtE,OAAO,EAAG,GAAG,EAAE,GAAE,CAAC,IAFd,GAAG,CAGN;SACF;KACD;CACD,CAAC;AAGW,QAAA,OAAO,GAAU,EAAE,CAAC;AAEpB,QAAA,6BAA6B,GAAU;IACnD,IAAI,EAAE;QACL,yBAAyB,EAAE,IAAI;KAC/B;CACD,CAAC;AAEF,kBAAe,IAAI,CAAC"}

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

@@ -1,35 +1,52 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Placeholder = void 0;
 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 components_2 = require("@wordpress/components");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const i18n_calypso_1 = require("i18n-calypso");
 require("./style.scss");
-const ChecklistItem = ({ task, isPrimaryAction }) => {
+const ChecklistItem = ({ task, isPrimaryAction, expandable, onClick }) => {
     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();
+    const { id, completed, disabled = false, title, subtitle, actionDispatch } = task;
+    // If the task says we should use the Calypso path, ensure we use that link for the button's href.
+    // This allows the UI routing code to hook into the URL changes and should reduce full-page (re)loads
+    // when clicking on the task list items.
+    const buttonHref = task.useCalypsoPath && task.calypso_path ? task.calypso_path : undefined;
+    // The Button component does not accept the `disabled` and `href` props together.
+    // This code will only add href property if the disabled variable is false.
+    const buttonProps = {
+        disabled,
+        ...(disabled ? {} : { href: buttonHref }),
     };
+    const onClickHandler = onClick || actionDispatch;
+    const isClickable = !!(buttonProps.href || onClickHandler);
+    // Display chevron if task is incomplete.
+    // Don't display chevron and badge at the same time.
+    // Don't display chevron if item is not clickable.
+    const shouldDisplayChevron = !completed && !disabled && !task.badge_text && isClickable;
     // Display task counter if task is incomplete and has the count properties;
     const shouldDisplayTaskCounter = task.target_repetitions &&
         null !== task.repetition_count &&
         undefined !== task.repetition_count;
-    return ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)('checklist-item__task', {
+    // Make sure the button keeps the button styles if it is not clickable.
+    const buttonClassName = isClickable ? '' : 'components-button';
+    const ButtonElement = isClickable ? components_2.Button : 'div';
+    return ((0, jsx_runtime_1.jsxs)("li", { className: (0, clsx_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 })] })) }));
+            expanded: expandable && expandable.isOpen,
+        }), children: [isPrimaryAction ? ((0, jsx_runtime_1.jsx)(ButtonElement, { className: (0, clsx_1.default)('checklist-item__checklist-primary-button', buttonClassName), "data-task": id, onClick: onClickHandler, ...buttonProps, children: title })) : ((0, jsx_runtime_1.jsxs)(ButtonElement, { className: (0, clsx_1.default)('checklist-item__task-content', buttonClassName), "data-task": id, onClick: onClickHandler, ...buttonProps, 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 })] })), expandable && expandable.isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "checklist-item__expanded-content", children: [expandable.content, expandable.action && ((0, jsx_runtime_1.jsx)(components_2.Button, { className: "checklist-item__checklist-expanded-action-button", onClick: expandable.action.onClick, children: expandable.action.label }))] }))] }));
 };
-ChecklistItem.Placeholder = () => {
+const 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.Placeholder = Placeholder;
 exports.default = ChecklistItem;
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checklist-item/index.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandedWithAction = exports.Expanded = exports.WithSubtitle = exports.WithTaskCounter = exports.WithBadgetText = exports.Disabled = exports.Completed = exports.Default = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const _1 = tslib_1.__importDefault(require("./"));
+const meta = {
+    title: 'Launchpad/ChecklistItem',
+    component: _1.default,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)("div", { style: { width: 300 }, children: (0, jsx_runtime_1.jsx)("ul", { className: "checklist__tasks", children: (0, jsx_runtime_1.jsx)(Story, {}) }) })),
+    ],
+};
+const baseTask = {
+    id: '1',
+    title: 'Task 1',
+    completed: false,
+    disabled: false,
+};
+exports.Default = {
+    args: {
+        onClick: () => { },
+        task: baseTask,
+    },
+};
+exports.Completed = {
+    args: {
+        onClick: () => { },
+        task: { ...baseTask, completed: true },
+    },
+};
+exports.Disabled = {
+    args: {
+        onClick: () => { },
+        task: { ...baseTask, disabled: true },
+    },
+};
+exports.WithBadgetText = {
+    args: {
+        onClick: () => { },
+        task: { ...baseTask, badge_text: 'Upgrade plan' },
+    },
+};
+exports.WithTaskCounter = {
+    args: {
+        onClick: () => { },
+        task: { ...baseTask, repetition_count: 1, target_repetitions: 3 },
+    },
+};
+exports.WithSubtitle = {
+    args: {
+        onClick: () => { },
+        task: { ...baseTask, subtitle: 'This is a subtitle' },
+    },
+};
+exports.Expanded = {
+    args: {
+        task: baseTask,
+        expandable: {
+            content: (0, jsx_runtime_1.jsx)("p", { children: "This is the expanded content." }),
+            isOpen: true,
+        },
+    },
+};
+exports.ExpandedWithAction = {
+    args: {
+        task: baseTask,
+        expandable: {
+            content: (0, jsx_runtime_1.jsx)("p", { children: "This is the expanded content." }),
+            isOpen: true,
+            action: {
+                label: 'Next',
+                onClick: () => { },
+            },
+        },
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/checklist-item/index.stories.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA+B;AAG/B,MAAM,IAAI,GAAiC;IAC1C,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,UAAa;IACxB,UAAU,EAAE;QACX,CAAE,KAAK,EAAG,EAAE,CAAC,CACZ,gCAAK,KAAK,EAAG,EAAE,KAAK,EAAE,GAAG,EAAE,YAC1B,+BAAI,SAAS,EAAC,kBAAkB,YAC/B,uBAAC,KAAK,KAAG,GACL,GACA,CACN;KACD;CACD,CAAC;AAGF,MAAM,QAAQ,GAAG;IAChB,EAAE,EAAE,GAAG;IACP,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;CACf,CAAC;AAEW,QAAA,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,IAAI,EAAE,QAAQ;KACd;CACD,CAAC;AAEW,QAAA,SAAS,GAAU;IAC/B,IAAI,EAAE;QACL,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,IAAI,EAAE,EAAE,GAAG,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE;KACtC;CACD,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC9B,IAAI,EAAE;QACL,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,IAAI,EAAE,EAAE,GAAG,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;KACrC;CACD,CAAC;AAEW,QAAA,cAAc,GAAU;IACpC,IAAI,EAAE;QACL,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,IAAI,EAAE,EAAE,GAAG,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE;KACjD;CACD,CAAC;AAEW,QAAA,eAAe,GAAU;IACrC,IAAI,EAAE;QACL,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,IAAI,EAAE,EAAE,GAAG,QAAQ,EAAE,gBAAgB,EAAE,CAAC,EAAE,kBAAkB,EAAE,CAAC,EAAE;KACjE;CACD,CAAC;AAEW,QAAA,YAAY,GAAU;IAClC,IAAI,EAAE;QACL,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,IAAI,EAAE,EAAE,GAAG,QAAQ,EAAE,QAAQ,EAAE,oBAAoB,EAAE;KACrD;CACD,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC9B,IAAI,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE;YACX,OAAO,EAAE,0EAAoC;YAC7C,MAAM,EAAE,IAAI;SACZ;KACD;CACD,CAAC;AAEW,QAAA,kBAAkB,GAAU;IACxC,IAAI,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE;YACX,OAAO,EAAE,0EAAoC;YAC7C,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE;gBACP,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;aACjB;SACD;KACD;CACD,CAAC;AAEF,kBAAe,IAAI,CAAC"}