@atlaskit/help 7.1.8 → 7.1.11

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/help
 
+## 7.1.11
+
+### Patch Changes
+
+- [`ce7d477bc24`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ce7d477bc24) - [ux] Fixing styling on the ArticleListItem component
+
+## 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

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,12 +64,12 @@ 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),
     secondaryColor: (0, _tokens.token)('color.icon.subtle', colors.N90)
-  }))), /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemDescription, null, description));
+  })))), /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemDescription, null, description));
 };
 
 exports.ArticlesListItem = ArticlesListItem;

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

@@ -63,11 +63,11 @@ var ArticlesListItemTypeTitle = _styled.default.div(_templateObject2 || (_templa
 
 exports.ArticlesListItemTypeTitle = ArticlesListItemTypeTitle;
 
-var ArticlesListItemLinkIcon = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-self: auto;\n"])));
+var ArticlesListItemLinkIcon = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-self: auto;\n  padding-inline-start: 5px;\n  vertical-align: middle;\n"])));
 
 exports.ArticlesListItemLinkIcon = ArticlesListItemLinkIcon;
 
-var ArticlesListItemTitleText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  display: block;\n  line-height: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n  margin-bottom: ", "px;\n"])), (0, _tokens.token)('color.text', colors.N800), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)());
+var ArticlesListItemTitleText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  display: inline-block;\n  line-height: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n  margin-bottom: ", "px;\n"])), (0, _tokens.token)('color.text', colors.N800), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)());
 
 exports.ArticlesListItemTitleText = ArticlesListItemTitleText;
 

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.8",
+	"version": "7.1.11",
 	"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,12 +39,12 @@ 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),
     secondaryColor: token('color.icon.subtle', colors.N90)
-  }))), /*#__PURE__*/React.createElement(ArticlesListItemDescription, null, description));
+  })))), /*#__PURE__*/React.createElement(ArticlesListItemDescription, null, description));
 };
 
 const ArticlesListItemWithContext = props => {

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

@@ -39,15 +39,17 @@ export const ArticlesListItemTypeTitle = styled.div`
   color: ${token('color.text.subtlest', colors.N200)};
   padding-bottom: ${gridSize() / 2}px;
 `;
-export const ArticlesListItemLinkIcon = styled.div`
+export const ArticlesListItemLinkIcon = styled.span`
   align-self: auto;
+  padding-inline-start: 5px;
+  vertical-align: middle;
 `;
 export const ArticlesListItemTitleText = styled.span`
   text-decoration: none;
   color: ${token('color.text', colors.N800)};
   font-size: ${fontSize()}px;
   font-weight: 600;
-  display: block;
+  display: inline-block;
   line-height: ${gridSize() * 2.5}px;
   white-space: normal;
   overflow-x: hidden;

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;