@atlaskit/help 9.2.0 → 9.2.2

package/dist/es2019/assets/WhatsNewIcoExperiment.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyFlaskIcon from '@atlaskit/legacy-custom-icons/flask-icon';
 import FlaskIcon from '@atlaskit/icon/core/flask';
 import { IconWrapper } from './IconWrapper';
 import { P500 } from '@atlaskit/theme/colors';
 export default function WhatsNewIcoExperiment() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: FlaskIcon,
-    LegacyIcon: LegacyFlaskIcon,
     appearance: `var(--ds-icon-discovery, ${P500})`
   });
 }

package/dist/es2019/assets/WhatsNewIconFix.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyBugIcon from '@atlaskit/legacy-custom-icons/bug-icon';
 import BugIcon from '@atlaskit/icon/core/bug';
 import { IconWrapper } from './IconWrapper';
 import { B500 } from '@atlaskit/theme/colors';
 export default function WhatsNewIconFix() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: BugIcon,
-    LegacyIcon: LegacyBugIcon,
     appearance: `var(--ds-icon-information, ${B500})`
   });
 }

package/dist/es2019/assets/WhatsNewIconImprovement.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyMegaphoneWithStarIcon from '@atlaskit/legacy-custom-icons/megaphone-star-icon';
 import MegaphoneIcon from '@atlaskit/icon/core/megaphone';
 import { IconWrapper } from './IconWrapper';
 import { Y200 } from '@atlaskit/theme/colors';
 export default function WhatsNewIconImprovement() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: MegaphoneIcon,
-    LegacyIcon: LegacyMegaphoneWithStarIcon,
     appearance: `var(--ds-icon-warning, ${Y200})`
   });
 }

package/dist/es2019/assets/WhatsNewIconNew.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyMegaphoneIcon from '@atlaskit/legacy-custom-icons/megaphone-icon';
 import MegaphoneIcon from '@atlaskit/icon/core/megaphone';
 import { IconWrapper } from './IconWrapper';
 import { N400 } from '@atlaskit/theme/colors';
 export default function WhatsNewIconNew() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: MegaphoneIcon,
-    LegacyIcon: LegacyMegaphoneIcon,
     appearance: `var(--ds-icon, ${N400})`
   });
 }

package/dist/es2019/assets/WhatsNewIconRemoved.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyDeleteIcon from '@atlaskit/legacy-custom-icons/delete-icon';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import { IconWrapper } from './IconWrapper';
 import { N700 } from '@atlaskit/theme/colors';
 export default function WhatsNewIconRemoved() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: DeleteIcon,
-    LegacyIcon: LegacyDeleteIcon,
     appearance: `var(--ds-icon-disabled, ${N700})`
   });
 }

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

@@ -14,7 +14,7 @@ import Form, { Field, CheckboxField, FormFooter } from '@atlaskit/form';
 import { RadioGroup } from '@atlaskit/radio';
 import { Checkbox } from '@atlaskit/checkbox';
 import TextArea from '@atlaskit/textarea';
-import CheckCircleIcon from '@atlaskit/icon/core/migration/status-success--check-circle';
+import CheckCircleIcon from '@atlaskit/icon/core/status-success';
 import { colors } from '@atlaskit/theme';
 import { Text } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../../messages';
