@atlaskit/help-layout 6.0.2 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/help-layout
 
+## 6.1.0
+
+### Minor Changes
+
+- [#148345](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148345)
+  [`dca737c2952f7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dca737c2952f7) -
+  [ux] Enabling side tab view via sideNavTabs prop
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.0.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -23,9 +23,18 @@
         {
             "path": "../../../design-system/button/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/css/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../design-system/heading/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/icon/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/theme/afm-cc/tsconfig.json"
         },

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: "6.0.2"
+  packageVersion: "6.1.0"
 };

package/dist/cjs/components/DynamicHeader/index.compiled.css

@@ -0,0 +1,4 @@
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

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

@@ -0,0 +1,35 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DynamicHeader = void 0;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _CloseButton = _interopRequireDefault(require("../Header/CloseButton"));
+var _compiled = require("@atlaskit/primitives/compiled");
+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); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  container: "_ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi"
+};
+var DynamicHeader = exports.DynamicHeader = function DynamicHeader(_ref) {
+  var title = _ref.title,
+    onCloseButtonClick = _ref.onCloseButtonClick,
+    onNewChatButtonClick = _ref.onNewChatButtonClick;
+  return /*#__PURE__*/React.createElement(_compiled.Flex, {
+    direction: "row",
+    justifyContent: "space-between",
+    xcss: styles.container
+  }, /*#__PURE__*/React.createElement(_heading.default, {
+    size: "medium",
+    testId: "header-title-side-nav"
+  }, title), onCloseButtonClick && /*#__PURE__*/React.createElement(_CloseButton.default, {
+    onClick: onCloseButtonClick
+  }));
+};

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

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

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

@@ -21,7 +21,6 @@ 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;
@@ -33,19 +32,7 @@ var CloseButton = exports.CloseButton = function CloseButton(_ref) {
       onClick(event, _analyticsEvent);
     }
   };
-  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, {
+  return /*#__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, {
@@ -64,7 +51,7 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.0.2"
+      packageVersion: "6.1.0"
     }
   }, /*#__PURE__*/_react.default.createElement(CloseButton, props));
 };

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

@@ -18,7 +18,6 @@ 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) {
@@ -28,9 +27,8 @@ 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
-  }), 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
+  }), /*#__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
   }), headerContent && /*#__PURE__*/_react.default.createElement(_styled.HeaderContent, null, headerContent));
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(HelpContent);

package/dist/cjs/components/Header/styled.compiled.css

@@ -1,14 +1,11 @@
 ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._v5641kw6{transition:var(--_ejvfk7)}
 ._n7zl3yx5{border-bottom:var(--_1it2dty)}
-._154i1q64{top:var(--ds-space-200,15px)}
 ._154iutpp{top:var(--ds-space-150,9pt)}
 ._18m915vq{overflow-y:hidden}
-._18u0pxbi{margin-left:var(--ds-space-200,1pc)}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1osq{width:100%}
-._1bsbb8xr{width:var(--_2br7en)}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1o8l{display:inline-block}
 ._1ltv1ejb{left:var(--ds-space-300,24px)}
@@ -16,7 +13,6 @@
 ._1xi2u2gc{right:var(--ds-space-100,8px)}
 ._bfhk1v7z{background-color:var(--_1xglsrh)}
 ._ca0qidpf{padding-top:0}
-._ca0qoybe{padding-top:var(--ds-space-250,18px)}
 ._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
@@ -27,5 +23,4 @@
 ._tzy4idpf{opacity:0}
 ._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
 ._vwz41u3r{line-height:var(--ds-space-800,56px)}
-._y3gn1e5h{text-align:left}
 ._y3gn1h6o{text-align:center}

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRANSITION_DURATION_MS = exports.HeaderTitleAi = exports.HeaderTitle = exports.HeaderContent = exports.HeaderContainer = exports.CloseButtonContainerAi = exports.CloseButtonContainer = exports.BackButtonContainer = void 0;
+exports.TRANSITION_DURATION_MS = exports.HeaderTitle = exports.HeaderContent = exports.HeaderContainer = exports.CloseButtonContainer = exports.BackButtonContainer = void 0;
 require("./styled.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -31,13 +31,6 @@ var CloseButtonContainer = exports.CloseButtonContainer = function CloseButtonCo
     className: (0, _runtime.ax)(["_kqswstnw _1xi2u2gc _154iutpp"])
   }, children);
 };
-var closeButtonContainerAiStyles = null;
-var CloseButtonContainerAi = exports.CloseButtonContainerAi = function CloseButtonContainerAi(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)(["_kqswstnw _1xi2u2gc _154i1q64"])
-  }, children);
-};
 var TRANSITION_DURATION_MS = exports.TRANSITION_DURATION_MS = 220;
 var backButtonContainerStyles = null;
 var backButtonContainerTransitionStyles = {
@@ -50,9 +43,9 @@ var backButtonContainerTransitionStyles = {
     opacity: 0
   }
 };
-var BackButtonContainer = exports.BackButtonContainer = function BackButtonContainer(_ref4) {
-  var transitionState = _ref4.transitionState,
-    children = _ref4.children;
+var BackButtonContainer = exports.BackButtonContainer = function BackButtonContainer(_ref3) {
+  var transitionState = _ref3.transitionState,
+    children = _ref3.children;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)(["_v5641kw6 _1ltv1ejb _tzy4idpf _kqswstnw _154iutpp"]),
     style: _objectSpread(_objectSpread({}, backButtonContainerTransitionStyles[transitionState]), {}, {
@@ -61,8 +54,8 @@ var BackButtonContainer = exports.BackButtonContainer = function BackButtonConta
   }, children);
 };
 var headerTitleStyles = null;
-var HeaderTitle = exports.HeaderTitle = function HeaderTitle(_ref5) {
-  var children = _ref5.children;
+var HeaderTitle = exports.HeaderTitle = function HeaderTitle(_ref4) {
+  var children = _ref4.children;
   return /*#__PURE__*/_react.default.createElement("h1", {
     className: (0, _runtime.ax)(["_11c81ixg _1reo15vq _18m915vq _syaz1425 _y3gn1h6o _k48p1pd9 _vwz41u3r _1bsb1osq _o5721q9c _1bto1l2s _1e0c1o8l _s7n4nkob"]),
     style: {
@@ -70,20 +63,9 @@ var HeaderTitle = exports.HeaderTitle = function HeaderTitle(_ref5) {
     }
   }, children);
 };
-var headerTitleAiStyles = null;
-var HeaderTitleAi = exports.HeaderTitleAi = function HeaderTitleAi(_ref6) {
-  var children = _ref6.children;
-  return /*#__PURE__*/_react.default.createElement("h1", {
-    className: (0, _runtime.ax)(["_11c81ixg _1reo15vq _18m915vq _syaz1425 _y3gn1e5h _k48p1pd9 _ca0qoybe _n3tdpxbi _1bsbb8xr _o5721q9c _1bto1l2s _1e0c1o8l _s7n4nkob _18u0pxbi"]),
-    style: {
-      "--_13a5t4u": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N500, ")")),
-      "--_2br7en": (0, _runtime.ix)("calc(100% - ".concat("var(--ds-space-200, 16px)", ")"))
-    }
-  }, children);
-};
 var headerContentStyles = null;
-var HeaderContent = exports.HeaderContent = function HeaderContent(_ref7) {
-  var children = _ref7.children;
+var HeaderContent = exports.HeaderContent = function HeaderContent(_ref5) {
+  var children = _ref5.children;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)(["_ca0qidpf _u5f3pxbi _n3tdpxbi _19bvpxbi"])
   }, children);

package/dist/cjs/components/HelpLayoutContent.js

@@ -9,17 +9,22 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _Header = _interopRequireDefault(require("./Header"));
+var _SideNav = require("./SideNav");
 var _messages = require("../messages");
 var _styled = require("./styled");
-var _excluded = ["isLoading", "footer", "children", "intl"];
+var _excluded = ["isLoading", "footer", "children", "intl", "sideNavTabs"];
 var HelpContent = exports.HelpContent = function HelpContent(props) {
   var _props$isLoading = props.isLoading,
     isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
     footer = props.footer,
     children = props.children,
     formatMessage = props.intl.formatMessage,
+    _props$sideNavTabs = props.sideNavTabs,
+    sideNavTabs = _props$sideNavTabs === void 0 ? [] : _props$sideNavTabs,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_styled.Container, null, /*#__PURE__*/_react.default.createElement(_styled.Section, null, /*#__PURE__*/_react.default.createElement(_Header.default, rest), isLoading ? /*#__PURE__*/_react.default.createElement(_styled.LoadingContainer, {
+  return sideNavTabs !== null && sideNavTabs !== void 0 && sideNavTabs.length ? /*#__PURE__*/_react.default.createElement(_styled.Container, null, /*#__PURE__*/_react.default.createElement(_styled.Section, null, /*#__PURE__*/_react.default.createElement(_SideNav.SideNav, {
+    sideNavTabs: sideNavTabs
+  }))) : /*#__PURE__*/_react.default.createElement(_styled.Container, null, /*#__PURE__*/_react.default.createElement(_styled.Section, null, /*#__PURE__*/_react.default.createElement(_Header.default, rest), isLoading ? /*#__PURE__*/_react.default.createElement(_styled.LoadingContainer, {
     "aria-label": formatMessage(_messages.messages.help_loading),
     role: "img"
   }, /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {

package/dist/cjs/components/SideNav/index.compiled.css

@@ -0,0 +1,28 @@
+
+._19it145i{border:var(--ds-border-width,1px) solid transparent}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._1h6d15qp{border-color:var(--ds-border-accent-blue,#1d7afc)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._18m91wug{overflow-y:auto}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo1wug{overflow-x:auto}
+._1ul91wqb{min-width:60px}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._80omtlke{cursor:pointer}
+._bfhk1d5g{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._bfhk1j28{background-color:transparent}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._o5721q9c{white-space:nowrap}
+._otyr1b66{margin-bottom:var(--ds-space-050,4px)}
+._syaz14q2{color:var(--ds-link,#0c66e4)}
+._vchhusvi{box-sizing:border-box}
+._30l314q2:hover{color:var(--ds-link,#0c66e4)}
+._30l31fxt:hover{color:var(--ds-text,#172b4d)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}

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

@@ -0,0 +1,70 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNav = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _css = require("@atlaskit/css");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _DynamicHeader = require("../DynamicHeader");
+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); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  mainContent: "_1reo1wug _18m91wug _4t3i1osq _1bsb1osq",
+  navBarWrapper: "_1reo1wug _18m91wug _4t3i1osq _1bsb1osq",
+  navButton: "_2rkoiti9 _zulpu2gc _19it145i _1rjcu2gc _1e0c1txw _bfhk1j28 _2lx21bp4 _4cvr1h6o _80omtlke _vchhusvi _o5721q9c _1bsb1osq _irr3166n _30l31fxt",
+  navButtonSelected: "_1h6d15qp _bfhkfg4m _syaz14q2 _irr3i1yw _30l314q2",
+  wrapper: "_1reo1wug _18m91wug _4t3i1osq _1ul91wqb _bfhk1d5g",
+  navItemWrapper: "_19pk1b66 _2hwx1b66 _otyr1b66 _18u01b66"
+};
+var SideNav = exports.SideNav = function SideNav(_ref) {
+  var sideNavTabs = _ref.sideNavTabs;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  return /*#__PURE__*/React.createElement(_compiled.Flex, {
+    xcss: styles.navBarWrapper
+  }, /*#__PURE__*/React.createElement(_compiled.Flex, {
+    justifyContent: "space-between",
+    xcss: styles.wrapper,
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(_compiled.Stack, {
+    testId: "side-nav-tabs"
+  }, sideNavTabs.map(function (tab, index) {
+    return /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.navItemWrapper,
+      key: tab.label,
+      testId: "side-nav-".concat(tab.label)
+    }, /*#__PURE__*/React.createElement(_tooltip.default, {
+      ignoreTooltipPointerEvents: true,
+      position: "left",
+      content: tab.label
+    }, /*#__PURE__*/React.createElement(_compiled.Pressable, {
+      xcss: (0, _css.cx)(styles.navButton, index === activeIndex && styles.navButtonSelected),
+      onClick: function onClick() {
+        setActiveIndex(index);
+      },
+      testId: "side-nav-button-".concat(tab.label)
+    }, tab.icon, /*#__PURE__*/React.createElement(_compiled.Text, {
+      size: "small",
+      color: index === activeIndex ? 'color.link' : 'color.text.subtle'
+    }, tab.label))));
+  }))), /*#__PURE__*/React.createElement(_compiled.Flex, {
+    direction: "column",
+    xcss: styles.mainContent
+  }, /*#__PURE__*/React.createElement(_DynamicHeader.DynamicHeader, {
+    title: sideNavTabs[activeIndex].header.title,
+    onCloseButtonClick: sideNavTabs[activeIndex].header.onCloseButtonClick,
+    onNewChatButtonClick: sideNavTabs[activeIndex].header.onNewChatButtonClick
+  }), sideNavTabs[activeIndex].content));
+};

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: "6.0.2"
+  packageVersion: "6.1.0"
 };

package/dist/es2019/components/DynamicHeader/index.compiled.css

@@ -0,0 +1,4 @@
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

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

@@ -0,0 +1,26 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Heading from '@atlaskit/heading';
+import CloseButton from '../Header/CloseButton';
+import { Flex } from '@atlaskit/primitives/compiled';
+const styles = {
+  container: "_ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi"
+};
+export const DynamicHeader = ({
+  title,
+  onCloseButtonClick,
+  onNewChatButtonClick
+}) => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    direction: "row",
+    justifyContent: "space-between",
+    xcss: styles.container
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "medium",
+    testId: "header-title-side-nav"
+  }, title), onCloseButtonClick && /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: onCloseButtonClick
+  }));
+};

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

@@ -50,7 +50,7 @@ const BackButtonWithContext = props => {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.0.2"
+      packageVersion: "6.1.0"
     }
   }, /*#__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, CloseButtonContainerAi } from './styled';
+import { CloseButtonContainer } 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,7 +14,6 @@ import { CloseButtonContainer, CloseButtonContainerAi } from './styled';
  */
 export const CloseButton = ({
   onClick,
-  isAiEnabled,
   intl: {
     formatMessage
   }
@@ -30,19 +29,7 @@ export const CloseButton = ({
       onClick(event, analyticsEvent);
     }
   };
-  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, {
+  return /*#__PURE__*/React.createElement(CloseButtonContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
     content: formatMessage(messages.help_panel_header_close),
     position: "left"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -61,7 +48,7 @@ const CloseButtonWithContext = props => {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.0.2"
+      packageVersion: "6.1.0"
     }
   }, /*#__PURE__*/React.createElement(CloseButton, props));
 };

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

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

package/dist/es2019/components/Header/styled.compiled.css

@@ -1,14 +1,11 @@
 ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._v5641kd4{transition:left .22s,opacity .22s}
 ._n7zlmfkj{border-bottom:var(--ds-space-025,2px) solid var(--ds-border,#ebecf0)}
-._154i1q64{top:var(--ds-space-200,15px)}
 ._154iutpp{top:var(--ds-space-150,9pt)}
 ._18m915vq{overflow-y:hidden}
-._18u0pxbi{margin-left:var(--ds-space-200,1pc)}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1osq{width:100%}
-._1bsbnau3{width:calc(100% - var(--ds-space-200, 1pc))}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1o8l{display:inline-block}
 ._1ltv1ejb{left:var(--ds-space-300,24px)}
@@ -16,7 +13,6 @@
 ._1xi2u2gc{right:var(--ds-space-100,8px)}
 ._bfhk1gi7{background-color:var(--ds-background-neutral,#fafbfc)}
 ._ca0qidpf{padding-top:0}
-._ca0qoybe{padding-top:var(--ds-space-250,18px)}
 ._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
@@ -27,5 +23,4 @@
 ._tzy4idpf{opacity:0}
 ._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
 ._vwz41u3r{line-height:var(--ds-space-800,56px)}
-._y3gn1e5h{text-align:left}
 ._y3gn1h6o{text-align:center}

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

@@ -15,12 +15,6 @@ export const CloseButtonContainer = ({
 }) => /*#__PURE__*/React.createElement("div", {
   className: ax(["_kqswstnw _1xi2u2gc _154iutpp"])
 }, children);
-const closeButtonContainerAiStyles = null;
-export const CloseButtonContainerAi = ({
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: ax(["_kqswstnw _1xi2u2gc _154i1q64"])
-}, children);
 export const TRANSITION_DURATION_MS = 220;
 const backButtonContainerStyles = null;
 const backButtonContainerTransitionStyles = {
@@ -46,12 +40,6 @@ export const HeaderTitle = ({
 }) => /*#__PURE__*/React.createElement("h1", {
   className: ax(["_11c81ixg _1reo15vq _18m915vq _syazjjyb _y3gn1h6o _k48p1pd9 _vwz41u3r _1bsb1osq _o5721q9c _1bto1l2s _1e0c1o8l _s7n4nkob"])
 }, children);
-const headerTitleAiStyles = null;
-export const HeaderTitleAi = ({
-  children
-}) => /*#__PURE__*/React.createElement("h1", {
-  className: ax(["_11c81ixg _1reo15vq _18m915vq _syazjjyb _y3gn1e5h _k48p1pd9 _ca0qoybe _n3tdpxbi _1bsbnau3 _o5721q9c _1bto1l2s _1e0c1o8l _s7n4nkob _18u0pxbi"])
-}, children);
 const headerContentStyles = null;
 export const HeaderContent = ({
   children

package/dist/es2019/components/HelpLayoutContent.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import Header from './Header';
+import { SideNav } from './SideNav';
 import { messages } from '../messages';
 import { Container, Section, HelpFooter, LoadingContainer, LoadingRectangle } from './styled';
 export const HelpContent = props => {
@@ -11,9 +12,12 @@ export const HelpContent = props => {
     intl: {
       formatMessage
     },
+    sideNavTabs = [],
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(Header, rest), isLoading ? /*#__PURE__*/React.createElement(LoadingContainer, {
+  return sideNavTabs !== null && sideNavTabs !== void 0 && sideNavTabs.length ? /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(SideNav, {
+    sideNavTabs: sideNavTabs
+  }))) : /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(Header, rest), isLoading ? /*#__PURE__*/React.createElement(LoadingContainer, {
     "aria-label": formatMessage(messages.help_loading),
     role: "img"
   }, /*#__PURE__*/React.createElement(LoadingRectangle, {

package/dist/es2019/components/SideNav/index.compiled.css

@@ -0,0 +1,28 @@
+
+._19it145i{border:var(--ds-border-width,1px) solid transparent}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._1h6d15qp{border-color:var(--ds-border-accent-blue,#1d7afc)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._18m91wug{overflow-y:auto}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo1wug{overflow-x:auto}
+._1ul91wqb{min-width:60px}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._80omtlke{cursor:pointer}
+._bfhk1d5g{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._bfhk1j28{background-color:transparent}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._o5721q9c{white-space:nowrap}
+._otyr1b66{margin-bottom:var(--ds-space-050,4px)}
+._syaz14q2{color:var(--ds-link,#0c66e4)}
+._vchhusvi{box-sizing:border-box}
+._30l314q2:hover{color:var(--ds-link,#0c66e4)}
+._30l31fxt:hover{color:var(--ds-text,#172b4d)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}

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

@@ -0,0 +1,55 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useState } from 'react';
+import { cx } from '@atlaskit/css';
+import { Box, Flex, Pressable, Stack, Text } from '@atlaskit/primitives/compiled';
+import Tooltip from '@atlaskit/tooltip';
+import { DynamicHeader } from '../DynamicHeader';
+const styles = {
+  mainContent: "_1reo1wug _18m91wug _4t3i1osq _1bsb1osq",
+  navBarWrapper: "_1reo1wug _18m91wug _4t3i1osq _1bsb1osq",
+  navButton: "_2rkoiti9 _zulpu2gc _19it145i _1rjcu2gc _1e0c1txw _bfhk1j28 _2lx21bp4 _4cvr1h6o _80omtlke _vchhusvi _o5721q9c _1bsb1osq _irr3166n _30l31fxt",
+  navButtonSelected: "_1h6d15qp _bfhkfg4m _syaz14q2 _irr3i1yw _30l314q2",
+  wrapper: "_1reo1wug _18m91wug _4t3i1osq _1ul91wqb _bfhk1d5g",
+  navItemWrapper: "_19pk1b66 _2hwx1b66 _otyr1b66 _18u01b66"
+};
+export const SideNav = ({
+  sideNavTabs
+}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.navBarWrapper
+  }, /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "space-between",
+    xcss: styles.wrapper,
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    testId: "side-nav-tabs"
+  }, sideNavTabs.map((tab, index) => /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.navItemWrapper,
+    key: tab.label,
+    testId: `side-nav-${tab.label}`
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    ignoreTooltipPointerEvents: true,
+    position: "left",
+    content: tab.label
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    xcss: cx(styles.navButton, index === activeIndex && styles.navButtonSelected),
+    onClick: () => {
+      setActiveIndex(index);
+    },
+    testId: `side-nav-button-${tab.label}`
+  }, tab.icon, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: index === activeIndex ? 'color.link' : 'color.text.subtle'
+  }, tab.label))))))), /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    xcss: styles.mainContent
+  }, /*#__PURE__*/React.createElement(DynamicHeader, {
+    title: sideNavTabs[activeIndex].header.title,
+    onCloseButtonClick: sideNavTabs[activeIndex].header.onCloseButtonClick,
+    onNewChatButtonClick: sideNavTabs[activeIndex].header.onNewChatButtonClick
+  }), sideNavTabs[activeIndex].content));
+};

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: "6.0.2"
+  packageVersion: "6.1.0"
 };

package/dist/esm/components/DynamicHeader/index.compiled.css

@@ -0,0 +1,4 @@
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

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

@@ -0,0 +1,25 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Heading from '@atlaskit/heading';
+import CloseButton from '../Header/CloseButton';
+import { Flex } from '@atlaskit/primitives/compiled';
+var styles = {
+  container: "_ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi"
+};
+export var DynamicHeader = function DynamicHeader(_ref) {
+  var title = _ref.title,
+    onCloseButtonClick = _ref.onCloseButtonClick,
+    onNewChatButtonClick = _ref.onNewChatButtonClick;
+  return /*#__PURE__*/React.createElement(Flex, {
+    direction: "row",
+    justifyContent: "space-between",
+    xcss: styles.container
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "medium",
+    testId: "header-title-side-nav"
+  }, title), onCloseButtonClick && /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: onCloseButtonClick
+  }));
+};

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

@@ -49,7 +49,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.0.2"
+      packageVersion: "6.1.0"
     }
   }, /*#__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, CloseButtonContainerAi } from './styled';
+import { CloseButtonContainer } 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,7 +14,6 @@ import { CloseButtonContainer, CloseButtonContainerAi } 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;
@@ -26,19 +25,7 @@ export var CloseButton = function CloseButton(_ref) {
       onClick(event, _analyticsEvent);
     }
   };
-  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, {
+  return /*#__PURE__*/React.createElement(CloseButtonContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
     content: formatMessage(messages.help_panel_header_close),
     position: "left"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -57,7 +44,7 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.0.2"
+      packageVersion: "6.1.0"
     }
   }, /*#__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, HeaderTitleAi } from './styled';
+import { HeaderContainer, HeaderTitle, HeaderContent } from './styled';
 export var HelpContent = function HelpContent(_ref) {
   var headerTitle = _ref.headerTitle,
     headerContent = _ref.headerContent,
@@ -11,7 +11,6 @@ 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) {
@@ -21,9 +20,8 @@ export var HelpContent = function HelpContent(_ref) {
   return /*#__PURE__*/React.createElement(HeaderContainer, null, /*#__PURE__*/React.createElement(BackButton, {
     onClick: handleOnBackButtonClick,
     isVisible: isBackbuttonVisible
-  }), 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
+  }), /*#__PURE__*/React.createElement(HeaderTitle, null, headerTitle ? headerTitle : formatMessage(messages.help_panel_header_title)), onCloseButtonClick && /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: onCloseButtonClick
   }), headerContent && /*#__PURE__*/React.createElement(HeaderContent, null, headerContent));
 };
 export default injectIntl(HelpContent);

package/dist/esm/components/Header/styled.compiled.css

@@ -1,14 +1,11 @@
 ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._v5641kw6{transition:var(--_ejvfk7)}
 ._n7zl3yx5{border-bottom:var(--_1it2dty)}
-._154i1q64{top:var(--ds-space-200,15px)}
 ._154iutpp{top:var(--ds-space-150,9pt)}
 ._18m915vq{overflow-y:hidden}
-._18u0pxbi{margin-left:var(--ds-space-200,1pc)}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1osq{width:100%}
-._1bsbb8xr{width:var(--_2br7en)}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1o8l{display:inline-block}
 ._1ltv1ejb{left:var(--ds-space-300,24px)}
@@ -16,7 +13,6 @@
 ._1xi2u2gc{right:var(--ds-space-100,8px)}
 ._bfhk1v7z{background-color:var(--_1xglsrh)}
 ._ca0qidpf{padding-top:0}
-._ca0qoybe{padding-top:var(--ds-space-250,18px)}
 ._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
@@ -27,5 +23,4 @@
 ._tzy4idpf{opacity:0}
 ._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
 ._vwz41u3r{line-height:var(--ds-space-800,56px)}
-._y3gn1e5h{text-align:left}
 ._y3gn1h6o{text-align:center}

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

@@ -24,13 +24,6 @@ export var CloseButtonContainer = function CloseButtonContainer(_ref2) {
     className: ax(["_kqswstnw _1xi2u2gc _154iutpp"])
   }, children);
 };
-var closeButtonContainerAiStyles = null;
-export var CloseButtonContainerAi = function CloseButtonContainerAi(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_kqswstnw _1xi2u2gc _154i1q64"])
-  }, children);
-};
 export var TRANSITION_DURATION_MS = 220;
 var backButtonContainerStyles = null;
 var backButtonContainerTransitionStyles = {
@@ -43,9 +36,9 @@ var backButtonContainerTransitionStyles = {
     opacity: 0
   }
 };
-export var BackButtonContainer = function BackButtonContainer(_ref4) {
-  var transitionState = _ref4.transitionState,
-    children = _ref4.children;
+export var BackButtonContainer = function BackButtonContainer(_ref3) {
+  var transitionState = _ref3.transitionState,
+    children = _ref3.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_v5641kw6 _1ltv1ejb _tzy4idpf _kqswstnw _154iutpp"]),
     style: _objectSpread(_objectSpread({}, backButtonContainerTransitionStyles[transitionState]), {}, {
@@ -54,8 +47,8 @@ export var BackButtonContainer = function BackButtonContainer(_ref4) {
   }, children);
 };
 var headerTitleStyles = null;
-export var HeaderTitle = function HeaderTitle(_ref5) {
-  var children = _ref5.children;
+export var HeaderTitle = function HeaderTitle(_ref4) {
+  var children = _ref4.children;
   return /*#__PURE__*/React.createElement("h1", {
     className: ax(["_11c81ixg _1reo15vq _18m915vq _syaz1425 _y3gn1h6o _k48p1pd9 _vwz41u3r _1bsb1osq _o5721q9c _1bto1l2s _1e0c1o8l _s7n4nkob"]),
     style: {
@@ -63,20 +56,9 @@ export var HeaderTitle = function HeaderTitle(_ref5) {
     }
   }, children);
 };
-var headerTitleAiStyles = null;
-export var HeaderTitleAi = function HeaderTitleAi(_ref6) {
-  var children = _ref6.children;
-  return /*#__PURE__*/React.createElement("h1", {
-    className: ax(["_11c81ixg _1reo15vq _18m915vq _syaz1425 _y3gn1e5h _k48p1pd9 _ca0qoybe _n3tdpxbi _1bsbb8xr _o5721q9c _1bto1l2s _1e0c1o8l _s7n4nkob _18u0pxbi"]),
-    style: {
-      "--_13a5t4u": ix("var(--ds-text-subtle, ".concat(N500, ")")),
-      "--_2br7en": ix("calc(100% - ".concat("var(--ds-space-200, 16px)", ")"))
-    }
-  }, children);
-};
 var headerContentStyles = null;
-export var HeaderContent = function HeaderContent(_ref7) {
-  var children = _ref7.children;
+export var HeaderContent = function HeaderContent(_ref5) {
+  var children = _ref5.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_ca0qidpf _u5f3pxbi _n3tdpxbi _19bvpxbi"])
   }, children);

package/dist/esm/components/HelpLayoutContent.js

@@ -1,8 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading", "footer", "children", "intl"];
+var _excluded = ["isLoading", "footer", "children", "intl", "sideNavTabs"];
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import Header from './Header';
+import { SideNav } from './SideNav';
 import { messages } from '../messages';
 import { Container, Section, HelpFooter, LoadingContainer, LoadingRectangle } from './styled';
 export var HelpContent = function HelpContent(props) {
@@ -11,8 +12,12 @@ export var HelpContent = function HelpContent(props) {
     footer = props.footer,
     children = props.children,
     formatMessage = props.intl.formatMessage,
+    _props$sideNavTabs = props.sideNavTabs,
+    sideNavTabs = _props$sideNavTabs === void 0 ? [] : _props$sideNavTabs,
     rest = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(Header, rest), isLoading ? /*#__PURE__*/React.createElement(LoadingContainer, {
+  return sideNavTabs !== null && sideNavTabs !== void 0 && sideNavTabs.length ? /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(SideNav, {
+    sideNavTabs: sideNavTabs
+  }))) : /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(Header, rest), isLoading ? /*#__PURE__*/React.createElement(LoadingContainer, {
     "aria-label": formatMessage(messages.help_loading),
     role: "img"
   }, /*#__PURE__*/React.createElement(LoadingRectangle, {

package/dist/esm/components/SideNav/index.compiled.css

@@ -0,0 +1,28 @@
+
+._19it145i{border:var(--ds-border-width,1px) solid transparent}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._1h6d15qp{border-color:var(--ds-border-accent-blue,#1d7afc)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._18m91wug{overflow-y:auto}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo1wug{overflow-x:auto}
+._1ul91wqb{min-width:60px}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._80omtlke{cursor:pointer}
+._bfhk1d5g{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._bfhk1j28{background-color:transparent}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._o5721q9c{white-space:nowrap}
+._otyr1b66{margin-bottom:var(--ds-space-050,4px)}
+._syaz14q2{color:var(--ds-link,#0c66e4)}
+._vchhusvi{box-sizing:border-box}
+._30l314q2:hover{color:var(--ds-link,#0c66e4)}
+._30l31fxt:hover{color:var(--ds-text,#172b4d)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}

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

@@ -0,0 +1,60 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useState } from 'react';
+import { cx } from '@atlaskit/css';
+import { Box, Flex, Pressable, Stack, Text } from '@atlaskit/primitives/compiled';
+import Tooltip from '@atlaskit/tooltip';
+import { DynamicHeader } from '../DynamicHeader';
+var styles = {
+  mainContent: "_1reo1wug _18m91wug _4t3i1osq _1bsb1osq",
+  navBarWrapper: "_1reo1wug _18m91wug _4t3i1osq _1bsb1osq",
+  navButton: "_2rkoiti9 _zulpu2gc _19it145i _1rjcu2gc _1e0c1txw _bfhk1j28 _2lx21bp4 _4cvr1h6o _80omtlke _vchhusvi _o5721q9c _1bsb1osq _irr3166n _30l31fxt",
+  navButtonSelected: "_1h6d15qp _bfhkfg4m _syaz14q2 _irr3i1yw _30l314q2",
+  wrapper: "_1reo1wug _18m91wug _4t3i1osq _1ul91wqb _bfhk1d5g",
+  navItemWrapper: "_19pk1b66 _2hwx1b66 _otyr1b66 _18u01b66"
+};
+export var SideNav = function SideNav(_ref) {
+  var sideNavTabs = _ref.sideNavTabs;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.navBarWrapper
+  }, /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "space-between",
+    xcss: styles.wrapper,
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    testId: "side-nav-tabs"
+  }, sideNavTabs.map(function (tab, index) {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.navItemWrapper,
+      key: tab.label,
+      testId: "side-nav-".concat(tab.label)
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      ignoreTooltipPointerEvents: true,
+      position: "left",
+      content: tab.label
+    }, /*#__PURE__*/React.createElement(Pressable, {
+      xcss: cx(styles.navButton, index === activeIndex && styles.navButtonSelected),
+      onClick: function onClick() {
+        setActiveIndex(index);
+      },
+      testId: "side-nav-button-".concat(tab.label)
+    }, tab.icon, /*#__PURE__*/React.createElement(Text, {
+      size: "small",
+      color: index === activeIndex ? 'color.link' : 'color.text.subtle'
+    }, tab.label))));
+  }))), /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    xcss: styles.mainContent
+  }, /*#__PURE__*/React.createElement(DynamicHeader, {
+    title: sideNavTabs[activeIndex].header.title,
+    onCloseButtonClick: sideNavTabs[activeIndex].header.onCloseButtonClick,
+    onNewChatButtonClick: sideNavTabs[activeIndex].header.onNewChatButtonClick
+  }), sideNavTabs[activeIndex].content));
+};

package/dist/types/components/DynamicHeader/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/// <reference types="react" />
+import { type HeaderContent } from '../../model/HelpLayout';
+export declare const DynamicHeader: ({ title, onCloseButtonClick, onNewChatButtonClick, }: HeaderContent) => JSX.Element;

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

@@ -3,7 +3,6 @@ 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

@@ -10,9 +10,6 @@ export declare const HeaderContainer: ({ children }: {
 export declare const CloseButtonContainer: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
-export declare const CloseButtonContainerAi: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
 export declare const TRANSITION_DURATION_MS = 220;
 export declare const BackButtonContainer: ({ transitionState, children, }: {
     transitionState: TransitionStatus;
@@ -21,9 +18,6 @@ export declare const BackButtonContainer: ({ transitionState, children, }: {
 export declare const HeaderTitle: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
-export declare const HeaderTitleAi: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
 export declare const HeaderContent: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;

package/dist/types/components/SideNav/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/// <reference types="react" />
+import { type SideNavTab } from '../../model/HelpLayout';
+interface SideNavProps {
+    sideNavTabs: SideNavTab[];
+}
+export declare const SideNav: ({ sideNavTabs }: SideNavProps) => JSX.Element;
+export {};

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

@@ -8,9 +8,21 @@ export interface HelpPanelHeader {
     isBackbuttonVisible?: boolean;
     isAiEnabled?: boolean;
 }
+export interface HeaderContent {
+    title: string;
+    onNewChatButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+    onCloseButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+}
+export interface SideNavTab {
+    icon: React.ReactNode;
+    label: string;
+    content: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    header: HeaderContent;
+}
 export interface HelpLayout extends HelpPanelHeader {
     isLoading?: boolean;
     footer?: React.ReactNode;
     children?: React.ReactNode;
-    isAiEnabled?: boolean;
+    sideNavTabs?: SideNavTab[];
 }

package/dist/types-ts4.5/components/DynamicHeader/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type HeaderContent } from '../../model/HelpLayout';
+export declare const DynamicHeader: ({ title, onCloseButtonClick, onNewChatButtonClick, }: HeaderContent) => JSX.Element;

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

@@ -3,7 +3,6 @@ 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

@@ -10,9 +10,6 @@ export declare const HeaderContainer: ({ children }: {
 export declare const CloseButtonContainer: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
-export declare const CloseButtonContainerAi: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
 export declare const TRANSITION_DURATION_MS = 220;
 export declare const BackButtonContainer: ({ transitionState, children, }: {
     transitionState: TransitionStatus;
@@ -21,9 +18,6 @@ export declare const BackButtonContainer: ({ transitionState, children, }: {
 export declare const HeaderTitle: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
-export declare const HeaderTitleAi: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
 export declare const HeaderContent: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;

package/dist/types-ts4.5/components/SideNav/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type SideNavTab } from '../../model/HelpLayout';
+interface SideNavProps {
+    sideNavTabs: SideNavTab[];
+}
+export declare const SideNav: ({ sideNavTabs }: SideNavProps) => JSX.Element;
+export {};

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

@@ -8,9 +8,21 @@ export interface HelpPanelHeader {
     isBackbuttonVisible?: boolean;
     isAiEnabled?: boolean;
 }
+export interface HeaderContent {
+    title: string;
+    onNewChatButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+    onCloseButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+}
+export interface SideNavTab {
+    icon: React.ReactNode;
+    label: string;
+    content: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    header: HeaderContent;
+}
 export interface HelpLayout extends HelpPanelHeader {
     isLoading?: boolean;
     footer?: React.ReactNode;
     children?: React.ReactNode;
-    isAiEnabled?: boolean;
+    sideNavTabs?: SideNavTab[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/help-layout",
-	"version": "6.0.2",
+	"version": "6.1.0",
 	"description": "Layout for the atlaskit/help component.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,7 +34,10 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^23.0.0",
+		"@atlaskit/css": "^0.10.0",
+		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",