@atlaskit/help 4.2.4 → 6.0.1

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

@@ -1,20 +1,33 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../../../../messages';
-import { LoadingRectangle, LoadingCircle } from '../../../../util/styled';
+import { LoadingRectangle } from '../../../../util/styled';
 import { LoadignWhatsNewResultsList, LoadignWhatsNewResultsListItem } from './styled';
 import { WhatsNewResultsListTitleContainer } from '../styled';
 export var WhatsNewResultsLoading = function WhatsNewResultsLoading(_ref) {
   var formatMessage = _ref.intl.formatMessage;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadignWhatsNewResultsList, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+    contentHeight: "".concat(gridSize() * 5, "px"),
+    contentWidth: "152px",
+    marginTop: "0"
+  }), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsList, {
     "aria-label": formatMessage(messages.help_loading),
     role: "img"
   }, /*#__PURE__*/React.createElement(WhatsNewResultsListTitleContainer, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentHeight: "11px",
     contentWidth: "60px",
     marginTop: "0"
-  })), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingCircle, null), /*#__PURE__*/React.createElement(LoadingRectangle, {
+  })), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+    style: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      position: 'relative'
+    },
+    contentHeight: "16px",
+    contentWidth: "16px",
+    marginTop: "4px"
+  }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     style: {
       marginLeft: "".concat(gridSize(), "px")
     },
@@ -27,7 +40,16 @@ export var WhatsNewResultsLoading = function WhatsNewResultsLoading(_ref) {
   }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentWidth: "90%",
     marginTop: "4px"
-  })), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingCircle, null), /*#__PURE__*/React.createElement(LoadingRectangle, {
+  })), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+    style: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      position: 'relative'
+    },
+    contentHeight: "16px",
+    contentWidth: "16px",
+    marginTop: "4px"
+  }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     style: {
       marginLeft: "".concat(gridSize(), "px")
     },
@@ -44,7 +66,16 @@ export var WhatsNewResultsLoading = function WhatsNewResultsLoading(_ref) {
     contentHeight: "11px",
     contentWidth: "60px",
     marginTop: "0"
-  })), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingCircle, null), /*#__PURE__*/React.createElement(LoadingRectangle, {
+  })), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+    style: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      position: 'relative'
+    },
+    contentHeight: "16px",
+    contentWidth: "16px",
+    marginTop: "4px"
+  }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     style: {
       marginLeft: "".concat(gridSize(), "px")
     },
@@ -57,7 +88,16 @@ export var WhatsNewResultsLoading = function WhatsNewResultsLoading(_ref) {
   }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentWidth: "90%",
     marginTop: "4px"
-  })), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingCircle, null), /*#__PURE__*/React.createElement(LoadingRectangle, {
+  })), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+    style: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      position: 'relative'
+    },
+    contentHeight: "16px",
+    contentWidth: "16px",
+    marginTop: "4px"
+  }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     style: {
       marginLeft: "".concat(gridSize(), "px")
     },

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

@@ -9,5 +9,5 @@ import { gridSize } from '@atlaskit/theme/constants';
  * Loading styled-components
  */
 
-export var LoadignWhatsNewResultsList = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n"])));
+export var LoadignWhatsNewResultsList = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  margin-top: ", "px;\n"])), gridSize() * 2);
 export var LoadignWhatsNewResultsListItem = styled.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  padding: ", "px;\n  margin: 0;\n  box-sizing: border-box;\n"])), gridSize());

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

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useCallback, useState } from 'react';
 import { Transition } from 'react-transition-group';
 import Select from '@atlaskit/select';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { VIEW } from '../../constants';
 import { messages } from '../../../messages';
 import { WHATS_NEW_ITEM_TYPES } from '../../../model/WhatsNew';
@@ -16,6 +16,7 @@ import { REQUEST_STATE } from '../../../model/Requests';
 import { FADEIN_OVERLAY_TRANSITION_DURATION_MS, NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE } from '../../constants';
 import { useWhatsNewArticleContext } from '../../contexts/whatsNewArticleContext';
 import { useNavigationContext } from '../../contexts/navigationContext';
+import WhatsNewResultsEmpty from './WhatsNewResultsEmpty';
 import WhatsNewResultsError from './WhatsNewResultsError';
 import WhatsNewResultsLoading from './WhatsNewResultsLoading';
 import WhatsNewResultsList from './WhatsNewResultsList';
@@ -55,7 +56,12 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
       searchWhatsNewArticlesState = _useWhatsNewArticleCo.searchWhatsNewArticlesState,
       onWhatsNewButtonClick = _useWhatsNewArticleCo.onWhatsNewButtonClick;
 
-  var _useState = useState(''),
+  var SELECT_DEFAULT_VALUE = {
+    value: '',
+    label: formatMessage(messages.help_whats_new_filter_select_option_all)
+  };
+
+  var _useState = useState(SELECT_DEFAULT_VALUE),
       _useState2 = _slicedToArray(_useState, 2),
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
@@ -66,13 +72,24 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
           hasNextPage = searchWhatsNewArticlesResult.hasNextPage;
 
       if (nextPage && hasNextPage) {
-        onSearchWhatsNewArticles(selectedOption, NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, nextPage);
+        onSearchWhatsNewArticles(selectedOption.value, 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.help_whats_new_filter_select_option_all)
+      });
+      onSearchWhatsNewArticles('', NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, '');
+    }
   };
 
   return /*#__PURE__*/React.createElement(Transition, {
@@ -82,11 +99,8 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
   }, function (state) {
     return /*#__PURE__*/React.createElement(WhatsNewResultsContainer, {
       style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
-    }, searchWhatsNewArticlesState !== REQUEST_STATE.error && /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(Select, {
-      defaultValue: {
-        value: '',
-        label: formatMessage(messages.help_whats_new_filter_select_option_all)
-      },
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, searchWhatsNewArticlesState === REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/React.createElement(WhatsNewResultsLoading, null), (searchWhatsNewArticlesState === REQUEST_STATE.done || searchWhatsNewArticlesState === REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(Select, {
+      defaultValue: selectedOption,
       className: "single-select",
       classNamePrefix: "react-select",
       options: [{
@@ -108,21 +122,28 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
         label: formatMessage(messages.help_whats_new_filter_select_option_experiment),
         value: 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, NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, '');
         }
       }
-    })), /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, searchWhatsNewArticlesState === REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/React.createElement(WhatsNewResultsLoading, null), (searchWhatsNewArticlesState === REQUEST_STATE.done || searchWhatsNewArticlesState === REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WhatsNewResultsList, {
+    })), /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, searchWhatsNewArticlesResult.articles.length > 0 ? /*#__PURE__*/React.createElement(WhatsNewResultsList, {
       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 === REQUEST_STATE.loading
-    })), searchWhatsNewArticlesState === REQUEST_STATE.error && /*#__PURE__*/React.createElement(WhatsNewResultsError, {
+    }) : /*#__PURE__*/React.createElement(WhatsNewResultsEmpty, {
+      onClearFilter: handleOnClearFilter
+    }))), searchWhatsNewArticlesState === REQUEST_STATE.error && /*#__PURE__*/React.createElement(WhatsNewResultsError, {
       onSearch: onSearchWhatsNewArticles
     })));
   });

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

@@ -7,5 +7,5 @@ import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 export var WhatsNewResultsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: #ffffff;\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 1;\n  padding: ", "px;\n"])), 2 * gridSize());
 export var SelectContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), 19 * gridSize());
-export var WhatsNewResultsListContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-top: ", "px;\n"])), gridSize() * 2);
+export var WhatsNewResultsListContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-top: ", "px;\n"])), gridSize());
 export var WhatsNewResultsListTitleContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n"])), gridSize());