@atlaskit/help 9.2.0 → 9.2.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/help
 
+## 9.2.2
+
+### Patch Changes
+
+- [`6a82d7964a37b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6a82d7964a37b) -
+  Icon entrypoint migration
+- Updated dependencies
+
+## 9.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.2.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -5,7 +5,8 @@
 		"target": "es5",
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__help",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",
@@ -47,9 +48,6 @@
 		{
 			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
 		},
-		{
-			"path": "../../../design-system/legacy-custom-icons/afm-cc/tsconfig.json"
-		},
 		{
 			"path": "../../../notifications/notification-indicator/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -3,9 +3,10 @@
 	"compilerOptions": {
 		"declaration": true,
 		"target": "es5",
-		"outDir": "../../../../../tsDist/@atlaskit__help/app",
+		"outDir": "../../../../../jira/tsDist/@atlaskit__help/app",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",
@@ -47,9 +48,6 @@
 		{
 			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
 		},
-		{
-			"path": "../../../design-system/legacy-custom-icons/afm-jira/tsconfig.json"
-		},
 		{
 			"path": "../../../notifications/notification-indicator/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -5,7 +5,8 @@
 		"target": "es5",
 		"outDir": "../../../../../tsDist/@atlaskit__help/app",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",
@@ -47,9 +48,6 @@
 		{
 			"path": "../../../design-system/icon/afm-products/tsconfig.json"
 		},
-		{
-			"path": "../../../design-system/legacy-custom-icons/afm-products/tsconfig.json"
-		},
 		{
 			"path": "../../../notifications/notification-indicator/afm-products/tsconfig.json"
 		},

package/dist/cjs/assets/IconWrapper.js

@@ -11,13 +11,11 @@ var _icon = require("@atlaskit/icon");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var IconWrapper = exports.IconWrapper = function IconWrapper(_ref) {
   var Icon = _ref.Icon,
-    LegacyIcon = _ref.LegacyIcon,
     appearance = _ref.appearance;
   return /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     alignItems: "center",
     justifyContent: "center"
   }, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? /*#__PURE__*/_react.default.createElement(Icon, {
-    LEGACY_fallbackIcon: LegacyIcon,
     label: "",
     color: "var(--ds-icon-inverse, #FFFFFF)"
   }) :

package/dist/cjs/assets/WhatsNewIcoExperiment.js

@@ -6,14 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = WhatsNewIcoExperiment;
 var _react = _interopRequireDefault(require("react"));
-var _flaskIcon = _interopRequireDefault(require("@atlaskit/legacy-custom-icons/flask-icon"));
 var _flask = _interopRequireDefault(require("@atlaskit/icon/core/flask"));
 var _IconWrapper = require("./IconWrapper");
 var _colors = require("@atlaskit/theme/colors");
 function WhatsNewIcoExperiment() {
   return /*#__PURE__*/_react.default.createElement(_IconWrapper.IconWrapper, {
     Icon: _flask.default,
-    LegacyIcon: _flaskIcon.default,
     appearance: "var(--ds-icon-discovery, ".concat(_colors.P500, ")")
   });
 }

package/dist/cjs/assets/WhatsNewIconFix.js

@@ -6,14 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = WhatsNewIconFix;
 var _react = _interopRequireDefault(require("react"));
-var _bugIcon = _interopRequireDefault(require("@atlaskit/legacy-custom-icons/bug-icon"));
 var _bug = _interopRequireDefault(require("@atlaskit/icon/core/bug"));
 var _IconWrapper = require("./IconWrapper");
 var _colors = require("@atlaskit/theme/colors");
 function WhatsNewIconFix() {
   return /*#__PURE__*/_react.default.createElement(_IconWrapper.IconWrapper, {
     Icon: _bug.default,
-    LegacyIcon: _bugIcon.default,
     appearance: "var(--ds-icon-information, ".concat(_colors.B500, ")")
   });
 }

package/dist/cjs/assets/WhatsNewIconImprovement.js

@@ -6,14 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = WhatsNewIconImprovement;
 var _react = _interopRequireDefault(require("react"));
-var _megaphoneStarIcon = _interopRequireDefault(require("@atlaskit/legacy-custom-icons/megaphone-star-icon"));
 var _megaphone = _interopRequireDefault(require("@atlaskit/icon/core/megaphone"));
 var _IconWrapper = require("./IconWrapper");
 var _colors = require("@atlaskit/theme/colors");
 function WhatsNewIconImprovement() {
   return /*#__PURE__*/_react.default.createElement(_IconWrapper.IconWrapper, {
     Icon: _megaphone.default,
-    LegacyIcon: _megaphoneStarIcon.default,
     appearance: "var(--ds-icon-warning, ".concat(_colors.Y200, ")")
   });
 }

package/dist/cjs/assets/WhatsNewIconNew.js

@@ -6,14 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = WhatsNewIconNew;
 var _react = _interopRequireDefault(require("react"));
-var _megaphoneIcon = _interopRequireDefault(require("@atlaskit/legacy-custom-icons/megaphone-icon"));
 var _megaphone = _interopRequireDefault(require("@atlaskit/icon/core/megaphone"));
 var _IconWrapper = require("./IconWrapper");
 var _colors = require("@atlaskit/theme/colors");
 function WhatsNewIconNew() {
   return /*#__PURE__*/_react.default.createElement(_IconWrapper.IconWrapper, {
     Icon: _megaphone.default,
-    LegacyIcon: _megaphoneIcon.default,
     appearance: "var(--ds-icon, ".concat(_colors.N400, ")")
   });
 }

package/dist/cjs/assets/WhatsNewIconRemoved.js

@@ -6,14 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = WhatsNewIconRemoved;
 var _react = _interopRequireDefault(require("react"));
-var _deleteIcon = _interopRequireDefault(require("@atlaskit/legacy-custom-icons/delete-icon"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _IconWrapper = require("./IconWrapper");
 var _colors = require("@atlaskit/theme/colors");
 function WhatsNewIconRemoved() {
   return /*#__PURE__*/_react.default.createElement(_IconWrapper.IconWrapper, {
     Icon: _delete.default,
-    LegacyIcon: _deleteIcon.default,
     appearance: "var(--ds-icon-disabled, ".concat(_colors.N700, ")")
   });
 }

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

@@ -21,7 +21,7 @@ var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _radio = require("@atlaskit/radio");
 var _checkbox = require("@atlaskit/checkbox");
 var _textarea = _interopRequireDefault(require("@atlaskit/textarea"));
-var _statusSuccessCheckCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/status-success--check-circle"));
+var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
 var _theme = require("@atlaskit/theme");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _messages = require("../../../../messages");
@@ -243,9 +243,11 @@ var ArticleWasHelpfulForm = exports.ArticleWasHelpfulForm = function ArticleWasH
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           verticalAlign: 'middle'
         },
-        role: "img",
+        role: "img"
+        // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+        ,
         "aria-label": "Success"
-      }, /*#__PURE__*/_react.default.createElement(_statusSuccessCheckCircle.default, {
+      }, /*#__PURE__*/_react.default.createElement(_statusSuccess.default, {
         spacing: "spacious",
         color: "var(--ds-icon-success, ".concat(_theme.colors.G400, ")"),
         label: ""

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

@@ -9,7 +9,7 @@ exports.default = exports.WhatsNewArticle = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _helpArticle = _interopRequireWildcard(require("@atlaskit/help-article"));
-var _linkExternalShortcut = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-external--shortcut"));
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _messages = require("../../../messages");
@@ -53,7 +53,7 @@ var WhatsNewArticle = exports.WhatsNewArticle = function WhatsNewArticle(_ref) {
       spacing: "none",
       href: article.relatedExternalLinks,
       target: "_blank"
-    }, formatMessage(_messages.messages.help_whats_new_related_link_support)), /*#__PURE__*/_react.default.createElement(_styled2.ExternalLinkIconContainer, null, /*#__PURE__*/_react.default.createElement(_linkExternalShortcut.default, {
+    }, formatMessage(_messages.messages.help_whats_new_related_link_support)), /*#__PURE__*/_react.default.createElement(_styled2.ExternalLinkIconContainer, null, /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
       color: "currentColor",
       LEGACY_size: "small",
       label: ""
@@ -62,7 +62,7 @@ var WhatsNewArticle = exports.WhatsNewArticle = function WhatsNewArticle(_ref) {
       spacing: "none",
       href: article.communityUrl,
       target: "_blank"
-    }, formatMessage(_messages.messages.help_whats_new_related_link_community)), /*#__PURE__*/_react.default.createElement(_styled2.ExternalLinkIconContainer, null, /*#__PURE__*/_react.default.createElement(_linkExternalShortcut.default, {
+    }, formatMessage(_messages.messages.help_whats_new_related_link_community)), /*#__PURE__*/_react.default.createElement(_styled2.ExternalLinkIconContainer, null, /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
       color: "currentColor",
       LEGACY_size: "small",
       label: ""

package/dist/cjs/components/Article/WhatsNewArticle/styled.compiled.css

@@ -1,16 +1,7 @@
-._11c81bq0{font:var(--_bo9t81)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._19bv1b66{padding-left:var(--ds-space-050,4px)}
+
+._zulpu2gc{gap:var(--ds-space-100,8px)}._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1o8l{display:inline-block}
-._1e0c1ule{display:block}
-._1hmsglyw{text-decoration-line:none}
-._1reo15vq{overflow-x:hidden}
-._4bfu1r31{text-decoration-color:currentColor}
-._ajmmnqa1{text-decoration-style:solid}
-._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._1e0c1txw{display:flex}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
-._o5724jg8{white-space:normal}
 ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
-._s7n4nkob{vertical-align:middle}
-._syaz1o8f{color:var(--_ggxzyp)}
-._syazg0pi{color:var(--_1dzgjqk)}
+._s7n4nkob{vertical-align:middle}

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

@@ -9,35 +9,26 @@ exports.WhatsNewTypeTitle = exports.WhatsNewTitleText = exports.WhatsNewIconCont
 require("./styled.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _typography = require("@atlaskit/theme/typography");
-var _colors = require("@atlaskit/theme/colors");
-var body = _typography.fontFallback.body;
-var whatsNewTypeTitleStyles = null;
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var WhatsNewTypeTitle = exports.WhatsNewTypeTitle = function WhatsNewTypeTitle(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _runtime.ax)(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c81bq0 _syazg0pi _s7n4nkob _19bv1b66 _o5724jg8 _1reo15vq"]),
-    style: {
-      "--_1dzgjqk": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
-      "--_bo9t81": (0, _runtime.ix)("var(--ds-font-body, ".concat(body.medium, ")"))
-    }
+  return /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "xsmall",
+    as: "h3"
   }, children);
 };
 var whatsNewIconContainerStyles = null;
 var WhatsNewIconContainer = exports.WhatsNewIconContainer = function WhatsNewIconContainer(_ref2) {
   var children = _ref2.children;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)(["_1e0c1ule _n3tdu2gc"])
+    className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _n3tdu2gc"])
   }, children);
 };
-var whatsNewTitleText = null;
 var WhatsNewTitleText = exports.WhatsNewTitleText = function WhatsNewTitleText(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _runtime.ax)(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c82smr _syaz1o8f _k48p1pd9 _o5724jg8 _1reo15vq _n3tdu2gc _1e0c1ule"]),
-    style: {
-      "--_ggxzyp": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N800, ")"))
-    }
+  return /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "xsmall",
+    as: "h4"
   }, children);
 };
 var relatedLinkContainerStyles = null;

package/dist/cjs/components/Article/index.compiled.css

@@ -17,4 +17,7 @@
 ._kqswstnw{position:absolute}
 ._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
 ._u5f31ejb{padding-right:var(--ds-space-300,24px)}
-._vchhusvi{box-sizing:border-box}
+._vchhusvi{box-sizing:border-box}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}

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

@@ -72,12 +72,15 @@ var Article = exports.Article = function Article(_ref) {
   }, [history]);
   var onArticleEntered = function onArticleEntered() {
     onArticleEnteredTimeout.current = window.setTimeout(function () {
+      var _articleContainerRef$;
       // if skipArticleSlideInAnimation is true, set to false after the
       // first slide-in animation
       // NOTE: skipArticleSlideInAnimation could be true only after the mounting
       if (skipArticleSlideInAnimation) {
         setSkipArticleSlideInAnimation(false);
       }
+      // Move focus to the article container for accessibility
+      (_articleContainerRef$ = articleContainerRef.current) === null || _articleContainerRef$ === void 0 || _articleContainerRef$.focus();
     }, _constants.SLIDEIN_OVERLAY_TRANSITION_DURATION_MS);
   };
   var onArticleExit = function onArticleExit() {
@@ -127,8 +130,9 @@ var Article = exports.Article = function Article(_ref) {
   }, function (state) {
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: articleContainerRef,
+      tabIndex: -1,
       style: _objectSpread(_objectSpread({}, transitionStyles[state]), enableTransition[!skipArticleSlideInAnimation ? 'enabled' : 'disabled']),
-      className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _19bv1ejb _u5f31ejb _n3tdpxbi _kqswstnw _4t3i1kz6 _1bsb1osq _154i1eca _bfhkvuon _1ltv1osq _2lx21bp4 _vchhusvi _1reo15vq _18m91wug _1pbycs5v"])
+      className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _19bv1ejb _u5f31ejb _n3tdpxbi _kqswstnw _4t3i1kz6 _1bsb1osq _154i1eca _bfhkvuon _1ltv1osq _2lx21bp4 _vchhusvi _1reo15vq _18m91wug _1pbycs5v _nt751r31 _49pcglyw _1hvw1o36"])
     }, /*#__PURE__*/_react.default.createElement(_ArticleContent.default, {
       currentArticle: currentArticle,
       onHelpArticleLoadingFailTryAgainButtonClick: reloadHelpArticle && handleOnHelpArticleLoadingFailTryAgainButtonClick,
@@ -145,8 +149,9 @@ var Article = exports.Article = function Article(_ref) {
   }, function (state) {
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: articleContainerRef,
+      tabIndex: -1,
       style: _objectSpread(_objectSpread({}, transitionStyles[state]), enableTransition[!skipArticleSlideInAnimation ? 'enabled' : 'disabled']),
-      className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0qpxbi _u5f31ejb _n3tdpxbi _19bv1ejb _kqswstnw _4t3i1osq _1bsb1osq _154iidpf _bfhkvuon _1ltv1osq _2lx21bp4 _vchhusvi _1reo15vq _18m91wug _1pbycs5v"])
+      className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0qpxbi _u5f31ejb _n3tdpxbi _19bv1ejb _kqswstnw _4t3i1osq _1bsb1osq _154iidpf _bfhkvuon _1ltv1osq _2lx21bp4 _vchhusvi _1reo15vq _18m91wug _1pbycs5v _nt751r31 _49pcglyw _1hvw1o36"])
     }, /*#__PURE__*/_react.default.createElement(_ArticleContent.default, {
       currentArticle: currentArticle,
       onHelpArticleLoadingFailTryAgainButtonClick: reloadHelpArticle && handleOnHelpArticleLoadingFailTryAgainButtonClick,

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

@@ -38,7 +38,8 @@ var articlesList = function articlesList(_ref) {
     minItemsToDisplay = _ref$minItemsToDispla === void 0 ? _constants.MIN_ITEMS_TO_DISPLAY : _ref$minItemsToDispla,
     _ref$numberOfArticles = _ref.numberOfArticlesToDisplay,
     numberOfArticlesToDisplay = _ref$numberOfArticles === void 0 ? _constants.MIN_ITEMS_TO_DISPLAY : _ref$numberOfArticles,
-    onArticlesListItemClick = _ref.onArticlesListItemClick;
+    onArticlesListItemClick = _ref.onArticlesListItemClick,
+    firstExpandedArticleRef = _ref.firstExpandedArticleRef;
   var isExpanded = numberOfArticlesToDisplay > minItemsToDisplay;
   return articles ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     as: "ul",
@@ -46,6 +47,8 @@ var articlesList = function articlesList(_ref) {
     role: "list"
   }, articles.slice(0, numberOfArticlesToDisplay).map(function (article, index) {
     var isVisible = index < minItemsToDisplay || isExpanded;
+    // The first expanded article is at index minItemsToDisplay
+    var isFirstExpandedArticle = index === minItemsToDisplay;
     return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
       as: "li",
       xcss: listStyles,
@@ -66,7 +69,8 @@ var articlesList = function articlesList(_ref) {
       href: article.href,
       trustFactors: article.trustFactors,
       source: article.source,
-      lastPublished: article.lastPublished
+      lastPublished: article.lastPublished,
+      ref: isFirstExpandedArticle ? firstExpandedArticleRef : undefined
     }));
   })) : null;
 };

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

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ArticlesListItem = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _linkExternalShortcut = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-external--shortcut"));
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _reactIntlNext = require("react-intl-next");
-var _thumbsUpLike = _interopRequireDefault(require("@atlaskit/icon/core/migration/thumbs-up--like"));
+var _thumbsUp = _interopRequireDefault(require("@atlaskit/icon/core/thumbs-up"));
 var _styled = require("./styled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var ANALYTICS_CONTEXT_DATA = {
@@ -36,7 +37,7 @@ var highlightText = function highlightText(text) {
   });
   return sections;
 };
-var ArticlesListItem = exports.ArticlesListItem = function ArticlesListItem(_ref) {
+var ArticlesListItem = exports.ArticlesListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var styles = _ref.styles,
     title = _ref.title,
     description = _ref.description,
@@ -66,27 +67,38 @@ var ArticlesListItem = exports.ArticlesListItem = function ArticlesListItem(_ref
   var isSourceVisible = source != null;
   var isLastPublishedVisible = lastPublished != null && lastPublished !== '';
   return /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemWrapper, {
+    ref: ref,
     styles: styles,
     "aria-disabled": "false",
     role: "button",
     href: href,
     onClick: handleOnClick
-  }, /*#__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(_linkExternalShortcut.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__*/
+  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+  _react.default.createElement(_styled.ArticlesListItemLastModified, null, "Last modified: ", lastPublished)), href && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemLinkIcon, null, /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
     LEGACY_size: "small",
     label: "Opens in a new window",
     color: "var(--ds-icon-subtle, ".concat(colors.N90, ")"),
     LEGACY_secondaryColor: "var(--ds-icon-subtle, ".concat(colors.N90, ")")
-  }))), /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemDescription, null, highlightText(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(_thumbsUpLike.default, {
+  }))), /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemDescription, null, highlightText(description)), isSourceVisible && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemSource, null, source), isTrustFactorVisible && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemTrustFactor, null, isNumViewsVisible &&
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+  _react.default.createElement(_styled.ArticlesListItemViewCount, null, trustFactors.numViews, " views"), isHelpfulCountVisible && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemHelpfulCount, null, /*#__PURE__*/_react.default.createElement(_thumbsUp.default, {
     LEGACY_margin: "0 -0.25px 0 0",
     color: "currentColor",
     label: "Like",
     LEGACY_size: "small"
   }), trustFactors.helpfulCount)));
-};
-var ArticlesListItemWithContext = function ArticlesListItemWithContext(props) {
+});
+var ArticlesListItemWithContext = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
     data: ANALYTICS_CONTEXT_DATA
-  }, /*#__PURE__*/_react.default.createElement(ArticlesListItem, props));
-};
-var _default_1 = (0, _reactIntlNext.injectIntl)(ArticlesListItemWithContext);
+  }, /*#__PURE__*/_react.default.createElement(ArticlesListItem, (0, _extends2.default)({
+    ref: ref
+  }, props)));
+});
+var _default_1 = (0, _reactIntlNext.injectIntl)(ArticlesListItemWithContext, {
+  forwardRef: true
+});
 var _default = exports.default = _default_1;

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

@@ -21,11 +21,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var heading = _typography.fontFallback.heading,
   body = _typography.fontFallback.body;
 var articlesListItemWrapperStyles = null;
-var ArticlesListItemWrapper = exports.ArticlesListItemWrapper = function ArticlesListItemWrapper(_ref) {
+var ArticlesListItemWrapper = exports.ArticlesListItemWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var styles = _ref.styles,
     children = _ref.children,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement("a", (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement("a", (0, _extends2.default)({
+    ref: ref
+  }, rest, {
     className: (0, _runtime.ax)(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _2rkofajl _kqswh2mm _vchhusvi _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1ule _80omtlke _syazpsu8 _bfhkqtfy _7ehi13ga _1nrm1r31 _1a3b1r31 _9oik1r31 _1ydc1r31 _c2waglyw _4fprglyw _1bnxglyw _1x28glyw _1iohnqa1 _5goinqa1 _jf4cnqa1 _1726nqa1 _1q5t1r31 _nt751r31 _1dit1r31 _9nxe1r31 _1ohyglyw _49pcglyw _ksodglyw _tpgfglyw _1r9x1o36 _1hvw1o36 _4hz81o36 _12gr1o36 _13roglyw _1bg4glyw _1qb1glyw _1dnaglyw _irr32tgk _1di618xb"]),
     style: _objectSpread(_objectSpread({}, styles), {}, {
       "--_vrm7dk": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
@@ -34,7 +36,7 @@ var ArticlesListItemWrapper = exports.ArticlesListItemWrapper = function Article
       "--_18th9fi": (0, _runtime.ix)("var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"))
     })
   }), children);
-};
+});
 var articlesListItemContainerStyles = null;
 var ArticlesListItemContainer = exports.ArticlesListItemContainer = function ArticlesListItemContainer(_ref2) {
   var children = _ref2.children;
@@ -53,6 +55,7 @@ var articlesListItemLinkIconStyles = null;
 var ArticlesListItemLinkIcon = exports.ArticlesListItemLinkIcon = function ArticlesListItemLinkIcon(_ref4) {
   var children = _ref4.children;
   return /*#__PURE__*/_react.default.createElement("span", {
+    "aria-label": "Opens in a new window",
     className: (0, _runtime.ax)(["_1wpz1wug _bozg1b66 _s7n4nkob"])
   }, children);
 };

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

@@ -24,6 +24,8 @@ var ArticleList = function ArticleList(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     showMoreToggled = _useState2[0],
     setShowMoreToggled = _useState2[1];
+  var firstExpandedArticleRef = (0, _react.useRef)(null);
+  var isExpandingRef = (0, _react.useRef)(false);
   var getMinItemsToDisplay = function getMinItemsToDisplay() {
     return minItemsToDisplay ? minItemsToDisplay : _constants.MIN_ITEMS_TO_DISPLAY;
   };
@@ -36,7 +38,24 @@ var ArticleList = function ArticleList(_ref) {
   var getNumberOfArticlesToDisplay = function getNumberOfArticlesToDisplay(showMoreToggeled) {
     return showMoreToggeled ? getMinItemsToDisplay() : getMaxItemsToDisplay();
   };
+
+  // Focus on the first newly revealed article after expansion
+  (0, _react.useEffect)(function () {
+    if (isExpandingRef.current && !showMoreToggled) {
+      if (firstExpandedArticleRef.current) {
+        firstExpandedArticleRef.current.focus();
+      }
+      isExpandingRef.current = false;
+    }
+  }, [showMoreToggled]);
+  var setFirstExpandedArticleRef = (0, _react.useCallback)(function (element) {
+    firstExpandedArticleRef.current = element;
+  }, []);
   var toggleArticlesList = function toggleArticlesList(event, analyticsEvent) {
+    // Track if we're expanding (going from collapsed to expanded)
+    if (showMoreToggled) {
+      isExpandingRef.current = true;
+    }
     setShowMoreToggled(!showMoreToggled);
     if (onToggleArticlesList) {
       onToggleArticlesList(event, analyticsEvent, !showMoreToggled);
@@ -48,7 +67,9 @@ var ArticleList = function ArticleList(_ref) {
     style: style,
     onArticlesListItemClick: onArticlesListItemClick,
     articles: articles,
-    numberOfArticlesToDisplay: getNumberOfArticlesToDisplay(showMoreToggled)
+    numberOfArticlesToDisplay: getNumberOfArticlesToDisplay(showMoreToggled),
+    minItemsToDisplay: getMinItemsToDisplay(),
+    firstExpandedArticleRef: setFirstExpandedArticleRef
   }), articles.length > getMinItemsToDisplay() && /*#__PURE__*/_react.default.createElement(_ShowMoreButton.default, {
     minItemsToDisplay: getMinItemsToDisplay(),
     maxItemsToDisplay: getMaxItemsToDisplay(),

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _linkExternalShortcut = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-external--shortcut"));
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _notificationIndicator = require("@atlaskit/notification-indicator");
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -54,10 +54,10 @@ var HelpContentButton = function HelpContentButton(_ref) {
     appearance: "primary"
   })), !openInSameTab && href != null && /*#__PURE__*/_react.default.createElement(_styled.HelpContentButtonExternalLinkIcon, {
     dataTestId: "shortcutIcon"
-  }, /*#__PURE__*/_react.default.createElement(_linkExternalShortcut.default, {
+  }, /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
     color: "currentColor",
     LEGACY_size: "small",
-    label: ""
+    label: "Opens in a new window"
   }))));
   var target = href ? openInSameTab ? '_self' : '_blank' : undefined;
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {

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

@@ -15,7 +15,7 @@ var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _search = _interopRequireDefault(require("@atlaskit/icon/core/migration/search"));
-var _crossEditorClose = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross--editor-close"));
+var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
 var _reactIntlNext = require("react-intl-next");
 var _Requests = require("../../../model/Requests");
 var _searchContext = require("../../contexts/searchContext");
@@ -102,10 +102,12 @@ var SearchInput = exports.SearchInput = function SearchInput(_ref) {
     }), searchValue !== '' && /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
       appearance: "subtle",
       onClick: handleOnClearButtonClick,
-      spacing: "none",
+      spacing: "none"
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+      ,
       "aria-label": "Clear",
       className: (0, _runtime.ax)(["_1bsb1tcg _4t3i1tcg"])
-    }, /*#__PURE__*/_react.default.createElement(_crossEditorClose.default, {
+    }, /*#__PURE__*/_react.default.createElement(_cross.default, {
       color: "currentColor",
       spacing: "spacious",
       label: ""

package/dist/cjs/components/Search/SearchResults/SearchExternalSite.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _button = _interopRequireDefault(require("@atlaskit/button"));
-var _linkExternalShortcut = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-external--shortcut"));
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _reactIntlNext = require("react-intl-next");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _messages = require("../../../messages");
@@ -38,7 +38,7 @@ var SearchExternalSite = exports.SearchExternalSite = function SearchExternalSit
     }
   }, /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: "link",
-    iconAfter: /*#__PURE__*/_react.default.createElement(_linkExternalShortcut.default, {
+    iconAfter: /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
       LEGACY_size: "small",
       label: "",
       color: "var(--ds-icon-subtle, ".concat(colors.N90, ")"),

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

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _button = _interopRequireDefault(require("@atlaskit/button"));
-var _linkExternalShortcut = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-external--shortcut"));
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _reactIntlNext = require("react-intl-next");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _NotFoundImage = _interopRequireDefault(require("../../../assets/NotFoundImage"));
@@ -39,7 +39,7 @@ var SearchResultsEmpty = exports.SearchResultsEmpty = function SearchResultsEmpt
     }
   }, /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: "link",
-    iconAfter: /*#__PURE__*/_react.default.createElement(_linkExternalShortcut.default, {
+    iconAfter: /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
       LEGACY_size: "small",
       label: "",
       color: "var(--ds-icon-subtle, ".concat(colors.N90, ")"),

package/dist/es2019/assets/IconWrapper.js

@@ -4,14 +4,12 @@ import { IconTile } from '@atlaskit/icon';
 import { fg } from '@atlaskit/platform-feature-flags';
 export const IconWrapper = ({
   Icon,
-  LegacyIcon,
   appearance
 }) => {
   return /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
     justifyContent: "center"
   }, !fg('platform-visual-refresh-icons') ? /*#__PURE__*/React.createElement(Icon, {
-    LEGACY_fallbackIcon: LegacyIcon,
     label: "",
     color: "var(--ds-icon-inverse, #FFFFFF)"
   }) :