@automattic/launchpad 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (145) hide show
  1. package/.storybook/main.ts +16 -0
  2. package/.storybook/preview.ts +6 -0
  3. package/README.md +11 -2
  4. package/dist/cjs/action-components/index.js +6 -0
  5. package/dist/cjs/action-components/index.js.map +1 -0
  6. package/dist/cjs/action-components/share-site-modal/index.js +44 -0
  7. package/dist/cjs/action-components/share-site-modal/index.js.map +1 -0
  8. package/dist/cjs/action-components/share-site-modal/style.scss +159 -0
  9. package/dist/cjs/badge/index.js +2 -2
  10. package/dist/cjs/badge/index.js.map +1 -1
  11. package/dist/cjs/checklist/index.js +16 -8
  12. package/dist/cjs/checklist/index.js.map +1 -1
  13. package/dist/cjs/checklist/index.stories.js +29 -0
  14. package/dist/cjs/checklist/index.stories.js.map +1 -0
  15. package/dist/cjs/checklist-item/index.js +30 -13
  16. package/dist/cjs/checklist-item/index.js.map +1 -1
  17. package/dist/cjs/checklist-item/index.stories.js +79 -0
  18. package/dist/cjs/checklist-item/index.stories.js.map +1 -0
  19. package/dist/cjs/checklist-item/style.scss +142 -22
  20. package/dist/cjs/index.js +6 -1
  21. package/dist/cjs/index.js.map +1 -1
  22. package/dist/cjs/launchpad-container/index.js +11 -0
  23. package/dist/cjs/launchpad-container/index.js.map +1 -0
  24. package/dist/cjs/launchpad-container/style.scss +59 -0
  25. package/dist/cjs/launchpad-internal.js +40 -0
  26. package/dist/cjs/launchpad-internal.js.map +1 -0
  27. package/dist/cjs/launchpad-internal.stories.js +45 -0
  28. package/dist/cjs/launchpad-internal.stories.js.map +1 -0
  29. package/dist/cjs/launchpad.js +39 -10
  30. package/dist/cjs/launchpad.js.map +1 -1
  31. package/dist/cjs/msw/link-in-bio.js +68 -0
  32. package/dist/cjs/msw/link-in-bio.js.map +1 -0
  33. package/dist/cjs/msw/resolver.js +19 -0
  34. package/dist/cjs/msw/resolver.js.map +1 -0
  35. package/dist/cjs/msw/setup-free.js +88 -0
  36. package/dist/cjs/msw/setup-free.js.map +1 -0
  37. package/dist/cjs/setup-actions.js +51 -54
  38. package/dist/cjs/setup-actions.js.map +1 -1
  39. package/dist/cjs/use-tracking/index.js +72 -0
  40. package/dist/cjs/use-tracking/index.js.map +1 -0
  41. package/dist/esm/action-components/index.js +2 -0
  42. package/dist/esm/action-components/index.js.map +1 -0
  43. package/dist/esm/action-components/share-site-modal/index.js +42 -0
  44. package/dist/esm/action-components/share-site-modal/index.js.map +1 -0
  45. package/dist/esm/action-components/share-site-modal/style.scss +159 -0
  46. package/dist/esm/badge/index.js +2 -2
  47. package/dist/esm/badge/index.js.map +1 -1
  48. package/dist/esm/checklist/index.js +14 -8
  49. package/dist/esm/checklist/index.js.map +1 -1
  50. package/dist/esm/checklist/index.stories.js +25 -0
  51. package/dist/esm/checklist/index.stories.js.map +1 -0
  52. package/dist/esm/checklist-item/index.js +29 -14
  53. package/dist/esm/checklist-item/index.js.map +1 -1
  54. package/dist/esm/checklist-item/index.stories.js +75 -0
  55. package/dist/esm/checklist-item/index.stories.js.map +1 -0
  56. package/dist/esm/checklist-item/style.scss +142 -22
  57. package/dist/esm/index.js +3 -0
  58. package/dist/esm/index.js.map +1 -1
  59. package/dist/esm/launchpad-container/index.js +8 -0
  60. package/dist/esm/launchpad-container/index.js.map +1 -0
  61. package/dist/esm/launchpad-container/style.scss +59 -0
  62. package/dist/esm/launchpad-internal.js +37 -0
  63. package/dist/esm/launchpad-internal.js.map +1 -0
  64. package/dist/esm/launchpad-internal.stories.js +41 -0
  65. package/dist/esm/launchpad-internal.stories.js.map +1 -0
  66. package/dist/esm/launchpad.js +41 -13
  67. package/dist/esm/launchpad.js.map +1 -1
  68. package/dist/esm/msw/link-in-bio.js +66 -0
  69. package/dist/esm/msw/link-in-bio.js.map +1 -0
  70. package/dist/esm/msw/resolver.js +14 -0
  71. package/dist/esm/msw/resolver.js.map +1 -0
  72. package/dist/esm/msw/setup-free.js +86 -0
  73. package/dist/esm/msw/setup-free.js.map +1 -0
  74. package/dist/esm/setup-actions.js +51 -54
  75. package/dist/esm/setup-actions.js.map +1 -1
  76. package/dist/esm/use-tracking/index.js +68 -0
  77. package/dist/esm/use-tracking/index.js.map +1 -0
  78. package/dist/tsconfig-cjs.tsbuildinfo +1 -1
  79. package/dist/tsconfig.tsbuildinfo +1 -1
  80. package/dist/types/action-components/index.d.ts +2 -0
  81. package/dist/types/action-components/index.d.ts.map +1 -0
  82. package/dist/types/action-components/share-site-modal/index.d.ts +9 -0
  83. package/dist/types/action-components/share-site-modal/index.d.ts.map +1 -0
  84. package/dist/types/badge/index.d.ts.map +1 -1
  85. package/dist/types/checklist/index.d.ts +6 -7
  86. package/dist/types/checklist/index.d.ts.map +1 -1
  87. package/dist/types/checklist/index.stories.d.ts +8 -0
  88. package/dist/types/checklist/index.stories.d.ts.map +1 -0
  89. package/dist/types/checklist-item/index.d.ts +11 -8
  90. package/dist/types/checklist-item/index.d.ts.map +1 -1
  91. package/dist/types/checklist-item/index.stories.d.ts +14 -0
  92. package/dist/types/checklist-item/index.stories.d.ts.map +1 -0
  93. package/dist/types/index.d.ts +3 -0
  94. package/dist/types/index.d.ts.map +1 -1
  95. package/dist/types/launchpad-container/index.d.ts +15 -0
  96. package/dist/types/launchpad-container/index.d.ts.map +1 -0
  97. package/dist/types/launchpad-internal.d.ts +20 -0
  98. package/dist/types/launchpad-internal.d.ts.map +1 -0
  99. package/dist/types/launchpad-internal.stories.d.ts +8 -0
  100. package/dist/types/launchpad-internal.stories.d.ts.map +1 -0
  101. package/dist/types/launchpad.d.ts +10 -9
  102. package/dist/types/launchpad.d.ts.map +1 -1
  103. package/dist/types/msw/link-in-bio.d.ts +35 -0
  104. package/dist/types/msw/link-in-bio.d.ts.map +1 -0
  105. package/dist/types/msw/resolver.d.ts +3 -0
  106. package/dist/types/msw/resolver.d.ts.map +1 -0
  107. package/dist/types/msw/setup-free.d.ts +35 -0
  108. package/dist/types/msw/setup-free.d.ts.map +1 -0
  109. package/dist/types/setup-actions.d.ts +1 -1
  110. package/dist/types/setup-actions.d.ts.map +1 -1
  111. package/dist/types/types.d.ts +19 -9
  112. package/dist/types/types.d.ts.map +1 -1
  113. package/dist/types/use-tracking/index.d.ts +14 -0
  114. package/dist/types/use-tracking/index.d.ts.map +1 -0
  115. package/package.json +24 -16
  116. package/src/action-components/index.ts +1 -0
  117. package/src/action-components/share-site-modal/index.tsx +100 -0
  118. package/src/action-components/share-site-modal/style.scss +159 -0
  119. package/src/badge/index.tsx +2 -4
  120. package/src/checklist/index.stories.tsx +45 -0
  121. package/src/checklist/index.tsx +22 -21
  122. package/src/checklist/test/index.tsx +26 -0
  123. package/src/checklist-item/index.stories.tsx +92 -0
  124. package/src/checklist-item/index.tsx +62 -22
  125. package/src/checklist-item/style.scss +142 -22
  126. package/src/checklist-item/test/index.tsx +232 -0
  127. package/src/index.ts +3 -0
  128. package/src/launchpad-container/index.tsx +45 -0
  129. package/src/launchpad-container/style.scss +59 -0
  130. package/src/launchpad-container/test/index.tsx +72 -0
  131. package/src/launchpad-internal.stories.tsx +49 -0
  132. package/src/launchpad-internal.tsx +85 -0
  133. package/src/launchpad.tsx +80 -30
  134. package/src/msw/link-in-bio.ts +66 -0
  135. package/src/msw/resolver.ts +18 -0
  136. package/src/msw/setup-free.ts +85 -0
  137. package/src/setup-actions.ts +67 -54
  138. package/src/test/launchpad.tsx +51 -24
  139. package/src/test/lib/fixtures.ts +7 -2
  140. package/src/types.ts +24 -9
  141. package/src/use-tracking/index.tsx +87 -0
  142. package/src/use-tracking/test/index.tsx +116 -0
  143. package/static/mockServiceWorker.js +287 -0
  144. package/src/test/checklist-item.tsx +0 -96
  145. package/src/test/checklist.tsx +0 -25
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checklist/index.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAG9C,OAAO,cAAc,CAAC;AAOtB,MAAM,SAAS,GAAG,CAAE,EAAE,KAAK,EAAE,yBAAyB,EAAkB,EAAG,EAAE;IAC5E,OAAO,CACN,aACC,SAAS,EAAG,UAAU,CAAE,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,KAAC,aAAa,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,cAAI,SAAS,EAAC,kBAAkB,gBAAY,qBAAqB,aAChE,KAAC,aAAa,CAAC,WAAW,KAAG,EAC7B,KAAC,aAAa,CAAC,WAAW,KAAG,EAC7B,KAAC,aAAa,CAAC,WAAW,KAAG,EAC7B,KAAC,aAAa,CAAC,WAAW,KAAG,IACzB,CACL,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checklist/index.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAmD,MAAM,OAAO,CAAC;AAChG,OAAsB,EAAE,WAAW,IAAI,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,cAAc,CAAC;AAStB,MAAM,SAAS,GAAgB,CAAE,EAAE,QAAQ,EAAE,yBAAyB,EAAE,EAAG,EAAE;IAC5E,MAAM,cAAc,GAAG,QAAQ,CAAC,KAAK,CAAE,QAAQ,CAAE,GAAG,CAAC,CAAC;IAEtD,OAAO,CACN,aACC,SAAS,EAAG,IAAI,CAAE,kBAAkB,EAAE;YACrC,+BAA+B,EAAE,yBAAyB;SAC1D,CAAE,gBACQ,qBAAqB,YAE9B,QAAQ,CAAC,GAAG,CAAE,QAAQ,IAAI,EAAE,EAAE,CAAE,KAAK,EAAE,KAAK,EAAG,EAAE;YAClD,IAAK,KAAK,KAAK,cAAc,EAAG,CAAC;gBAChC,OAAO,YAAY,CAAE,KAAK,EAAE,EAAE,eAAe,EAAE,yBAAyB,EAAE,CAAE,CAAC;YAC9E,CAAC;YACD,OAAO,KAAK,CAAC;QACd,CAAC,CAAE,GACC,CACL,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC/B,OAAO,CACN,cAAI,SAAS,EAAC,kBAAkB,gBAAY,qBAAqB,aAChE,KAAC,wBAAwB,KAAG,EAC5B,KAAC,wBAAwB,KAAG,EAC5B,KAAC,wBAAwB,KAAG,EAC5B,KAAC,wBAAwB,KAAG,IACxB,CACL,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -0,0 +1,25 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import ChecklistItem from '../checklist-item';
3
+ import Checklist from './';
4
+ const meta = {
5
+ title: 'Launchpad/Checklist',
6
+ component: Checklist,
7
+ decorators: [
8
+ (Story) => (_jsx("div", { style: { width: 300 }, children: _jsx(Story, {}) })),
9
+ ],
10
+ args: {
11
+ children: [
12
+ _jsx(ChecklistItem, { task: { id: '1', title: 'Task 1', completed: true, disabled: true }, onClick: () => { } }, "1"),
13
+ _jsx(ChecklistItem, { task: { id: '2', title: 'Task 2', disabled: false, completed: false }, onClick: () => { } }, "2"),
14
+ _jsx(ChecklistItem, { task: { id: '3', title: 'Task 3', disabled: false, completed: false }, onClick: () => { } }, "3"),
15
+ ],
16
+ },
17
+ };
18
+ export const Default = {};
19
+ export const WithMakeLastTaskPrimaryAction = {
20
+ args: {
21
+ makeLastTaskPrimaryAction: true,
22
+ },
23
+ };
24
+ export default meta;
25
+ //# sourceMappingURL=index.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/checklist/index.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAC9C,OAAO,SAAS,MAAM,IAAI,CAAC;AAG3B,MAAM,IAAI,GAA6B;IACtC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE;QACX,CAAE,KAAK,EAAG,EAAE,CAAC,CACZ,cAAK,KAAK,EAAG,EAAE,KAAK,EAAE,GAAG,EAAE,YAC1B,KAAC,KAAK,KAAG,GACJ,CACN;KACD;IACD,IAAI,EAAE;QACL,QAAQ,EAAE;YACT,KAAC,aAAa,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,KAAC,aAAa,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,KAAC,aAAa,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;AAGF,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,6BAA6B,GAAU;IACnD,IAAI,EAAE;QACL,yBAAyB,EAAE,IAAI;KAC/B;CACD,CAAC;AAEF,eAAe,IAAI,CAAC"}
@@ -1,31 +1,46 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Badge, Button, Gridicon } from '@automattic/components';
3
- import classnames from 'classnames';
2
+ import { Badge, Gridicon } from '@automattic/components';
3
+ import { Button } from '@wordpress/components';
4
+ import clsx from 'clsx';
4
5
  import { translate, useRtl } from 'i18n-calypso';
