@atlaskit/help 7.3.3 → 7.4.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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

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.3"
+  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.3"
+  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.3"
+  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.3"
+  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.3"
+  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.3"
+      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.3"
+  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.3"
+  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',
   overflow: 'hidden',
-  marginBottom: "var(--ds-space-100, 8px)"
+  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.3"
+  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.3";
+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.3"
+  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.3"
+  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.3"
+  packageVersion: "7.4.0"
 };
 var WhatsNewResultListItem = exports.WhatsNewResultListItem = function WhatsNewResultListItem(_ref) {
   var formatMessage = _ref.intl.formatMessage,

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.3"
+  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.3"
+  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.3"
+  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.3"
+  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.3"
+  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.3"
+      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.3"
+  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.3"
+  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, {

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

@@ -29,31 +29,65 @@ export const ArticlesListItemWrapper = styled.a({
 }, props => props.styles);
 export const ArticlesListItemContainer = styled.div({
   width: '100%',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  display: 'flex'
+});
+export const ArticlesListItemTitleSection = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1
 });
 export const ArticlesListItemTypeTitle = styled.div({
   font: `var(--ds-font-body-small, ${fontFallback.body.small})`,
   fontWeight: "var(--ds-font-weight-bold, bold)",
-  color: `var(--ds-text-subtlest, ${colors.N200})`,
-  paddingBottom: "var(--ds-space-050, 4px)"
+  color: `var(--ds-text-subtlest, ${colors.N200})`
 });
 export const ArticlesListItemLinkIcon = styled.span({
   alignSelf: 'auto',
   paddingInlineStart: "var(--ds-space-050, 4px)",
   verticalAlign: 'middle'
 });
-export const ArticlesListItemTitleText = styled.span({
+export const ArticlesListItemTitleText = styled.p({
   textDecoration: 'none',
   color: `var(--ds-text, ${colors.N800})`,
   font: `var(--ds-font-heading-xsmall, ${fontFallback.heading.xsmall})`,
   display: 'inline-block',
   whiteSpace: 'normal',
   overflow: 'hidden',
-  marginBottom: "var(--ds-space-100, 8px)"
+  marginBottom: "var(--ds-space-100, 4px)"
 });
 export const ArticlesListItemDescription = styled.p({
   display: 'block',
   lineHeight: '20px',
   color: `var(--ds-text-subtle, ${colors.N400})`,
-  margin: 0
+  margin: 0,
+  paddingBottom: "var(--ds-space-025, 2px)"
+});
+export const ArticlesListItemSource = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  font: `var(--ds-font-heading-xxsmall, ${fontFallback.heading.xxsmall})`,
+  color: `var(--ds-surface-hovered, ${colors.N200})`,
+  padding: `${"var(--ds-space-050, 4px)"} 0`,
+  fontWeight: "var(--ds-font-weight-bold, bold)",
+  textTransform: 'uppercase'
+});
+export const ArticlesListItemTrustFactor = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  font: `var(--ds-font-body-small, ${fontFallback.body.small})`,
+  color: `var(--ds-background-accent-gray-subtlest-pressed, ${colors.N400})`,
+  paddingTop: "var(--ds-space-025, 2px)"
+});
+export const ArticlesListItemViewCount = styled.span({
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+export const ArticlesListItemHelpfulCount = styled.span({
+  display: 'inline-flex',
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+export const ArticlesListItemLastModified = styled.div({
+  font: `var(--ds-font-body-small, ${fontFallback.body.small})`,
+  color: `var(--ds-text-subtle, ${colors.N200})`,
+  padding: `${"var(--ds-space-050, 4px)"} 0`
 });

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

@@ -7,7 +7,7 @@ import { HelpContentButtonContainer, HelpContentButtonIcon, HelpContentButtonTex
 const analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.3"
+  packageVersion: "7.4.0"
 };
 const HelpContentButton = ({
   id = '',

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

@@ -15,7 +15,7 @@ import useCancellablePromise from '../../util/hooks/cancellablePromise';
 import { usePrevious } from '../../util/hooks/previous';
 import { jsx } from '@emotion/react';
 const packageName = "@atlaskit/help";
-const packageVersion = "7.3.3";
+const packageVersion = "7.4.0";
 export const RelatedArticles = ({
   style = 'primary',
   routeGroup,

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

@@ -17,7 +17,7 @@ import { SearchInputContainer, SearchIconContainer, CloseButtonAndSpinnerContain
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.3"
+  packageVersion: "7.4.0"
 };
 export const SearchInput = ({
   intl: {

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

@@ -11,7 +11,7 @@ import { ARTICLE_TYPE } from '../../../model/Help';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'WhatsNewButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.3"
+  packageVersion: "7.4.0"
 };
 export const WhatsNewButton = ({
   productName,

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

@@ -8,7 +8,7 @@ import { WhatsNewResultListItemWrapper, WhatsNewResultListItemTitleContainer, Wh
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.3"
+  packageVersion: "7.4.0"
 };
 export const WhatsNewResultListItem = ({
   intl: {

package/dist/esm/analytics.js

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

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

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

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

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.3"
+  packageVersion: "7.4.0"
 };
 export var ArticleWasHelpfulNoButton = function ArticleWasHelpfulNoButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

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

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.3"
+  packageVersion: "7.4.0"
 };
 export var ArticleWasHelpfulYesButton = function ArticleWasHelpfulYesButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

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

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

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

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

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

@@ -13,7 +13,7 @@ import { WhatsNewTypeTitle, WhatsNewTitleText, WhatsNewIconContainer, RelatedLin
 var analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.3"
+  packageVersion: "7.4.0"
 };
 export var WhatsNewArticle = function WhatsNewArticle(_ref) {
   var formatMessage = _ref.intl.formatMessage,

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

@@ -39,7 +39,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.createElement(AnimateHeight, {
     duration: ANIMATE_HEIGHT_TRANSITION_DURATION_MS,
@@ -57,7 +60,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/esm/components/ArticlesList/ArticlesListItem/index.js

@@ -3,11 +3,12 @@ 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';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.3"
+  packageVersion: "7.4.0"
 };
 export var ArticlesListItem = function ArticlesListItem(_ref) {
   var styles = _ref.styles,
@@ -15,7 +16,10 @@ export var 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 = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var handleOnClick = function handleOnClick(event) {
@@ -27,18 +31,29 @@ export var 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.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, ".concat(colors.N90, ")"),
     secondaryColor: "var(--ds-icon-subtle, ".concat(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)));
 };
 var ArticlesListItemWithContext = function ArticlesListItemWithContext(props) {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {

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

@@ -31,31 +31,65 @@ export var ArticlesListItemWrapper = styled.a({
 });
 export var ArticlesListItemContainer = styled.div({
   width: '100%',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  display: 'flex'
+});
+export var ArticlesListItemTitleSection = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1
 });
 export var ArticlesListItemTypeTitle = styled.div({
   font: "var(--ds-font-body-small, ".concat(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, ")")
 });
 export var ArticlesListItemLinkIcon = styled.span({
   alignSelf: 'auto',
   paddingInlineStart: "var(--ds-space-050, 4px)",
   verticalAlign: 'middle'
 });
-export var ArticlesListItemTitleText = styled.span({
+export var ArticlesListItemTitleText = styled.p({
   textDecoration: 'none',
   color: "var(--ds-text, ".concat(colors.N800, ")"),
   font: "var(--ds-font-heading-xsmall, ".concat(fontFallback.heading.xsmall, ")"),
   display: 'inline-block',
   whiteSpace: 'normal',
   overflow: 'hidden',
-  marginBottom: "var(--ds-space-100, 8px)"
+  marginBottom: "var(--ds-space-100, 4px)"
 });
 export var ArticlesListItemDescription = styled.p({
   display: 'block',
   lineHeight: '20px',
   color: "var(--ds-text-subtle, ".concat(colors.N400, ")"),
-  margin: 0
+  margin: 0,
+  paddingBottom: "var(--ds-space-025, 2px)"
+});
+export var ArticlesListItemSource = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  font: "var(--ds-font-heading-xxsmall, ".concat(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'
+});
+export var ArticlesListItemTrustFactor = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  font: "var(--ds-font-body-small, ".concat(fontFallback.body.small, ")"),
+  color: "var(--ds-background-accent-gray-subtlest-pressed, ".concat(colors.N400, ")"),
+  paddingTop: "var(--ds-space-025, 2px)"
+});
+export var ArticlesListItemViewCount = styled.span({
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+export var ArticlesListItemHelpfulCount = styled.span({
+  display: 'inline-flex',
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+export var ArticlesListItemLastModified = styled.div({
+  font: "var(--ds-font-body-small, ".concat(fontFallback.body.small, ")"),
+  color: "var(--ds-text-subtle, ".concat(colors.N200, ")"),
+  padding: "var(--ds-space-050, 4px)".concat(" 0")
 });

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

@@ -7,7 +7,7 @@ import { HelpContentButtonContainer, HelpContentButtonIcon, HelpContentButtonTex
 var analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.3"
+  packageVersion: "7.4.0"
 };
 var HelpContentButton = function HelpContentButton(_ref) {
   var _ref$id = _ref.id,

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

@@ -18,7 +18,7 @@ import useCancellablePromise from '../../util/hooks/cancellablePromise';
 import { usePrevious } from '../../util/hooks/previous';
 import { jsx } from '@emotion/react';
 var packageName = "@atlaskit/help";
-var packageVersion = "7.3.3";
+var packageVersion = "7.4.0";
 export var RelatedArticles = function RelatedArticles(_ref) {
   var _ref$style = _ref.style,
     style = _ref$style === void 0 ? 'primary' : _ref$style,

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

@@ -17,7 +17,7 @@ import { SearchInputContainer, SearchIconContainer, CloseButtonAndSpinnerContain
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.3"
+  packageVersion: "7.4.0"
 };
 export var SearchInput = function SearchInput(_ref) {
   var formatMessage = _ref.intl.formatMessage;

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

@@ -11,7 +11,7 @@ import { ARTICLE_TYPE } from '../../../model/Help';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'WhatsNewButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.3"
+  packageVersion: "7.4.0"
 };
 export var WhatsNewButton = function WhatsNewButton(_ref) {
   var productName = _ref.productName,

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

@@ -8,7 +8,7 @@ import { WhatsNewResultListItemWrapper, WhatsNewResultListItemTitleContainer, Wh
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.3"
+  packageVersion: "7.4.0"
 };
 export var WhatsNewResultListItem = function WhatsNewResultListItem(_ref) {
   var formatMessage = _ref.intl.formatMessage,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArticlesList as ArticlesListInterface } from './model/ArticlesListItem';
+import { type ArticlesList as ArticlesListInterface } from './model/ArticlesListItem';
 export interface Props {
     numberOfArticlesToDisplay?: number;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { WrappedComponentProps } from 'react-intl-next';
-import { ArticleItem } from '../../../model/Article';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type WrappedComponentProps } from 'react-intl-next';
+import { type ArticleItem } from '../../../model/Article';
 interface Props {
     styles?: {};
     onClick?: (event: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;

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

@@ -10,6 +10,10 @@ export declare const ArticlesListItemContainer: import("@emotion/styled").Styled
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ArticlesListItemTitleSection: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ArticlesListItemTypeTitle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -21,9 +25,29 @@ export declare const ArticlesListItemLinkIcon: import("@emotion/styled").StyledC
 export declare const ArticlesListItemTitleText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 export declare const ArticlesListItemDescription: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const ArticlesListItemSource: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ArticlesListItemTrustFactor: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ArticlesListItemViewCount: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ArticlesListItemHelpfulCount: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ArticlesListItemLastModified: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

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

@@ -1,4 +1,4 @@
-import { BODY_FORMAT_TYPES } from '@atlaskit/help-article';
+import { type BODY_FORMAT_TYPES } from '@atlaskit/help-article';
 import type { AdfDoc } from '@atlaskit/help-article';
 export interface Article extends ArticleItem {
     body: string | AdfDoc;
@@ -21,6 +21,11 @@ export interface ArticleItem {
     topicId?: string;
     productName?: string;
     href?: string;
+    trustFactors?: {
+        numViews?: number;
+        helpfulCount?: number;
+    };
+    source?: string;
 }
 export interface ArticleFeedback {
     wasHelpful: boolean;

package/dist/types-ts4.5/components/ArticlesList/ArticlesList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArticlesList as ArticlesListInterface } from './model/ArticlesListItem';
+import { type ArticlesList as ArticlesListInterface } from './model/ArticlesListItem';
 export interface Props {
     numberOfArticlesToDisplay?: number;
 }

package/dist/types-ts4.5/components/ArticlesList/ArticlesListItem/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { WrappedComponentProps } from 'react-intl-next';
-import { ArticleItem } from '../../../model/Article';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type WrappedComponentProps } from 'react-intl-next';
+import { type ArticleItem } from '../../../model/Article';
 interface Props {
     styles?: {};
     onClick?: (event: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;

package/dist/types-ts4.5/components/ArticlesList/ArticlesListItem/styled.d.ts

@@ -10,6 +10,10 @@ export declare const ArticlesListItemContainer: import("@emotion/styled").Styled
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ArticlesListItemTitleSection: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ArticlesListItemTypeTitle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -21,9 +25,29 @@ export declare const ArticlesListItemLinkIcon: import("@emotion/styled").StyledC
 export declare const ArticlesListItemTitleText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 export declare const ArticlesListItemDescription: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const ArticlesListItemSource: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ArticlesListItemTrustFactor: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ArticlesListItemViewCount: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ArticlesListItemHelpfulCount: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ArticlesListItemLastModified: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/dist/types-ts4.5/model/Article.d.ts

@@ -1,4 +1,4 @@
-import { BODY_FORMAT_TYPES } from '@atlaskit/help-article';
+import { type BODY_FORMAT_TYPES } from '@atlaskit/help-article';
 import type { AdfDoc } from '@atlaskit/help-article';
 export interface Article extends ArticleItem {
     body: string | AdfDoc;
@@ -21,6 +21,11 @@ export interface ArticleItem {
     topicId?: string;
     productName?: string;
     href?: string;
+    trustFactors?: {
+        numViews?: number;
+        helpfulCount?: number;
+    };
+    source?: string;
 }
 export interface ArticleFeedback {
     wasHelpful: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/help",
-  "version": "7.3.3",
+  "version": "7.4.0",
   "description": "A cross-product help component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,10 +44,10 @@
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/button": "^17.14.0",
     "@atlaskit/checkbox": "^13.3.0",
-    "@atlaskit/form": "^10.0.0",
+    "@atlaskit/form": "^10.1.0",
     "@atlaskit/help-article": "^4.1.10",
     "@atlaskit/help-layout": "^4.2.15",
-    "@atlaskit/icon": "^22.1.0",
+    "@atlaskit/icon": "^22.2.0",
     "@atlaskit/notification-indicator": "^9.2.0",
     "@atlaskit/notification-log-client": "^6.1.0",
     "@atlaskit/radio": "^6.3.0",
@@ -58,7 +58,7 @@
     "@atlaskit/textfield": "^6.3.0",
     "@atlaskit/theme": "^12.8.0",
     "@atlaskit/tokens": "^1.48.0",
-    "@atlaskit/tooltip": "^18.3.0",
+    "@atlaskit/tooltip": "^18.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.0.0",