@atlaskit/help 7.1.7 → 7.1.10

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/help
 
+## 7.1.10
+
+### Patch Changes
+
+- [`cf6b2085c95`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf6b2085c95) - Use articles "routes" attribute instead of "routeName" and "routeGroup"
+
+## 7.1.9
+
+### Patch Changes
+
+- [`4113699bb4d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4113699bb4d) - [ux] Cleanup item usage and minor refactoring in `@atlaskit/help`
+
+## 7.1.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.1.7
 
 ### Patch Changes

package/dist/cjs/components/Article/HelpArticle/index.js

@@ -102,6 +102,10 @@ var HelpArticle = function HelpArticle(_ref) {
   }
 
   if (article) {
+    var _article$routes, _article$routes2;
+
+    var routeGroup = article.routes && ((_article$routes = article.routes) === null || _article$routes === void 0 ? void 0 : _article$routes.length) > 0 ? article.routes[0].routeGroup : '';
+    var routeName = article.routes && ((_article$routes2 = article.routes) === null || _article$routes2 === void 0 ? void 0 : _article$routes2.length) > 0 ? article.routes[0].routeGroup : '';
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_helpArticle.default, {
       title: article.title,
       body: article.body,
@@ -115,8 +119,8 @@ var HelpArticle = function HelpArticle(_ref) {
       style: "secondary",
       onRelatedArticlesListItemClick: handleOnRelatedArticlesListItemClick,
       onGetRelatedArticles: onGetRelatedArticles,
-      routeGroup: article.routeGroup,
-      routeName: article.routeName,
+      routeGroup: routeGroup,
+      routeName: routeName,
       onRelatedArticlesShowMoreClick: handleOnRelatedArticlesShowMoreClick
     }));
   }

package/dist/cjs/components/ArticlesList/ArticlesList.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
@@ -23,9 +21,21 @@ var _ArticlesListItem = _interopRequireDefault(require("./ArticlesListItem"));
 
 var _constants2 = require("./constants");
 
-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); }
+var getStyles = function getStyles(style) {
+  if (style === 'secondary') {
+    return {
+      border: "2px solid ".concat((0, _tokens.token)('color.border', _colors.N30)),
+      padding: "".concat((0, _constants.gridSize)() * 2, "px"),
+      marginBottom: "".concat((0, _constants.gridSize)() * 1.5, "px")
+    };
+  }
 
-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; }
+  return {
+    border: 0,
+    padding: "".concat((0, _constants.gridSize)(), "px"),
+    marginBottom: 0
+  };
+};
 
 var articlesList = function articlesList(_ref) {
   var _ref$style = _ref.style,
@@ -37,13 +47,9 @@ var articlesList = function articlesList(_ref) {
       _ref$numberOfArticles = _ref.numberOfArticlesToDisplay,
       numberOfArticlesToDisplay = _ref$numberOfArticles === void 0 ? _constants2.MIN_ITEMS_TO_DISPLAY : _ref$numberOfArticles,
       onArticlesListItemClick = _ref.onArticlesListItemClick;
-  return articles && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, articles.slice(0, minItemsToDisplay).map(function (article, i) {
+  return articles && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, articles.slice(0, minItemsToDisplay).map(function (article) {
     return /*#__PURE__*/_react.default.createElement(_ArticlesListItem.default, {
-      styles: {
-        border: style === 'secondary' ? "2px solid ".concat((0, _tokens.token)('color.border', colors.N30)) : 0,
-        padding: style === 'secondary' ? "".concat((0, _constants.gridSize)(), "px ").concat((0, _constants.gridSize)() * 2, "px") : "".concat((0, _constants.gridSize)(), "px"),
-        marginBottom: style === 'secondary' ? "".concat((0, _constants.gridSize)() * 1.5, "px") : 0
-      },
+      styles: getStyles(style),
       id: article.id,
       onClick: function onClick(event, analyticsEvent) {
         if (onArticlesListItemClick) {
@@ -59,13 +65,9 @@ var articlesList = function articlesList(_ref) {
     duration: _constants2.ANIMATE_HEIGHT_TRANSITION_DURATION_MS,
     easing: "linear",
     height: numberOfArticlesToDisplay > minItemsToDisplay ? 'auto' : 0
-  }, articles.slice(minItemsToDisplay, articles.length).map(function (article, i) {
+  }, articles.slice(minItemsToDisplay, articles.length).map(function (article) {
     return /*#__PURE__*/_react.default.createElement(_ArticlesListItem.default, {
-      styles: {
-        border: style === 'secondary' ? "2px solid ".concat((0, _tokens.token)('color.border', colors.N30)) : 0,
-        padding: style === 'secondary' ? "".concat((0, _constants.gridSize)(), "px ").concat((0, _constants.gridSize)() * 2, "px") : "".concat((0, _constants.gridSize)(), "px"),
-        marginBottom: style === 'secondary' ? "".concat((0, _constants.gridSize)() * 1.5, "px") : 0
-      },
+      styles: getStyles(style),
       id: article.id,
       onClick: function onClick(event, analyticsEvent) {
         if (onArticlesListItemClick) {

package/dist/cjs/components/ArticlesList/ArticlesListItem/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTypeTitle = exports.default = exports.ArticlesListItem = void 0;
+exports.default = exports.ArticlesListItem = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -29,39 +29,23 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// import { messages } from '../../../messages';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: _version.name,
   packageVersion: _version.version
 };
 
-var getTypeTitle = function getTypeTitle(itemType) {
-  switch (itemType) {
-    // case ARTICLE_ITEM_TYPES.topicInProduct:
-    //   return messages.help_article_list_item_type_help_article;
-    default:
-      return null;
-  }
-};
-
-exports.getTypeTitle = getTypeTitle;
-
 var ArticlesListItem = function ArticlesListItem(_ref) {
-  var formatMessage = _ref.intl.formatMessage,
-      styles = _ref.styles,
+  var styles = _ref.styles,
       title = _ref.title,
       description = _ref.description,
       _ref$href = _ref.href,
       href = _ref$href === void 0 ? '' : _ref$href,
-      type = _ref.type,
       onClick = _ref.onClick;
 
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
       createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
 
-  var typeTitle = getTypeTitle(type);
-
   var handleOnClick = function handleOnClick(event) {
     event.preventDefault();
 
@@ -80,7 +64,7 @@ var ArticlesListItem = function ArticlesListItem(_ref) {
     role: "button",
     href: href,
     onClick: handleOnClick
-  }, /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemContainer, null, typeTitle && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemTypeTitle, null, formatMessage(typeTitle)), /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemTitleText, null, title), href && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemLinkIcon, null, /*#__PURE__*/_react.default.createElement(_shortcut.default, {
+  }, /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemContainer, null, /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemTitleText, null, title), href && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemLinkIcon, null, /*#__PURE__*/_react.default.createElement(_shortcut.default, {
     size: "small",
     label: "",
     primaryColor: (0, _tokens.token)('color.icon.subtle', colors.N90),

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

@@ -9,41 +9,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = require("styled-components");
-
-var _item = require("@atlaskit/item");
-
-var _constants = require("@atlaskit/theme/constants");
-
 var _ArticlesList = _interopRequireDefault(require("./ArticlesList"));
 
 var _ShowMoreButton = _interopRequireDefault(require("../ShowMoreButton"));
 
 var _styled = require("./styled");
 
-var _constants2 = require("./constants");
+var _constants = require("./constants");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var ITEM_THEME = {
-  padding: {
-    default: {
-      bottom: (0, _constants.gridSize)(),
-      left: (0, _constants.gridSize)(),
-      top: (0, _constants.gridSize)(),
-      right: (0, _constants.gridSize)()
-    }
-  }
-};
-
 var ArticleList = function ArticleList(_ref) {
   var style = _ref.style,
       articles = _ref.articles,
@@ -58,7 +39,7 @@ var ArticleList = function ArticleList(_ref) {
       setShowMoreToggled = _useState2[1];
 
   var getMinItemsToDisplay = function getMinItemsToDisplay() {
-    return minItemsToDisplay ? minItemsToDisplay : _constants2.MIN_ITEMS_TO_DISPLAY;
+    return minItemsToDisplay ? minItemsToDisplay : _constants.MIN_ITEMS_TO_DISPLAY;
   };
 
   var getMaxItemsToDisplay = function getMaxItemsToDisplay() {
@@ -81,9 +62,7 @@ var ArticleList = function ArticleList(_ref) {
     }
   };
 
-  return articles && articles.length > 0 ? /*#__PURE__*/_react.default.createElement(_styled.ArticlesListContainer, null, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: (0, _defineProperty2.default)({}, _item.itemThemeNamespace, ITEM_THEME)
-  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ArticlesList.default, {
+  return articles && articles.length > 0 ? /*#__PURE__*/_react.default.createElement(_styled.ArticlesListContainer, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ArticlesList.default, {
     style: style,
     onArticlesListItemClick: onArticlesListItemClick,
     articles: articles,
@@ -94,7 +73,7 @@ var ArticleList = function ArticleList(_ref) {
     showMoreToggeled: showMoreToggled,
     onToggle: toggleArticlesList,
     itemsType: "articles"
-  })))) : null;
+  }))) : null;
 };
 
 var _default = ArticleList;

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

@@ -9,23 +9,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = require("styled-components");
-
-var _item = require("@atlaskit/item");
-
-var _constants = require("@atlaskit/theme/constants");
-
 var _ShowMoreButton = _interopRequireDefault(require("../../../ShowMoreButton"));
 
 var _navigationContext = require("../../../contexts/navigationContext");
 
 var _Help = require("../../../../model/Help");
 
-var _constants2 = require("../../../constants");
+var _constants = require("../../../constants");
 
 var _WhatsNewResultsList = _interopRequireDefault(require("./WhatsNewResultsList"));
 
@@ -35,17 +27,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var ITEM_THEME = {
-  padding: {
-    default: {
-      bottom: (0, _constants.gridSize)(),
-      left: (0, _constants.gridSize)(),
-      top: (0, _constants.gridSize)(),
-      right: (0, _constants.gridSize)()
-    }
-  }
-};
-
 var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
   var style = _ref.style,
       whatsNewArticles = _ref.whatsNewArticles,
@@ -75,20 +56,18 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
       onWhatsNewResultItemClick(event, analyticsEvent, articleData);
     }
   }, [onWhatsNewResultItemClick, openArticle]);
-  return whatsNewArticles && whatsNewArticles.length > 0 ? /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsListContainer, null, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: (0, _defineProperty2.default)({}, _item.itemThemeNamespace, ITEM_THEME)
-  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_WhatsNewResultsList.default, {
+  return whatsNewArticles && whatsNewArticles.length > 0 ? /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsListContainer, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_WhatsNewResultsList.default, {
     style: style,
     onWhatsNewResultItemClick: handleOnWhatsNewResultItemClick,
     whatsNewArticles: whatsNewArticles
   }), nextPage && hasNextPage && /*#__PURE__*/_react.default.createElement(_ShowMoreButton.default, {
     onToggle: handleShowMoreButtonClick,
     minItemsToDisplay: 0,
-    maxItemsToDisplay: _constants2.NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE,
+    maxItemsToDisplay: _constants.NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE,
     showMoreToggeled: true,
     itemsType: "changes",
     loading: loadingMore
-  })))) : null;
+  }))) : null;
 };
 
 var _default = WhatsNewResultsList;

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

@@ -19,8 +19,10 @@ var getMockArticle = function getMockArticle(id) {
     lastPublished: '2020-04-29T06:05:02.426Z',
     title: 'mockArticle title',
     type: _Article.ARTICLE_ITEM_TYPES.topicInProduct,
-    routeName: routeName,
-    routeGroup: routeGroup,
+    routes: [{
+      routeName: routeName,
+      routeGroup: routeGroup
+    }],
     topicId: 'mock-topic',
     productName: productName,
     href: href,
@@ -42,8 +44,10 @@ var getMockArticleItem = function getMockArticleItem(id) {
     lastPublished: '2020-04-29T06:05:02.426Z',
     title: 'mockArticle title',
     type: _Article.ARTICLE_ITEM_TYPES.topicInProduct,
-    routeName: routeName,
-    routeGroup: routeGroup,
+    routes: [{
+      routeName: routeName,
+      routeGroup: routeGroup
+    }],
     topicId: 'mock-topic',
     productName: productName,
     href: href
@@ -76,8 +80,10 @@ var getMockWhatsNewArticle = function getMockWhatsNewArticle(id) {
     lastPublished: '2020-04-29T06:05:02.426Z',
     title: 'mock article title',
     type: _Article.ARTICLE_ITEM_TYPES.topicInProduct,
-    routeName: routeName,
-    routeGroup: routeGroup,
+    routes: [{
+      routeName: routeName,
+      routeGroup: routeGroup
+    }],
     topicId: 'mock-topic',
     productName: productName,
     href: href,

package/dist/cjs/version.json

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

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

@@ -78,6 +78,10 @@ export const HelpArticle = ({
   }
 
   if (article) {
+    var _article$routes, _article$routes2;
+
+    const routeGroup = article.routes && ((_article$routes = article.routes) === null || _article$routes === void 0 ? void 0 : _article$routes.length) > 0 ? article.routes[0].routeGroup : '';
+    const routeName = article.routes && ((_article$routes2 = article.routes) === null || _article$routes2 === void 0 ? void 0 : _article$routes2.length) > 0 ? article.routes[0].routeGroup : '';
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelpArticleContent, {
       title: article.title,
       body: article.body,
@@ -91,8 +95,8 @@ export const HelpArticle = ({
       style: "secondary",
       onRelatedArticlesListItemClick: handleOnRelatedArticlesListItemClick,
       onGetRelatedArticles: onGetRelatedArticles,
-      routeGroup: article.routeGroup,
-      routeName: article.routeName,
+      routeGroup: routeGroup,
+      routeName: routeName,
       onRelatedArticlesShowMoreClick: handleOnRelatedArticlesShowMoreClick
     }));
   }

package/dist/es2019/components/ArticlesList/ArticlesList.js

@@ -1,24 +1,36 @@
 import React from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
-import * as colors from '@atlaskit/theme/colors';
+import { N30 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import AnimateHeight from 'react-animate-height';
 import ArticlesListItem from './ArticlesListItem';
 import { MIN_ITEMS_TO_DISPLAY, ANIMATE_HEIGHT_TRANSITION_DURATION_MS } from './constants';
 
+const getStyles = style => {
+  if (style === 'secondary') {
+    return {
+      border: `2px solid ${token('color.border', N30)}`,
+      padding: `${gridSize() * 2}px`,
+      marginBottom: `${gridSize() * 1.5}px`
+    };
+  }
+
+  return {
+    border: 0,
+    padding: `${gridSize()}px`,
+    marginBottom: 0
+  };
+};
+
 const articlesList = ({
   style = 'primary',
   articles = [],
   minItemsToDisplay = MIN_ITEMS_TO_DISPLAY,
   numberOfArticlesToDisplay = MIN_ITEMS_TO_DISPLAY,
   onArticlesListItemClick
-}) => articles && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, articles.slice(0, minItemsToDisplay).map((article, i) => {
+}) => articles && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, articles.slice(0, minItemsToDisplay).map(article => {
   return /*#__PURE__*/React.createElement(ArticlesListItem, {
-    styles: {
-      border: style === 'secondary' ? `2px solid ${token('color.border', colors.N30)}` : 0,
-      padding: style === 'secondary' ? `${gridSize()}px ${gridSize() * 2}px` : `${gridSize()}px`,
-      marginBottom: style === 'secondary' ? `${gridSize() * 1.5}px` : 0
-    },
+    styles: getStyles(style),
     id: article.id,
     onClick: (event, analyticsEvent) => {
       if (onArticlesListItemClick) {
@@ -34,12 +46,8 @@ const articlesList = ({
   duration: ANIMATE_HEIGHT_TRANSITION_DURATION_MS,
   easing: "linear",
   height: numberOfArticlesToDisplay > minItemsToDisplay ? 'auto' : 0
-}, articles.slice(minItemsToDisplay, articles.length).map((article, i) => /*#__PURE__*/React.createElement(ArticlesListItem, {
-  styles: {
-    border: style === 'secondary' ? `2px solid ${token('color.border', colors.N30)}` : 0,
-    padding: style === 'secondary' ? `${gridSize()}px ${gridSize() * 2}px` : `${gridSize()}px`,
-    marginBottom: style === 'secondary' ? `${gridSize() * 1.5}px` : 0
-  },
+}, articles.slice(minItemsToDisplay, articles.length).map(article => /*#__PURE__*/React.createElement(ArticlesListItem, {
+  styles: getStyles(style),
   id: article.id,
   onClick: (event, analyticsEvent) => {
     if (onArticlesListItemClick) {

package/dist/es2019/components/ArticlesList/ArticlesListItem/index.js

@@ -5,36 +5,22 @@ import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { token } from '@atlaskit/tokens';
 import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../version.json';
-// import { messages } from '../../../messages';
-import { ArticlesListItemTypeTitle, ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon } from './styled';
+import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon } from './styled';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName,
   packageVersion
 };
-export const getTypeTitle = itemType => {
-  switch (itemType) {
-    // case ARTICLE_ITEM_TYPES.topicInProduct:
-    //   return messages.help_article_list_item_type_help_article;
-    default:
-      return null;
-  }
-};
 export const ArticlesListItem = ({
-  intl: {
-    formatMessage
-  },
   styles,
   title,
   description,
   href = '',
-  type,
   onClick
 }) => {
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-  const typeTitle = getTypeTitle(type);
 
   const handleOnClick = event => {
     event.preventDefault();
@@ -53,7 +39,7 @@ export const ArticlesListItem = ({
     role: "button",
     href: href,
     onClick: handleOnClick
-  }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, typeTitle && /*#__PURE__*/React.createElement(ArticlesListItemTypeTitle, null, formatMessage(typeTitle)), /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title), href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__PURE__*/React.createElement(ShortcutIcon, {
+  }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title), href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__PURE__*/React.createElement(ShortcutIcon, {
     size: "small",
     label: "",
     primaryColor: token('color.icon.subtle', colors.N90),

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

@@ -1,21 +1,8 @@
 import React, { useState } from 'react';
-import { ThemeProvider } from 'styled-components';
-import { itemThemeNamespace } from '@atlaskit/item';
-import { gridSize } from '@atlaskit/theme/constants';
 import ArticlesList from './ArticlesList';
 import ShowMoreButton from '../ShowMoreButton';
 import { ArticlesListContainer } from './styled';
 import { MIN_ITEMS_TO_DISPLAY } from './constants';
-const ITEM_THEME = {
-  padding: {
-    default: {
-      bottom: gridSize(),
-      left: gridSize(),
-      top: gridSize(),
-      right: gridSize()
-    }
-  }
-};
 
 const ArticleList = ({
   style,
@@ -51,11 +38,7 @@ const ArticleList = ({
     }
   };
 
-  return articles && articles.length > 0 ? /*#__PURE__*/React.createElement(ArticlesListContainer, null, /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: {
-      [itemThemeNamespace]: ITEM_THEME
-    }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticlesList, {
+  return articles && articles.length > 0 ? /*#__PURE__*/React.createElement(ArticlesListContainer, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticlesList, {
     style: style,
     onArticlesListItemClick: onArticlesListItemClick,
     articles: articles,
@@ -66,7 +49,7 @@ const ArticleList = ({
     showMoreToggeled: showMoreToggled,
     onToggle: toggleArticlesList,
     itemsType: "articles"
-  })))) : null;
+  }))) : null;
 };
 
 export default ArticleList;

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

@@ -1,23 +1,10 @@
 import React, { useCallback } from 'react';
-import { ThemeProvider } from 'styled-components';
-import { itemThemeNamespace } from '@atlaskit/item';
-import { gridSize } from '@atlaskit/theme/constants';
 import ShowMoreButton from '../../../ShowMoreButton';
 import { useNavigationContext } from '../../../contexts/navigationContext';
 import { ARTICLE_TYPE } from '../../../../model/Help';
 import { NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE } from '../../../constants';
 import ArticlesList from './WhatsNewResultsList';
 import { WhatsNewResultsListContainer } from './styled';
-const ITEM_THEME = {
-  padding: {
-    default: {
-      bottom: gridSize(),
-      left: gridSize(),
-      top: gridSize(),
-      right: gridSize()
-    }
-  }
-};
 
 const WhatsNewResultsList = ({
   style,
@@ -48,11 +35,7 @@ const WhatsNewResultsList = ({
       onWhatsNewResultItemClick(event, analyticsEvent, articleData);
     }
   }, [onWhatsNewResultItemClick, openArticle]);
-  return whatsNewArticles && whatsNewArticles.length > 0 ? /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: {
-      [itemThemeNamespace]: ITEM_THEME
-    }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticlesList, {
+  return whatsNewArticles && whatsNewArticles.length > 0 ? /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticlesList, {
     style: style,
     onWhatsNewResultItemClick: handleOnWhatsNewResultItemClick,
     whatsNewArticles: whatsNewArticles
@@ -63,7 +46,7 @@ const WhatsNewResultsList = ({
     showMoreToggeled: true,
     itemsType: "changes",
     loading: loadingMore
-  })))) : null;
+  }))) : null;
 };
 
 export default WhatsNewResultsList;

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

@@ -7,8 +7,10 @@ export const getMockArticle = (id, routeName = '', routeGroup = '', productName
     lastPublished: '2020-04-29T06:05:02.426Z',
     title: 'mockArticle title',
     type: ARTICLE_ITEM_TYPES.topicInProduct,
-    routeName,
-    routeGroup,
+    routes: [{
+      routeName,
+      routeGroup
+    }],
     topicId: 'mock-topic',
     productName,
     href,
@@ -23,8 +25,10 @@ export const getMockArticleItem = (id, routeName = '', routeGroup = '', productN
     lastPublished: '2020-04-29T06:05:02.426Z',
     title: 'mockArticle title',
     type: ARTICLE_ITEM_TYPES.topicInProduct,
-    routeName,
-    routeGroup,
+    routes: [{
+      routeName,
+      routeGroup
+    }],
     topicId: 'mock-topic',
     productName,
     href
@@ -47,8 +51,10 @@ export const getMockWhatsNewArticle = (id, routeName = '', routeGroup = '', prod
     lastPublished: '2020-04-29T06:05:02.426Z',
     title: 'mock article title',
     type: ARTICLE_ITEM_TYPES.topicInProduct,
-    routeName,
-    routeGroup,
+    routes: [{
+      routeName,
+      routeGroup
+    }],
     topicId: 'mock-topic',
     productName,
     href,

package/dist/es2019/version.json

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

package/dist/esm/components/Article/HelpArticle/index.js

@@ -78,6 +78,10 @@ export var HelpArticle = function HelpArticle(_ref) {
   }
 
   if (article) {
+    var _article$routes, _article$routes2;
+
+    var routeGroup = article.routes && ((_article$routes = article.routes) === null || _article$routes === void 0 ? void 0 : _article$routes.length) > 0 ? article.routes[0].routeGroup : '';
+    var routeName = article.routes && ((_article$routes2 = article.routes) === null || _article$routes2 === void 0 ? void 0 : _article$routes2.length) > 0 ? article.routes[0].routeGroup : '';
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelpArticleContent, {
       title: article.title,
       body: article.body,
@@ -91,8 +95,8 @@ export var HelpArticle = function HelpArticle(_ref) {
       style: "secondary",
       onRelatedArticlesListItemClick: handleOnRelatedArticlesListItemClick,
       onGetRelatedArticles: onGetRelatedArticles,
-      routeGroup: article.routeGroup,
-      routeName: article.routeName,
+      routeGroup: routeGroup,
+      routeName: routeName,
       onRelatedArticlesShowMoreClick: handleOnRelatedArticlesShowMoreClick
     }));
   }

package/dist/esm/components/ArticlesList/ArticlesList.js

@@ -1,11 +1,27 @@
 import React from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
-import * as colors from '@atlaskit/theme/colors';
+import { N30 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import AnimateHeight from 'react-animate-height';
 import ArticlesListItem from './ArticlesListItem';
 import { MIN_ITEMS_TO_DISPLAY, ANIMATE_HEIGHT_TRANSITION_DURATION_MS } from './constants';
 
+var getStyles = function getStyles(style) {
+  if (style === 'secondary') {
+    return {
+      border: "2px solid ".concat(token('color.border', N30)),
+      padding: "".concat(gridSize() * 2, "px"),
+      marginBottom: "".concat(gridSize() * 1.5, "px")
+    };
+  }
+
+  return {
+    border: 0,
+    padding: "".concat(gridSize(), "px"),
+    marginBottom: 0
+  };
+};
+
 var articlesList = function articlesList(_ref) {
   var _ref$style = _ref.style,
       style = _ref$style === void 0 ? 'primary' : _ref$style,
@@ -16,13 +32,9 @@ var articlesList = function articlesList(_ref) {
       _ref$numberOfArticles = _ref.numberOfArticlesToDisplay,
       numberOfArticlesToDisplay = _ref$numberOfArticles === void 0 ? MIN_ITEMS_TO_DISPLAY : _ref$numberOfArticles,
       onArticlesListItemClick = _ref.onArticlesListItemClick;
-  return articles && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, articles.slice(0, minItemsToDisplay).map(function (article, i) {
+  return articles && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, articles.slice(0, minItemsToDisplay).map(function (article) {
     return /*#__PURE__*/React.createElement(ArticlesListItem, {
-      styles: {
-        border: style === 'secondary' ? "2px solid ".concat(token('color.border', 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
-      },
+      styles: getStyles(style),
       id: article.id,
       onClick: function onClick(event, analyticsEvent) {
         if (onArticlesListItemClick) {
@@ -38,13 +50,9 @@ var articlesList = function articlesList(_ref) {
     duration: ANIMATE_HEIGHT_TRANSITION_DURATION_MS,
     easing: "linear",
     height: numberOfArticlesToDisplay > minItemsToDisplay ? 'auto' : 0
-  }, articles.slice(minItemsToDisplay, articles.length).map(function (article, i) {
+  }, articles.slice(minItemsToDisplay, articles.length).map(function (article) {
     return /*#__PURE__*/React.createElement(ArticlesListItem, {
-      styles: {
-        border: style === 'secondary' ? "2px solid ".concat(token('color.border', 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
-      },
+      styles: getStyles(style),
       id: article.id,
       onClick: function onClick(event, analyticsEvent) {
         if (onArticlesListItemClick) {

package/dist/esm/components/ArticlesList/ArticlesListItem/index.js

@@ -5,36 +5,23 @@ import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { token } from '@atlaskit/tokens';
 import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../version.json';
-// import { messages } from '../../../messages';
-import { ArticlesListItemTypeTitle, ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon } from './styled';
+import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon } from './styled';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: packageName,
   packageVersion: packageVersion
 };
-export var getTypeTitle = function getTypeTitle(itemType) {
-  switch (itemType) {
-    // case ARTICLE_ITEM_TYPES.topicInProduct:
-    //   return messages.help_article_list_item_type_help_article;
-    default:
-      return null;
-  }
-};
 export var ArticlesListItem = function ArticlesListItem(_ref) {
-  var formatMessage = _ref.intl.formatMessage,
-      styles = _ref.styles,
+  var styles = _ref.styles,
       title = _ref.title,
       description = _ref.description,
       _ref$href = _ref.href,
       href = _ref$href === void 0 ? '' : _ref$href,
-      type = _ref.type,
       onClick = _ref.onClick;
 
   var _useAnalyticsEvents = useAnalyticsEvents(),
       createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
 
-  var typeTitle = getTypeTitle(type);
-
   var handleOnClick = function handleOnClick(event) {
     event.preventDefault();
 
@@ -53,7 +40,7 @@ export var ArticlesListItem = function ArticlesListItem(_ref) {
     role: "button",
     href: href,
     onClick: handleOnClick
-  }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, typeTitle && /*#__PURE__*/React.createElement(ArticlesListItemTypeTitle, null, formatMessage(typeTitle)), /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title), href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__PURE__*/React.createElement(ShortcutIcon, {
+  }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title), href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__PURE__*/React.createElement(ShortcutIcon, {
     size: "small",
     label: "",
     primaryColor: token('color.icon.subtle', colors.N90),

package/dist/esm/components/ArticlesList/index.js

@@ -1,23 +1,9 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import { ThemeProvider } from 'styled-components';
-import { itemThemeNamespace } from '@atlaskit/item';
-import { gridSize } from '@atlaskit/theme/constants';
 import ArticlesList from './ArticlesList';
 import ShowMoreButton from '../ShowMoreButton';
 import { ArticlesListContainer } from './styled';
 import { MIN_ITEMS_TO_DISPLAY } from './constants';
-var ITEM_THEME = {
-  padding: {
-    default: {
-      bottom: gridSize(),
-      left: gridSize(),
-      top: gridSize(),
-      right: gridSize()
-    }
-  }
-};
 
 var ArticleList = function ArticleList(_ref) {
   var style = _ref.style,
@@ -56,9 +42,7 @@ var ArticleList = function ArticleList(_ref) {
     }
   };
 
-  return articles && articles.length > 0 ? /*#__PURE__*/React.createElement(ArticlesListContainer, null, /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: _defineProperty({}, itemThemeNamespace, ITEM_THEME)
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticlesList, {
+  return articles && articles.length > 0 ? /*#__PURE__*/React.createElement(ArticlesListContainer, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticlesList, {
     style: style,
     onArticlesListItemClick: onArticlesListItemClick,
     articles: articles,
@@ -69,7 +53,7 @@ var ArticleList = function ArticleList(_ref) {
     showMoreToggeled: showMoreToggled,
     onToggle: toggleArticlesList,
     itemsType: "articles"
-  })))) : null;
+  }))) : null;
 };
 
 export default ArticleList;

package/dist/esm/components/RelatedArticles/index.js

@@ -1,6 +1,6 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState, useEffect, useCallback } from 'react';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import SectionMessage from '@atlaskit/section-message';

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

@@ -1,24 +1,10 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useCallback } from 'react';
-import { ThemeProvider } from 'styled-components';
-import { itemThemeNamespace } from '@atlaskit/item';
-import { gridSize } from '@atlaskit/theme/constants';
 import ShowMoreButton from '../../../ShowMoreButton';
 import { useNavigationContext } from '../../../contexts/navigationContext';
 import { ARTICLE_TYPE } from '../../../../model/Help';
 import { NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE } from '../../../constants';
 import ArticlesList from './WhatsNewResultsList';
 import { WhatsNewResultsListContainer } from './styled';
-var ITEM_THEME = {
-  padding: {
-    default: {
-      bottom: gridSize(),
-      left: gridSize(),
-      top: gridSize(),
-      right: gridSize()
-    }
-  }
-};
 
 var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
   var style = _ref.style,
@@ -49,9 +35,7 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
       onWhatsNewResultItemClick(event, analyticsEvent, articleData);
     }
   }, [onWhatsNewResultItemClick, openArticle]);
-  return whatsNewArticles && whatsNewArticles.length > 0 ? /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: _defineProperty({}, itemThemeNamespace, ITEM_THEME)
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticlesList, {
+  return whatsNewArticles && whatsNewArticles.length > 0 ? /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticlesList, {
     style: style,
     onWhatsNewResultItemClick: handleOnWhatsNewResultItemClick,
     whatsNewArticles: whatsNewArticles
@@ -62,7 +46,7 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
     showMoreToggeled: true,
     itemsType: "changes",
     loading: loadingMore
-  })))) : null;
+  }))) : null;
 };
 
 export default WhatsNewResultsList;

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

@@ -1,4 +1,3 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
@@ -6,6 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["body", "relatedArticles"],
     _excluded2 = ["description"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 

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

@@ -1,6 +1,6 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState, useCallback } from 'react';
 import debounce from 'lodash/debounce';
 import { REQUEST_STATE } from '../../model/Requests';

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

@@ -1,7 +1,7 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState, useCallback } from 'react';
 import { REQUEST_STATE } from '../../model/Requests';
 import { createCtx } from '../../util/hooks/ctx';

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

@@ -11,8 +11,10 @@ export var getMockArticle = function getMockArticle(id) {
     lastPublished: '2020-04-29T06:05:02.426Z',
     title: 'mockArticle title',
     type: ARTICLE_ITEM_TYPES.topicInProduct,
-    routeName: routeName,
-    routeGroup: routeGroup,
+    routes: [{
+      routeName: routeName,
+      routeGroup: routeGroup
+    }],
     topicId: 'mock-topic',
     productName: productName,
     href: href,
@@ -31,8 +33,10 @@ export var getMockArticleItem = function getMockArticleItem(id) {
     lastPublished: '2020-04-29T06:05:02.426Z',
     title: 'mockArticle title',
     type: ARTICLE_ITEM_TYPES.topicInProduct,
-    routeName: routeName,
-    routeGroup: routeGroup,
+    routes: [{
+      routeName: routeName,
+      routeGroup: routeGroup
+    }],
     topicId: 'mock-topic',
     productName: productName,
     href: href
@@ -59,8 +63,10 @@ export var getMockWhatsNewArticle = function getMockWhatsNewArticle(id) {
     lastPublished: '2020-04-29T06:05:02.426Z',
     title: 'mock article title',
     type: ARTICLE_ITEM_TYPES.topicInProduct,
-    routeName: routeName,
-    routeGroup: routeGroup,
+    routes: [{
+      routeName: routeName,
+      routeGroup: routeGroup
+    }],
     topicId: 'mock-topic',
     productName: productName,
     href: href,

package/dist/esm/version.json

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

package/dist/types/components/ArticlesList/ArticlesListItem/index.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { WrappedComponentProps } from 'react-intl-next';
-import { ArticleItem, ARTICLE_ITEM_TYPES } from '../../../model/Article';
+import { ArticleItem } from '../../../model/Article';
 interface Props {
     styles?: {};
     onClick?: (event: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
 }
-export declare const getTypeTitle: (itemType?: ARTICLE_ITEM_TYPES | undefined) => null;
 export declare const ArticlesListItem: React.FC<Props & Partial<ArticleItem> & WrappedComponentProps>;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & Partial<ArticleItem> & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<Props & Partial<ArticleItem> & WrappedComponentProps<"intl">>;

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

@@ -14,8 +14,10 @@ export interface ArticleItem {
     lastPublished: string;
     title: string;
     type: ARTICLE_ITEM_TYPES;
-    routeName: string;
-    routeGroup: string;
+    routes?: {
+        routeName: string;
+        routeGroup: string;
+    }[];
     topicId?: string;
     productName?: string;
     href?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/help",
-  "version": "7.1.7",
+  "version": "7.1.10",
   "description": "A cross-product help component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,7 +34,6 @@
     "@atlaskit/help-article": "^4.0.0",
     "@atlaskit/help-layout": "^4.1.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/item": "^12.0.0",
     "@atlaskit/notification-indicator": "^9.0.0",
     "@atlaskit/notification-log-client": "^6.0.0",
     "@atlaskit/radio": "^5.3.0",
@@ -44,7 +43,7 @@
     "@atlaskit/textarea": "^4.3.0",
     "@atlaskit/textfield": "^5.1.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",