@atlaskit/editor-core 189.6.4 → 189.6.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-core
 
+## 189.6.5
+
+### Patch Changes
+
+- [#59654](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59654) [`af9025d9eca2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/af9025d9eca2) - [ux] Update "Documentation" link text in ConfigPanel for select Confluence macros
+
 ## 189.6.4
 
 ### Patch Changes

package/dist/cjs/ui/ConfigPanel/ConfigPanel.js

@@ -277,6 +277,11 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = _this.props,
         onCancel = _this$props2.onCancel,
         showHeader = _this$props2.showHeader;
+
+      // Use a temporary allowlist of top 3 macros to test out a new "Documentation" CTA ("Need help?")
+      // This will be removed when Top 5 Modernized Macros updates are rolled out
+      var modernizedMacrosList = ['children', 'recently-updated', 'excerpt'];
+      var enableHelpCTA = modernizedMacrosList.includes(extensionManifest.key);
       if (!showHeader) {
         return null;
       }
@@ -286,7 +291,8 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
         description: extensionManifest.description,
         summary: extensionManifest.summary,
         documentationUrl: extensionManifest.documentationUrl,
-        onClose: onCancel
+        onClose: onCancel,
+        enableHelpCTA: enableHelpCTA
       });
     }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFirstVisibleFieldName", (0, _memoizeOne.default)(function (fields) {

package/dist/cjs/ui/ConfigPanel/Header.js

@@ -16,7 +16,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _messages = require("./messages");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 /** @jsx jsx */
 var iconWidth = 40;
 var buttonWidth = 40;
@@ -28,13 +28,15 @@ var itemBody = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _tag
 var centeredItemTitle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
 var itemText = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: ", ";\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
 var descriptionStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", ";\n"])), "var(--ds-space-300, 24px)");
-var closeButtonWrapper = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  text-align: right;\n"])), buttonWidth);
+var helpLinkStyle = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", ";\n"])), "var(--ds-space-150, 12px)");
+var closeButtonWrapper = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  text-align: right;\n"])), buttonWidth);
 var Header = function Header(_ref) {
   var icon = _ref.icon,
     title = _ref.title,
     description = _ref.description,
     summary = _ref.summary,
     documentationUrl = _ref.documentationUrl,
+    enableHelpCTA = _ref.enableHelpCTA,
     onClose = _ref.onClose,
     intl = _ref.intl;
   var ResolvedIcon = (0, _reactLoadable.default)({
@@ -74,11 +76,24 @@ var Header = function Header(_ref) {
   }))), (description || documentationUrl) && (0, _react2.jsx)("p", {
     css: descriptionStyle,
     "data-testid": "config-panel-header-description"
-  }, description && (0, _react2.jsx)(_react.Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (0, _react2.jsx)("a", {
+  }, description && (0, _react2.jsx)(_react.Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? (0, _react2.jsx)("p", {
+    css: helpLinkStyle
+  }, (0, _react2.jsx)(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: intl.formatMessage(_messages.messages.help)
+  })) : (0, _react2.jsx)(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: intl.formatMessage(_messages.messages.documentation)
+  }))));
+};
+var HelpLink = function HelpLink(_ref2) {
+  var documentationUrl = _ref2.documentationUrl,
+    label = _ref2.label;
+  return (0, _react2.jsx)("a", {
     target: "_blank",
     rel: "noopener noreferrer",
     href: documentationUrl,
     "data-testid": "config-panel-header-documentation-link"
-  }, intl.formatMessage(_messages.messages.documentation))));
+  }, label);
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(Header);

package/dist/cjs/ui/ConfigPanel/messages.js

@@ -56,6 +56,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Documentation',
     description: 'Label for the documentation link'
   },