5
6
  import './style.scss';
6
- const ChecklistItem = ({ task, isPrimaryAction }) => {
7
+ const ChecklistItem = ({ task, isPrimaryAction, expandable, onClick }) => {
7
8
  const isRtl = useRtl();
8
- const { id, completed, disabled, title, subtitle, actionDispatch } = task;
9
- // Display chevron if task is incomplete. Don't display chevron and badge at the same time.
10
- const shouldDisplayChevron = !completed && !disabled && !task.badge_text;
11
- const handlePrimaryAction = () => {
12
- localStorage.removeItem('launchpad_siteSlug');
13
- actionDispatch && actionDispatch();
9
+ const { id, completed, disabled = false, title, subtitle, actionDispatch } = task;
10
+ // If the task says we should use the Calypso path, ensure we use that link for the button's href.
11
+ // This allows the UI routing code to hook into the URL changes and should reduce full-page (re)loads
12
+ // when clicking on the task list items.
13
+ const buttonHref = task.useCalypsoPath && task.calypso_path ? task.calypso_path : undefined;
14
+ // The Button component does not accept the `disabled` and `href` props together.
15
+ // This code will only add href property if the disabled variable is false.
16
+ const buttonProps = {
17
+ disabled,
18
+ ...(disabled ? {} : { href: buttonHref }),
14
19
  };
20
+ const onClickHandler = onClick || actionDispatch;
21
+ const isClickable = !!(buttonProps.href || onClickHandler);
22
+ // Display chevron if task is incomplete.
23
+ // Don't display chevron and badge at the same time.
24
+ // Don't display chevron if item is not clickable.
25
+ const shouldDisplayChevron = !completed && !disabled && !task.badge_text && isClickable;
15
26
  // Display task counter if task is incomplete and has the count properties;
16
27
  const shouldDisplayTaskCounter = task.target_repetitions &&
17
28
  null !== task.repetition_count &&
18
29
  undefined !== task.repetition_count;
19
- return (_jsx("li", { className: classnames('checklist-item__task', {
30
+ // Make sure the button keeps the button styles if it is not clickable.
31
+ const buttonClassName = isClickable ? '' : 'components-button';
32
+ const ButtonElement = isClickable ? Button : 'div';
33
+ return (_jsxs("li", { className: clsx('checklist-item__task', {
20
34
  completed: completed,
21
35
  pending: !completed,
22
36
  enabled: !disabled,
23
37
  disabled: disabled,
24
- }), children: isPrimaryAction ? (_jsx(Button, { className: "checklist-item__checklist-primary-button", disabled: disabled, "data-task": id, onClick: handlePrimaryAction, children: title })) : (_jsxs(Button, { className: "checklist-item__task-content", disabled: disabled, "data-task": id, onClick: actionDispatch, children: [completed && (
25
- // show checkmark for completed tasks regardless if they are disabled or kept active
26
- _jsx("div", { className: "checklist-item__checkmark-container", children: _jsx(Gridicon, { "aria-label": translate('Task complete'), className: "checklist-item__checkmark", icon: "checkmark", size: 18 }) })), _jsx("span", { className: "checklist-item__text", children: title }), task.badge_text ? _jsx(Badge, { type: "info-blue", children: task.badge_text }) : null, shouldDisplayTaskCounter && (_jsxs("span", { className: "checklist-item__counter", children: [task.repetition_count, "/", task.target_repetitions] })), shouldDisplayChevron && (_jsx(Gridicon, { "aria-label": translate('Task enabled'), className: "checklist-item__chevron", icon: `chevron-${isRtl ? 'left' : 'right'}`, size: 18 })), subtitle && _jsx("p", { className: "checklist-item__subtext", children: subtitle })] })) }));
38
+ expanded: expandable && expandable.isOpen,
39
+ }), children: [isPrimaryAction ? (_jsx(ButtonElement, { className: clsx('checklist-item__checklist-primary-button', buttonClassName), "data-task": id, onClick: onClickHandler, ...buttonProps, children: title })) : (_jsxs(ButtonElement, { className: clsx('checklist-item__task-content', buttonClassName), "data-task": id, onClick: onClickHandler, ...buttonProps, children: [completed && (
40
+ // show checkmark for completed tasks regardless if they are disabled or kept active
41
+ _jsx("div", { className: "checklist-item__checkmark-container", children: _jsx(Gridicon, { "aria-label": translate('Task complete'), className: "checklist-item__checkmark", icon: "checkmark", size: 18 }) })), _jsx("span", { className: "checklist-item__text", children: title }), task.badge_text ? _jsx(Badge, { type: "info-blue", children: task.badge_text }) : null, shouldDisplayTaskCounter && (_jsxs("span", { className: "checklist-item__counter", children: [task.repetition_count, "/", task.target_repetitions] })), shouldDisplayChevron && (_jsx(Gridicon, { "aria-label": translate('Task enabled'), className: "checklist-item__chevron", icon: `chevron-${isRtl ? 'left' : 'right'}`, size: 18 })), subtitle && _jsx("p", { className: "checklist-item__subtext", children: subtitle })] })), expandable && expandable.isOpen && (_jsxs("div", { className: "checklist-item__expanded-content", children: [expandable.content, expandable.action && (_jsx(Button, { className: "checklist-item__checklist-expanded-action-button", onClick: expandable.action.onClick, children: expandable.action.label }))] }))] }));
27
42
  };
28
- ChecklistItem.Placeholder = () => {
43
+ export const Placeholder = () => {
29
44
  return (_jsx("div", { className: "checklist-item__task-content is-placeholder", children: _jsx("div", { className: "checklist-item__content", children: _jsx("div", {}) }) }));
30
45
  };
31
46
  export default ChecklistItem;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checklist-item/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGjD,OAAO,cAAc,CAAC;AAEtB,MAAM,aAAa,GAAG,CAAE,EAAE,IAAI,EAAE,eAAe,EAA6C,EAAG,EAAE;IAChG,MAAM,KAAK,GAAG,MAAM,EAAE,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,aACC,SAAS,EAAG,UAAU,CAAE,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,KAAC,MAAM,IACN,SAAS,EAAC,0CAA0C,EACpD,QAAQ,EAAG,QAAQ,eACP,EAAE,EACd,OAAO,EAAG,mBAAmB,YAE3B,KAAK,GACC,CACT,CAAC,CAAC,CAAC,CACH,MAAC,MAAM,IACN,SAAS,EAAC,8BAA8B,EACxC,QAAQ,EAAG,QAAQ,eACP,EAAE,EACd,OAAO,EAAG,cAAc,aAEtB,SAAS,IAAI;gBACd,oFAAoF;gBACpF,cAAK,SAAS,EAAC,qCAAqC,YACnD,KAAC,QAAQ,kBACK,SAAS,CAAE,eAAe,CAAE,EACzC,SAAS,EAAC,2BAA2B,EACrC,IAAI,EAAC,WAAW,EAChB,IAAI,EAAG,EAAE,GACR,GACG,CACN,EACD,eAAM,SAAS,EAAC,sBAAsB,YAAG,KAAK,GAAS,EACrD,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,IAAI,EAAC,WAAW,YAAG,IAAI,CAAC,UAAU,GAAU,CAAC,CAAC,CAAC,IAAI,EAC5E,wBAAwB,IAAI,CAC7B,gBAAM,SAAS,EAAC,yBAAyB,aACtC,IAAI,CAAC,gBAAgB,OAAK,IAAI,CAAC,kBAAkB,IAC7C,CACP,EACC,oBAAoB,IAAI,CACzB,KAAC,QAAQ,kBACK,SAAS,CAAE,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,YAAG,SAAS,EAAC,yBAAyB,YAAG,QAAQ,GAAM,IAC7D,CACT,GACG,CACL,CAAC;AACH,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,GAAG,EAAE;IAChC,OAAO,CACN,cAAK,SAAS,EAAC,6CAA6C,YAC3D,cAAK,SAAS,EAAC,yBAAyB,YACvC,eAAW,GACN,GACD,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checklist-item/index.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,75 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import ChecklistItem from './';
3
+ const meta = {
4
+ title: 'Launchpad/ChecklistItem',
5
+ component: ChecklistItem,
6
+ decorators: [
7
+ (Story) => (_jsx("div", { style: { width: 300 }, children: _jsx("ul", { className: "checklist__tasks", children: _jsx(Story, {}) }) })),
8
+ ],
9
+ };
10
+ const baseTask = {
11
+ id: '1',
12
+ title: 'Task 1',
13
+ completed: false,
14
+ disabled: false,
15
+ };
16
+ export const Default = {
17
+ args: {
18
+ onClick: () => { },
19
+ task: baseTask,
20
+ },
21
+ };
22
+ export const Completed = {
23
+ args: {
24
+ onClick: () => { },
25
+ task: { ...baseTask, completed: true },
26
+ },
27
+ };
28
+ export const Disabled = {
29
+ args: {
30
+ onClick: () => { },
31
+ task: { ...baseTask, disabled: true },
32
+ },
33
+ };
34
+ export const WithBadgetText = {
35
+ args: {
36
+ onClick: () => { },
37
+ task: { ...baseTask, badge_text: 'Upgrade plan' },
38
+ },
39
+ };
40
+ export const WithTaskCounter = {
41
+ args: {
42
+ onClick: () => { },
43
+ task: { ...baseTask, repetition_count: 1, target_repetitions: 3 },
44
+ },
45
+ };
46
+ export const WithSubtitle = {
47
+ args: {
48
+ onClick: () => { },
49
+ task: { ...baseTask, subtitle: 'This is a subtitle' },
50
+ },
51
+ };
52
+ export const Expanded = {
53
+ args: {
54
+ task: baseTask,
55
+ expandable: {
56
+ content: _jsx("p", { children: "This is the expanded content." }),
57
+ isOpen: true,
58
+ },
59
+ },
60
+ };
61
+ export const ExpandedWithAction = {
62
+ args: {
63
+ task: baseTask,
64
+ expandable: {
65
+ content: _jsx("p", { children: "This is the expanded content." }),
66
+ isOpen: true,
67
+ action: {
68
+ label: 'Next',
69
+ onClick: () => { },
70
+ },
71
+ },
72
+ },
73
+ };
74
+ export default meta;
75
+ //# sourceMappingURL=index.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/checklist-item/index.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,MAAM,IAAI,CAAC;AAG/B,MAAM,IAAI,GAAiC;IAC1C,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,aAAa;IACxB,UAAU,EAAE;QACX,CAAE,KAAK,EAAG,EAAE,CAAC,CACZ,cAAK,KAAK,EAAG,EAAE,KAAK,EAAE,GAAG,EAAE,YAC1B,aAAI,SAAS,EAAC,kBAAkB,YAC/B,KAAC,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;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,IAAI,EAAE,QAAQ;KACd;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,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;AAEF,MAAM,CAAC,MAAM,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;AAEF,MAAM,CAAC,MAAM,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;AAEF,MAAM,CAAC,MAAM,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;AAEF,MAAM,CAAC,MAAM,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;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC9B,IAAI,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE;YACX,OAAO,EAAE,wDAAoC;YAC7C,MAAM,EAAE,IAAI;SACZ;KACD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACxC,IAAI,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE;YACX,OAAO,EAAE,wDAAoC;YAC7C,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE;gBACP,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;aACjB;SACD;KACD;CACD,CAAC;AAEF,eAAe,IAAI,CAAC"}
@@ -2,8 +2,8 @@
2
2
  @import "@wordpress/base-styles/breakpoints";
3
3
  @import "@automattic/typography/styles/variables";
4
4
 
5
- .checklist-item__task-content {
6
- align-items: flex-start;
5
+ .checklist-item__task-content.components-button {
6
+ align-items: center;
7
7
  background-color: transparent;
8
8
  border-bottom: 1px solid var(--studio-gray-5);
9
9
  border-left: none;
@@ -15,10 +15,51 @@
15
15
  width: 100%;
16
16
  margin: 0;
17
17
  color: var(--color-neutral-100);
18
+ height: auto;
19
+ font-family: $sans;
20
+ font-size: $font-body-small;
21
+ line-height: 22px;
22
+ outline: 0;
23
+ overflow: hidden;
24
+ text-decoration: none;
25
+ padding-left: 2px;
26
+
27
+ &:is(button, a) {
28
+ cursor: pointer;
29
+ }
30
+
31
+ &:is(div) {
32
+ cursor: default;
33
+ }
34
+
35
+ &:visited {
36
+ color: var(--color-neutral-100);
37
+ }
38
+
39
+ &:disabled {
40
+ opacity: 1;
41
+ color: var(--color-neutral-20);
42
+ }
18
43
 
19
44
  &.is-placeholder {
20
45
  padding: 16px 0 16px 0;
21
46
  }
47
+
48
+ &:focus-visible {
49
+ outline: var(--color-primary);
50
+ box-shadow: 0 0 0 2px var(--color-primary-light);
51
+ }
52
+
53
+ .badge {
54
+ margin-left: auto;
55
+ background-color: var(--studio-blue-5);
56
+ color: var(--studio-blue-80);
57
+ font-size: $font-body-extra-small;
58
+ }
59
+
60
+ .checklist-item__chevron {
61
+ width: auto;
62
+ }
22
63
  }
23
64
 
24
65
  .checklist-item__content {
@@ -38,27 +79,28 @@
38
79
  }
39
80
  }
40
81
 
41
- .button.checklist-item__task-content:hover:not([disabled]),
42
- .button.checklist-item__task-content:focus:not([disabled]) {
43
- fill: var(--studio-blue-50);
44
- color: var(--studio-blue-50);
45
- border-bottom: 1px solid var(--studio-gray-5);
82
+ .checklist-item__task-content {
83
+ &.is-placeholder {
84
+ padding: 5px 0 5px 0;
85
+ }
46
86
  }
47
87
 
48
- .checklist-item__task-content .badge {
49
- margin-left: auto;
50
- background-color: var(--studio-blue-5);
51
- color: var(--studio-blue-80);
52
- font-size: $font-body-extra-small;
88
+ .checklist-item__task-content.components-button:hover:not([disabled]),
89
+ .checklist-item__task-content.components-button:focus:not([disabled]) {
90
+ &:is(button, a) {
91
+ fill: var(--studio-blue-50);
92
+ color: var(--studio-blue-50);
93
+ }
94
+ border-bottom: 1px solid var(--studio-gray-5);
53
95
  }
54
96
 
55
- .checklist-item__task-content[disabled],
56
- .checklist-item__task-content[disabled]:focus {
97
+ .checklist-item__task-content.components-button[disabled],
98
+ .checklist-item__task-content.components-button[disabled]:focus {
57
99
  background-color: transparent;
58
100
  pointer-events: none;
59
101
  }
60
102
 
61
- .checklist-item__task-content[data-task="verify_email"] {
103
+ .checklist-item__task-content.components-button[data-task="verify_email"] {
62
104
  color: var(--color-text);
63
105
  }
64
106
 
@@ -68,11 +110,13 @@
68
110
  }
69
111
 
70
112
  .checklist-item__checkmark-container {
71
- margin-right: 8px;
113
+ margin-right: 7px;
72
114
  width: 20px;
115
+ display: flex;
116
+ margin-left: 1px;
117
+ margin-bottom: -2px;
73
118
 
74
119
  .checklist-item__checkmark {
75
- top: 2px;
76
120
  vertical-align: text-bottom;
77
121
  }
78
122
  }
@@ -103,7 +147,7 @@
103
147
  }
104
148
  }
105
149
 
106
- .checklist-item__task-content:hover .checklist-item__subtext {
150
+ .checklist-item__task-content.components-button:hover .checklist-item__subtext {
107
151
  color: var(--color-neutral-100);
108
152
  }
109
153
 
@@ -125,6 +169,18 @@
125
169
  }
126
170
  }
127
171
 
172
+ .checklist-item__task.expanded {
173
+ .checklist-item__task-content,
174
+ .checklist-item__task-content:hover,
175
+ .checklist-item__task-content:focus {
176
+ border-bottom: none;
177
+ }
178
+
179
+ .checklist-item__task-content {
180
+ padding-bottom: 0;
181
+ }
182
+ }
183
+
128
184
  // completed tasks (both enabled and disabled)
129
185
  .checklist-item__task.completed.disabled,
130
186
  .checklist-item__task.completed.enabled {
@@ -145,8 +201,10 @@
145
201
  }
146
202
 
147
203
  // pending tasks and completed enabled
148
- .checklist-item__task.completed.enabled:hover,
149
- .checklist-item__task.pending:hover,
204
+ .checklist-item__task.completed.enabled > button:hover,
205
+ .checklist-item__task.pending > button:hover,
206
+ .checklist-item__task.completed.enabled > a:hover,
207
+ .checklist-item__task.pending > a:hover,
150
208
  .checklist-item__task.completed.enabled > a:focus,
151
209
  .checklist-item__task.pending > a:focus {
152
210
  .checklist-item__text {
@@ -171,7 +229,7 @@
171
229
  // pending disabled tasks
172
230
  .checklist-item__task.pending.disabled {
173
231
  .checklist-item__text {
174
- color: inherit;
232
+ color: var(--color-neutral-20);
175
233
  }
176
234
  }
177
235
 
@@ -191,14 +249,20 @@
191
249
  font-weight: 600;
192
250
  }
193
251
 
194
- .checklist-item__checklist-primary-button {
252
+ .checklist-item__checklist-expanded-action-button.components-button,
253
+ .checklist-item__checklist-primary-button.components-button {
195
254
  width: 100%;
196
255
  font-weight: 500;
197
256
  padding: 11px;
198
257
  margin-top: 12px;
199
258
  background-color: var(--color-primary);
200
259
  border-color: var(--color-primary);
260
+ border-radius: 4px;
201
261
  color: var(--color-text-inverted);
262
+ justify-content: center;
263
+ font-size: $font-body-small;
264
+ height: auto;
265
+ line-height: 22px;
202
266
 
203
267
  &:hover:not([disabled]) {
204
268
  background-color: var(--color-primary-60);
@@ -211,4 +275,60 @@
211
275
  border-color: var(--color-primary-10);
212
276
  color: var(--color-text-inverted);
213
277
  }
278
+
279
+ &:disabled {
280
+ opacity: 1;
281
+ &:hover {
282
+ color: var(--color-text-inverted);
283
+ }
284
+ }
285
+ }
286
+
287
+ .checklist-item__checklist-expanded-action-button.components-button {
288
+ display: block;
289
+ margin: 16px 0;
290
+ }
291
+
292
+ .checklist-item__expanded-content {
293
+ padding-left: 2px;
294
+ font-family: $sans;
295
+ font-size: $font-body-small;
296
+
297
+ p {
298
+ margin: 12px 0;
299
+ }
300
+ }
301
+
302
+ .checklist-item__checklist-secondary-button.components-button {
303
+ width: 100%;
304
+ font-weight: 500;
305
+ padding: 11px;
306
+ margin-top: 12px;
307
+ background-color: var(--studio-white);
308
+ border: 1px solid var(--studio-gray-100);
309
+ border-radius: 4px;
310
+ color: var(--color-text);
311
+ justify-content: center;
312
+ font-size: $font-body-small;
313
+ height: auto;
314
+ line-height: 22px;
315
+
316
+ &:hover:not([disabled]) {
317
+ background-color: var(--studio-gray-0);
318
+ border-color: var(--color-neutral-40);
319
+ color: var(--color-text);
320
+ }
321
+
322
+ &[disabled] {
323
+ background-color: var(--studio-gray-0);
324
+ border: none;
325
+ color: var(--color-neutral-40);
326
+ }
327
+
328
+ &:disabled {
329
+ opacity: 1;
330
+ &:hover {
331
+ color: var(--color-neutral-40);
332
+ }
333
+ }
214
334
  }
package/dist/esm/index.js CHANGED
@@ -1,6 +1,9 @@
1
1
  export { default as Checklist } from './checklist';
2
2
  export { default as ChecklistItem } from './checklist-item';
3
+ export { default as LaunchpadInternal } from './launchpad-internal';
4
+ export { default as LaunchpadContainer } from './launchpad-container';
3
5
  export { default as Launchpad } from './launchpad';
4
6
  export { setUpActionsForTasks } from './setup-actions';
7
+ export * from './action-components';
5
8
  export * from './types';
6
9
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","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"}
1
+ {"version":3,"file":"index.js","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,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import clsx from 'clsx';
3
+ import './style.scss';
4
+ const LaunchpadContainer = ({ className, headerClassName, contentClassName, sidebarClassName, mainContentClassName, header, sidebar, children, }) => {
5
+ return (_jsxs("main", { className: clsx('launchpad-container', className), children: [header && (_jsx("div", { className: clsx('launchpad-container__header', headerClassName), children: header })), _jsxs("div", { className: clsx('launchpad-container__content', contentClassName), children: [_jsx("div", { className: clsx('launchpad-container__sidebar', sidebarClassName), children: sidebar }), _jsx("div", { className: clsx('launchpad-container__main-content', mainContentClassName), children: children })] })] }));
6
+ };
7
+ export default LaunchpadContainer;
8
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/launchpad-container/index.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,cAAc,CAAC;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,gBAAM,SAAS,EAAG,IAAI,CAAE,qBAAqB,EAAE,SAAS,CAAE,aACvD,MAAM,IAAI,CACX,cAAK,SAAS,EAAG,IAAI,CAAE,6BAA6B,EAAE,eAAe,CAAE,YAAK,MAAM,GAAQ,CAC1F,EAED,eAAK,SAAS,EAAG,IAAI,CAAE,8BAA8B,EAAE,gBAAgB,CAAE,aACxE,cAAK,SAAS,EAAG,IAAI,CAAE,8BAA8B,EAAE,gBAAgB,CAAE,YACtE,OAAO,GACJ,EACN,cAAK,SAAS,EAAG,IAAI,CAAE,mCAAmC,EAAE,oBAAoB,CAAE,YAC/E,QAAQ,GACL,IACD,IACA,CACP,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
@@ -0,0 +1,59 @@
1
+ @import "@wordpress/base-styles/mixins";
2
+ @import "@wordpress/base-styles/breakpoints";
3
+
4
+ .launchpad-container {
5
+ height: 100%;
6
+ display: flex;
7
+ flex-direction: column;
8
+ }
9
+
10
+ // Launchpad Content.
11
+ .launchpad-container__content {
12
+ display: flex;
13
+ flex-direction: column;
14
+
15
+ @include break-large {
16
+ height: 100%;
17
+ min-height: calc(100vh - 60px); // Discount margin-top from `.step-route`.
18
+ flex-direction: row;
19
+ }
20
+ }
21
+
22
+ // Launchpad Sidebar.
23
+ .launchpad-container__sidebar {
24
+ display: flex;
25
+ flex-direction: column;
26
+ max-width: 100%;
27
+
28
+ @include break-large {
29
+ max-width: 360px;
30
+ }
31
+
32
+ // TODO: Migrate to the checklist components. The checklist could receive a special className as prop that would be responsible for this.
33
+ .launchpad-container .checklist__tasks .checklist-item__task-content.is-placeholder .checklist-item__content {
34
+ /* Override default placeholder colours to align with other elements on the page. */
35
+ background-color: var(--color-neutral-5);
36
+ }
37
+ }
38
+
39
+ // Main content.
40
+ .launchpad-container__main-content {
41
+ flex-grow: 1;
42
+ display: flex;
43
+ flex-direction: column;
44
+ }
45
+
46
+ // Container spacings.
47
+ .launchpad-container__sidebar,
48
+ .launchpad-container__main-content {
49
+ padding: 16px;
50
+
51
+ @include break-large {
52
+ padding: 40px;
53
+
54
+ // Exception for the sidebar.
55
+ &.launchpad-container__sidebar {
56
+ padding-right: 32px;
57
+ }
58
+ }
59
+ }
@@ -0,0 +1,37 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useLaunchpad } from '@automattic/data-stores';
3
+ import { useMemo } from 'react';
4
+ import Checklist, { Placeholder as ChecklistPlaceHolder } from './checklist';
5
+ import ChecklistItem from './checklist-item';
6
+ import { useTracking } from './use-tracking';
7
+ /**
8
+ * Low-level launchpad component that should only be used in exceptional cases.
9
+ * Please use the main Launchpad component whenever possible.
10
+ */
11
+ const LaunchpadInternal = ({ flow, site, siteSlug, checklistSlug, taskFilter, makeLastTaskPrimaryAction, useLaunchpadOptions = {}, launchpadContext, }) => {
12
+ const launchpadData = useLaunchpad(siteSlug || '', checklistSlug, useLaunchpadOptions, launchpadContext);
13
+ const { isFetchedAfterMount, data } = launchpadData;
14
+ const { checklist } = data;
15
+ const tasks = useMemo(() => {
16
+ if (!checklist) {
17
+ return [];
18
+ }
19
+ return taskFilter ? taskFilter(checklist) : checklist;
20
+ // Array of tasks requires deep comparison
21
+ // eslint-disable-next-line react-hooks/exhaustive-deps
22
+ }, [JSON.stringify(checklist), taskFilter]);
23
+ const { trackTaskClick } = useTracking({
24
+ tasks,
25
+ checklistSlug,
26
+ site,
27
+ context: launchpadContext,
28
+ flow,
29
+ });
30
+ const itemClickHandler = (task) => {
31
+ trackTaskClick(task);
32
+ task?.actionDispatch?.();
33
+ };
34
+ return (_jsx("div", { className: "launchpad__checklist-wrapper", children: isFetchedAfterMount ? (_jsx(Checklist, { makeLastTaskPrimaryAction: makeLastTaskPrimaryAction, children: tasks.map((task) => (_jsx(ChecklistItem, { task: task, onClick: () => itemClickHandler(task) }, task.id))) })) : (_jsx(ChecklistPlaceHolder, {})) }));
35
+ };
36
+ export default LaunchpadInternal;
37
+ //# sourceMappingURL=launchpad-internal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"launchpad-internal.js","sourceRoot":"","sources":["../../src/launchpad-internal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAW,OAAO,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,EAAE,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;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,YAAY,CACjC,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,OAAO,CAAE,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,WAAW,CAAE;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,cAAK,SAAS,EAAC,8BAA8B,YAC1C,mBAAmB,CAAC,CAAC,CAAC,CACvB,KAAC,SAAS,IAAC,yBAAyB,EAAG,yBAAyB,YAC7D,KAAK,CAAC,GAAG,CAAE,CAAE,IAAI,EAAG,EAAE,CAAC,CACxB,KAAC,aAAa,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,KAAC,oBAAoB,KAAG,CACxB,GACI,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
@@ -0,0 +1,41 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
3
+ import { http } from 'msw';
4
+ import LaunchpadInternal from './launchpad-internal';
5
+ import { launchpadResolver } from './msw/resolver';
6
+ const queryClient = new QueryClient();
7
+ const meta = {
8
+ title: 'Launchpad/LaunchpadInternal',
9
+ component: LaunchpadInternal,
10
+ decorators: [
11
+ (Story) => (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(Story, {}) })),
12
+ ],
13
+ parameters: {
14
+ msw: {
15
+ handlers: [http.get('/wpcom/v2/sites/*/launchpad', launchpadResolver)],
16
+ },
17
+ },
18
+ args: {
19
+ site: null,
20
+ siteSlug: 'example.wordpress.com',
21
+ launchpadContext: 'fullscreen',
22
+ checklistSlug: 'free',
23
+ },
24
+ argTypes: {
25
+ checklistSlug: {
26
+ defaultValue: 'free',
27
+ options: ['free', 'link-in-bio'],
28
+ control: { type: 'select' },
29
+ },
30
+ },
31
+ };
32
+ export const Default = {};
33
+ export const Loading = {
34
+ parameters: {
35
+ msw: {
36
+ delay: 1000,
37
+ },
38
+ },
39
+ };
40
+ export default meta;
41
+ //# sourceMappingURL=launchpad-internal.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"launchpad-internal.stories.js","sourceRoot":"","sources":["../../src/launchpad-internal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGnD,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAC;AAEtC,MAAM,IAAI,GAAqC;IAC9C,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,iBAAiB;IAC5B,UAAU,EAAE;QACX,CAAE,KAAK,EAAG,EAAE,CAAC,CACZ,KAAC,mBAAmB,IAAC,MAAM,EAAG,WAAW,YACxC,KAAC,KAAK,KAAG,GACY,CACtB;KACD;IACD,UAAU,EAAE;QACX,GAAG,EAAE;YACJ,QAAQ,EAAE,CAAE,IAAI,CAAC,GAAG,CAAE,6BAA6B,EAAE,iBAAiB,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;AAGF,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AACjC,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,UAAU,EAAE;QACX,GAAG,EAAE;YACJ,KAAK,EAAE,IAAI;SACX;KACD;CACD,CAAC;AAEF,eAAe,IAAI,CAAC"}