@atlaskit/help 7.3.2 → 7.4.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/help
 
+## 7.4.0
+
+### Minor Changes
+
+-   [#101167](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101167)
+    [`52a888c912e8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/52a888c912e8) -
+    [ux] Display 4 extra article details in Article search display
+
+    1. Last published
+
+    2. Content source
+
+    3. Helpful count
+
+    4. View count
+
+    All changes are backward compatible
+
+## 7.3.3
+
+### Patch Changes
+
+-   [#99831](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99831)
+    [`9652182a0292`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9652182a0292) -
+    Fix issue where the back button used to lose context of the search results and takes back to the
+    default page. Now it takes back to the place where the user started from
+-   [#99831](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99831)
+    [`e5fd89bc770c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e5fd89bc770c) -
+    Fix individual scroll bars appearing for titles when an external URL icon is present in safari
+
 ## 7.3.2
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -14,5 +14,5 @@ var createAndFire = exports.createAndFire = x.createAndFireEvent('atlaskit');
 var defaultAnalyticsAttributes = exports.defaultAnalyticsAttributes = {
   componentName: 'help',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };

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

@@ -15,7 +15,7 @@ var _styled = require("./styled");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 var ArticleLoadingFail = exports.ArticleLoadingFail = function ArticleLoadingFail(_ref) {
   var onTryAgainButtonClick = _ref.onTryAgainButtonClick,

package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulNoButton.js

@@ -13,7 +13,7 @@ var _messages = require("../../../../messages");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 var ArticleWasHelpfulNoButton = exports.ArticleWasHelpfulNoButton = function ArticleWasHelpfulNoButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulYesButton.js

@@ -13,7 +13,7 @@ var _messages = require("../../../../messages");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 var ArticleWasHelpfulYesButton = exports.ArticleWasHelpfulYesButton = function ArticleWasHelpfulYesButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

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

@@ -37,7 +37,7 @@ var FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 var ArticleWasHelpfulForm = exports.ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
   var onWasHelpfulSubmit = _ref.onWasHelpfulSubmit,

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

@@ -64,7 +64,7 @@ var HelpArticle = exports.HelpArticle = function HelpArticle(_ref) {
     analyticsEvent.payload.attributes = {
       componentName: 'Article',
       packageName: "@atlaskit/help",
-      packageVersion: "7.3.2"
+      packageVersion: "7.4.0"
     };
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);

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

@@ -22,7 +22,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 var WhatsNewArticle = exports.WhatsNewArticle = function WhatsNewArticle(_ref) {
   var formatMessage = _ref.intl.formatMessage,

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

@@ -46,7 +46,10 @@ var articlesList = function articlesList(_ref) {
       title: article.title,
       description: article.description,
       key: article.id,
-      href: article.href
+      href: article.href,
+      trustFactors: article.trustFactors,
+      source: article.source,
+      lastPublished: article.lastPublished
     });
   })), /*#__PURE__*/_react.default.createElement(_reactAnimateHeight.default, {
     duration: _constants.ANIMATE_HEIGHT_TRANSITION_DURATION_MS,
@@ -64,7 +67,10 @@ var articlesList = function articlesList(_ref) {
       title: article.title,
       description: article.description,
       key: article.id,
-      href: article.href
+      href: article.href,
+      trustFactors: article.trustFactors,
+      source: article.source,
+      lastPublished: article.lastPublished
     });
   })));
 };

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

