@atlaskit/help 4.2.4 → 6.0.1

package/dist/es2019/components/Search/SearchResults/SearchResultsEmpty.js

@@ -3,7 +3,7 @@ import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button/custom-theme-button';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import NotFoundImage from '../../../assets/NotFoundImage';
 import { messages } from '../../../messages';
 import { SearchResultEmptyMessageImage, SearchResultEmptyMessageText } from './styled';

package/dist/es2019/components/Search/SearchResults/SearchResultsError.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import ErrorImage from '../../../assets/ErrorImage';
 import { messages } from '../../../messages';
 import { SearchResultEmptyMessageImage, SearchResultEmptyMessageText } from './styled';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Spinner from '@atlaskit/spinner';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/custom-theme-button';
 import { messages } from '../../messages';
 import { ToggleShowMoreArticlesContainer } from '../ArticlesList/styled';

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

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import LightbulbIcon from '@atlaskit/icon/glyph/lightbulb';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../version.json';
 import { useWhatsNewArticleContext } from '../../contexts/whatsNewArticleContext';
 import { useNavigationContext } from '../../contexts/navigationContext';

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
+import { injectIntl } from 'react-intl-next';
+import NotFoundImage from '../../../../assets/NotFoundImage';
+import { messages } from '../../../../messages';
+import { WhatsNewResultsEmptyMessageImage, WhatsNewResultsEmptyMessageText } from './styled';
+export const WhatsNewResultsEmpty = ({
+  onClearFilter,
+  intl: {
+    formatMessage
+  }
+}) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+
+  const handleClearFilterLinkClick = event => {
+    event.preventDefault();
+    const analyticsEvent = createAnalyticsEvent({
+      action: 'clicked'
+    });
+    analyticsEvent.fire();
+    onClearFilter();
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WhatsNewResultsEmptyMessageImage, null, /*#__PURE__*/React.createElement(NotFoundImage, null)), /*#__PURE__*/React.createElement(WhatsNewResultsEmptyMessageText, null, /*#__PURE__*/React.createElement("strong", null, formatMessage(messages.help_whats_new_no_results))), /*#__PURE__*/React.createElement(WhatsNewResultsEmptyMessageText, null, /*#__PURE__*/React.createElement("p", null, formatMessage(messages.help_whats_new_no_results_info), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: {
+      componentName: 'WhatsNewResultsEmpty'
+    }
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "#",
+    onClick: handleClearFilterLinkClick
+  }, formatMessage(messages.help_whats_new_no_results_clear_filter_button_label)), /*#__PURE__*/React.createElement("span", null, formatMessage(messages.help_whats_new_no_results_clear_filter_info))))));
+};
+export default injectIntl(WhatsNewResultsEmpty);

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

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import styled from '@emotion/styled';
+import { gridSize } from '@atlaskit/theme/constants';
+import * as colors from '@atlaskit/theme/colors';
+export const WhatsNewResultsEmptyMessageImage = styled.div`
+  padding: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
+  text-align: center;
+`;
+export const WhatsNewResultsEmptyMessageText = styled.div`
+  padding: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
+  text-align: center;
+
+  p {
+    color: ${colors.N200};
+  }
+`;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import ErrorImage from '../../../../assets/ErrorImage';
 import { messages } from '../../../../messages';
 import { SearchResultEmptyMessageImage, SearchResultEmptyMessageText } from './styled';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../../../version.json';
 import { WHATS_NEW_ITEM_TYPES } from '../../../../../model/WhatsNew';
 import { getTypeIcon, getTypeTitle } from '../../../../../util';

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
-import { h400 } from '@atlaskit/theme/typography';
+import { fontSize, fontSizeSmall } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export const WhatsNewResultListItemWrapper = styled.a({
   position: `relative`,
@@ -33,7 +33,8 @@ export const WhatsNewResultListItemTitleContainer = styled.div`
   margin-bottom: ${gridSize() / 2}px;
 `;
 export const WhatsNewResultListItemTitleText = styled.span`
-  ${h400()}
+  font-size: ${fontSizeSmall()}px;
+  line-height: ${fontSize()}px;
   display: inline-block;
   vertical-align: middle;
   margin: 0;
@@ -44,6 +45,6 @@ export const WhatsNewResultListItemTitleText = styled.span`
 export const WhatsNewResultListItemDescription = styled.p`
   display: block;
   line-height: ${gridSize() * 2.5}px;
-  color: ${colors.N400};
+  color: ${colors.N800};
   margin: 0;
 `;

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

@@ -13,7 +13,7 @@ export const WhatsNewResultsListContainer = styled.div`
   position: relative;
 `;
 export const WhatsNewResultsListGroupWrapper = styled.div`
-  padding: ${gridSize()}px 0 0 0;
+  padding: ${gridSize()}px 0 ${gridSize()}px 0;
 `;
 export const WhatsNewResultsListGroupTitle = styled.div`
   color: ${colors.N200};

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

@@ -1,8 +1,8 @@
 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 const WhatsNewResultsLoading = ({
@@ -10,14 +10,27 @@ export const WhatsNewResultsLoading = ({
     formatMessage
   }
 }) => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadignWhatsNewResultsList, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+    contentHeight: `${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: `${gridSize()}px`
     },
@@ -30,7 +43,16 @@ export const WhatsNewResultsLoading = ({
   }), /*#__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: `${gridSize()}px`
     },
@@ -47,7 +69,16 @@ export const WhatsNewResultsLoading = ({
     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: `${gridSize()}px`
     },
@@ -60,7 +91,16 @@ export const WhatsNewResultsLoading = ({
   }), /*#__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: `${gridSize()}px`
     },

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

@@ -10,6 +10,7 @@ export const LoadignWhatsNewResultsList = styled.ul`
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  margin-top: ${gridSize() * 2}px;
 `;
 export const LoadignWhatsNewResultsListItem = styled.li`
   display: block;

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

@@ -1,7 +1,7 @@
 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';
@@ -9,6 +9,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';
@@ -50,7 +51,11 @@ export const WhatsNewResults = ({
     searchWhatsNewArticlesState,
     onWhatsNewButtonClick
   } = useWhatsNewArticleContext();
-  const [selectedOption, setSelectedOption] = useState('');
+  const SELECT_DEFAULT_VALUE = {
+    value: '',
+    label: formatMessage(messages.help_whats_new_filter_select_option_all)
+  };
+  const [selectedOption, setSelectedOption] = useState(SELECT_DEFAULT_VALUE);
   const handleOnShowMoreButtonClick = useCallback(() => {
     if (searchWhatsNewArticlesResult && onSearchWhatsNewArticles) {
       const {
@@ -59,12 +64,25 @@ export const WhatsNewResults = ({
       } = searchWhatsNewArticlesResult;
 
       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]);
 
-  const handleOnEnter = () => onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+  const handleOnEnter = () => {
+    setSelectedOption(SELECT_DEFAULT_VALUE);
+    onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+  };
+
+  const 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, {
     in: helpContextView === VIEW.WHATS_NEW,
@@ -74,11 +92,8 @@ export const WhatsNewResults = ({
     style: { ...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: [{
@@ -100,21 +115,28 @@ export const WhatsNewResults = ({
       label: formatMessage(messages.help_whats_new_filter_select_option_experiment),
       value: WHATS_NEW_ITEM_TYPES.EXPERIMENT
     }],
+    value: selectedOption,
     onChange: option => {
       if (onSearchWhatsNewArticles) {
         const selectedOptionValue = option.value;
-        setSelectedOption(selectedOptionValue);
+        const 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/es2019/components/WhatsNew/WhatsNewResults/styled.js

@@ -19,7 +19,7 @@ export const SelectContainer = styled.div`
   width: ${19 * gridSize()}px;
 `;
 export const WhatsNewResultsListContainer = styled.div`
-  padding-top: ${gridSize() * 2}px;
+  padding-top: ${gridSize()}px;
 `;
 export const WhatsNewResultsListTitleContainer = styled.div`
   padding: 0 ${gridSize()}px;