@atlaskit/help 6.0.8 → 7.1.0

package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsError/styled.js

@@ -17,6 +17,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -27,6 +29,6 @@ var SearchResultEmptyMessageImage = _styled.default.div(_templateObject || (_tem
 
 exports.SearchResultEmptyMessageImage = SearchResultEmptyMessageImage;
 
-var SearchResultEmptyMessageText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), colors.N200);
+var SearchResultEmptyMessageText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), (0, _tokens.token)('color.text.subtlest', colors.N200));
 
 exports.SearchResultEmptyMessageText = SearchResultEmptyMessageText;

package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/styled.js

@@ -17,6 +17,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -30,7 +32,8 @@ var WhatsNewResultListItemWrapper = _styled.default.a({
   display: "block",
   textDecoration: "none",
   cursor: "pointer",
-  color: "".concat(colors.N200),
+  color: "".concat((0, _tokens.token)('color.text.subtlest', colors.N200)),
+  backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle', colors.N0)),
   borderRadius: "3px",
   '&:hover, &:focus, &:visited, &:active': {
     textDecoration: "none",
@@ -38,13 +41,13 @@ var WhatsNewResultListItemWrapper = _styled.default.a({
     outlineOffset: "none"
   },
   '&:focus': {
-    boxShadow: "".concat(colors.B100, " 0px 0px 0px 2px inset")
+    boxShadow: "".concat((0, _tokens.token)('color.border.focused', colors.B100), " 0px 0px 0px 2px inset")
   },
   '&:hover': {
-    backgroundColor: "".concat(colors.N30)
+    backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', colors.N30))
   },
   '&:active': {
-    backgroundColor: "".concat(colors.B50)
+    backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle.pressed', colors.B50))
   }
 }, function (props) {
   return props.styles;
@@ -60,6 +63,6 @@ var WhatsNewResultListItemTitleText = _styled.default.span(_templateObject2 || (
 
 exports.WhatsNewResultListItemTitleText = WhatsNewResultListItemTitleText;
 
-var WhatsNewResultListItemDescription = _styled.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), (0, _constants.gridSize)() * 2.5, colors.N800);
+var WhatsNewResultListItemDescription = _styled.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), (0, _constants.gridSize)() * 2.5, (0, _tokens.token)('color.text', colors.N800));
 
 exports.WhatsNewResultListItemDescription = WhatsNewResultListItemDescription;

package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultsList.js

@@ -17,6 +17,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _toDate = _interopRequireDefault(require("date-fns/toDate"));
 
 var _isYesterday = _interopRequireDefault(require("date-fns/isYesterday"));
@@ -72,7 +74,7 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsListGroupTitle, null, whatsNewArticlesGroupedByDate[key].title), whatsNewArticlesGroupedByDate[key].items.map(function (whatsNewArticle, i) {
       return /*#__PURE__*/_react.default.createElement(_WhatsNewResultItem.default, {
         styles: {
-          border: style === 'secondary' ? "2px solid ".concat(colors.N30) : 0,
+          border: style === 'secondary' ? "2px solid ".concat((0, _tokens.token)('color.border', colors.N30)) : 0,
           padding: style === 'secondary' ? "".concat((0, _constants.gridSize)(), "px ").concat((0, _constants.gridSize)() * 2, "px") : "".concat((0, _constants.gridSize)(), "px"),
           marginBottom: style === 'secondary' ? "".concat((0, _constants.gridSize)() * 1.5, "px") : 0
         },

package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/index.js

@@ -57,7 +57,7 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
       onShowMoreButtonClick = _ref.onShowMoreButtonClick;
 
   var _useNavigationContext = (0, _navigationContext.useNavigationContext)(),
-      setArticleId = _useNavigationContext.setArticleId;
+      openArticle = _useNavigationContext.openArticle;
 
   var handleShowMoreButtonClick = function handleShowMoreButtonClick(event, analyticsEvent) {
     if (onShowMoreButtonClick) {
@@ -66,17 +66,15 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
   };
 
   var handleOnWhatsNewResultItemClick = (0, _react.useCallback)(function (event, analyticsEvent, articleData) {
-    if (setArticleId) {
-      setArticleId({
-        id: articleData.id,
-        type: _Help.ARTICLE_TYPE.WHATS_NEW
-      });
-    }
+    openArticle({
+      id: articleData.id,
+      type: _Help.ARTICLE_TYPE.WHATS_NEW
+    });
 
     if (onWhatsNewResultItemClick) {
       onWhatsNewResultItemClick(event, analyticsEvent, articleData);
     }
-  }, [onWhatsNewResultItemClick, setArticleId]);
+  }, [onWhatsNewResultItemClick, openArticle]);
   return whatsNewArticles && whatsNewArticles.length > 0 ? /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsListContainer, null, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
     theme: (0, _defineProperty2.default)({}, _item.itemThemeNamespace, ITEM_THEME)
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_WhatsNewResultsList.default, {

package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/styled.js

@@ -17,6 +17,8 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
@@ -40,7 +42,7 @@ var WhatsNewResultsListGroupWrapper = _styled.default.div(_templateObject3 || (_
 
 exports.WhatsNewResultsListGroupWrapper = WhatsNewResultsListGroupWrapper;
 
-var WhatsNewResultsListGroupTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: bold;\n  padding: 0 ", "px ", "px ", "px;\n  text-transform: uppercase;\n"])), colors.N200, (0, _constants.fontSizeSmall)(), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)());
+var WhatsNewResultsListGroupTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: bold;\n  padding: 0 ", "px ", "px ", "px;\n  text-transform: uppercase;\n"])), (0, _tokens.token)('color.text.subtlest', colors.N200), (0, _constants.fontSizeSmall)(), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)());
 
 exports.WhatsNewResultsListGroupTitle = WhatsNewResultsListGroupTitle;
 

package/dist/cjs/components/WhatsNew/WhatsNewResults/index.js

@@ -17,6 +17,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactTransitionGroup = require("react-transition-group");
 
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
 var _select = _interopRequireDefault(require("@atlaskit/select"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -47,9 +49,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var defaultStyle = {
   transition: "opacity ".concat(_constants.FADEIN_OVERLAY_TRANSITION_DURATION_MS, "ms"),
@@ -87,12 +89,18 @@ var WhatsNewResults = function WhatsNewResults(_ref) {
       searchWhatsNewArticlesState = _useWhatsNewArticleCo.searchWhatsNewArticlesState,
       onWhatsNewResultItemClick = _useWhatsNewArticleCo.onWhatsNewResultItemClick;
 
+  var containerRef = (0, _react.useRef)(null);
+  var containerScrollPosition = (0, _react.useRef)(0);
   var SELECT_DEFAULT_VALUE = {
     value: '',
     label: formatMessage(_messages.messages.help_whats_new_filter_select_option_all)
   };
+  var SELECT_EMPTY_VALUE = {
+    value: undefined,
+    label: ''
+  };
 
-  var _useState = (0, _react.useState)(SELECT_DEFAULT_VALUE),
+  var _useState = (0, _react.useState)(SELECT_EMPTY_VALUE),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
@@ -109,8 +117,25 @@ var WhatsNewResults = function WhatsNewResults(_ref) {
   }, [onSearchWhatsNewArticles, searchWhatsNewArticlesResult, selectedOption]);
 
   var handleOnEnter = function handleOnEnter() {
-    setSelectedOption(SELECT_DEFAULT_VALUE);
-    onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+    setTimeout(function () {
+      if (containerRef.current) {
+        containerRef.current.scrollTop = containerScrollPosition.current;
+      }
+    }, 0);
+
+    if ((0, _isEqual.default)(selectedOption, SELECT_EMPTY_VALUE)) {
+      setSelectedOption(SELECT_DEFAULT_VALUE);
+      onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+    }
+  };
+
+  var handleOnExit = function handleOnExit() {
+    if (helpContextView === _constants.VIEW.DEFAULT_CONTENT) {
+      setSelectedOption(SELECT_EMPTY_VALUE);
+      containerScrollPosition.current = 0;
+    } else {
+      containerScrollPosition.current = containerRef.current ? containerRef.current.scrollTop : 0;
+    }
   };
 
   var handleOnClearFilter = function handleOnClearFilter() {
@@ -126,9 +151,11 @@ var WhatsNewResults = function WhatsNewResults(_ref) {
   return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     in: helpContextView === _constants.VIEW.WHATS_NEW,
     timeout: _constants.FADEIN_OVERLAY_TRANSITION_DURATION_MS,
-    onEnter: handleOnEnter
+    onEnter: handleOnEnter,
+    onExit: handleOnExit
   }, function (state) {
     return /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsContainer, {
+      ref: containerRef,
       style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
     }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, searchWhatsNewArticlesState === _Requests.REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/_react.default.createElement(_WhatsNewResultsLoading.default, null), (searchWhatsNewArticlesState === _Requests.REQUEST_STATE.done || searchWhatsNewArticlesState === _Requests.REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.SelectContainer, null, /*#__PURE__*/_react.default.createElement(_select.default, {
       defaultValue: selectedOption,

package/dist/cjs/components/WhatsNew/WhatsNewResults/styled.js

@@ -13,9 +13,11 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var WhatsNewResultsContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: #ffffff;\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 1;\n  padding: ", "px;\n"])), 2 * (0, _constants.gridSize)());
+var WhatsNewResultsContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 1;\n  padding: ", "px;\n"])), (0, _tokens.token)('elevation.surface', '#FFFFFF'), 2 * (0, _constants.gridSize)());
 
 exports.WhatsNewResultsContainer = WhatsNewResultsContainer;
 

package/dist/cjs/components/contexts/navigationContext.js

@@ -23,6 +23,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
 var _Requests = require("../../model/Requests");
 
 var _Help = require("../../model/Help");
@@ -41,13 +43,21 @@ var _searchContext = require("./searchContext");
 
 var _headerContext = require("./headerContext");
 
+var _excluded = ["body", "relatedArticles"],
+    _excluded2 = ["description"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var DEFAULT_ARTICLE_ID = {
+  id: '',
+  type: _Help.ARTICLE_TYPE.HELP_ARTICLE
+};
 
 var _createCtx = (0, _ctx.createCtx)(),
     _createCtx2 = (0, _slicedToArray2.default)(_createCtx, 2),
@@ -86,6 +96,21 @@ var getSimpleHistory = function getSimpleHistory(history) {
     };
   });
 };
+/**
+ * Get history data (list of IDs and UID)
+ */
+
+
+var getHistoryData = function getHistoryData(history) {
+  return history.map(function (historyItem) {
+    var id = historyItem.id,
+        uid = historyItem.uid;
+    return {
+      id: id,
+      uid: uid
+    };
+  });
+};
 /**
  * Get the last article in the history
  */
@@ -109,13 +134,13 @@ var getCurrentArticleItemSlim = function getCurrentArticleItemSlim(history) {
       var _ref = article,
           body = _ref.body,
           relatedArticles = _ref.relatedArticles,
-          articleItemData = (0, _objectWithoutProperties2.default)(_ref, ["body", "relatedArticles"]);
+          articleItemData = (0, _objectWithoutProperties2.default)(_ref, _excluded);
       var currentArticleSlimData = articleItemData;
       return currentArticleSlimData;
     } else if (type === _Help.ARTICLE_TYPE.WHATS_NEW) {
       var _ref2 = article,
           description = _ref2.description,
-          whatsNewArticleItemData = (0, _objectWithoutProperties2.default)(_ref2, ["description"]);
+          whatsNewArticleItemData = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
       var currentWhatsNewArticleSlimData = whatsNewArticleItemData;
       return currentWhatsNewArticleSlimData;
     }
@@ -154,10 +179,26 @@ var navigationReducer = function navigationReducer(_ref3, action) {
 
   if (action.type === 'newArticle' && action.payload) {
     var newArticleId = action.payload;
+
+    if ((0, _isEqual.default)(newArticleId, DEFAULT_ARTICLE_ID)) {
+      newState = {
+        articleId: newArticleId,
+        history: [],
+        view: _constants.VIEW.DEFAULT_CONTENT
+      };
+    } else {
+      newState = {
+        articleId: newArticleId,
+        history: [].concat((0, _toConsumableArray2.default)(currentHistory), [getNewHistoryItem(newArticleId.id, newArticleId.type)]),
+        view: getViewForArticleId(newArticleId)
+      };
+    }
+  } else if (action.type === 'addNewHistoryItem' && action.payload) {
+    var _newArticleId = action.payload;
     newState = {
-      articleId: newArticleId,
-      history: [].concat((0, _toConsumableArray2.default)(currentHistory), [getNewHistoryItem(newArticleId.id, newArticleId.type)]),
-      view: getViewForArticleId(newArticleId)
+      articleId: currentArticleId,
+      history: [].concat((0, _toConsumableArray2.default)(currentHistory), [getNewHistoryItem(_newArticleId.id, _newArticleId.type)]),
+      view: getViewForArticleId(currentArticleId)
     };
   } else if (action.type === 'updateHistoryItem' && action.payload) {
     var HistoryItemUpdate = action.payload;
@@ -194,11 +235,11 @@ var navigationReducer = function navigationReducer(_ref3, action) {
       view: _constants.VIEW.DEFAULT_CONTENT
     };
   } else if (action.type === 'updateArticleId' && action.payload) {
-    var _newArticleId = action.payload;
+    var _newArticleId2 = action.payload;
     newState = {
-      articleId: _newArticleId,
+      articleId: _newArticleId2,
       history: currentHistory,
-      view: getViewForArticleId(_newArticleId)
+      view: getViewForArticleId(_newArticleId2)
     };
   } else if (action.type === 'updateView' && action.payload) {
     var newView = action.payload;
@@ -213,15 +254,12 @@ var navigationReducer = function navigationReducer(_ref3, action) {
 };
 
 var NavigationContextProvider = function NavigationContextProvider(_ref4) {
-  var _ref4$articleId = _ref4.articleId,
-      propsArticleId = _ref4$articleId === void 0 ? {
-    id: '',
-    type: _Help.ARTICLE_TYPE.HELP_ARTICLE
-  } : _ref4$articleId,
-      articleIdSetter = _ref4.articleIdSetter,
-      _ref4$history = _ref4.history,
-      propsHistory = _ref4$history === void 0 ? [] : _ref4$history,
-      historySetter = _ref4.historySetter,
+  var _ref4$navigationData = _ref4.navigationData,
+      navigationData = _ref4$navigationData === void 0 ? {
+    articleId: DEFAULT_ARTICLE_ID,
+    history: []
+  } : _ref4$navigationData,
+      setNavigationData = _ref4.setNavigationData,
       children = _ref4.children;
 
   var _useHelpArticleContex = (0, _helpArticleContext.useHelpArticleContext)(),
@@ -242,9 +280,12 @@ var NavigationContextProvider = function NavigationContextProvider(_ref4) {
   var _useHeaderContext = (0, _headerContext.useHeaderContext)(),
       onCloseButtonClick = _useHeaderContext.onCloseButtonClick;
 
+  var propsArticleId = navigationData.articleId,
+      propsHistory = navigationData.history;
+
   var _useReducer = (0, _react.useReducer)(navigationReducer, {
     articleId: propsArticleId,
-    history: propsHistory,
+    history: !(0, _isEqual.default)(propsArticleId, DEFAULT_ARTICLE_ID) && propsHistory.length === 0 ? [getNewHistoryItem(propsArticleId.id, propsArticleId.type)] : propsHistory,
     view: _constants.VIEW.DEFAULT_CONTENT
   }),
       _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
@@ -264,8 +305,6 @@ var NavigationContextProvider = function NavigationContextProvider(_ref4) {
     /**
      * - If default content isn't defined and the history only has one article,
      * we should not display the back button
-     * - If the prop.article.setArticleId is not defined, we should also hide the back
-     * button because we are not able to navigate though the history without it
      */
     if (currentHistory.length === 1 && !isDefaultContentDefined || currentView === _constants.VIEW.WHATS_NEW && !isDefaultContentDefined) {
       return false;
@@ -453,6 +492,12 @@ var NavigationContextProvider = function NavigationContextProvider(_ref4) {
       onCloseButtonClick(event, analyticsEvent);
     }
   }, [onCloseButtonClick]);
+  var onOpenArticle = (0, _react.useCallback)(function (newArticleId) {
+    dispatchNavigationAction({
+      type: 'addNewHistoryItem',
+      payload: newArticleId
+    });
+  }, []);
   (0, _react.useEffect)(function () {
     if (isSearchResultVisible) {
       dispatchNavigationAction({
@@ -462,43 +507,59 @@ var NavigationContextProvider = function NavigationContextProvider(_ref4) {
     }
   }, [isSearchResultVisible]);
   (0, _react.useEffect)(function () {
-    var simpleHistory = getSimpleHistory(currentHistory);
-    historySetter && historySetter(simpleHistory);
-  }, [historySetter, currentHistory]);
-  (0, _react.useEffect)(function () {
+    var lastHistoryItem = currentHistory.length > 0 ? _getCurrentArticle2(currentHistory) : getNewHistoryItem(DEFAULT_ARTICLE_ID.id, DEFAULT_ARTICLE_ID.type);
     /**
      * If the propsArticleId.id (host articleId) is different from currentArticleId.id (internal articleId)
-     * it means the host updated propsArticleId and we need to use this new value to load a new article.
      * */
-    if ((propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.id) !== currentArticleId.id || (propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.type) !== currentArticleId.type) {
-      dispatchNavigationAction({
-        type: 'newArticle',
-        payload: propsArticleId
-      });
-    } else {
+
+    if (!(0, _isEqual.default)(propsArticleId, currentArticleId)) {
       /**
-       * If the propsArticleId.id (host articleId) is equal to currentArticleId.id (internal articleId)
-       * and the id from the last history item is different from currentArticleId.id, it means the history
-       * changed and we need to update the host articleId (propsArticleId) using 'articleIdSetter' and the local
-       * history using the dispatchNavigationAction reducer
-       * */
-      var lastHistoryItem = currentHistory.length > 0 ? _getCurrentArticle2(currentHistory) : getNewHistoryItem('', _Help.ARTICLE_TYPE.HELP_ARTICLE);
-
-      if (articleIdSetter && lastHistoryItem && (currentArticleId.id !== lastHistoryItem.id || currentArticleId.type !== lastHistoryItem.type)) {
+       * If propsArticleId and lastHistoryItem are the same, we just need to update the articleId
+       * because is out of sync
+       */
+      if (propsArticleId.id === lastHistoryItem.id && propsArticleId.type === lastHistoryItem.type) {
         dispatchNavigationAction({
           type: 'updateArticleId',
-          payload: {
-            id: lastHistoryItem.id,
-            type: lastHistoryItem.type
-          }
+          payload: propsArticleId
         });
-        articleIdSetter({
-          id: lastHistoryItem.id,
-          type: lastHistoryItem.type
+      } else {
+        /**
+         * Otherwise we need to add a new article
+         */
+        dispatchNavigationAction({
+          type: 'newArticle',
+          payload: propsArticleId
         });
       }
+    } else {
+      // console.log('same articleId');
+      if (setNavigationData) {
+        var simpleHistory = getSimpleHistory(currentHistory);
+
+        if (currentArticleId.id !== lastHistoryItem.id || currentArticleId.type !== lastHistoryItem.type) {
+          /**
+           * If the propsArticleId.id (host articleId) is equal to currentArticleId.id (internal articleId)
+           * and the id from the last history item is different from currentArticleId.id, it means the history
+           * changed
+           * */
+          if (setNavigationData) {
+            setNavigationData({
+              articleId: {
+                id: lastHistoryItem.id,
+                type: lastHistoryItem.type
+              },
+              history: simpleHistory
+            });
+          }
+        } else if (!(0, _isEqual.default)(getHistoryData(propsHistory), getHistoryData(currentHistory))) {
+          setNavigationData({
+            articleId: propsArticleId,
+            history: simpleHistory
+          });
+        }
+      }
     }
-  }, [currentArticleId, propsArticleId, currentHistory, articleIdSetter]);
+  }, [currentArticleId, propsArticleId, currentHistory, setNavigationData, propsHistory]);
   (0, _react.useEffect)(function () {
     var requestNewArticle = /*#__PURE__*/function () {
       var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(historyItem) {
@@ -544,7 +605,7 @@ var NavigationContextProvider = function NavigationContextProvider(_ref4) {
     value: {
       view: currentView,
       articleId: currentArticleId,
-      setArticleId: articleIdSetter,
+      openArticle: onOpenArticle,
       history: currentHistory,
       getCurrentArticle: function getCurrentArticle() {
         return _getCurrentArticle2(currentHistory);

package/dist/cjs/util/styled.js

@@ -17,6 +17,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _core = require("@emotion/core");
 
 var _WhatsNew = require("../model/WhatsNew");
@@ -27,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var DividerLine = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 2px;\n  width: 100%;\n  padding: 0 ", "px;\n  margin-top: ", "px;\n  box-sizing: border-box;\n"])), colors.N30A, 2 * (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2);
+var DividerLine = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 2px;\n  width: 100%;\n  padding: 0 ", "px;\n  margin-top: ", "px;\n  box-sizing: border-box;\n"])), (0, _tokens.token)('color.border', colors.N30A), 2 * (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2);
 /**
  * Loading container
  */
@@ -42,7 +44,7 @@ var LoadingRectangle = _styled.default.div(_templateObject3 || (_templateObject3
   return props.marginTop ? props.marginTop : (0, _constants.gridSize)() + 'px';
 }, function (props) {
   return props.contentWidth ? props.contentWidth : '100%';
-}, shimmer, colors.N30, colors.N30, colors.N40, colors.N30);
+}, shimmer, (0, _tokens.token)('color.background.neutral', colors.N30), (0, _tokens.token)('color.background.neutral.subtle', colors.N30), (0, _tokens.token)('color.background.neutral', colors.N40), (0, _tokens.token)('color.background.neutral.subtle', colors.N30));
 /**
  * Loading Circle
  */
@@ -56,7 +58,7 @@ var LoadingCircle = _styled.default.div(_templateObject4 || (_templateObject4 =
   return props.marginTop ? props.marginTop : '';
 }, function (props) {
   return props.radius ? props.radius : "".concat((0, _constants.gridSize)() * 4, "px");
-}, shimmer, colors.N30, colors.N30, colors.N40, colors.N30);
+}, shimmer, (0, _tokens.token)('color.background.neutral', colors.N30), (0, _tokens.token)('color.background.neutral.subtle', colors.N30), (0, _tokens.token)('color.background.neutral', colors.N40), (0, _tokens.token)('color.background.neutral.subtle', colors.N30));
 /**
  * What's new icon
  */
@@ -69,22 +71,22 @@ var WhatsNewTypeIcon = _styled.default.div(_templateObject5 || (_templateObject5
 
   switch (type) {
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.IMPROVEMENT:
-      return colors.Y200;
+      return (0, _tokens.token)('color.icon.warning', colors.Y200);
 
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.NEW_FEATURE:
-      return colors.G300;
+      return (0, _tokens.token)('color.icon.success', colors.G300);
 
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.FIX:
-      return colors.B500;
+      return (0, _tokens.token)('color.icon.information', colors.B500);
 
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.EXPERIMENT:
-      return colors.P500;
+      return (0, _tokens.token)('color.icon.discovery', colors.P500);
 
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.REMOVED:
-      return colors.N700;
+      return (0, _tokens.token)('color.icon.disabled', colors.N700);
 
     default:
-      return colors.N400;
+      return (0, _tokens.token)('color.icon', colors.N400);
   }
 }, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/help",
-	"version": "6.0.8",
+	"version": "7.1.0",
 	"sideEffects": false
 }

package/dist/es2019/assets/ErrorImage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 export const svg = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="90" height="116" viewBox="0 0 90 116" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0H89.2308V116H0V0Z" fill="white"/>
+<path d="M0 0H89.2308V116H0V0Z"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M51.5691 40.9323L87.7184 103.605C89.1943 106.161 89.195 109.312 87.72 111.869C86.2451 114.426 83.519 116.001 80.5691 116H8.27039C5.3205 116.001 2.59431 114.426 1.11941 111.869C-0.355493 109.312 -0.354868 106.161 1.12105 103.605L37.2704 40.9323C38.7445 38.3748 41.47 36.7992 44.4197 36.7992C47.3695 36.7992 50.095 38.3748 51.5691 40.9323ZM47.4558 86.4337L49.0227 62.2806C49.113 60.9009 48.6284 59.5454 47.6841 58.5363C46.7399 57.5271 45.4202 56.9545 44.0389 56.9544C42.6575 56.9545 41.3379 57.5271 40.3936 58.5363C39.4493 59.5454 38.9647 60.9009 39.055 62.2806L40.622 86.4337C40.7395 88.2366 42.2338 89.6395 44.0389 89.6414C45.844 89.6395 47.3383 88.2366 47.4558 86.4337ZM40.5075 103.118C39.4304 102.124 38.8237 100.72 38.8374 99.2536C38.8071 96.3645 41.1146 93.994 44.0008 93.9492C46.8187 93.943 49.1423 96.158 49.2734 98.9756C49.4045 101.793 47.2968 104.215 44.4905 104.471C43.0314 104.603 41.5845 104.112 40.5075 103.118Z" fill="url(#paint0_linear)"/>
 <g opacity="0.6">
 <path d="M50.4387 15.3414L46.407 0.789686C46.3669 0.639179 46.2278 0.536726 46.0723 0.543265C45.9168 0.549803 45.7868 0.663577 45.7595 0.816916L43.224 14.4864L40.0683 13.8982C39.956 13.8774 39.8409 13.9157 39.7636 13.9998C39.6862 14.0839 39.6574 14.2018 39.6874 14.3121L43.7192 28.8639C43.7533 29.0153 43.8878 29.1229 44.0429 29.1229C44.198 29.1229 44.3324 29.0153 44.3666 28.8639L46.9021 15.1944L50.0578 15.7553C50.1701 15.7762 50.2852 15.7378 50.3625 15.6538C50.4399 15.5697 50.4687 15.4517 50.4387 15.3414Z" fill="#C1C7D0"/>

package/dist/es2019/assets/NotFoundImage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 export const svg = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="100" height="116" viewBox="0 0 100 116" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0H100V116H0V0Z" fill="white"/>
+<path d="M0 0H100V116H0V0Z"/>
 <g opacity="0.3">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M14.4783 115.563H23.4169H23.4237C24.2045 115.563 24.8375 114.928 24.8375 114.144C24.8375 113.36 24.2045 112.725 23.4237 112.725H14.4783C13.6975 112.725 13.0645 113.36 13.0645 114.144C13.0645 114.928 13.6975 115.563 14.4783 115.563ZM40.6686 115.563H31.7301C30.9492 115.563 30.3162 114.928 30.3162 114.144C30.3162 113.36 30.9492 112.725 31.7301 112.725H40.6686C41.4495 112.725 42.0825 113.36 42.0825 114.144C42.0825 114.928 41.4495 115.563 40.6686 115.563ZM48.975 115.563H57.9204C58.7013 115.563 59.3343 114.928 59.3343 114.144C59.3343 113.36 58.7013 112.725 57.9204 112.725H48.975C48.1942 112.725 47.5612 113.36 47.5612 114.144C47.5612 114.928 48.1942 115.563 48.975 115.563ZM66.2268 115.563H75.1722C75.953 115.563 76.586 114.928 76.586 114.144C76.586 113.36 75.953 112.725 75.1722 112.725H66.2268C65.446 112.725 64.813 113.36 64.813 114.144C64.813 114.928 65.446 115.563 66.2268 115.563Z" fill="#B3BAC5"/>
 <path d="M6.17203 115.563H1.41386C0.633005 115.563 0 114.928 0 114.144V109.368C0 108.584 0.633005 107.948 1.41386 107.948C2.19471 107.948 2.82771 108.584 2.82771 109.368V112.725H6.17203C6.95288 112.725 7.58588 113.36 7.58588 114.144C7.58588 114.928 6.95288 115.563 6.17203 115.563Z" fill="#B3BAC5"/>

package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/index.js

@@ -10,6 +10,7 @@ import { RadioGroup } from '@atlaskit/radio';
 import { Checkbox } from '@atlaskit/checkbox';
 import TextArea from '@atlaskit/textarea';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
@@ -192,7 +193,7 @@ export const ArticleWasHelpfulForm = ({
           verticalAlign: 'middle'
         }
       }, /*#__PURE__*/React.createElement(CheckCircleIcon, {
-        primaryColor: colors.G400,
+        primaryColor: token('color.icon.success', colors.G400),
         label: ""
       })), /*#__PURE__*/React.createElement(ArticleFeedbackText, null, formatMessage(messages.help_article_rating_form_Success)));
     }

package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/styled.js

@@ -2,13 +2,14 @@
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const ArticleFeedbackContainer = styled.div`
   position: relative;
 `;
 export const ArticleFeedbackText = styled.div`
   font-size: 0.75rem;
   font-weight: bold;
-  color: ${colors.N200};
+  color: ${token('color.text.subtlest', colors.N200)};
   line-height: ${gridSize() * 4}px;
   position: relative;
   display: inline-block;