@@ -11,13 +11,14 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 var _reactIntlNext = require("react-intl-next");
+var _like = _interopRequireDefault(require("@atlaskit/icon/glyph/like"));
 var _styled = require("./styled");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 var ArticlesListItem = exports.ArticlesListItem = function ArticlesListItem(_ref) {
   var styles = _ref.styles,
@@ -25,7 +26,10 @@ var ArticlesListItem = exports.ArticlesListItem = function ArticlesListItem(_ref
     description = _ref.description,
     _ref$href = _ref.href,
     href = _ref$href === void 0 ? '' : _ref$href,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    trustFactors = _ref.trustFactors,
+    source = _ref.source,
+    lastPublished = _ref.lastPublished;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var handleOnClick = function handleOnClick(event) {
@@ -37,18 +41,29 @@ var ArticlesListItem = exports.ArticlesListItem = function ArticlesListItem(_ref
       onClick(event, _analyticsEvent);
     }
   };
+
+  // Check if trust factors are available
+  var isNumViewsVisible = (trustFactors === null || trustFactors === void 0 ? void 0 : trustFactors.numViews) != null;
+  var isHelpfulCountVisible = (trustFactors === null || trustFactors === void 0 ? void 0 : trustFactors.helpfulCount) != null;
+  var isTrustFactorVisible = isNumViewsVisible || isHelpfulCountVisible;
+  // Check if source is available
+  var isSourceVisible = source != null;
+  var isLastPublishedVisible = lastPublished != null && lastPublished !== '';
   return /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemWrapper, {
     styles: styles,
     "aria-disabled": "false",
     role: "button",
     href: href,
     onClick: handleOnClick
-  }, /*#__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, {
+  }, /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemContainer, null, /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemTitleSection, null, /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemTitleText, null, title), isLastPublishedVisible && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemLastModified, null, "Last modified: ", lastPublished)), href && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemLinkIcon, null, /*#__PURE__*/_react.default.createElement(_shortcut.default, {
     size: "small",
     label: "",
     primaryColor: "var(--ds-icon-subtle, ".concat(colors.N90, ")"),
     secondaryColor: "var(--ds-icon-subtle, ".concat(colors.N90, ")")
-  })))), /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemDescription, null, description));
+  }))), /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemDescription, null, description), isSourceVisible && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemSource, null, source), isTrustFactorVisible && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemTrustFactor, null, isNumViewsVisible && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemViewCount, null, trustFactors.numViews, " views"), isHelpfulCountVisible && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemHelpfulCount, null, /*#__PURE__*/_react.default.createElement(_like.default, {
+    label: "Like",
+    size: "small"
+  }), trustFactors.helpfulCount)));
 };
 var ArticlesListItemWithContext = function ArticlesListItemWithContext(props) {
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArticlesListItemWrapper = exports.ArticlesListItemTypeTitle = exports.ArticlesListItemTitleText = exports.ArticlesListItemLinkIcon = exports.ArticlesListItemDescription = exports.ArticlesListItemContainer = void 0;
+exports.ArticlesListItemWrapper = exports.ArticlesListItemViewCount = exports.ArticlesListItemTypeTitle = exports.ArticlesListItemTrustFactor = exports.ArticlesListItemTitleText = exports.ArticlesListItemTitleSection = exports.ArticlesListItemSource = exports.ArticlesListItemLinkIcon = exports.ArticlesListItemLastModified = exports.ArticlesListItemHelpfulCount = exports.ArticlesListItemDescription = exports.ArticlesListItemContainer = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _typography = require("@atlaskit/theme/typography");
@@ -42,31 +42,65 @@ var ArticlesListItemWrapper = exports.ArticlesListItemWrapper = _styled.default.
 });
 var ArticlesListItemContainer = exports.ArticlesListItemContainer = _styled.default.div({
   width: '100%',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  display: 'flex'
+});
+var ArticlesListItemTitleSection = exports.ArticlesListItemTitleSection = _styled.default.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1
 });
 var ArticlesListItemTypeTitle = exports.ArticlesListItemTypeTitle = _styled.default.div({
   font: "var(--ds-font-body-small, ".concat(_typography.fontFallback.body.small, ")"),
   fontWeight: "var(--ds-font-weight-bold, bold)",
-  color: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
-  paddingBottom: "var(--ds-space-050, 4px)"
+  color: "var(--ds-text-subtlest, ".concat(colors.N200, ")")
 });
 var ArticlesListItemLinkIcon = exports.ArticlesListItemLinkIcon = _styled.default.span({
   alignSelf: 'auto',
   paddingInlineStart: "var(--ds-space-050, 4px)",
   verticalAlign: 'middle'
 });