+  help: {
+    id: 'fabric.editor.configPanel.help',
+    defaultMessage: 'Need help?',
+    description: 'Label for documentation link v.2 (to replace "Documentation" text)'
+  },
   custom: {
     id: 'fabric.editor.configPanel.dateRange.option.custom',
     defaultMessage: 'Custom',

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "189.6.4";
+var version = exports.version = "189.6.5";

package/dist/es2019/ui/ConfigPanel/ConfigPanel.js

@@ -219,6 +219,11 @@ class ConfigPanel extends React.Component {
         onCancel,
         showHeader
       } = this.props;
+
+      // Use a temporary allowlist of top 3 macros to test out a new "Documentation" CTA ("Need help?")
+      // This will be removed when Top 5 Modernized Macros updates are rolled out
+      const modernizedMacrosList = ['children', 'recently-updated', 'excerpt'];
+      const enableHelpCTA = modernizedMacrosList.includes(extensionManifest.key);
       if (!showHeader) {
         return null;
       }
@@ -228,7 +233,8 @@ class ConfigPanel extends React.Component {
         description: extensionManifest.description,
         summary: extensionManifest.summary,
         documentationUrl: extensionManifest.documentationUrl,
-        onClose: onCancel
+        onClose: onCancel,
+        enableHelpCTA: enableHelpCTA
       });
     }));
     _defineProperty(this, "getFirstVisibleFieldName", memoizeOne(fields => {

package/dist/es2019/ui/ConfigPanel/Header.js

@@ -65,6 +65,9 @@ const itemText = css`
 const descriptionStyle = css`
   margin-bottom: ${"var(--ds-space-300, 24px)"};
 `;
+const helpLinkStyle = css`
+  padding-top: ${"var(--ds-space-150, 12px)"};
+`;
 const closeButtonWrapper = css`
   width: ${buttonWidth}px;
   text-align: right;
@@ -75,6 +78,7 @@ const Header = ({
   description,
   summary,
   documentationUrl,
+  enableHelpCTA,
   onClose,
   intl
 }) => {
@@ -113,11 +117,25 @@ const Header = ({
   }))), (description || documentationUrl) && jsx("p", {
     css: descriptionStyle,
     "data-testid": "config-panel-header-description"
-  }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && jsx("a", {
+  }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? jsx("p", {
+    css: helpLinkStyle
+  }, jsx(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: intl.formatMessage(messages.help)
+  })) : jsx(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: intl.formatMessage(messages.documentation)
+  }))));
+};
+const HelpLink = ({
+  documentationUrl,
+  label
+}) => {
+  return jsx("a", {
     target: "_blank",
     rel: "noopener noreferrer",
     href: documentationUrl,
     "data-testid": "config-panel-header-documentation-link"
-  }, intl.formatMessage(messages.documentation))));
+  }, label);
 };
 export default injectIntl(Header);

package/dist/es2019/ui/ConfigPanel/messages.js

@@ -50,6 +50,11 @@ export const messages = defineMessages({
     defaultMessage: 'Documentation',
     description: 'Label for the documentation link'
   },
+  help: {
+    id: 'fabric.editor.configPanel.help',
+    defaultMessage: 'Need help?',
+    description: 'Label for documentation link v.2 (to replace "Documentation" text)'
+  },
   custom: {
     id: 'fabric.editor.configPanel.dateRange.option.custom',
     defaultMessage: 'Custom',

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "189.6.4";
+export const version = "189.6.5";

package/dist/esm/ui/ConfigPanel/ConfigPanel.js

@@ -268,6 +268,11 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = _this.props,
         onCancel = _this$props2.onCancel,
         showHeader = _this$props2.showHeader;
+
+      // Use a temporary allowlist of top 3 macros to test out a new "Documentation" CTA ("Need help?")
+      // This will be removed when Top 5 Modernized Macros updates are rolled out
+      var modernizedMacrosList = ['children', 'recently-updated', 'excerpt'];
+      var enableHelpCTA = modernizedMacrosList.includes(extensionManifest.key);
       if (!showHeader) {
         return null;
       }
@@ -277,7 +282,8 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
         description: extensionManifest.description,
         summary: extensionManifest.summary,
         documentationUrl: extensionManifest.documentationUrl,
-        onClose: onCancel
+        onClose: onCancel,
+        enableHelpCTA: enableHelpCTA
       });
     }));
     _defineProperty(_assertThisInitialized(_this), "getFirstVisibleFieldName", memoizeOne(function (fields) {

package/dist/esm/ui/ConfigPanel/Header.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 /** @jsx jsx */
 import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -21,13 +21,15 @@ var itemBody = css(_templateObject3 || (_templateObject3 = _taggedTemplateLitera
 var centeredItemTitle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
 var itemText = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: ", ";\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), relativeFontSizeToBase16(11.67), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
 var descriptionStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), "var(--ds-space-300, 24px)");
-var closeButtonWrapper = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: ", "px;\n  text-align: right;\n"])), buttonWidth);
+var helpLinkStyle = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding-top: ", ";\n"])), "var(--ds-space-150, 12px)");
+var closeButtonWrapper = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: ", "px;\n  text-align: right;\n"])), buttonWidth);
 var Header = function Header(_ref) {
   var icon = _ref.icon,
     title = _ref.title,
     description = _ref.description,
     summary = _ref.summary,
     documentationUrl = _ref.documentationUrl,
+    enableHelpCTA = _ref.enableHelpCTA,
     onClose = _ref.onClose,
     intl = _ref.intl;
   var ResolvedIcon = Loadable({
@@ -67,11 +69,24 @@ var Header = function Header(_ref) {
   }))), (description || documentationUrl) && jsx("p", {
     css: descriptionStyle,
     "data-testid": "config-panel-header-description"
-  }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && jsx("a", {
+  }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? jsx("p", {
+    css: helpLinkStyle
+  }, jsx(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: intl.formatMessage(messages.help)
+  })) : jsx(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: intl.formatMessage(messages.documentation)
+  }))));
+};
+var HelpLink = function HelpLink(_ref2) {
+  var documentationUrl = _ref2.documentationUrl,
+    label = _ref2.label;
+  return jsx("a", {
     target: "_blank",
     rel: "noopener noreferrer",
     href: documentationUrl,
     "data-testid": "config-panel-header-documentation-link"
-  }, intl.formatMessage(messages.documentation))));
+  }, label);
 };
 export default injectIntl(Header);

