@atlaskit/help-layout 4.4.5 → 4.4.7

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/help-layout
 
+## 4.4.7
+
+### Patch Changes
+
+- [#107045](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107045)
+  [`3c95bcb3b29aa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3c95bcb3b29aa) -
+  [ux] refactoring placement of title and close button in IPH header around the isAIEnabled prop
+
+## 4.4.6
+
+### Patch Changes
+
+- [#105756](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105756)
+  [`1151bcad0025a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1151bcad0025a) -
+  [ux] refactoring placement of footer in IPH
+
 ## 4.4.5
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -14,5 +14,5 @@ var createAndFire = exports.createAndFire = x.createAndFireEvent('atlaskit');
 var defaultAnalyticsAttributes = exports.defaultAnalyticsAttributes = {
   componentName: 'helpPanel',
   packageName: "@atlaskit/help-layout",
-  packageVersion: "4.4.5"
+  packageVersion: "4.4.7"
 };

package/dist/cjs/components/Header/BackButton.js

@@ -76,7 +76,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "4.4.5"
+      packageVersion: "4.4.7"
     }
   }, /*#__PURE__*/_react.default.createElement(BackButton, props));
 };

package/dist/cjs/components/Header/CloseButton.js

@@ -21,6 +21,7 @@ var _styled = require("./styled");
  */
 var CloseButton = exports.CloseButton = function CloseButton(_ref) {
   var onClick = _ref.onClick,
+    isAiEnabled = _ref.isAiEnabled,
     formatMessage = _ref.intl.formatMessage;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -32,7 +33,19 @@ var CloseButton = exports.CloseButton = function CloseButton(_ref) {
       onClick(event, _analyticsEvent);
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_styled.CloseButtonContainer, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return isAiEnabled ? /*#__PURE__*/_react.default.createElement(_styled.CloseButtonContainerAi, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: formatMessage(_messages.messages.help_panel_header_close),
+    position: "left"
+  }, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    onClick: handleOnClick,
+    appearance: "subtle",
+    "aria-label": formatMessage(_messages.messages.help_panel_header_close_button),
+    iconBefore: /*#__PURE__*/_react.default.createElement(_closeEditorClose.default, {
+      color: "currentColor",
+      label: formatMessage(_messages.messages.help_panel_header_close),
+      LEGACY_size: "medium"
+    })
+  }))) : /*#__PURE__*/_react.default.createElement(_styled.CloseButtonContainer, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: formatMessage(_messages.messages.help_panel_header_close),
     position: "left"
   }, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
@@ -51,7 +64,7 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "4.4.5"
+      packageVersion: "4.4.7"
     }
   }, /*#__PURE__*/_react.default.createElement(CloseButton, props));
 };

package/dist/cjs/components/Header/index.js

@@ -18,6 +18,7 @@ var HelpContent = exports.HelpContent = function HelpContent(_ref) {
     isBackbuttonVisible = _ref$isBackbuttonVisi === void 0 ? false : _ref$isBackbuttonVisi,
     onCloseButtonClick = _ref.onCloseButtonClick,
     onBackButtonClick = _ref.onBackButtonClick,
+    isAiEnabled = _ref.isAiEnabled,
     formatMessage = _ref.intl.formatMessage;
   var handleOnBackButtonClick = function handleOnBackButtonClick(event, analyticsEvent) {
     if (onBackButtonClick) {
@@ -27,8 +28,9 @@ var HelpContent = exports.HelpContent = function HelpContent(_ref) {
   return /*#__PURE__*/_react.default.createElement(_styled.HeaderContainer, null, /*#__PURE__*/_react.default.createElement(_BackButton.default, {
     onClick: handleOnBackButtonClick,
     isVisible: isBackbuttonVisible
-  }), /*#__PURE__*/_react.default.createElement(_styled.HeaderTitle, null, headerTitle ? headerTitle : formatMessage(_messages.messages.help_panel_header_title)), onCloseButtonClick && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
-    onClick: onCloseButtonClick
+  }), isAiEnabled ? /*#__PURE__*/_react.default.createElement(_styled.HeaderTitleAi, null, headerTitle ? headerTitle : formatMessage(_messages.messages.help_panel_header_title)) : /*#__PURE__*/_react.default.createElement(_styled.HeaderTitle, null, headerTitle ? headerTitle : formatMessage(_messages.messages.help_panel_header_title)), onCloseButtonClick && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
+    onClick: onCloseButtonClick,
+    isAiEnabled: isAiEnabled
   }), headerContent && /*#__PURE__*/_react.default.createElement(_styled.HeaderContent, null, headerContent));
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(HelpContent);

package/dist/cjs/components/Header/styled.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HeaderTitle = exports.HeaderContent = exports.HeaderContainer = exports.CloseButtonContainer = exports.BackButtonContainer = void 0;
+exports.HeaderTitleAi = exports.HeaderTitle = exports.HeaderContent = exports.HeaderContainer = exports.CloseButtonContainerAi = exports.CloseButtonContainer = exports.BackButtonContainer = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -33,6 +33,13 @@ var CloseButtonContainer = exports.CloseButtonContainer = _styled.default.div({
   top: "var(--ds-space-150, 12px)"
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var CloseButtonContainerAi = exports.CloseButtonContainerAi = _styled.default.div({
+  position: 'absolute',
+  right: "var(--ds-space-100, 8px)",
+  top: "var(--ds-space-200, 15px)"
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var BackButtonContainer = exports.BackButtonContainer = _styled.default.div({
   position: 'absolute',
@@ -57,6 +64,24 @@ var HeaderTitle = exports.HeaderTitle = _styled.default.h1({
   verticalAlign: 'middle'
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var HeaderTitleAi = exports.HeaderTitleAi = _styled.default.h1({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  color: "var(--ds-text-subtle, ".concat(colors.N500, ")"),
+  textAlign: 'left',
+  font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-semibold, 600)",
+  paddingTop: "var(--ds-space-250, 18px)",
+  paddingBottom: "var(--ds-space-200, 16px)",
+  width: "calc(100% - ".concat("var(--ds-space-200, 16px)", ")"),
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  display: 'inline-block',
+  overflow: 'hidden',
+  verticalAlign: 'middle',
+  marginLeft: "var(--ds-space-200, 16px)"
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var HeaderContent = exports.HeaderContent = _styled.default.div({
   padding: "0 ".concat("var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)")

package/dist/cjs/components/HelpLayoutContent.js

@@ -43,6 +43,8 @@ var HelpContent = exports.HelpContent = function HelpContent(props) {
     contentWidth: "80%"
   }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     contentWidth: "70%"
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children), footer ? /*#__PURE__*/_react.default.createElement(_styled.HelpFooter, null, footer) : null));
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children), footer ? /*#__PURE__*/_react.default.createElement(_styled.HelpFooter, {
+    "data-testid": "footer"
+  }, footer) : null));
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(HelpContent);

package/dist/es2019/analytics.js

@@ -5,5 +5,5 @@ export const createAndFire = x.createAndFireEvent('atlaskit');
 export const defaultAnalyticsAttributes = {
   componentName: 'helpPanel',
   packageName: "@atlaskit/help-layout",
-  packageVersion: "4.4.5"
+  packageVersion: "4.4.7"
 };

package/dist/es2019/components/Header/BackButton.js

@@ -72,7 +72,7 @@ const BackButtonWithContext = props => {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "4.4.5"
+      packageVersion: "4.4.7"
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };

package/dist/es2019/components/Header/CloseButton.js

@@ -5,7 +5,7 @@ import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/standard-button';
 import EditorCloseIcon from '@atlaskit/icon/core/migration/close--editor-close';
 import { messages } from '../../messages';
-import { CloseButtonContainer } from './styled';
+import { CloseButtonContainer, CloseButtonContainerAi } from './styled';
 /**
  * This function will return a CloseButton component only if the function
  * to be executed on the onClick event is passed as a parameter
@@ -14,6 +14,7 @@ import { CloseButtonContainer } from './styled';
  */
 export const CloseButton = ({
   onClick,
+  isAiEnabled,
   intl: {
     formatMessage
   }
@@ -29,7 +30,19 @@ export const CloseButton = ({
       onClick(event, analyticsEvent);
     }
   };
-  return /*#__PURE__*/React.createElement(CloseButtonContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return isAiEnabled ? /*#__PURE__*/React.createElement(CloseButtonContainerAi, null, /*#__PURE__*/React.createElement(Tooltip, {
+    content: formatMessage(messages.help_panel_header_close),
+    position: "left"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleOnClick,
+    appearance: "subtle",
+    "aria-label": formatMessage(messages.help_panel_header_close_button),
+    iconBefore: /*#__PURE__*/React.createElement(EditorCloseIcon, {
+      color: "currentColor",
+      label: formatMessage(messages.help_panel_header_close),
+      LEGACY_size: "medium"
+    })
+  }))) : /*#__PURE__*/React.createElement(CloseButtonContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
     content: formatMessage(messages.help_panel_header_close),
     position: "left"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -48,7 +61,7 @@ const CloseButtonWithContext = props => {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "4.4.5"
+      packageVersion: "4.4.7"
     }
   }, /*#__PURE__*/React.createElement(CloseButton, props));
 };

package/dist/es2019/components/Header/index.js

@@ -3,13 +3,14 @@ import { injectIntl } from 'react-intl-next';
 import { messages } from '../../messages';
 import CloseButton from './CloseButton';
 import BackButton from './BackButton';
-import { HeaderContainer, HeaderTitle, HeaderContent } from './styled';
+import { HeaderContainer, HeaderTitle, HeaderContent, HeaderTitleAi } from './styled';
 export const HelpContent = ({
   headerTitle,
   headerContent,
   isBackbuttonVisible = false,
   onCloseButtonClick,
   onBackButtonClick,
+  isAiEnabled,
   intl: {
     formatMessage
   }
@@ -22,8 +23,9 @@ export const HelpContent = ({
   return /*#__PURE__*/React.createElement(HeaderContainer, null, /*#__PURE__*/React.createElement(BackButton, {
     onClick: handleOnBackButtonClick,
     isVisible: isBackbuttonVisible
-  }), /*#__PURE__*/React.createElement(HeaderTitle, null, headerTitle ? headerTitle : formatMessage(messages.help_panel_header_title)), onCloseButtonClick && /*#__PURE__*/React.createElement(CloseButton, {
-    onClick: onCloseButtonClick
+  }), isAiEnabled ? /*#__PURE__*/React.createElement(HeaderTitleAi, null, headerTitle ? headerTitle : formatMessage(messages.help_panel_header_title)) : /*#__PURE__*/React.createElement(HeaderTitle, null, headerTitle ? headerTitle : formatMessage(messages.help_panel_header_title)), onCloseButtonClick && /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: onCloseButtonClick,
+    isAiEnabled: isAiEnabled
   }), headerContent && /*#__PURE__*/React.createElement(HeaderContent, null, headerContent));
 };
 export default injectIntl(HelpContent);

package/dist/es2019/components/Header/styled.js

@@ -22,6 +22,13 @@ export const CloseButtonContainer = styled.div({
   top: "var(--ds-space-150, 12px)"
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const CloseButtonContainerAi = styled.div({
+  position: 'absolute',
+  right: "var(--ds-space-100, 8px)",
+  top: "var(--ds-space-200, 15px)"
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const BackButtonContainer = styled.div({
   position: 'absolute',
@@ -46,6 +53,24 @@ export const HeaderTitle = styled.h1({
   verticalAlign: 'middle'
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const HeaderTitleAi = styled.h1({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  color: `var(--ds-text-subtle, ${colors.N500})`,
+  textAlign: 'left',
+  font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-semibold, 600)",
+  paddingTop: "var(--ds-space-250, 18px)",
+  paddingBottom: "var(--ds-space-200, 16px)",
+  width: `calc(100% - ${"var(--ds-space-200, 16px)"})`,
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  display: 'inline-block',
+  overflow: 'hidden',
+  verticalAlign: 'middle',
+  marginLeft: "var(--ds-space-200, 16px)"
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const HeaderContent = styled.div({
   padding: `0 ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"}`

package/dist/es2019/components/HelpLayoutContent.js

@@ -37,6 +37,8 @@ export const HelpContent = props => {
     contentWidth: "80%"
   }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentWidth: "70%"
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, children), footer ? /*#__PURE__*/React.createElement(HelpFooter, null, footer) : null));
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, children), footer ? /*#__PURE__*/React.createElement(HelpFooter, {
+    "data-testid": "footer"
+  }, footer) : null));
 };
 export default injectIntl(HelpContent);

package/dist/esm/analytics.js

@@ -5,5 +5,5 @@ export var createAndFire = x.createAndFireEvent('atlaskit');
 export var defaultAnalyticsAttributes = {
   componentName: 'helpPanel',
   packageName: "@atlaskit/help-layout",
-  packageVersion: "4.4.5"
+  packageVersion: "4.4.7"
 };

package/dist/esm/components/Header/BackButton.js

@@ -69,7 +69,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "4.4.5"
+      packageVersion: "4.4.7"
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };

package/dist/esm/components/Header/CloseButton.js

@@ -5,7 +5,7 @@ import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/standard-button';
 import EditorCloseIcon from '@atlaskit/icon/core/migration/close--editor-close';
 import { messages } from '../../messages';
-import { CloseButtonContainer } from './styled';
+import { CloseButtonContainer, CloseButtonContainerAi } from './styled';
 /**
  * This function will return a CloseButton component only if the function
  * to be executed on the onClick event is passed as a parameter
@@ -14,6 +14,7 @@ import { CloseButtonContainer } from './styled';
  */
 export var CloseButton = function CloseButton(_ref) {
   var onClick = _ref.onClick,
+    isAiEnabled = _ref.isAiEnabled,
     formatMessage = _ref.intl.formatMessage;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -25,7 +26,19 @@ export var CloseButton = function CloseButton(_ref) {
       onClick(event, _analyticsEvent);
     }
   };
-  return /*#__PURE__*/React.createElement(CloseButtonContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return isAiEnabled ? /*#__PURE__*/React.createElement(CloseButtonContainerAi, null, /*#__PURE__*/React.createElement(Tooltip, {
+    content: formatMessage(messages.help_panel_header_close),
+    position: "left"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleOnClick,
+    appearance: "subtle",
+    "aria-label": formatMessage(messages.help_panel_header_close_button),
+    iconBefore: /*#__PURE__*/React.createElement(EditorCloseIcon, {
+      color: "currentColor",
+      label: formatMessage(messages.help_panel_header_close),
+      LEGACY_size: "medium"
+    })
+  }))) : /*#__PURE__*/React.createElement(CloseButtonContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
     content: formatMessage(messages.help_panel_header_close),
     position: "left"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -44,7 +57,7 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "4.4.5"
+      packageVersion: "4.4.7"
     }
   }, /*#__PURE__*/React.createElement(CloseButton, props));
 };

package/dist/esm/components/Header/index.js

@@ -3,7 +3,7 @@ import { injectIntl } from 'react-intl-next';
 import { messages } from '../../messages';
 import CloseButton from './CloseButton';
 import BackButton from './BackButton';
-import { HeaderContainer, HeaderTitle, HeaderContent } from './styled';
+import { HeaderContainer, HeaderTitle, HeaderContent, HeaderTitleAi } from './styled';
 export var HelpContent = function HelpContent(_ref) {
   var headerTitle = _ref.headerTitle,
     headerContent = _ref.headerContent,
@@ -11,6 +11,7 @@ export var HelpContent = function HelpContent(_ref) {
     isBackbuttonVisible = _ref$isBackbuttonVisi === void 0 ? false : _ref$isBackbuttonVisi,
     onCloseButtonClick = _ref.onCloseButtonClick,
     onBackButtonClick = _ref.onBackButtonClick,
+    isAiEnabled = _ref.isAiEnabled,
     formatMessage = _ref.intl.formatMessage;
   var handleOnBackButtonClick = function handleOnBackButtonClick(event, analyticsEvent) {
     if (onBackButtonClick) {
@@ -20,8 +21,9 @@ export var HelpContent = function HelpContent(_ref) {
   return /*#__PURE__*/React.createElement(HeaderContainer, null, /*#__PURE__*/React.createElement(BackButton, {
     onClick: handleOnBackButtonClick,
     isVisible: isBackbuttonVisible
-  }), /*#__PURE__*/React.createElement(HeaderTitle, null, headerTitle ? headerTitle : formatMessage(messages.help_panel_header_title)), onCloseButtonClick && /*#__PURE__*/React.createElement(CloseButton, {
-    onClick: onCloseButtonClick
+  }), isAiEnabled ? /*#__PURE__*/React.createElement(HeaderTitleAi, null, headerTitle ? headerTitle : formatMessage(messages.help_panel_header_title)) : /*#__PURE__*/React.createElement(HeaderTitle, null, headerTitle ? headerTitle : formatMessage(messages.help_panel_header_title)), onCloseButtonClick && /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: onCloseButtonClick,
+    isAiEnabled: isAiEnabled
   }), headerContent && /*#__PURE__*/React.createElement(HeaderContent, null, headerContent));
 };
 export default injectIntl(HelpContent);

package/dist/esm/components/Header/styled.js

@@ -22,6 +22,13 @@ export var CloseButtonContainer = styled.div({
   top: "var(--ds-space-150, 12px)"
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var CloseButtonContainerAi = styled.div({
+  position: 'absolute',
+  right: "var(--ds-space-100, 8px)",
+  top: "var(--ds-space-200, 15px)"
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var BackButtonContainer = styled.div({
   position: 'absolute',
@@ -46,6 +53,24 @@ export var HeaderTitle = styled.h1({
   verticalAlign: 'middle'
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var HeaderTitleAi = styled.h1({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  color: "var(--ds-text-subtle, ".concat(colors.N500, ")"),
+  textAlign: 'left',
+  font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-semibold, 600)",
+  paddingTop: "var(--ds-space-250, 18px)",
+  paddingBottom: "var(--ds-space-200, 16px)",
+  width: "calc(100% - ".concat("var(--ds-space-200, 16px)", ")"),
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  display: 'inline-block',
+  overflow: 'hidden',
+  verticalAlign: 'middle',
+  marginLeft: "var(--ds-space-200, 16px)"
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var HeaderContent = styled.div({
   padding: "0 ".concat("var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)")

package/dist/esm/components/HelpLayoutContent.js

@@ -36,6 +36,8 @@ export var HelpContent = function HelpContent(props) {
     contentWidth: "80%"
   }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentWidth: "70%"
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, children), footer ? /*#__PURE__*/React.createElement(HelpFooter, null, footer) : null));
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, children), footer ? /*#__PURE__*/React.createElement(HelpFooter, {
+    "data-testid": "footer"
+  }, footer) : null));
 };
 export default injectIntl(HelpContent);

package/dist/types/components/Header/CloseButton.d.ts

@@ -3,6 +3,7 @@ import { type WrappedComponentProps } from 'react-intl-next';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 interface Props {
     onClick(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent?: UIAnalyticsEvent): void;
+    isAiEnabled?: boolean;
 }
 /**
  * This function will return a CloseButton component only if the function

package/dist/types/components/Header/styled.d.ts

@@ -7,6 +7,10 @@ export declare const CloseButtonContainer: import("@emotion/styled").StyledCompo
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CloseButtonContainerAi: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BackButtonContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -15,6 +19,10 @@ export declare const HeaderTitle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const HeaderTitleAi: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 export declare const HeaderContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/dist/types/model/HelpLayout.d.ts

@@ -6,9 +6,11 @@ export interface HelpPanelHeader {
     onCloseButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
     onBackButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
     isBackbuttonVisible?: boolean;
+    isAiEnabled?: boolean;
 }
 export interface HelpLayout extends HelpPanelHeader {
     isLoading?: boolean;
     footer?: React.ReactNode;
     children?: React.ReactNode;
+    isAiEnabled?: boolean;
 }

package/dist/types-ts4.5/components/Header/CloseButton.d.ts

@@ -3,6 +3,7 @@ import { type WrappedComponentProps } from 'react-intl-next';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 interface Props {
     onClick(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent?: UIAnalyticsEvent): void;
+    isAiEnabled?: boolean;
 }
 /**
  * This function will return a CloseButton component only if the function

package/dist/types-ts4.5/components/Header/styled.d.ts

@@ -7,6 +7,10 @@ export declare const CloseButtonContainer: import("@emotion/styled").StyledCompo
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CloseButtonContainerAi: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BackButtonContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -15,6 +19,10 @@ export declare const HeaderTitle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const HeaderTitleAi: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 export declare const HeaderContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/dist/types-ts4.5/model/HelpLayout.d.ts

@@ -6,9 +6,11 @@ export interface HelpPanelHeader {
     onCloseButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
     onBackButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
     isBackbuttonVisible?: boolean;
+    isAiEnabled?: boolean;
 }
 export interface HelpLayout extends HelpPanelHeader {
     isLoading?: boolean;
     footer?: React.ReactNode;
     children?: React.ReactNode;
+    isAiEnabled?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/help-layout",
-	"version": "4.4.5",
+	"version": "4.4.7",
 	"description": "Layout for the atlaskit/help component.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,9 +32,9 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.2.0",
 		"@atlaskit/button": "^20.3.0",
-		"@atlaskit/icon": "^23.3.0",
+		"@atlaskit/icon": "^23.4.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^3.0.0",
+		"@atlaskit/tokens": "^3.2.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",