@atlaskit/help 4.1.1 → 4.2.3

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/help
 
+## 4.2.3
+
+### Patch Changes
+
+- [`f9bfb2095bd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9bfb2095bd) - [ux] Group release notes by date
+
+## 4.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.2.1
+
+### Patch Changes
+
+- [`82bdb8cd2d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/82bdb8cd2d6) - [ux] Updated examples with the "What's New" section
+
+## 4.2.0
+
+### Minor Changes
+
+- [`3690098a745`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3690098a745) - [ux] Updated navigation logic for the "What's new" section
+
 ## 4.1.1
 
 ### Patch Changes

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

@@ -15,6 +15,8 @@ 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;
@@ -56,7 +58,7 @@ var WhatsNewResultListItemTitleContainer = _styled.default.div(_templateObject |
 
 exports.WhatsNewResultListItemTitleContainer = WhatsNewResultListItemTitleContainer;
 
-var WhatsNewResultListItemTitleText = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  display: inline-block;\n  vertical-align: middle;\n  padding-left: ", "px;\n  line-height: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n"])), colors.N800, (0, _constants.fontSize)(), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() * 2.5);
+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);
 
 exports.WhatsNewResultListItemTitleText = WhatsNewResultListItemTitleText;
 

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

@@ -9,14 +9,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
+var _toDate = _interopRequireDefault(require("date-fns/toDate"));
+
+var _isYesterday = _interopRequireDefault(require("date-fns/isYesterday"));
+
+var _isToday = _interopRequireDefault(require("date-fns/isToday"));
+
+var _format = _interopRequireDefault(require("date-fns/format"));
+
 var _WhatsNewResultItem = _interopRequireDefault(require("./WhatsNewResultItem"));
 
+var _styled = require("./styled");
+
 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; }
@@ -27,23 +39,56 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
       _ref$whatsNewArticles = _ref.whatsNewArticles,
       whatsNewArticles = _ref$whatsNewArticles === void 0 ? [] : _ref$whatsNewArticles,
       onWhatsNewResultItemClick = _ref.onWhatsNewResultItemClick;
-  return whatsNewArticles && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, whatsNewArticles.map(function (whatsNewArticle, i) {
-    return /*#__PURE__*/_react.default.createElement(_WhatsNewResultItem.default, {
-      styles: {
-        border: style === 'secondary' ? "2px solid ".concat(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
-      },
-      id: whatsNewArticle.id,
-      onClick: function onClick(event, analyticsEvent) {
-        if (onWhatsNewResultItemClick) {
-          onWhatsNewResultItemClick(event, analyticsEvent, whatsNewArticle);
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      whatsNewArticlesGroupedByDate = _useState2[0],
+      setListValuesGrouped = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var whatsNewArticlesGroupedByDateTemp = {};
+    whatsNewArticles === null || whatsNewArticles === void 0 ? void 0 : whatsNewArticles.forEach(function (whatsNewArticle) {
+      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]));
+
+        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'),
+            items: [whatsNewArticle]
+          };
         }
-      },
-      type: whatsNewArticle.type,
-      title: whatsNewArticle.title,
-      key: whatsNewArticle.id
+      }
     });