package/dist/esm/ui/ConfigPanel/messages.js

@@ -50,6 +50,11 @@ export var messages = defineMessages({
     defaultMessage: 'Documentation',
     description: 'Label for the documentation link'
   },
+  help: {
+    id: 'fabric.editor.configPanel.help',
+    defaultMessage: 'Need help?',
+    description: 'Label for documentation link v.2 (to replace "Documentation" text)'
+  },
   custom: {
     id: 'fabric.editor.configPanel.dateRange.option.custom',
     defaultMessage: 'Custom',

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "189.6.4";
+export var version = "189.6.5";

package/dist/types/ui/ConfigPanel/Header.d.ts

@@ -6,6 +6,7 @@ declare const _default: import("react").FC<import("react-intl-next").WithIntlPro
     description?: string | undefined;
     summary?: string | undefined;
     documentationUrl?: string | undefined;
+    enableHelpCTA?: boolean | undefined;
     icon: Icon;
     onClose: () => void;
 } & WrappedComponentProps<"intl">>> & {
@@ -14,6 +15,7 @@ declare const _default: import("react").FC<import("react-intl-next").WithIntlPro
         description?: string | undefined;
         summary?: string | undefined;
         documentationUrl?: string | undefined;
+        enableHelpCTA?: boolean | undefined;
         icon: Icon;
         onClose: () => void;
     } & WrappedComponentProps<"intl">>;

package/dist/types/ui/ConfigPanel/messages.d.ts

@@ -49,6 +49,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    help: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     custom: {
         id: string;
         defaultMessage: string;

package/dist/types-ts4.5/ui/ConfigPanel/Header.d.ts

@@ -6,6 +6,7 @@ declare const _default: import("react").FC<import("react-intl-next").WithIntlPro
     description?: string | undefined;
     summary?: string | undefined;
     documentationUrl?: string | undefined;
+    enableHelpCTA?: boolean | undefined;
     icon: Icon;
     onClose: () => void;
 } & WrappedComponentProps<"intl">>> & {
@@ -14,6 +15,7 @@ declare const _default: import("react").FC<import("react-intl-next").WithIntlPro
         description?: string | undefined;
         summary?: string | undefined;
         documentationUrl?: string | undefined;
+        enableHelpCTA?: boolean | undefined;
         icon: Icon;
         onClose: () => void;
     } & WrappedComponentProps<"intl">>;

package/dist/types-ts4.5/ui/ConfigPanel/messages.d.ts

@@ -49,6 +49,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    help: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     custom: {
         id: string;
         defaultMessage: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "189.6.4",
+  "version": "189.6.5",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"