@@ -215,7 +215,9 @@ export const ArticleWasHelpfulForm = ({
           // 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.createElement(CheckCircleIcon, {
         spacing: "spacious",

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { BODY_FORMAT_TYPES } from '@atlaskit/help-article';
 import HelpArticleContent from '@atlaskit/help-article';
-import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button';
 import { messages } from '../../../messages';

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

@@ -1,15 +1,7 @@
-._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}
-._syaz1fxt{color:var(--ds-text,#172b4d)}
-._syaz1rc1{color:var(--ds-text-subtlest,#5e6c84)}
+._s7n4nkob{vertical-align:middle}

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

@@ -2,28 +2,24 @@
 import "./styled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { fontFallback } from '@atlaskit/theme/typography';
-import { N300, N800 } from '@atlaskit/theme/colors';
-const {
-  body
-} = fontFallback;
-const whatsNewTypeTitleStyles = null;
+import Heading from '@atlaskit/heading';
 export const WhatsNewTypeTitle = ({
   children
-}) => /*#__PURE__*/React.createElement("span", {
-  className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c82smr _syaz1rc1 _s7n4nkob _19bv1b66 _o5724jg8 _1reo15vq"])
+}) => /*#__PURE__*/React.createElement(Heading, {
+  size: "xsmall",
+  as: "h3"
 }, children);
 const whatsNewIconContainerStyles = null;
 export const WhatsNewIconContainer = ({
   children
 }) => /*#__PURE__*/React.createElement("div", {
-  className: ax(["_1e0c1ule _n3tdu2gc"])
+  className: ax(["_zulpu2gc _1e0c1txw _n3tdu2gc"])
 }, children);
-const whatsNewTitleText = null;
 export const WhatsNewTitleText = ({
   children
-}) => /*#__PURE__*/React.createElement("span", {
-  className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c82smr _syaz1fxt _k48p1pd9 _o5724jg8 _1reo15vq _n3tdu2gc _1e0c1ule"])
+}) => /*#__PURE__*/React.createElement(Heading, {
+  size: "xsmall",
+  as: "h4"
 }, children);
 const relatedLinkContainerStyles = null;
 export const RelatedLinkContainer = ({

package/dist/es2019/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/es2019/components/Article/index.js

@@ -53,12 +53,15 @@ export const Article = ({
   }, [history]);
   const onArticleEntered = () => {
     onArticleEnteredTimeout.current = window.setTimeout(() => {
+      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 ? void 0 : _articleContainerRef$.focus();
     }, SLIDEIN_OVERLAY_TRANSITION_DURATION_MS);
   };
   const onArticleExit = () => {
@@ -108,13 +111,14 @@ export const Article = ({
   }, state => {
     return /*#__PURE__*/React.createElement("div", {
       ref: articleContainerRef,
+      tabIndex: -1,
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ...transitionStyles[state],
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ...enableTransition[!skipArticleSlideInAnimation ? 'enabled' : 'disabled']
       },
-      className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _19bv1ejb _u5f31ejb _n3tdpxbi _kqswstnw _4t3i1kz6 _1bsb1osq _154i1eca _bfhkvuon _1ltv1osq _2lx21bp4 _vchhusvi _1reo15vq _18m91wug _1pbycs5v"])
+      className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _19bv1ejb _u5f31ejb _n3tdpxbi _kqswstnw _4t3i1kz6 _1bsb1osq _154i1eca _bfhkvuon _1ltv1osq _2lx21bp4 _vchhusvi _1reo15vq _18m91wug _1pbycs5v _nt751r31 _49pcglyw _1hvw1o36"])
     }, /*#__PURE__*/React.createElement(ArticleContent, {
       currentArticle: currentArticle,
       onHelpArticleLoadingFailTryAgainButtonClick: reloadHelpArticle && handleOnHelpArticleLoadingFailTryAgainButtonClick,
@@ -131,13 +135,14 @@ export const Article = ({
   }, state => {
     return /*#__PURE__*/React.createElement("div", {
       ref: articleContainerRef,
+      tabIndex: -1,
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ...transitionStyles[state],
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ...enableTransition[!skipArticleSlideInAnimation ? 'enabled' : 'disabled']
       },
-      className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0qpxbi _u5f31ejb _n3tdpxbi _19bv1ejb _kqswstnw _4t3i1osq _1bsb1osq _154iidpf _bfhkvuon _1ltv1osq _2lx21bp4 _vchhusvi _1reo15vq _18m91wug _1pbycs5v"])
+      className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0qpxbi _u5f31ejb _n3tdpxbi _19bv1ejb _kqswstnw _4t3i1osq _1bsb1osq _154iidpf _bfhkvuon _1ltv1osq _2lx21bp4 _vchhusvi _1reo15vq _18m91wug _1pbycs5v _nt751r31 _49pcglyw _1hvw1o36"])
     }, /*#__PURE__*/React.createElement(ArticleContent, {
       currentArticle: currentArticle,
       onHelpArticleLoadingFailTryAgainButtonClick: reloadHelpArticle && handleOnHelpArticleLoadingFailTryAgainButtonClick,

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

@@ -26,7 +26,8 @@ const articlesList = ({
   articles = [],
   minItemsToDisplay = MIN_ITEMS_TO_DISPLAY,
   numberOfArticlesToDisplay = MIN_ITEMS_TO_DISPLAY,
-  onArticlesListItemClick
+  onArticlesListItemClick,
+  firstExpandedArticleRef
 }) => {
   const isExpanded = numberOfArticlesToDisplay > minItemsToDisplay;
   return articles ? /*#__PURE__*/React.createElement(Box, {
@@ -35,6 +36,8 @@ const articlesList = ({
     role: "list"
   }, articles.slice(0, numberOfArticlesToDisplay).map((article, index) => {
     const isVisible = index < minItemsToDisplay || isExpanded;
+    // The first expanded article is at index minItemsToDisplay
+    const isFirstExpandedArticle = index === minItemsToDisplay;
     return /*#__PURE__*/React.createElement(Box, {
       as: "li",
       xcss: listStyles,
@@ -55,7 +58,8 @@ const articlesList = ({
       href: article.href,
       trustFactors: article.trustFactors,
       source: article.source,
-      lastPublished: article.lastPublished
+      lastPublished: article.lastPublished,
+      ref: isFirstExpandedArticle ? firstExpandedArticleRef : undefined
     }));
   })) : null;
 };

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

@@ -1,9 +1,10 @@
-import React from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
 import * as colors from '@atlaskit/theme/colors';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
-import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import { injectIntl } from 'react-intl-next';
-import LikeIcon from '@atlaskit/icon/core/migration/thumbs-up--like';
+import LikeIcon from '@atlaskit/icon/core/thumbs-up';
 import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon, ArticlesListItemTrustFactor, ArticlesListItemViewCount, ArticlesListItemHelpfulCount, ArticlesListItemSource, ArticlesListItemLastModified, ArticlesListItemTitleSection, ArticlesListItemDescriptionHighlight } from './styled';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
@@ -27,7 +28,7 @@ const highlightText = text => {
   });
   return sections;
 };
-export const ArticlesListItem = ({
+export const ArticlesListItem = /*#__PURE__*/forwardRef(({
   styles,
   title,
   description,
@@ -36,7 +37,7 @@ export const ArticlesListItem = ({
   trustFactors,
   source,
   lastPublished
-}) => {
+}, ref) => {
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
@@ -58,27 +59,38 @@ export const ArticlesListItem = ({
   const isSourceVisible = source != null;
   const isLastPublishedVisible = lastPublished != null && lastPublished !== '';
   return /*#__PURE__*/React.createElement(ArticlesListItemWrapper, {
+    ref: ref,
     styles: styles,
     "aria-disabled": "false",
     role: "button",
     href: href,
     onClick: handleOnClick
-  }, /*#__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, {
+  }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, /*#__PURE__*/React.createElement(ArticlesListItemTitleSection, null, /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title), isLastPublishedVisible &&
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+  React.createElement(ArticlesListItemLastModified, null, "Last modified: ", lastPublished)), href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__PURE__*/React.createElement(ShortcutIcon, {
     LEGACY_size: "small",
     label: "Opens in a new window",
     color: `var(--ds-icon-subtle, ${colors.N90})`,
     LEGACY_secondaryColor: `var(--ds-icon-subtle, ${colors.N90})`
-  }))), /*#__PURE__*/React.createElement(ArticlesListItemDescription, null, highlightText(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, {
+  }))), /*#__PURE__*/React.createElement(ArticlesListItemDescription, null, highlightText(description)), isSourceVisible && /*#__PURE__*/React.createElement(ArticlesListItemSource, null, source), isTrustFactorVisible && /*#__PURE__*/React.createElement(ArticlesListItemTrustFactor, null, isNumViewsVisible &&
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+  React.createElement(ArticlesListItemViewCount, null, trustFactors.numViews, " views"), isHelpfulCountVisible && /*#__PURE__*/React.createElement(ArticlesListItemHelpfulCount, null, /*#__PURE__*/React.createElement(LikeIcon, {
     LEGACY_margin: "0 -0.25px 0 0",
     color: "currentColor",
     label: "Like",
     LEGACY_size: "small"
   }), trustFactors.helpfulCount)));
-};
-const ArticlesListItemWithContext = props => {
+});
+const ArticlesListItemWithContext = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: ANALYTICS_CONTEXT_DATA
-  }, /*#__PURE__*/React.createElement(ArticlesListItem, props));
-};
-const _default_1 = injectIntl(ArticlesListItemWithContext);
+  }, /*#__PURE__*/React.createElement(ArticlesListItem, _extends({
+    ref: ref
+  }, props)));
+});
+const _default_1 = injectIntl(ArticlesListItemWithContext, {
+  forwardRef: true
+});
 export default _default_1;

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

@@ -11,15 +11,16 @@ const {
   body
 } = fontFallback;
 const articlesListItemWrapperStyles = null;
-export const ArticlesListItemWrapper = ({
+export const ArticlesListItemWrapper = /*#__PURE__*/React.forwardRef(({
   styles,
   children,
   ...rest
-}) => /*#__PURE__*/React.createElement("a", _extends({
+}, ref) => /*#__PURE__*/React.createElement("a", _extends({
+  ref: ref,
   style: styles
 }, rest, {
   className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _2rkofajl _kqswh2mm _vchhusvi _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1ule _80omtlke _syaz1wmz _bfhkqtfy _7ehi1ssq _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 _irr314ae _1di61l7b"])
-}), children);
+}), children));
 const articlesListItemContainerStyles = null;
 export const ArticlesListItemContainer = ({
   children
@@ -36,6 +37,7 @@ const articlesListItemLinkIconStyles = null;
 export const ArticlesListItemLinkIcon = ({
   children
 }) => /*#__PURE__*/React.createElement("span", {
+  "aria-label": "Opens in a new window",
   className: ax(["_1wpz1wug _bozg1b66 _s7n4nkob"])
 }, children);
 const articlesListItemTitleTextStyles = null;

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import ArticlesList from './ArticlesList';
 import ShowMoreButton from '../ShowMoreButton';
 import { ArticlesListContainer } from './styled';
@@ -12,6 +12,8 @@ const ArticleList = ({
   onToggleArticlesList
 }) => {
   const [showMoreToggled, setShowMoreToggled] = useState(true);
+  const firstExpandedArticleRef = useRef(null);
+  const isExpandingRef = useRef(false);
   const getMinItemsToDisplay = () => {
     return minItemsToDisplay ? minItemsToDisplay : MIN_ITEMS_TO_DISPLAY;
   };
@@ -24,7 +26,24 @@ const ArticleList = ({
   const getNumberOfArticlesToDisplay = showMoreToggeled => {
     return showMoreToggeled ? getMinItemsToDisplay() : getMaxItemsToDisplay();
   };
+
+  // Focus on the first newly revealed article after expansion
+  useEffect(() => {
+    if (isExpandingRef.current && !showMoreToggled) {
+      if (firstExpandedArticleRef.current) {
+        firstExpandedArticleRef.current.focus();
+      }
+      isExpandingRef.current = false;
+    }
+  }, [showMoreToggled]);
+  const setFirstExpandedArticleRef = useCallback(element => {
+    firstExpandedArticleRef.current = element;
+  }, []);
   const 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);
@@ -36,7 +55,9 @@ const ArticleList = ({
     style: style,
     onArticlesListItemClick: onArticlesListItemClick,
     articles: articles,
-    numberOfArticlesToDisplay: getNumberOfArticlesToDisplay(showMoreToggled)
+    numberOfArticlesToDisplay: getNumberOfArticlesToDisplay(showMoreToggled),
+    minItemsToDisplay: getMinItemsToDisplay(),
+    firstExpandedArticleRef: setFirstExpandedArticleRef
   }), articles.length > getMinItemsToDisplay() && /*#__PURE__*/React.createElement(ShowMoreButton, {
     minItemsToDisplay: getMinItemsToDisplay(),
     maxItemsToDisplay: getMaxItemsToDisplay(),

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

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import Tooltip from '@atlaskit/tooltip';
 import { NotificationIndicator } from '@atlaskit/notification-indicator';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
@@ -48,7 +48,7 @@ const HelpContentButton = ({
   }, /*#__PURE__*/React.createElement(ShortcutIcon, {
     color: "currentColor",
     LEGACY_size: "small",
-    label: ""
+    label: "Opens in a new window"
   }))));
   const target = href ? openInSameTab ? '_self' : '_blank' : undefined;
   return /*#__PURE__*/React.createElement(AnalyticsContext, {

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

@@ -7,7 +7,7 @@ import Textfield from '@atlaskit/textfield';
 import Button from '@atlaskit/button/custom-theme-button';
 import Spinner from '@atlaskit/spinner';
 import SearchIcon from '@atlaskit/icon/core/migration/search';
-import EditorCloseIcon from '@atlaskit/icon/core/migration/cross--editor-close';
+import EditorCloseIcon from '@atlaskit/icon/core/cross';
 import { injectIntl } from 'react-intl-next';
 import { REQUEST_STATE } from '../../../model/Requests';
 import { useSearchContext } from '../../contexts/searchContext';
@@ -98,7 +98,9 @@ export const SearchInput = ({
     }), searchValue !== '' && /*#__PURE__*/React.createElement(Button, {
       appearance: "subtle",
       onClick: handleOnClearButtonClick,
-      spacing: "none",
+      spacing: "none"
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+      ,
       "aria-label": "Clear",
       className: ax(["_1bsb1tcg _4t3i1tcg"])
     }, /*#__PURE__*/React.createElement(EditorCloseIcon, {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button';
-import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import { injectIntl } from 'react-intl-next';
 import { Text } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../messages';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button';
-import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import { injectIntl } from 'react-intl-next';
 import { Text } from '@atlaskit/primitives/compiled';
 import NotFoundImage from '../../../assets/NotFoundImage';

package/dist/esm/assets/IconWrapper.js

@@ -4,13 +4,11 @@ import { IconTile } from '@atlaskit/icon';
 import { fg } from '@atlaskit/platform-feature-flags';
 export var IconWrapper = function IconWrapper(_ref) {
   var Icon = _ref.Icon,
-    LegacyIcon = _ref.LegacyIcon,
     appearance = _ref.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)"
   }) :

package/dist/esm/assets/WhatsNewIcoExperiment.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyFlaskIcon from '@atlaskit/legacy-custom-icons/flask-icon';
 import FlaskIcon from '@atlaskit/icon/core/flask';
 import { IconWrapper } from './IconWrapper';
 import { P500 } from '@atlaskit/theme/colors';
 export default function WhatsNewIcoExperiment() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: FlaskIcon,
-    LegacyIcon: LegacyFlaskIcon,
     appearance: "var(--ds-icon-discovery, ".concat(P500, ")")
   });
 }

package/dist/esm/assets/WhatsNewIconFix.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyBugIcon from '@atlaskit/legacy-custom-icons/bug-icon';
 import BugIcon from '@atlaskit/icon/core/bug';
 import { IconWrapper } from './IconWrapper';
 import { B500 } from '@atlaskit/theme/colors';
 export default function WhatsNewIconFix() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: BugIcon,
-    LegacyIcon: LegacyBugIcon,
     appearance: "var(--ds-icon-information, ".concat(B500, ")")
   });
 }

package/dist/esm/assets/WhatsNewIconImprovement.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyMegaphoneWithStarIcon from '@atlaskit/legacy-custom-icons/megaphone-star-icon';
 import MegaphoneIcon from '@atlaskit/icon/core/megaphone';
 import { IconWrapper } from './IconWrapper';
 import { Y200 } from '@atlaskit/theme/colors';
 export default function WhatsNewIconImprovement() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: MegaphoneIcon,
-    LegacyIcon: LegacyMegaphoneWithStarIcon,
     appearance: "var(--ds-icon-warning, ".concat(Y200, ")")
   });
 }

package/dist/esm/assets/WhatsNewIconNew.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyMegaphoneIcon from '@atlaskit/legacy-custom-icons/megaphone-icon';
 import MegaphoneIcon from '@atlaskit/icon/core/megaphone';
 import { IconWrapper } from './IconWrapper';
 import { N400 } from '@atlaskit/theme/colors';
 export default function WhatsNewIconNew() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: MegaphoneIcon,
-    LegacyIcon: LegacyMegaphoneIcon,
     appearance: "var(--ds-icon, ".concat(N400, ")")
   });
 }

package/dist/esm/assets/WhatsNewIconRemoved.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyDeleteIcon from '@atlaskit/legacy-custom-icons/delete-icon';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import { IconWrapper } from './IconWrapper';
 import { N700 } from '@atlaskit/theme/colors';
 export default function WhatsNewIconRemoved() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: DeleteIcon,
-    LegacyIcon: LegacyDeleteIcon,
     appearance: "var(--ds-icon-disabled, ".concat(N700, ")")
   });
 }

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

@@ -15,7 +15,7 @@ import Form, { Field, CheckboxField, FormFooter } from '@atlaskit/form';
 import { RadioGroup } from '@atlaskit/radio';
 import { Checkbox } from '@atlaskit/checkbox';
 import TextArea from '@atlaskit/textarea';
-import CheckCircleIcon from '@atlaskit/icon/core/migration/status-success--check-circle';
+import CheckCircleIcon from '@atlaskit/icon/core/status-success';
 import { colors } from '@atlaskit/theme';
 import { Text } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../../messages';
@@ -235,7 +235,9 @@ export var ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
           // 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.createElement(CheckCircleIcon, {
         spacing: "spacious",

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { BODY_FORMAT_TYPES } from '@atlaskit/help-article';
 import HelpArticleContent from '@atlaskit/help-article';
-import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button';
 import { messages } from '../../../messages';

package/dist/esm/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}