+    setListValuesGrouped(whatsNewArticlesGroupedByDateTemp);
+  }, [whatsNewArticles]);
+  return whatsNewArticlesGroupedByDate && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Object.keys(whatsNewArticlesGroupedByDate).map(function (key) {
+    return /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsListGroupWrapper, {
+      key: key
+    }, /*#__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,
+          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
+        },
+        id: whatsNewArticle.id,
+        onClick: function onClick(event, analyticsEvent) {
+          if (onWhatsNewResultItemClick) {
+            onWhatsNewResultItemClick(event, analyticsEvent, whatsNewArticle);
+          }
+        },
+        type: whatsNewArticle.type,
+        title: whatsNewArticle.title,
+        key: whatsNewArticle.id
+      });
+    }));
   }));
 };
 

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.WhatsNewResultsListContainer = exports.truncate = void 0;
+exports.ToggleShowWhatsNewResultsContainer = exports.WhatsNewResultsListGroupTitle = exports.WhatsNewResultsListGroupWrapper = exports.WhatsNewResultsListContainer = exports.truncate = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,7 +19,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 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); }
 
@@ -36,10 +36,14 @@ var WhatsNewResultsListContainer = _styled.default.div(_templateObject2 || (_tem
 
 exports.WhatsNewResultsListContainer = WhatsNewResultsListContainer;
 
-var WhatsNewResultsListGroupTitle = _styled.default.div(_templateObject3 || (_templateObject3 = (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 WhatsNewResultsListGroupWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px 0 0 0;\n"])), (0, _constants.gridSize)());
+
+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)());
 
 exports.WhatsNewResultsListGroupTitle = WhatsNewResultsListGroupTitle;
 
-var ToggleShowWhatsNewResultsContainer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px 0;\n  span {\n    margin: 0;\n  }\n"])), (0, _constants.gridSize)());
+var ToggleShowWhatsNewResultsContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px 0;\n  span {\n    margin: 0;\n  }\n"])), (0, _constants.gridSize)());
 
 exports.ToggleShowWhatsNewResultsContainer = ToggleShowWhatsNewResultsContainer;

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

@@ -104,23 +104,23 @@ var NavigationContextProvider = function NavigationContextProvider(_ref) {
 
   var tempHistory = (0, _react.useRef)(propsHistory ? propsHistory : []);
   var clearHistory = (0, _react.useCallback)(function () {
-    if (!articleIdSetter) {
-      return;
-    } // Clear History
+    if (tempHistory.current.length > 0) {
+      if (!articleIdSetter) {
+        return;
+      } // Clear History
 
 
-    tempHistory.current = [];
-    setHistory(tempHistory.current); // Clear host history using the historySetter
+      tempHistory.current = [];
+      setHistory(tempHistory.current); // Clear host history using the historySetter
 
-    historySetter && historySetter(tempHistory.current); // Set article ID to ''
+      historySetter && historySetter(tempHistory.current); // Set article ID to ''
 
-    if ((articleId === null || articleId === void 0 ? void 0 : articleId.id) !== '') {
       articleIdSetter({
         id: '',
         type: _Help.ARTICLE_TYPE.HELP_ARTICLE
       });
     }
-  }, [articleIdSetter, historySetter, articleId]);
+  }, [articleIdSetter, historySetter]);
   var isDefaultContentDefined = (0, _react.useCallback)(function () {
     return homeContent !== undefined || homeOptions !== undefined;
   }, [homeContent, homeOptions]);
@@ -515,19 +515,6 @@ var NavigationContextProvider = function NavigationContextProvider(_ref) {
             return _context4.abrupt("return");
 
           case 5:
-            if (!(view === _constants.VIEW.WHATS_NEW)) {
-              _context4.next = 9;
-              break;
-            }
-
-            articleIdSetter({
-              id: '',
-              type: _Help.ARTICLE_TYPE.HELP_ARTICLE
-            });
-            updateView();
-            return _context4.abrupt("return");
-
-          case 9:
             //  if the history is not empty and ...
             if (tempHistory.current.length > 0) {
               // the history has more than one article, navigate back through the history
@@ -568,13 +555,13 @@ var NavigationContextProvider = function NavigationContextProvider(_ref) {
               }
             }
 
-          case 10:
+          case 6:
           case "end":
             return _context4.stop();
         }
       }
     }, _callee4);
-  })), [articleIdSetter, clearHistory, fetchArticleData, getCurrentArticle, historySetter, onSearch, updateView, view]);
+  })), [articleIdSetter, clearHistory, fetchArticleData, getCurrentArticle, historySetter, onSearch, view]);
   var onClose = (0, _react.useCallback)(function (event, analyticsEvent) {
     if (onCloseButtonClick) {
       clearHistory();
@@ -585,8 +572,15 @@ var NavigationContextProvider = function NavigationContextProvider(_ref) {
     if (!articleIdSetter) {
       return;
     }
+    /**
+     * If the article type is HELP_ARTICLE and the ID is defined we add a new historyItem
+     *
+     * If the article type is WHATS_NEW it doesn't matter if the the articleId.id is defined or not, we want
+     * to add it to the history
+     */
+
 
-    if (articleId && articleId.id) {
+    if ((articleId === null || articleId === void 0 ? void 0 : articleId.type) === _Help.ARTICLE_TYPE.HELP_ARTICLE && articleId !== null && articleId !== void 0 && articleId.id || (articleId === null || articleId === void 0 ? void 0 : articleId.type) === _Help.ARTICLE_TYPE.WHATS_NEW) {
       // get the last History Item
       var lastHistoryItem = getCurrentArticle(); // If the last history item articleId isn't different to the current articleId don't do anything
 
@@ -616,7 +610,7 @@ var NavigationContextProvider = function NavigationContextProvider(_ref) {
         }
       } else {
         // If article ID is empty clear the history
-        if (articleId.type === _Help.ARTICLE_TYPE.HELP_ARTICLE) {
+        if (!getCurrentArticle()) {
           clearHistory();
         }
       }

package/dist/cjs/util/testing/mock.js

@@ -93,13 +93,15 @@ var getMockWhatsNewArticleItem = function getMockWhatsNewArticleItem(id, type) {
   var description = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
   var changeTargetSchedule = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
   var status = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '';
-  var href = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : '';
+  var featureRolloutDate = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : '01-01-2022';
+  var href = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : '';
   return {
     title: title,
     changeTargetSchedule: changeTargetSchedule,
     type: type,
     status: status,
     href: href,
+    featureRolloutDate: featureRolloutDate,
     id: id
   };
 };

package/dist/cjs/version.json

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

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { gridSize } from '@atlaskit/theme/constants';
+import { h400 } from '@atlaskit/theme/typography';
 import * as colors from '@atlaskit/theme/colors';
 export const WhatsNewResultListItemWrapper = styled.a({
   position: `relative`,
@@ -32,14 +33,11 @@ export const WhatsNewResultListItemTitleContainer = styled.div`
   margin-bottom: ${gridSize() / 2}px;
 `;
 export const WhatsNewResultListItemTitleText = styled.span`
-  text-decoration: none;
-  color: ${colors.N800};
-  font-size: ${fontSize()}px;
-  font-weight: 600;
+  ${h400()}
   display: inline-block;
   vertical-align: middle;
+  margin: 0;
   padding-left: ${gridSize() / 2}px;
-  line-height: ${gridSize() * 2.5}px;
   white-space: normal;
   overflow-x: hidden;
 `;

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

@@ -1,27 +1,60 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import toDate from 'date-fns/toDate';
+import isYesterday from 'date-fns/isYesterday';
+import isToday from 'date-fns/isToday';
+import formatDate from 'date-fns/format';
 import WhatsNewResultItem from './WhatsNewResultItem';
+import { WhatsNewResultsListGroupTitle, WhatsNewResultsListGroupWrapper } from './styled';
 
 const WhatsNewResultsList = ({
   style = 'primary',
   whatsNewArticles = [],
   onWhatsNewResultItemClick
-}) => whatsNewArticles && /*#__PURE__*/React.createElement(React.Fragment, null, whatsNewArticles.map((whatsNewArticle, i) => /*#__PURE__*/React.createElement(WhatsNewResultItem, {
-  styles: {
-    border: style === 'secondary' ? `2px solid ${colors.N30}` : 0,
-    padding: style === 'secondary' ? `${gridSize()}px ${gridSize() * 2}px` : `${gridSize()}px`,
-    marginBottom: style === 'secondary' ? `${gridSize() * 1.5}px` : 0
-  },
-  id: whatsNewArticle.id,
-  onClick: (event, analyticsEvent) => {
-    if (onWhatsNewResultItemClick) {
-      onWhatsNewResultItemClick(event, analyticsEvent, whatsNewArticle);
-    }
-  },
-  type: whatsNewArticle.type,
-  title: whatsNewArticle.title,
-  key: whatsNewArticle.id
-})));
+}) => {
+  const [whatsNewArticlesGroupedByDate, setListValuesGrouped] = useState({});
+  useEffect(() => {
+    let whatsNewArticlesGroupedByDateTemp = {};
+    whatsNewArticles === null || whatsNewArticles === void 0 ? void 0 : whatsNewArticles.forEach(whatsNewArticle => {
+      const featureRolloutDateString = whatsNewArticle === null || whatsNewArticle === void 0 ? void 0 : whatsNewArticle.featureRolloutDate;
+
+      if (featureRolloutDateString) {
+        const featureRolloutDateArray = featureRolloutDateString.split('-').map(dateValue => parseInt(dateValue));
+        const featureRolloutDate = toDate(new Date(featureRolloutDateArray[0], featureRolloutDateArray[1], featureRolloutDateArray[2]));
+
+        if (whatsNewArticlesGroupedByDateTemp[featureRolloutDateString]) {
+          whatsNewArticlesGroupedByDateTemp[featureRolloutDateString].items.push(whatsNewArticle);
+        } else {
+          whatsNewArticlesGroupedByDateTemp[featureRolloutDateString] = {
+            title: isToday(featureRolloutDate) ? 'Today' : isYesterday(featureRolloutDate) ? 'Yesterday' : formatDate(featureRolloutDate, 'PPPP'),
+            items: [whatsNewArticle]
+          };
+        }
+      }
+    });
+    setListValuesGrouped(whatsNewArticlesGroupedByDateTemp);
+  }, [whatsNewArticles]);
+  return whatsNewArticlesGroupedByDate && /*#__PURE__*/React.createElement(React.Fragment, null, Object.keys(whatsNewArticlesGroupedByDate).map(function (key) {
+    return /*#__PURE__*/React.createElement(WhatsNewResultsListGroupWrapper, {
+      key: key
+    }, /*#__PURE__*/React.createElement(WhatsNewResultsListGroupTitle, null, whatsNewArticlesGroupedByDate[key].title), whatsNewArticlesGroupedByDate[key].items.map((whatsNewArticle, i) => /*#__PURE__*/React.createElement(WhatsNewResultItem, {
+      styles: {
+        border: style === 'secondary' ? `2px solid ${colors.N30}` : 0,
+        padding: style === 'secondary' ? `${gridSize()}px ${gridSize() * 2}px` : `${gridSize()}px`,
+        marginBottom: style === 'secondary' ? `${gridSize() * 1.5}px` : 0
+      },
+      id: whatsNewArticle.id,
+      onClick: (event, analyticsEvent) => {
+        if (onWhatsNewResultItemClick) {
+          onWhatsNewResultItemClick(event, analyticsEvent, whatsNewArticle);
+        }
+      },
+      type: whatsNewArticle.type,
+      title: whatsNewArticle.title,
+      key: whatsNewArticle.id
+    })));
+  }));
+};
 
 export default WhatsNewResultsList;

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

@@ -12,6 +12,9 @@ export const truncate = (width = '100%') => css`
 export const WhatsNewResultsListContainer = styled.div`
   position: relative;
 `;
+export const WhatsNewResultsListGroupWrapper = styled.div`
+  padding: ${gridSize()}px 0 0 0;
+`;
 export const WhatsNewResultsListGroupTitle = styled.div`
   color: ${colors.N200};
   font-size: ${fontSizeSmall()}px;

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

@@ -47,23 +47,23 @@ export const NavigationContextProvider = ({
   const [history, setHistory] = useState(propsHistory ? propsHistory : []);
   const tempHistory = useRef(propsHistory ? propsHistory : []);
   const clearHistory = useCallback(() => {
-    if (!articleIdSetter) {
-      return;
-    } // Clear History
+    if (tempHistory.current.length > 0) {
+      if (!articleIdSetter) {
+        return;
+      } // Clear History
 
 
-    tempHistory.current = [];
-    setHistory(tempHistory.current); // Clear host history using the historySetter
+      tempHistory.current = [];
+      setHistory(tempHistory.current); // Clear host history using the historySetter
 
-    historySetter && historySetter(tempHistory.current); // Set article ID to ''
+      historySetter && historySetter(tempHistory.current); // Set article ID to ''
 
-    if ((articleId === null || articleId === void 0 ? void 0 : articleId.id) !== '') {
       articleIdSetter({
         id: '',
         type: ARTICLE_TYPE.HELP_ARTICLE
       });
     }
-  }, [articleIdSetter, historySetter, articleId]);
+  }, [articleIdSetter, historySetter]);
   const isDefaultContentDefined = useCallback(() => {
     return homeContent !== undefined || homeOptions !== undefined;
   }, [homeContent, homeOptions]);
@@ -310,20 +310,6 @@ export const NavigationContextProvider = ({
     if (view === VIEW.SEARCH && onSearch) {
       onSearch('');
       return;
-    }
-    /**
-     * If the user is in the "What's new" search screen, set the articleId === { id: '', type: ARTICLE_TYPE.HELP_ARTICLE }
-     * to display the default content
-     */
-
-
-    if (view === VIEW.WHATS_NEW) {
-      articleIdSetter({
-        id: '',
-        type: ARTICLE_TYPE.HELP_ARTICLE
-      });
-      updateView();
-      return;
     } //  if the history is not empty and ...
 
 
@@ -365,7 +351,7 @@ export const NavigationContextProvider = ({
         clearHistory();
       }
     }
-  }, [articleIdSetter, clearHistory, fetchArticleData, getCurrentArticle, historySetter, onSearch, updateView, view]);
+  }, [articleIdSetter, clearHistory, fetchArticleData, getCurrentArticle, historySetter, onSearch, view]);
   const onClose = useCallback((event, analyticsEvent) => {
     if (onCloseButtonClick) {
       clearHistory();
@@ -376,8 +362,15 @@ export const NavigationContextProvider = ({
     if (!articleIdSetter) {
       return;
     }
+    /**
+     * If the article type is HELP_ARTICLE and the ID is defined we add a new historyItem
+     *
+     * If the article type is WHATS_NEW it doesn't matter if the the articleId.id is defined or not, we want
+     * to add it to the history
+     */
+
 
-    if (articleId && articleId.id) {
+    if ((articleId === null || articleId === void 0 ? void 0 : articleId.type) === ARTICLE_TYPE.HELP_ARTICLE && articleId !== null && articleId !== void 0 && articleId.id || (articleId === null || articleId === void 0 ? void 0 : articleId.type) === ARTICLE_TYPE.WHATS_NEW) {
       // get the last History Item
       const lastHistoryItem = getCurrentArticle(); // If the last history item articleId isn't different to the current articleId don't do anything
 
@@ -408,7 +401,7 @@ export const NavigationContextProvider = ({
         }
       } else {
         // If article ID is empty clear the history
-        if (articleId.type === ARTICLE_TYPE.HELP_ARTICLE) {
+        if (!getCurrentArticle()) {
           clearHistory();
         }
       }

package/dist/es2019/util/testing/mock.js

@@ -56,13 +56,14 @@ export const getMockWhatsNewArticle = (id, routeName = '', routeGroup = '', prod
     relatedArticles: getMockArticleItemList(10)
   };
 };
-export const getMockWhatsNewArticleItem = (id, type, title = `Mock What's New article title`, description = '', changeTargetSchedule = '', status = '', href = '') => {
+export const getMockWhatsNewArticleItem = (id, type, title = `Mock What's New article title`, description = '', changeTargetSchedule = '', status = '', featureRolloutDate = '01-01-2022', href = '') => {
   return {
     title,
     changeTargetSchedule,
     type,
     status,
     href,
+    featureRolloutDate,
     id
   };
 };

package/dist/es2019/version.json

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

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

@@ -4,7 +4,8 @@ var _templateObject, _templateObject2, _templateObject3;
 
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { gridSize } from '@atlaskit/theme/constants';
+import { h400 } from '@atlaskit/theme/typography';
 import * as colors from '@atlaskit/theme/colors';
 export var WhatsNewResultListItemWrapper = styled.a({
   position: "relative",
@@ -33,5 +34,5 @@ export var WhatsNewResultListItemWrapper = styled.a({
   return props.styles;
 });
 export var WhatsNewResultListItemTitleContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  white-space: nowrap;\n  margin-bottom: ", "px;\n"])), gridSize() / 2);
-export var WhatsNewResultListItemTitleText = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  display: inline-block;\n  vertical-align: middle;\n  padding-left: ", "px;\n  line-height: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n"])), colors.N800, fontSize(), gridSize() / 2, gridSize() * 2.5);
+export var WhatsNewResultListItemTitleText = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), h400(), gridSize() / 2);
 export var WhatsNewResultListItemDescription = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), gridSize() * 2.5, colors.N400);

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

@@ -1,7 +1,13 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import toDate from 'date-fns/toDate';
+import isYesterday from 'date-fns/isYesterday';
+import isToday from 'date-fns/isToday';
+import formatDate from 'date-fns/format';
 import WhatsNewResultItem from './WhatsNewResultItem';
+import { WhatsNewResultsListGroupTitle, WhatsNewResultsListGroupWrapper } from './styled';
 
 var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
   var _ref$style = _ref.style,
@@ -9,23 +15,56 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
       _ref$whatsNewArticles = _ref.whatsNewArticles,
       whatsNewArticles = _ref$whatsNewArticles === void 0 ? [] : _ref$whatsNewArticles,
       onWhatsNewResultItemClick = _ref.onWhatsNewResultItemClick;
-  return whatsNewArticles && /*#__PURE__*/React.createElement(React.Fragment, null, whatsNewArticles.map(function (whatsNewArticle, i) {
-    return /*#__PURE__*/React.createElement(WhatsNewResultItem, {
-      styles: {
-        border: style === 'secondary' ? "2px solid ".concat(colors.N30) : 0,
-        padding: style === 'secondary' ? "".concat(gridSize(), "px ").concat(gridSize() * 2, "px") : "".concat(gridSize(), "px"),
-        marginBottom: style === 'secondary' ? "".concat(gridSize() * 1.5, "px") : 0
-      },
-      id: whatsNewArticle.id,
-      onClick: function onClick(event, analyticsEvent) {
-        if (onWhatsNewResultItemClick) {
-          onWhatsNewResultItemClick(event, analyticsEvent, whatsNewArticle);
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      whatsNewArticlesGroupedByDate = _useState2[0],
+      setListValuesGrouped = _useState2[1];
+
+  useEffect(function () {
+    var whatsNewArticlesGroupedByDateTemp = {};
+    whatsNewArticles === null || whatsNewArticles === void 0 ? void 0 : whatsNewArticles.forEach(function (whatsNewArticle) {
+      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 = toDate(new Date(featureRolloutDateArray[0], featureRolloutDateArray[1], featureRolloutDateArray[2]));
+
+        if (whatsNewArticlesGroupedByDateTemp[featureRolloutDateString]) {
+          whatsNewArticlesGroupedByDateTemp[featureRolloutDateString].items.push(whatsNewArticle);
+        } else {
+          whatsNewArticlesGroupedByDateTemp[featureRolloutDateString] = {
+            title: isToday(featureRolloutDate) ? 'Today' : isYesterday(featureRolloutDate) ? 'Yesterday' : formatDate(featureRolloutDate, 'PPPP'),
+            items: [whatsNewArticle]
+          };
         }
-      },
-      type: whatsNewArticle.type,
-      title: whatsNewArticle.title,
-      key: whatsNewArticle.id
+      }
     });
+    setListValuesGrouped(whatsNewArticlesGroupedByDateTemp);
+  }, [whatsNewArticles]);
+  return whatsNewArticlesGroupedByDate && /*#__PURE__*/React.createElement(React.Fragment, null, Object.keys(whatsNewArticlesGroupedByDate).map(function (key) {
+    return /*#__PURE__*/React.createElement(WhatsNewResultsListGroupWrapper, {
+      key: key
+    }, /*#__PURE__*/React.createElement(WhatsNewResultsListGroupTitle, null, whatsNewArticlesGroupedByDate[key].title), whatsNewArticlesGroupedByDate[key].items.map(function (whatsNewArticle, i) {
+      return /*#__PURE__*/React.createElement(WhatsNewResultItem, {
+        styles: {
+          border: style === 'secondary' ? "2px solid ".concat(colors.N30) : 0,
+          padding: style === 'secondary' ? "".concat(gridSize(), "px ").concat(gridSize() * 2, "px") : "".concat(gridSize(), "px"),
+          marginBottom: style === 'secondary' ? "".concat(gridSize() * 1.5, "px") : 0
+        },
+        id: whatsNewArticle.id,
+        onClick: function onClick(event, analyticsEvent) {
+          if (onWhatsNewResultItemClick) {
+            onWhatsNewResultItemClick(event, analyticsEvent, whatsNewArticle);
+          }
+        },
+        type: whatsNewArticle.type,
+        title: whatsNewArticle.title,
+        key: whatsNewArticle.id
+      });
+    }));
   }));
 };
 

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 /** @jsx jsx */
 import { css } from '@emotion/core';
@@ -12,5 +12,6 @@ export var truncate = function truncate() {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: ", ";\n"])), width);
 };
 export var WhatsNewResultsListContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-export var WhatsNewResultsListGroupTitle = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: bold;\n  padding: 0 ", "px ", "px ", "px;\n  text-transform: uppercase;\n"])), colors.N200, fontSizeSmall(), gridSize(), gridSize(), gridSize());
-export var ToggleShowWhatsNewResultsContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", "px 0;\n  span {\n    margin: 0;\n  }\n"])), gridSize());
+export var WhatsNewResultsListGroupWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", "px 0 0 0;\n"])), gridSize());
+export var WhatsNewResultsListGroupTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: bold;\n  padding: 0 ", "px ", "px ", "px;\n  text-transform: uppercase;\n"])), colors.N200, fontSizeSmall(), gridSize(), gridSize(), gridSize());
+export var ToggleShowWhatsNewResultsContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", "px 0;\n  span {\n    margin: 0;\n  }\n"])), gridSize());

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

@@ -73,23 +73,23 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref)
 
   var tempHistory = useRef(propsHistory ? propsHistory : []);
   var clearHistory = useCallback(function () {
-    if (!articleIdSetter) {
-      return;
-    } // Clear History
+    if (tempHistory.current.length > 0) {
+      if (!articleIdSetter) {
+        return;
+      } // Clear History
 
 
-    tempHistory.current = [];
-    setHistory(tempHistory.current); // Clear host history using the historySetter
+      tempHistory.current = [];
+      setHistory(tempHistory.current); // Clear host history using the historySetter
 
-    historySetter && historySetter(tempHistory.current); // Set article ID to ''
+      historySetter && historySetter(tempHistory.current); // Set article ID to ''
 
-    if ((articleId === null || articleId === void 0 ? void 0 : articleId.id) !== '') {
       articleIdSetter({
         id: '',
         type: ARTICLE_TYPE.HELP_ARTICLE
       });
     }
-  }, [articleIdSetter, historySetter, articleId]);
+  }, [articleIdSetter, historySetter]);
   var isDefaultContentDefined = useCallback(function () {
     return homeContent !== undefined || homeOptions !== undefined;
   }, [homeContent, homeOptions]);
@@ -487,19 +487,6 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref)
             return _context4.abrupt("return");
 
           case 5:
-            if (!(view === VIEW.WHATS_NEW)) {
-              _context4.next = 9;
-              break;
-            }
-
-            articleIdSetter({
-              id: '',
-              type: ARTICLE_TYPE.HELP_ARTICLE
-            });
-            updateView();
-            return _context4.abrupt("return");
-
-          case 9:
             //  if the history is not empty and ...
             if (tempHistory.current.length > 0) {
               // the history has more than one article, navigate back through the history
@@ -540,13 +527,13 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref)
               }
             }
 
-          case 10:
+          case 6:
           case "end":
             return _context4.stop();
         }
       }
     }, _callee4);
-  })), [articleIdSetter, clearHistory, fetchArticleData, getCurrentArticle, historySetter, onSearch, updateView, view]);
+  })), [articleIdSetter, clearHistory, fetchArticleData, getCurrentArticle, historySetter, onSearch, view]);
   var onClose = useCallback(function (event, analyticsEvent) {
     if (onCloseButtonClick) {
       clearHistory();
@@ -557,8 +544,15 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref)
     if (!articleIdSetter) {
       return;
     }
+    /**
+     * If the article type is HELP_ARTICLE and the ID is defined we add a new historyItem
+     *
+     * If the article type is WHATS_NEW it doesn't matter if the the articleId.id is defined or not, we want
+     * to add it to the history
+     */
+
 
-    if (articleId && articleId.id) {
+    if ((articleId === null || articleId === void 0 ? void 0 : articleId.type) === ARTICLE_TYPE.HELP_ARTICLE && articleId !== null && articleId !== void 0 && articleId.id || (articleId === null || articleId === void 0 ? void 0 : articleId.type) === ARTICLE_TYPE.WHATS_NEW) {
       // get the last History Item
       var lastHistoryItem = getCurrentArticle(); // If the last history item articleId isn't different to the current articleId don't do anything
 
@@ -588,7 +582,7 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref)
         }
       } else {
         // If article ID is empty clear the history
-        if (articleId.type === ARTICLE_TYPE.HELP_ARTICLE) {
+        if (!getCurrentArticle()) {
           clearHistory();
         }
       }

package/dist/esm/util/testing/mock.js

@@ -73,13 +73,15 @@ export var getMockWhatsNewArticleItem = function getMockWhatsNewArticleItem(id,
   var description = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
   var changeTargetSchedule = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
   var status = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '';
-  var href = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : '';
+  var featureRolloutDate = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : '01-01-2022';
+  var href = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : '';
   return {
     title: title,
     changeTargetSchedule: changeTargetSchedule,
     type: type,
     status: status,
     href: href,
+    featureRolloutDate: featureRolloutDate,
     id: id
   };
 };

package/dist/esm/version.json

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

package/dist/types/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/styled.d.ts

@@ -2,5 +2,6 @@
 /// <reference types="react" />
 export declare const truncate: (width?: string) => import("@emotion/core").SerializedStyles;
 export declare const WhatsNewResultsListContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, any>;
+export declare const WhatsNewResultsListGroupWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, any>;
 export declare const WhatsNewResultsListGroupTitle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, any>;
 export declare const ToggleShowWhatsNewResultsContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, any>;

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

@@ -16,6 +16,7 @@ export interface WhatsNewArticleItem {
     changeTargetSchedule?: string;
     type?: WHATS_NEW_ITEM_TYPES;
     status?: string;
+    featureRolloutDate?: string;
     relatedExternalLinks?: string;
     communityUrl?: string;
     href?: string;

package/dist/types/util/testing/mock.d.ts

@@ -4,5 +4,5 @@ export declare const getMockArticle: (id: string, routeName?: string, routeGroup
 export declare const getMockArticleItem: (id: string, routeName?: string, routeGroup?: string, productName?: string, href?: string) => ArticleItem;
 export declare const getMockArticleItemList: (numberOfItems: number) => ArticleItem[];
 export declare const getMockWhatsNewArticle: (id: string, routeName?: string, routeGroup?: string, productName?: string, href?: string) => Article;
-export declare const getMockWhatsNewArticleItem: (id: string, type?: WHATS_NEW_ITEM_TYPES | undefined, title?: string, description?: string, changeTargetSchedule?: string, status?: string, href?: string) => WhatsNewArticleItem;
+export declare const getMockWhatsNewArticleItem: (id: string, type?: WHATS_NEW_ITEM_TYPES | undefined, title?: string, description?: string, changeTargetSchedule?: string, status?: string, featureRolloutDate?: string, href?: string) => WhatsNewArticleItem;
 export declare const getMockWhatsNewArticleItemList: (numberOfItems: number) => WhatsNewArticleItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/help",
-  "version": "4.1.1",
+  "version": "4.2.3",
   "description": "A cross-product help component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,10 +30,10 @@
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/checkbox": "^12.3.0",
-    "@atlaskit/form": "^8.3.0",
+    "@atlaskit/form": "^8.4.0",
     "@atlaskit/help-article": "^4.0.0",
     "@atlaskit/help-layout": "^3.0.0",
-    "@atlaskit/icon": "^21.2.0",
+    "@atlaskit/icon": "^21.9.0",
     "@atlaskit/item": "^12.0.0",
     "@atlaskit/notification-indicator": "^8.0.0",
     "@atlaskit/notification-log-client": "^5.0.0",
@@ -43,10 +43,11 @@
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/textarea": "^4.2.0",
     "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/theme": "^12.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "@emotion/styled": "^10.0.7",
+    "date-fns": "^2.17.0",
     "lodash": "^4.17.15",
     "react-animate-height": "^2.0.5",
     "react-transition-group": "^4.4.1"