-var ArticlesListItemTitleText = exports.ArticlesListItemTitleText = _styled.default.span({
+var ArticlesListItemTitleText = exports.ArticlesListItemTitleText = _styled.default.p({
   textDecoration: 'none',
   color: "var(--ds-text, ".concat(colors.N800, ")"),
   font: "var(--ds-font-heading-xsmall, ".concat(_typography.fontFallback.heading.xsmall, ")"),
   display: 'inline-block',
   whiteSpace: 'normal',
-  overflowX: 'hidden',
-  marginBottom: "var(--ds-space-100, 8px)"
+  overflow: 'hidden',
+  marginBottom: "var(--ds-space-100, 4px)"
 });
 var ArticlesListItemDescription = exports.ArticlesListItemDescription = _styled.default.p({
   display: 'block',
   lineHeight: '20px',
   color: "var(--ds-text-subtle, ".concat(colors.N400, ")"),
-  margin: 0
+  margin: 0,
+  paddingBottom: "var(--ds-space-025, 2px)"
+});
+var ArticlesListItemSource = exports.ArticlesListItemSource = _styled.default.div({
+  display: 'flex',
+  alignItems: 'center',
+  font: "var(--ds-font-heading-xxsmall, ".concat(_typography.fontFallback.heading.xxsmall, ")"),
+  color: "var(--ds-surface-hovered, ".concat(colors.N200, ")"),
+  padding: "var(--ds-space-050, 4px)".concat(" 0"),
+  fontWeight: "var(--ds-font-weight-bold, bold)",
+  textTransform: 'uppercase'
+});
+var ArticlesListItemTrustFactor = exports.ArticlesListItemTrustFactor = _styled.default.div({
+  display: 'flex',
+  alignItems: 'center',
+  font: "var(--ds-font-body-small, ".concat(_typography.fontFallback.body.small, ")"),
+  color: "var(--ds-background-accent-gray-subtlest-pressed, ".concat(colors.N400, ")"),
+  paddingTop: "var(--ds-space-025, 2px)"
+});
+var ArticlesListItemViewCount = exports.ArticlesListItemViewCount = _styled.default.span({
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+var ArticlesListItemHelpfulCount = exports.ArticlesListItemHelpfulCount = _styled.default.span({
+  display: 'inline-flex',
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+var ArticlesListItemLastModified = exports.ArticlesListItemLastModified = _styled.default.div({
+  font: "var(--ds-font-body-small, ".concat(_typography.fontFallback.body.small, ")"),
+  color: "var(--ds-text-subtle, ".concat(colors.N200, ")"),
+  padding: "var(--ds-space-050, 4px)".concat(" 0")
 });

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

@@ -17,7 +17,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 var HelpContentButton = function HelpContentButton(_ref) {
   var _ref$id = _ref.id,

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

@@ -28,7 +28,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 /** @jsxFrag */
 
 var packageName = "@atlaskit/help";
-var packageVersion = "7.3.2";
+var packageVersion = "7.4.0";
 var RelatedArticles = exports.RelatedArticles = function RelatedArticles(_ref) {
   var _ref$style = _ref.style,
     style = _ref$style === void 0 ? 'primary' : _ref$style,

package/dist/cjs/components/Search/SearchInput/index.js

@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 var SearchInput = exports.SearchInput = function SearchInput(_ref) {
   var formatMessage = _ref.intl.formatMessage;

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

@@ -21,7 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'WhatsNewButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 var WhatsNewButton = exports.WhatsNewButton = function WhatsNewButton(_ref) {
   var productName = _ref.productName,

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

@@ -15,7 +15,7 @@ var _styled2 = require("./styled");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 var WhatsNewResultListItem = exports.WhatsNewResultListItem = function WhatsNewResultListItem(_ref) {
   var formatMessage = _ref.intl.formatMessage,

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

@@ -195,13 +195,14 @@ var navigationReducer = function navigationReducer(_ref3, action) {
     newState = {
       articleId: _newArticleId2,
       history: currentHistory,
-      view: getViewForArticleId(_newArticleId2)
+      // If the current view is the search view and the new article id is empty, keep the current view
+      view: currentView === _constants.VIEW.SEARCH && _newArticleId2.id === '' ? currentView : getViewForArticleId(_newArticleId2)
     };
   } else if (action.type === 'updateView' && action.payload) {
     var newView = action.payload;
     newState = {
       articleId: currentArticleId,
-      history: currentHistory,
+      history: newView === _constants.VIEW.SEARCH ? [] : currentHistory,
       view: newView
     };
   }
@@ -225,7 +226,8 @@ var NavigationContextProvider = exports.NavigationContextProvider = function Nav
   var _useSearchContext = (0, _searchContext.useSearchContext)(),
     onSearch = _useSearchContext.onSearch,
     isSearchResultVisible = _useSearchContext.isSearchResultVisible,
-    searchValue = _useSearchContext.searchValue;
+    searchValue = _useSearchContext.searchValue,
+    searchResult = _useSearchContext.searchResult;
   var _useHeaderContext = (0, _headerContext.useHeaderContext)(),
     onCloseButtonClick = _useHeaderContext.onCloseButtonClick;
   var propsArticleId = navigationData.articleId,
@@ -358,6 +360,7 @@ var NavigationContextProvider = exports.NavigationContextProvider = function Nav
     };
   }(), []);
   var navigateBack = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+    var _searchResult$length;
     return _regenerator.default.wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
@@ -387,10 +390,19 @@ var NavigationContextProvider = exports.NavigationContextProvider = function Nav
                 type: 'removeLastHistoryItem'
               });
             } else if (currentHistory.length === 1) {
-              // but if the history only has one item, clear the history
-              dispatchNavigationAction({
-                type: 'removeAllHistoryItems'
-              });
+              // If the search value is not empty and search result is not empty, show the search results
+              if (searchValue !== '' && ((_searchResult$length = searchResult === null || searchResult === void 0 ? void 0 : searchResult.length) !== null && _searchResult$length !== void 0 ? _searchResult$length : 0) > 0 && onSearch !== undefined) {
+                dispatchNavigationAction({
+                  type: 'updateView',
+                  payload: _constants.VIEW.SEARCH
+                });
+              }
+              // If the search value is empty, show the default content
+              else {
+                dispatchNavigationAction({
+                  type: 'removeAllHistoryItems'
+                });
+              }
             }
           }
         case 9:
@@ -398,7 +410,7 @@ var NavigationContextProvider = exports.NavigationContextProvider = function Nav
           return _context3.stop();
       }
     }, _callee3);
