@atlaskit/help 7.2.30 → 7.3.0

package/dist/cjs/components/WhatsNew/WhatsNewResults/styled.js

@@ -5,12 +5,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.WhatsNewResultsListTitleContainer = exports.WhatsNewResultsListContainer = exports.WhatsNewResultsContainer = exports.SelectContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _constants = require("@atlaskit/theme/constants");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
-var WhatsNewResultsContainer = exports.WhatsNewResultsContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 1;\n  padding: ", ";\n"])), "var(--ds-surface, #FFFFFF)", "var(--ds-space-200, 16px)");
-var SelectContainer = exports.SelectContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n"])), 19 * (0, _constants.gridSize)());
-var WhatsNewResultsListContainer = exports.WhatsNewResultsListContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", ";\n"])), "var(--ds-space-100, 8px)");
-var WhatsNewResultsListTitleContainer = exports.WhatsNewResultsListTitleContainer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", ";\n"])), "var(--ds-space-100, 8px)");
+
+var WhatsNewResultsContainer = exports.WhatsNewResultsContainer = _styled.default.div({
+  position: 'absolute',
+  height: '100%',
+  width: '100%',
+  top: 0,
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  flex: 1,
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  zIndex: 1,
+  padding: "var(--ds-space-200, 16px)"
+});
+var SelectContainer = exports.SelectContainer = _styled.default.div({
+  width: "".concat(19 * (0, _constants.gridSize)(), "px")
+});
+var WhatsNewResultsListContainer = exports.WhatsNewResultsListContainer = _styled.default.div({
+  paddingTop: "var(--ds-space-100, 8px)"
+});
+var WhatsNewResultsListTitleContainer = exports.WhatsNewResultsListTitleContainer = _styled.default.div({
+  padding: "0 ".concat("var(--ds-space-100, 8px)")
+});

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

@@ -27,7 +27,8 @@ var SearchContextProvider = exports.SearchContextProvider = function SearchConte
     onSearchResultItemClick = _ref.onSearchResultItemClick,
     onSearchExternalUrlClick = _ref.onSearchExternalUrlClick,
     searchExternalUrl = _ref.searchExternalUrl,
-    children = _ref.children;
+    children = _ref.children,
+    openExternalSearchUrlInNewTab = _ref.openExternalSearchUrlInNewTab;
   // Search
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -124,7 +125,8 @@ var SearchContextProvider = exports.SearchContextProvider = function SearchConte
       searchExternalUrl: searchExternalUrl,
       searchResult: searchResult,
       searchState: searchState,
-      searchValue: searchValue
+      searchValue: searchValue,
+      openExternalSearchUrlInNewTab: openExternalSearchUrlInNewTab
     }
   }, children);
 };

package/dist/cjs/components/styled.js

@@ -5,14 +5,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Home = exports.HelpBodyContainer = exports.HelpBody = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
-var HelpBodyContainer = exports.HelpBodyContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  min-height: 0;\n  position: relative;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-content: stretch;\n  align-items: flex-start;\n"])));
-var HelpBody = exports.HelpBody = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  box-sizing: border-box;\n  order: 0;\n  flex: 1 1 auto;\n  align-self: auto;\n  position: relative;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
-var Home = exports.Home = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n  height: 100%;\n  overflow: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), function (props) {
-  return props.isOverlayFullyVisible ? 'none' : 'block';
-}, function (props) {
-  return props.isOverlayVisible ? 'hidden' : 'auto';
-}, "var(--ds-space-200, 16px)");
+
+var HelpBodyContainer = exports.HelpBodyContainer = _styled.default.div({
+  flexGrow: 1,
+  minHeight: 0,
+  position: 'relative',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  flexWrap: 'nowrap',
+  justifyContent: 'flex-start',
+  alignContent: 'stretch',
+  alignItems: 'flex-start'
+});
+var HelpBody = exports.HelpBody = _styled.default.div({
+  width: '100%',
+  boxSizing: 'border-box',
+  order: 0,
+  flex: '1 1 auto',
+  alignSelf: 'auto',
+  position: 'relative',
+  overflowX: 'hidden',
+  overflowY: 'auto'
+});
+var Home = exports.Home = _styled.default.div(function (props) {
+  return {
+    display: props.isOverlayFullyVisible ? 'none' : 'block',
+    height: '100%',
+    overflow: props.isOverlayVisible ? 'hidden' : 'auto',
+    padding: "var(--ds-space-200, 16px)",
+    boxSizing: 'border-box'
+  };
+});

package/dist/cjs/model/Help.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ARTICLE_TYPE = void 0;
-var _Article = require("./Article");
 var ARTICLE_TYPE = exports.ARTICLE_TYPE = /*#__PURE__*/function (ARTICLE_TYPE) {
   ARTICLE_TYPE["HELP_ARTICLE"] = "HELP_ARTICLE";
   ARTICLE_TYPE["WHATS_NEW"] = "WHATS_NEW";

package/dist/cjs/util/styled.js

@@ -12,42 +12,81 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _constants = require("@atlaskit/theme/constants");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _WhatsNew = require("../model/WhatsNew");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject;
 /** @jsx jsx */
 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 DividerLine = exports.DividerLine = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 2px;\n  width: 100%;\n  padding: 0 ", ";\n  margin-top: ", ";\n  box-sizing: border-box;\n"])), "var(--ds-border, ".concat(colors.N30A, ")"), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
+var DividerLine = exports.DividerLine = _styled.default.div({
+  backgroundColor: "var(--ds-border, ".concat(colors.N30A, ")"),
+  height: '2px',
+  width: '100%',
+  padding: "0 ".concat("var(--ds-space-200, 16px)"),
+  marginTop: "var(--ds-space-200, 16px)",
+  boxSizing: 'border-box'
+});
 
 /**
  * Loading container
  */
 
-var shimmer = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    0% {\n        background-position: -300px 0;\n    }\n    100% {\n        background-position: 1000px 0;\n    }\n"])));
-var LoadingRectangle = exports.LoadingRectangle = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: middle;\n  position: relative;\n  height: ", ";\n  margin-top: ", ";\n  width: ", ";\n  border-radius: 2px;\n  animation-duration: 1.2s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n  background-color: ", ";\n  background-image: linear-gradient(\n    to right,\n    ", " 10%,\n    ", " 20%,\n    ", " 30%\n  );\n  background-repeat: no-repeat;\n"])), function (props) {
-  return props.contentHeight ? props.contentHeight : '1rem';
-}, function (props) {
-  return props.marginTop ? props.marginTop : (0, _constants.gridSize)() + 'px';
-}, function (props) {
-  return props.contentWidth ? props.contentWidth : '100%';
-}, shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));
+var shimmer = (0, _react.keyframes)({
+  '0%': {
+    backgroundPosition: '-300px 0'
+  },
+  '100%': {
+    backgroundPosition: '1000px 0'
+  }
+});
+var LoadingRectangle = exports.LoadingRectangle = _styled.default.div(function (props) {
+  return {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    position: 'relative',
+    height: props.contentHeight ? props.contentHeight : '1rem',
+    marginTop: props.marginTop ? props.marginTop : (0, _constants.gridSize)() + 'px',
+    width: props.contentWidth ? props.contentWidth : '100%',
+    borderRadius: '2px',
+    animationDuration: '1.2s',
+    animationFillMode: 'forwards',
+    animationIterationCount: 'infinite',
+    animationName: shimmer,
+    animationTimingFunction: 'linear',
+    backgroundColor: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
+    backgroundImage: "linear-gradient( to right, ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), " 10%, ", "var(--ds-background-neutral, ".concat(colors.N40, ")"), " 20%, ", "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), " 30% )"),
+    backgroundRepeat: 'no-repeat'
+  };
+});
 
 /**
  * Loading Circle
  */
 
-var LoadingCircle = exports.LoadingCircle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: middle;\n  position: relative;\n  height: ", ";\n  margin-top: ", ";\n  width: ", ";\n  border-radius: 50%;\n  animation-duration: 1.2s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n  background-color: ", ";\n  background-image: linear-gradient(\n    to right,\n    ", " 10%,\n    ", " 20%,\n    ", " 30%\n  );\n  background-repeat: no-repeat;\n"])), function (props) {
-  return props.radius ? props.radius : "".concat((0, _constants.gridSize)() * 4, "px");
-}, function (props) {
-  return props.marginTop ? props.marginTop : '';
-}, function (props) {
-  return props.radius ? props.radius : "".concat((0, _constants.gridSize)() * 4, "px");
-}, shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));
+var LoadingCircle = exports.LoadingCircle = _styled.default.div(function (props) {
+  return {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    position: 'relative',
+    height: props.radius ? props.radius : "".concat((0, _constants.gridSize)() * 4, "px"),
+    marginTop: props.marginTop ? props.marginTop : '',
+    width: props.radius ? props.radius : "".concat((0, _constants.gridSize)() * 4, "px"),
+    borderRadius: '50%',
+    animationDuration: '1.2s',
+    animationFillMode: 'forwards',
+    animationIterationCount: 'infinite',
+    animationName: shimmer,
+    animationTimingFunction: 'linear',
+    backgroundColor: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
+    backgroundImage: "linear-gradient( to right, ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), " 10%, ", "var(--ds-background-neutral, ".concat(colors.N40, ")"), " 20%, ", "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), " 30% )"),
+    backgroundRepeat: 'no-repeat'
+  };
+});
 
 /**
  * What's new icon
  */
 
-var WhatsNewTypeIcon = exports.WhatsNewTypeIcon = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: middle;\n  position: relative;\n  height: ", ";\n  width: ", ";\n  border-radius: 2px;\n  background-color: ", ";\n\n  & > img {\n    width: calc(100% - ", "px);\n    height: calc(100% - ", "px);\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    & > svg {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", function (_ref) {
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
+var WhatsNewTypeIcon = exports.WhatsNewTypeIcon = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: middle;\n  position: relative;\n  height: ", ";\n  width: ", ";\n  border-radius: 2px;\n  background-color: ", ";\n\n  & > img {\n    width: calc(100% - ", "px);\n    height: calc(100% - ", "px);\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    & > svg {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", function (_ref) {
   var type = _ref.type;
   switch (type) {
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.IMPROVEMENT:

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.2.30"
+  packageVersion: "7.3.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.2.30"
+  packageVersion: "7.3.0"
 };
 export const ArticleLoadingFail = ({
   onTryAgainButtonClick,

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

@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
-export const LoadingErrorMessage = styled.div`
-  padding-top: ${"var(--ds-space-300, 24px)"};
-  text-align: center;
-`;
-export const LoadingErrorButtonContainer = styled.div`
-  padding-top: ${"var(--ds-space-300, 24px)"};
-  text-align: center;
-`;
+export const LoadingErrorMessage = styled.div({
+  paddingTop: "var(--ds-space-300, 24px)",
+  textAlign: 'center'
+});
+export const LoadingErrorButtonContainer = styled.div({
+  paddingTop: "var(--ds-space-300, 24px)",
+  textAlign: 'center'
+});

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.2.30"
+  packageVersion: "7.3.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.2.30"
+  packageVersion: "7.3.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.2.30"
+  packageVersion: "7.3.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.2.30"
+      packageVersion: "7.3.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.2.30"
+  packageVersion: "7.3.0"
 };
 export const WhatsNewArticle = ({
   intl: {

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

@@ -1,18 +1,18 @@
 /** @jsx jsx */
 
 import styled from '@emotion/styled';
-export const ArticleContainer = styled.div`
-  padding: ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-300, 24px)"};
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  background-color: ${"var(--ds-surface, #FFFFFF)"};
-  left: 100%;
-  flex: 1;
-  flex-direction: column;
-  box-sizing: border-box;
-  overflow-x: hidden;
-  overflow-y: auto;
-  z-index: 2;
-`;
+export const ArticleContainer = styled.div({
+  padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-300, 24px)"}`,
+  position: 'absolute',
+  height: '100%',
+  width: '100%',
+  top: 0,
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  left: '100%',
+  flex: 1,
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  zIndex: 2
+});

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

@@ -7,7 +7,7 @@ import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTit
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.30"
+  packageVersion: "7.3.0"
 };
 export const ArticlesListItem = ({
   styles,

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

@@ -2,18 +2,18 @@
 
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-export const truncate = (width = '100%') => css`
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: ${width};
-`;
-export const ArticlesListContainer = styled.div`
-  position: relative;
-`;
-export const ToggleShowMoreArticlesContainer = styled.div`
-  padding: ${"var(--ds-space-100, 8px)"} 0;
-  span {
-    margin: 0;
+export const truncate = (width = '100%') => css({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  width: width
+});
+export const ArticlesListContainer = styled.div({
+  position: 'relative'
+});
+export const ToggleShowMoreArticlesContainer = styled.div({
+  padding: `${"var(--ds-space-100, 8px)"} 0`,
+  span: {
+    margin: 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.2.30"
+  packageVersion: "7.3.0"
 };
 const HelpContentButton = ({
   id = '',

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

@@ -2,6 +2,7 @@
 
 import styled from 'styled-components';
 import * as colors from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation (styled components used)
 export const HelpContentButtonContainer = styled.a`
   display: block;
   cursor: pointer;
@@ -32,6 +33,8 @@ export const HelpContentButtonContainer = styled.a`
     background-color: ${`var(--ds-background-neutral-subtle-pressed, ${colors.B50})`};
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation (styled components used)
 export const HelpContentButtonIcon = styled.div`
   display: inline-block;
   vertical-align: middle;
@@ -47,6 +50,8 @@ export const HelpContentButtonIcon = styled.div`
     transform: translate(-50%, -50%);
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation (styled components used)
 export const HelpContentButtonText = styled.div`
   width: calc(100% - 20px);
   display: inline-block;
@@ -54,11 +59,15 @@ export const HelpContentButtonText = styled.div`
   padding: 0 ${"var(--ds-space-100, 8px)"};
   box-sizing: border-box;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation (styled components used)
 export const HelpContentButtonExternalLinkIcon = styled.div`
   display: inline-block;
   vertical-align: middle;
   padding-left: ${"var(--ds-space-050, 4px)"};
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation (styled components used)
 export const HelpContentButtonExternalNotificationIcon = styled.div`
   display: inline-block;
   vertical-align: middle;

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.2.30";
+const packageVersion = "7.3.0";
 export const RelatedArticles = ({
   style = 'primary',
   routeGroup,

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

@@ -9,36 +9,35 @@ const baseHeading = (size, lineHeight) => `
   font-style: inherit;
   line-height: ${lineHeight / size};
 `;
-export const truncate = (width = '100%') => css`
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: ${width};
-`;
-export const RelatedArticlesTitle = styled.div`
-  ${baseHeading(16, 20)}
-  color: ${`var(--ds-text, ${colors.N800})`};
-  font-weight: 600;
-  letter-spacing: -0.006em;
-  padding: ${"var(--ds-space-200, 16px)"} 0;
-`;
+export const truncate = (width = '100%') => css({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  width: width
+});
+export const RelatedArticlesTitle = styled.div(baseHeading(16, 20), {
+  color: `var(--ds-text, ${colors.N800})`,
+  fontWeight: 600,
+  letterSpacing: '-0.006em',
+  padding: `${"var(--ds-space-200, 16px)"} 0`
+});
 
 /**
  * Loading styled-components
  */
-export const LoadignRelatedArticleSection = styled.div`
-  margin-top: ${"var(--ds-space-100, 8px)"};
-`;
-export const LoadignRelatedArticleList = styled.ul`
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-`;
-export const LoadignRelatedArticleListItem = styled.li`
-  display: block;
-  width: 100%;
-  padding: ${"var(--ds-space-100, 8px)"};
-  margin-bottom: ${"var(--ds-space-200, 16px)"};
-  box-sizing: border-box;
-`;
+export const LoadignRelatedArticleSection = styled.div({
+  marginTop: "var(--ds-space-100, 8px)"
+});
+export const LoadignRelatedArticleList = styled.ul({
+  width: '100%',
+  margin: 0,
+  padding: 0,
+  boxSizing: 'border-box'
+});
+export const LoadignRelatedArticleListItem = styled.li({
+  display: 'block',
+  width: '100%',
+  padding: "var(--ds-space-100, 8px)",
+  marginBottom: "var(--ds-space-200, 16px)",
+  boxSizing: 'border-box'
+});

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.2.30"
+  packageVersion: "7.3.0"
 };
 export const SearchInput = ({
   intl: {

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

@@ -1,37 +1,33 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
-export const SearchInputContainer = styled.div`
-  order: 0;
-  flex: 0 1 auto;
-  align-self: auto;
-  width: 100%;
-  box-sizing: border-box;
-`;
-export const SearchIconContainer = styled.div`
-  width: ${"var(--ds-space-300, 24px)"};
-  height: ${"var(--ds-space-300, 24px)"};
-  padding-left: ${"var(--ds-space-050, 4px)"};
-
-  & > span {
-    padding-left: ${"var(--ds-space-050, 4px)"};
-    height: ${"var(--ds-space-300, 24px)"};
-    width: ${"var(--ds-space-300, 24px)"};
-    box-sizing: border-box;
+export const SearchInputContainer = styled.div({
+  order: 0,
+  flex: '0 1 auto',
+  alignSelf: 'auto',
+  width: '100%',
+  boxSizing: 'border-box'
+});
+export const SearchIconContainer = styled.div({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)",
+  paddingLeft: "var(--ds-space-050, 4px)",
+  '& > span': {
+    paddingLeft: "var(--ds-space-050, 4px)",
+    height: "var(--ds-space-300, 24px)",
+    width: "var(--ds-space-300, 24px)",
+    boxSizing: 'border-box'
   }
-`;
-export const CloseButtonAndSpinnerContainer = styled.div`
-  font-size: 0;
-  padding-right: ${"var(--ds-space-100, 8px)"};
-  position: relative;
-  white-space: nowrap;
-
-  & > span {
-    padding-right: ${"var(--ds-space-050, 4px)"};
+});
+export const CloseButtonAndSpinnerContainer = styled.div({
+  fontSize: 0,
+  paddingRight: "var(--ds-space-100, 8px)",
+  position: 'relative',
+  whiteSpace: 'nowrap',
+  '& > span': {
+    paddingRight: "var(--ds-space-050, 4px)"
+  },
+  '& > button, & > span': {
+    display: 'inline-block',
+    verticalAlign: 'middle'
   }
-
-  & > button,
-  & > span {
-    display: inline-block;
-    vertical-align: middle;
-  }
-`;
+});

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

@@ -41,19 +41,24 @@ export const SearchResults = () => {
     isSearchResultVisible,
     onSearch,
     onSearchResultItemClick,
-    onSearchExternalUrlClick
+    onSearchExternalUrlClick,
+    openExternalSearchUrlInNewTab
   } = useSearchContext();
   const {
     openArticle,
     view
   } = useNavigationContext();
   const handleOnSearchResultItemClick = useCallback((event, analyticsEvent, articleData) => {
-    openArticle({
-      id: articleData.id,
-      type: ARTICLE_TYPE.HELP_ARTICLE
-    });
+    if (!openExternalSearchUrlInNewTab || articleData.href == null) {
+      openArticle({
+        id: articleData.id,
+        type: ARTICLE_TYPE.HELP_ARTICLE
+      });
+    } else {
+      window.open(articleData.href, '_blank');
+    }
     onSearchResultItemClick(event, analyticsEvent, articleData);
-  }, [onSearchResultItemClick, openArticle]);
+  }, [onSearchResultItemClick, openArticle, openExternalSearchUrlInNewTab]);
   return /*#__PURE__*/React.createElement(Transition, {
     in: view === VIEW.SEARCH && isSearchResultVisible,
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS