@atlaskit/help 4.3.0 → 6.0.2

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

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
@@ -46,6 +46,6 @@ var ShowMoreButton = function ShowMoreButton(_ref) {
 
 exports.ShowMoreButton = ShowMoreButton;
 
-var _default = (0, _reactIntl.injectIntl)(ShowMoreButton);
+var _default = (0, _reactIntlNext.injectIntl)(ShowMoreButton);
 
 exports.default = _default;

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

@@ -17,7 +17,7 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _lightbulb = _interopRequireDefault(require("@atlaskit/icon/glyph/lightbulb"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _version = require("../../../version.json");
 
@@ -85,6 +85,6 @@ var WhatsNewButtonWithContext = function WhatsNewButtonWithContext(props) {
   }, /*#__PURE__*/_react.default.createElement(WhatsNewButton, props));
 };
 
-var _default = (0, _reactIntl.injectIntl)(WhatsNewButtonWithContext);
+var _default = (0, _reactIntlNext.injectIntl)(WhatsNewButtonWithContext);
 
 exports.default = _default;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WhatsNewResultsEmpty = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _NotFoundImage = _interopRequireDefault(require("../../../../assets/NotFoundImage"));
+
+var _messages = require("../../../../messages");
+
+var _styled = require("./styled");
+
+var WhatsNewResultsEmpty = function WhatsNewResultsEmpty(_ref) {
+  var onClearFilter = _ref.onClearFilter,
+      formatMessage = _ref.intl.formatMessage;
+
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  var handleClearFilterLinkClick = function handleClearFilterLinkClick(event) {
+    event.preventDefault();
+    var analyticsEvent = createAnalyticsEvent({
+      action: 'clicked'
+    });
+    analyticsEvent.fire();
+    onClearFilter();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsEmptyMessageImage, null, /*#__PURE__*/_react.default.createElement(_NotFoundImage.default, null)), /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsEmptyMessageText, null, /*#__PURE__*/_react.default.createElement("strong", null, formatMessage(_messages.messages.help_whats_new_no_results))), /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsEmptyMessageText, null, /*#__PURE__*/_react.default.createElement("p", null, formatMessage(_messages.messages.help_whats_new_no_results_info), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+    data: {
+      componentName: 'WhatsNewResultsEmpty'
+    }
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: "#",
+    onClick: handleClearFilterLinkClick
+  }, formatMessage(_messages.messages.help_whats_new_no_results_clear_filter_button_label)), /*#__PURE__*/_react.default.createElement("span", null, formatMessage(_messages.messages.help_whats_new_no_results_clear_filter_info))))));
+};
+
+exports.WhatsNewResultsEmpty = WhatsNewResultsEmpty;
+
+var _default = (0, _reactIntlNext.injectIntl)(WhatsNewResultsEmpty);
+
+exports.default = _default;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WhatsNewResultsEmptyMessageText = exports.WhatsNewResultsEmptyMessageImage = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+
+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); }
+
+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 WhatsNewResultsEmptyMessageImage = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)());
+
+exports.WhatsNewResultsEmptyMessageImage = WhatsNewResultsEmptyMessageImage;
+
+var WhatsNewResultsEmptyMessageText = _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);
+
+exports.WhatsNewResultsEmptyMessageText = WhatsNewResultsEmptyMessageText;

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

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _ErrorImage = _interopRequireDefault(require("../../../../assets/ErrorImage"));
 
@@ -32,6 +32,6 @@ var WhatsNewResultsError = function WhatsNewResultsError(_ref) {
 
 exports.WhatsNewResultsError = WhatsNewResultsError;
 
-var _default = (0, _reactIntl.injectIntl)(WhatsNewResultsError);
+var _default = (0, _reactIntlNext.injectIntl)(WhatsNewResultsError);
 
 exports.default = _default;

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

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _version = require("../../../../../version.json");
 
@@ -72,6 +72,6 @@ var WhatsNewResultListItemWithContext = function WhatsNewResultListItemWithConte
   }, /*#__PURE__*/_react.default.createElement(WhatsNewResultListItem, props));
 };
 
-var _default = (0, _reactIntl.injectIntl)(WhatsNewResultListItemWithContext);
+var _default = (0, _reactIntlNext.injectIntl)(WhatsNewResultListItemWithContext);
 
 exports.default = _default;

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WhatsNewResultListItemDescription = exports.WhatsNewResultListItemTitleText = exports.WhatsNewResultListItemTitleContainer = exports.WhatsNewResultListItemWrapper = void 0;
+exports.WhatsNewResultListItemWrapper = exports.WhatsNewResultListItemTitleText = exports.WhatsNewResultListItemTitleContainer = exports.WhatsNewResultListItemDescription = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,8 +15,6 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _typography = require("@atlaskit/theme/typography");
-
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _templateObject, _templateObject2, _templateObject3;
@@ -58,10 +56,10 @@ var WhatsNewResultListItemTitleContainer = _styled.default.div(_templateObject |
 
 exports.WhatsNewResultListItemTitleContainer = WhatsNewResultListItemTitleContainer;
 
-var WhatsNewResultListItemTitleText = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  display: inline-block;\n  vertical-align: middle;\n  margin: 0;\n  padding-left: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n"])), (0, _typography.h400)(), (0, _constants.gridSize)() / 2);
+var WhatsNewResultListItemTitleText = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  line-height: ", "px;\n  display: inline-block;\n  vertical-align: middle;\n  margin: 0;\n  padding-left: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n"])), (0, _constants.fontSizeSmall)(), (0, _constants.fontSize)(), (0, _constants.gridSize)() / 2);
 
 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.N400);
+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);
 
 exports.WhatsNewResultListItemDescription = WhatsNewResultListItemDescription;

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

@@ -51,16 +51,14 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
       var featureRolloutDateString = whatsNewArticle === null || whatsNewArticle === void 0 ? void 0 : whatsNewArticle.featureRolloutDate;
 
       if (featureRolloutDateString) {
-        var featureRolloutDateArray = featureRolloutDateString.split('-').map(function (dateValue) {
-          return parseInt(dateValue);
-        });
-        var featureRolloutDate = (0, _toDate.default)(new Date(featureRolloutDateArray[0], featureRolloutDateArray[1], featureRolloutDateArray[2]));
+        var featureRolloutDateArray = featureRolloutDateString.replace('-', '/');
+        var featureRolloutDate = (0, _toDate.default)(new Date(featureRolloutDateArray));
 
         if (whatsNewArticlesGroupedByDateTemp[featureRolloutDateString]) {
           whatsNewArticlesGroupedByDateTemp[featureRolloutDateString].items.push(whatsNewArticle);
         } else {
           whatsNewArticlesGroupedByDateTemp[featureRolloutDateString] = {
-            title: (0, _isToday.default)(featureRolloutDate) ? 'Today' : (0, _isYesterday.default)(featureRolloutDate) ? 'Yesterday' : (0, _format.default)(featureRolloutDate, 'PPPP'),
+            title: (0, _isToday.default)(featureRolloutDate) ? 'Today' : (0, _isYesterday.default)(featureRolloutDate) ? 'Yesterday' : (0, _format.default)(featureRolloutDate, 'EEEE, MMMM dd, yyyy'),
             items: [whatsNewArticle]
           };
         }

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToggleShowWhatsNewResultsContainer = exports.WhatsNewResultsListGroupTitle = exports.WhatsNewResultsListGroupWrapper = exports.WhatsNewResultsListContainer = exports.truncate = void 0;
+exports.truncate = exports.WhatsNewResultsListGroupWrapper = exports.WhatsNewResultsListGroupTitle = exports.WhatsNewResultsListContainer = exports.ToggleShowWhatsNewResultsContainer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -36,7 +36,7 @@ var WhatsNewResultsListContainer = _styled.default.div(_templateObject2 || (_tem
 
 exports.WhatsNewResultsListContainer = WhatsNewResultsListContainer;
 
-var WhatsNewResultsListGroupWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px 0 0 0;\n"])), (0, _constants.gridSize)());
+var WhatsNewResultsListGroupWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px 0 ", "px 0;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)());
 
 exports.WhatsNewResultsListGroupWrapper = WhatsNewResultsListGroupWrapper;
 

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

@@ -9,7 +9,7 @@ exports.default = exports.WhatsNewResultsLoading = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -23,14 +23,27 @@ var _styled3 = require("../styled");
 
 var WhatsNewResultsLoading = function WhatsNewResultsLoading(_ref) {
   var formatMessage = _ref.intl.formatMessage;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled2.LoadignWhatsNewResultsList, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
+    contentHeight: "".concat((0, _constants.gridSize)() * 5, "px"),
+    contentWidth: "152px",
+    marginTop: "0"
+  }), /*#__PURE__*/_react.default.createElement(_styled2.LoadignWhatsNewResultsList, {
     "aria-label": formatMessage(_messages.messages.help_loading),
     role: "img"
   }, /*#__PURE__*/_react.default.createElement(_styled3.WhatsNewResultsListTitleContainer, null, /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     contentHeight: "11px",
     contentWidth: "60px",
     marginTop: "0"
-  })), /*#__PURE__*/_react.default.createElement(_styled2.LoadignWhatsNewResultsListItem, null, /*#__PURE__*/_react.default.createElement(_styled.LoadingCircle, null), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
+  })), /*#__PURE__*/_react.default.createElement(_styled2.LoadignWhatsNewResultsListItem, null, /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
+    style: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      position: 'relative'
+    },
+    contentHeight: "16px",
+    contentWidth: "16px",
+    marginTop: "4px"
+  }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     style: {
       marginLeft: "".concat((0, _constants.gridSize)(), "px")
     },
@@ -43,7 +56,16 @@ var WhatsNewResultsLoading = function WhatsNewResultsLoading(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     contentWidth: "90%",
     marginTop: "4px"
-  })), /*#__PURE__*/_react.default.createElement(_styled2.LoadignWhatsNewResultsListItem, null, /*#__PURE__*/_react.default.createElement(_styled.LoadingCircle, null), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
+  })), /*#__PURE__*/_react.default.createElement(_styled2.LoadignWhatsNewResultsListItem, null, /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
+    style: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      position: 'relative'
+    },
+    contentHeight: "16px",
+    contentWidth: "16px",
+    marginTop: "4px"
+  }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     style: {
       marginLeft: "".concat((0, _constants.gridSize)(), "px")
     },
@@ -60,7 +82,16 @@ var WhatsNewResultsLoading = function WhatsNewResultsLoading(_ref) {
     contentHeight: "11px",
     contentWidth: "60px",
     marginTop: "0"
-  })), /*#__PURE__*/_react.default.createElement(_styled2.LoadignWhatsNewResultsListItem, null, /*#__PURE__*/_react.default.createElement(_styled.LoadingCircle, null), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
+  })), /*#__PURE__*/_react.default.createElement(_styled2.LoadignWhatsNewResultsListItem, null, /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
+    style: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      position: 'relative'
+    },
+    contentHeight: "16px",
+    contentWidth: "16px",
+    marginTop: "4px"
+  }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     style: {
       marginLeft: "".concat((0, _constants.gridSize)(), "px")
     },
@@ -73,7 +104,16 @@ var WhatsNewResultsLoading = function WhatsNewResultsLoading(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     contentWidth: "90%",
     marginTop: "4px"
-  })), /*#__PURE__*/_react.default.createElement(_styled2.LoadignWhatsNewResultsListItem, null, /*#__PURE__*/_react.default.createElement(_styled.LoadingCircle, null), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
+  })), /*#__PURE__*/_react.default.createElement(_styled2.LoadignWhatsNewResultsListItem, null, /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
+    style: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      position: 'relative'
+    },
+    contentHeight: "16px",
+    contentWidth: "16px",
+    marginTop: "4px"
+  }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     style: {
       marginLeft: "".concat((0, _constants.gridSize)(), "px")
     },
@@ -91,6 +131,6 @@ var WhatsNewResultsLoading = function WhatsNewResultsLoading(_ref) {
 
 exports.WhatsNewResultsLoading = WhatsNewResultsLoading;
 
-var _default = (0, _reactIntl.injectIntl)(WhatsNewResultsLoading);
+var _default = (0, _reactIntlNext.injectIntl)(WhatsNewResultsLoading);
 
 exports.default = _default;

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

@@ -18,7 +18,7 @@ var _templateObject, _templateObject2;
 /**
  * Loading styled-components
  */
-var LoadignWhatsNewResultsList = _styled.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n"])));
+var LoadignWhatsNewResultsList = _styled.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  margin-top: ", "px;\n"])), (0, _constants.gridSize)() * 2);
 
 exports.LoadignWhatsNewResultsList = LoadignWhatsNewResultsList;
 

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

@@ -19,7 +19,7 @@ var _reactTransitionGroup = require("react-transition-group");
 
 var _select = _interopRequireDefault(require("@atlaskit/select"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _constants = require("../../constants");
 
@@ -33,6 +33,8 @@ var _whatsNewArticleContext = require("../../contexts/whatsNewArticleContext");
 
 var _navigationContext = require("../../contexts/navigationContext");
 
+var _WhatsNewResultsEmpty = _interopRequireDefault(require("./WhatsNewResultsEmpty"));
+
 var _WhatsNewResultsError = _interopRequireDefault(require("./WhatsNewResultsError"));
 
 var _WhatsNewResultsLoading = _interopRequireDefault(require("./WhatsNewResultsLoading"));
@@ -85,7 +87,12 @@ var WhatsNewResults = function WhatsNewResults(_ref) {
       searchWhatsNewArticlesState = _useWhatsNewArticleCo.searchWhatsNewArticlesState,
       onWhatsNewButtonClick = _useWhatsNewArticleCo.onWhatsNewButtonClick;
 
-  var _useState = (0, _react.useState)(''),
+  var SELECT_DEFAULT_VALUE = {
+    value: '',
+    label: formatMessage(_messages.messages.help_whats_new_filter_select_option_all)
+  };
+
+  var _useState = (0, _react.useState)(SELECT_DEFAULT_VALUE),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
@@ -96,13 +103,24 @@ var WhatsNewResults = function WhatsNewResults(_ref) {
           hasNextPage = searchWhatsNewArticlesResult.hasNextPage;
 
       if (nextPage && hasNextPage) {
-        onSearchWhatsNewArticles(selectedOption, _constants.NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, nextPage);
+        onSearchWhatsNewArticles(selectedOption.value, _constants.NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, nextPage);
       }
     }
   }, [onSearchWhatsNewArticles, searchWhatsNewArticlesResult, selectedOption]);
 
   var handleOnEnter = function handleOnEnter() {
-    return onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+    setSelectedOption(SELECT_DEFAULT_VALUE);
+    onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+  };
+
+  var handleOnClearFilter = function handleOnClearFilter() {
+    if (onSearchWhatsNewArticles) {
+      setSelectedOption({
+        value: '',
+        label: formatMessage(_messages.messages.help_whats_new_filter_select_option_all)
+      });
+      onSearchWhatsNewArticles('', _constants.NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, '');
+    }
   };
 
   return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
@@ -112,11 +130,8 @@ var WhatsNewResults = function WhatsNewResults(_ref) {
   }, function (state) {
     return /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsContainer, {
       style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
-    }, searchWhatsNewArticlesState !== _Requests.REQUEST_STATE.error && /*#__PURE__*/_react.default.createElement(_styled.SelectContainer, null, /*#__PURE__*/_react.default.createElement(_select.default, {
-      defaultValue: {
-        value: '',
-        label: formatMessage(_messages.messages.help_whats_new_filter_select_option_all)
-      },
+    }, /*#__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,
       className: "single-select",
       classNamePrefix: "react-select",
       options: [{
@@ -138,21 +153,28 @@ var WhatsNewResults = function WhatsNewResults(_ref) {
         label: formatMessage(_messages.messages.help_whats_new_filter_select_option_experiment),
         value: _WhatsNew.WHATS_NEW_ITEM_TYPES.EXPERIMENT
       }],
+      value: selectedOption,
       onChange: function onChange(option) {
         if (onSearchWhatsNewArticles) {
           var selectedOptionValue = option.value;
-          setSelectedOption(selectedOptionValue);
+          var selectedOptionLabel = option.label;
+          setSelectedOption({
+            value: selectedOptionValue,
+            label: selectedOptionLabel
+          });
           onSearchWhatsNewArticles(selectedOptionValue, _constants.NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, '');
         }
       }
-    })), /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsListContainer, 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(_WhatsNewResultsList.default, {
+    })), /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsListContainer, null, searchWhatsNewArticlesResult.articles.length > 0 ? /*#__PURE__*/_react.default.createElement(_WhatsNewResultsList.default, {
       whatsNewArticles: searchWhatsNewArticlesResult.articles,
       onWhatsNewResultItemClick: onWhatsNewButtonClick,
       onShowMoreButtonClick: handleOnShowMoreButtonClick,
       hasNextPage: searchWhatsNewArticlesResult === null || searchWhatsNewArticlesResult === void 0 ? void 0 : searchWhatsNewArticlesResult.hasNextPage,
       nextPage: searchWhatsNewArticlesResult === null || searchWhatsNewArticlesResult === void 0 ? void 0 : searchWhatsNewArticlesResult.nextPage,
       loadingMore: searchWhatsNewArticlesState === _Requests.REQUEST_STATE.loading
-    })), searchWhatsNewArticlesState === _Requests.REQUEST_STATE.error && /*#__PURE__*/_react.default.createElement(_WhatsNewResultsError.default, {
+    }) : /*#__PURE__*/_react.default.createElement(_WhatsNewResultsEmpty.default, {
+      onClearFilter: handleOnClearFilter
+    }))), searchWhatsNewArticlesState === _Requests.REQUEST_STATE.error && /*#__PURE__*/_react.default.createElement(_WhatsNewResultsError.default, {
       onSearch: onSearchWhatsNewArticles
     })));
   });
@@ -160,6 +182,6 @@ var WhatsNewResults = function WhatsNewResults(_ref) {
 
 exports.WhatsNewResults = WhatsNewResults;
 
-var _default = (0, _reactIntl.injectIntl)(WhatsNewResults);
+var _default = (0, _reactIntlNext.injectIntl)(WhatsNewResults);
 
 exports.default = _default;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WhatsNewResultsListTitleContainer = exports.WhatsNewResultsListContainer = exports.SelectContainer = exports.WhatsNewResultsContainer = void 0;
+exports.WhatsNewResultsListTitleContainer = exports.WhatsNewResultsListContainer = exports.WhatsNewResultsContainer = exports.SelectContainer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -23,7 +23,7 @@ var SelectContainer = _styled.default.div(_templateObject2 || (_templateObject2
 
 exports.SelectContainer = SelectContainer;
 
-var WhatsNewResultsListContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", "px;\n"])), (0, _constants.gridSize)() * 2);
+var WhatsNewResultsListContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", "px;\n"])), (0, _constants.gridSize)());
 
 exports.WhatsNewResultsListContainer = WhatsNewResultsListContainer;
 

package/dist/cjs/components/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRANSITION_STATUS = exports.HIDE_CONTENT_DELAY = exports.FADEIN_OVERLAY_TRANSITION_DURATION_MS = exports.SLIDEIN_OVERLAY_TRANSITION_DURATION_MS = exports.VIEW = exports.NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE = exports.LOADING_TIMEOUT = exports.MIN_CHARACTERS_FOR_SEARCH = void 0;
+exports.VIEW = exports.TRANSITION_STATUS = exports.SLIDEIN_OVERLAY_TRANSITION_DURATION_MS = exports.NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE = exports.MIN_CHARACTERS_FOR_SEARCH = exports.LOADING_TIMEOUT = exports.HIDE_CONTENT_DELAY = exports.FADEIN_OVERLAY_TRANSITION_DURATION_MS = void 0;
 var MIN_CHARACTERS_FOR_SEARCH = 3;
 exports.MIN_CHARACTERS_FOR_SEARCH = MIN_CHARACTERS_FOR_SEARCH;
 var LOADING_TIMEOUT = 1000;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HeaderContextProvider = exports.CtxProvider = exports.useHeaderContext = void 0;
+exports.useHeaderContext = exports.HeaderContextProvider = exports.CtxProvider = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HelpArticleContextProvider = exports.CtxProvider = exports.useHelpArticleContext = void 0;
+exports.useHelpArticleContext = exports.HelpArticleContextProvider = exports.CtxProvider = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HomeContextProvider = exports.CtxProvider = exports.useHomeContext = void 0;
+exports.useHomeContext = exports.HomeContextProvider = exports.CtxProvider = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NavigationContextProvider = exports.CtxProvider = exports.useNavigationContext = void 0;
+exports.useNavigationContext = exports.NavigationContextProvider = exports.CtxProvider = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -236,7 +236,8 @@ var NavigationContextProvider = function NavigationContextProvider(_ref4) {
 
   var _useSearchContext = (0, _searchContext.useSearchContext)(),
       onSearch = _useSearchContext.onSearch,
-      isSearchResultVisible = _useSearchContext.isSearchResultVisible;
+      isSearchResultVisible = _useSearchContext.isSearchResultVisible,
+      searchValue = _useSearchContext.searchValue;
 
   var _useHeaderContext = (0, _headerContext.useHeaderContext)(),
       onCloseButtonClick = _useHeaderContext.onCloseButtonClick;
@@ -401,14 +402,26 @@ var NavigationContextProvider = function NavigationContextProvider(_ref4) {
         switch (_context3.prev = _context3.next) {
           case 0:
             if (!(currentView === _constants.VIEW.SEARCH && onSearch)) {
-              _context3.next = 3;
+              _context3.next = 8;
+              break;
+            }
+
+            if (!(searchValue !== '')) {
+              _context3.next = 6;
               break;
             }
 
             onSearch('');
             return _context3.abrupt("return");
 
-          case 3:
+          case 6:
+            dispatchNavigationAction({
+              type: 'updateView',
+              payload: currentArticleId.type
+            });
+            return _context3.abrupt("return");
+
+          case 8:
             //  if the history is not empty and ...
             if (currentHistory.length > 0) {
               // the history has more than one article, navigate back through the history
@@ -425,13 +438,13 @@ var NavigationContextProvider = function NavigationContextProvider(_ref4) {
               }
             }
 
-          case 4:
+          case 9:
           case "end":
             return _context3.stop();
         }
       }
     }, _callee3);
-  })), [currentView, onSearch, currentHistory.length]);
+  })), [currentView, onSearch, currentHistory.length, searchValue, currentArticleId.type]);
   var onClose = (0, _react.useCallback)(function (event, analyticsEvent) {
     if (onCloseButtonClick) {
       dispatchNavigationAction({

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RelatedArticlesContextProvider = exports.CtxProvider = exports.useRelatedArticlesContext = void 0;
+exports.useRelatedArticlesContext = exports.RelatedArticlesContextProvider = exports.CtxProvider = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SearchContextProvider = exports.CtxProvider = exports.useSearchContext = void 0;
+exports.useSearchContext = exports.SearchContextProvider = exports.CtxProvider = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WhatsNewArticleProvider = exports.CtxProvider = exports.useWhatsNewArticleContext = void 0;
+exports.useWhatsNewArticleContext = exports.WhatsNewArticleProvider = exports.CtxProvider = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 

package/dist/cjs/components/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Home = exports.HelpBody = exports.HelpBodyContainer = void 0;
+exports.Home = exports.HelpBodyContainer = exports.HelpBody = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,7 +19,7 @@ var HelpBodyContainer = _styled.default.div(_templateObject || (_templateObject
 
 exports.HelpBodyContainer = HelpBodyContainer;
 
-var HelpBody = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  box-sizing: border-box;\n  order: 0;\n  flex: 1 1 auto;\n  align-self: auto;\n  position: relative;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
+var HelpBody = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  box-sizing: border-box;\n  order: 0;\n  flex: 1 1 auto;\n  align-self: auto;\n  position: relative;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
 
 exports.HelpBody = HelpBody;