-  })), [currentView, onSearch, currentHistory.length, searchValue, currentArticleId.type]);
+  })), [currentView, searchValue, currentArticleId, currentHistory, onSearch, searchResult === null || searchResult === void 0 ? void 0 : searchResult.length]);
   var onClose = (0, _react.useCallback)(function (event, analyticsEvent) {
     if (onCloseButtonClick) {
       dispatchNavigationAction({
@@ -414,13 +426,20 @@ var NavigationContextProvider = exports.NavigationContextProvider = function Nav
     });
   }, []);
   (0, _react.useEffect)(function () {
-    if (isSearchResultVisible) {
+    // If the search result is visible or the search value is not empty, show the search result
+    if (isSearchResultVisible || searchValue !== '') {
       dispatchNavigationAction({
         type: 'updateView',
         payload: _constants.VIEW.SEARCH
       });
+      // If the search result is not visible and the search value is empty, show the default content
+    } else if (!isSearchResultVisible && searchValue === '') {
+      dispatchNavigationAction({
+        type: 'updateView',
+        payload: _constants.VIEW.DEFAULT_CONTENT
+      });
     }
-  }, [isSearchResultVisible]);
+  }, [isSearchResultVisible, searchValue]);
   (0, _react.useEffect)(function () {
     var lastHistoryItem = currentHistory.length > 0 ? _getCurrentArticle2(currentHistory) : getNewHistoryItem(DEFAULT_ARTICLE_ID.id, DEFAULT_ARTICLE_ID.type);
 

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

@@ -112,9 +112,6 @@ var SearchContextProvider = exports.SearchContextProvider = function SearchConte
     if (onSearchResultItemClick) {
       onSearchResultItemClick(event, analyticsEvent, articleData);
     }
-    if (!openExternalSearchUrlInNewTab || articleData.href == null) {
-      setSearchResultsVisible(false);
-    }
   };
   return /*#__PURE__*/_react.default.createElement(CtxProvider, {
     value: {

package/dist/es2019/analytics.js

@@ -5,5 +5,5 @@ export const createAndFire = x.createAndFireEvent('atlaskit');
 export const defaultAnalyticsAttributes = {
   componentName: 'help',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };

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

@@ -8,7 +8,7 @@ import { LoadingErrorMessage, LoadingErrorButtonContainer } from './styled';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export const ArticleLoadingFail = ({
   onTryAgainButtonClick,

package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulNoButton.js

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export const ArticleWasHelpfulNoButton = ({
   isSelected = false,

package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulYesButton.js

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export const ArticleWasHelpfulYesButton = ({
   isSelected = false,

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

@@ -25,7 +25,7 @@ const FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export const ArticleWasHelpfulForm = ({
   onWasHelpfulSubmit,

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

@@ -59,7 +59,7 @@ export const HelpArticle = ({
     analyticsEvent.payload.attributes = {
       componentName: 'Article',
       packageName: "@atlaskit/help",
-      packageVersion: "7.3.2"
+      packageVersion: "7.4.0"
     };
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);

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

@@ -13,7 +13,7 @@ import { WhatsNewTypeTitle, WhatsNewTitleText, WhatsNewIconContainer, RelatedLin
 const analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export const WhatsNewArticle = ({
   intl: {

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

@@ -35,7 +35,10 @@ const articlesList = ({
     title: article.title,
     description: article.description,
     key: article.id,
-    href: article.href
+    href: article.href,
+    trustFactors: article.trustFactors,
+    source: article.source,
+    lastPublished: article.lastPublished
   });
 })), /*#__PURE__*/React.createElement(AnimateHeight, {
   duration: ANIMATE_HEIGHT_TRANSITION_DURATION_MS,
@@ -52,6 +55,9 @@ const articlesList = ({
   title: article.title,
   description: article.description,
   key: article.id,
-  href: article.href
+  href: article.href,
+  trustFactors: article.trustFactors,
+  source: article.source,
+  lastPublished: article.lastPublished
 }))));
 export default articlesList;

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

@@ -3,18 +3,22 @@ import * as colors from '@atlaskit/theme/colors';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { injectIntl } from 'react-intl-next';
-import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon } from './styled';
+import LikeIcon from '@atlaskit/icon/glyph/like';
+import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon, ArticlesListItemTrustFactor, ArticlesListItemViewCount, ArticlesListItemHelpfulCount, ArticlesListItemSource, ArticlesListItemLastModified, ArticlesListItemTitleSection } from './styled';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export const ArticlesListItem = ({
   styles,
   title,
   description,
   href = '',
-  onClick
+  onClick,
+  trustFactors,
+  source,
+  lastPublished
 }) => {
   const {
     createAnalyticsEvent
@@ -28,18 +32,29 @@ export const ArticlesListItem = ({
       onClick(event, analyticsEvent);
     }
   };
+
+  // Check if trust factors are available
+  const isNumViewsVisible = (trustFactors === null || trustFactors === void 0 ? void 0 : trustFactors.numViews) != null;
+  const isHelpfulCountVisible = (trustFactors === null || trustFactors === void 0 ? void 0 : trustFactors.helpfulCount) != null;
+  const isTrustFactorVisible = isNumViewsVisible || isHelpfulCountVisible;
+  // Check if source is available
+  const isSourceVisible = source != null;
+  const isLastPublishedVisible = lastPublished != null && lastPublished !== '';
   return /*#__PURE__*/React.createElement(ArticlesListItemWrapper, {
     styles: styles,
     "aria-disabled": "false",
     role: "button",
     href: href,
     onClick: handleOnClick
-  }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title, href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__PURE__*/React.createElement(ShortcutIcon, {
+  }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, /*#__PURE__*/React.createElement(ArticlesListItemTitleSection, null, /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title), isLastPublishedVisible && /*#__PURE__*/React.createElement(ArticlesListItemLastModified, null, "Last modified: ", lastPublished)), href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__PURE__*/React.createElement(ShortcutIcon, {
     size: "small",
     label: "",
     primaryColor: `var(--ds-icon-subtle, ${colors.N90})`,
     secondaryColor: `var(--ds-icon-subtle, ${colors.N90})`
-  })))), /*#__PURE__*/React.createElement(ArticlesListItemDescription, null, description));
+  }))), /*#__PURE__*/React.createElement(ArticlesListItemDescription, null, description), isSourceVisible && /*#__PURE__*/React.createElement(ArticlesListItemSource, null, source), isTrustFactorVisible && /*#__PURE__*/React.createElement(ArticlesListItemTrustFactor, null, isNumViewsVisible && /*#__PURE__*/React.createElement(ArticlesListItemViewCount, null, trustFactors.numViews, " views"), isHelpfulCountVisible && /*#__PURE__*/React.createElement(ArticlesListItemHelpfulCount, null, /*#__PURE__*/React.createElement(LikeIcon, {
+    label: "Like",
+    size: "small"
+  }), trustFactors.helpfulCount)));
 };
 const ArticlesListItemWithContext = props => {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {