@atlaskit/smart-card 23.4.0 → 23.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 23.4.2
+
+### Patch Changes
+
+- [`306c81c6551`](https://bitbucket.org/atlassian/atlassian-frontend/commits/306c81c6551) - [ux] Added unresolved views for a Flexible Block card. At the moment these views are not exposed, but they will be used when a Block Card is replaced with Flexible UI.
+
+## 23.4.1
+
+### Patch Changes
+
+- [`9dd78d9e76e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9dd78d9e76e) - [ux] Update button text on inline card unauthorised view to include provider name
+
 ## 23.4.0
 
 ### Minor Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.4.0",
+	"version": "23.4.2",
 	"sideEffects": false
 }

package/dist/cjs/view/BlockCard/actions/flexible/AuthorizeAction.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AuthorizeAction = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _constants = require("../../../../constants");
+
+var _messages = require("../../../../messages");
+
+/**
+ * Returns a CustomActionItem with a "Connect" default message
+ *
+ * @see CustomActionItem
+ * @param onAuthorize a function that will be called on the click of the button
+ */
+var AuthorizeAction = function AuthorizeAction(onAuthorize) {
+  return {
+    name: _constants.ActionName.CustomAction,
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_link_account_card),
+    onClick: onAuthorize
+  };
+};
+
+exports.AuthorizeAction = AuthorizeAction;

package/dist/cjs/view/BlockCard/actions/flexible/ForbiddenAction.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ForbiddenAction = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _constants = require("../../../../constants");
+
+var _messages = require("../../../../messages");
+
+/**
+ * Returns a CustomActionItem with a "Try Another Account" default message
+ *
+ * @see CustomActionItem
+ * @param onAuthorize a function that will be called on the click of the button
+ */
+var ForbiddenAction = function ForbiddenAction(onAuthorize) {
+  return {
+    name: _constants.ActionName.CustomAction,
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_another_account),
+    onClick: onAuthorize
+  };
+};
+
+exports.ForbiddenAction = ForbiddenAction;

package/dist/cjs/view/BlockCard/actions/flexible/RetryAction.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RetryAction = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _constants = require("../../../../constants");
+
+var _messages = require("../../../../messages");
+
+/**
+ * Returns a CustomActionItem with a "Retry" default message
+ *
+ * @see CustomActionItem
+ * @param onRetry a function that will be called on the click of the "Retry" button
+ */
+var RetryAction = function RetryAction(onRetry) {
+  return {
+    name: _constants.ActionName.CustomAction,
+    onClick: onRetry,
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again)
+  };
+};
+
+exports.RetryAction = RetryAction;

package/dist/cjs/view/BlockCard/components/flexible/footer/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _elements = require("../../../../FlexibleCard/components/elements");
+
+var _elementGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/element-group"));
+
+var _constants = require("../../../../../constants");
+
+var _actionGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/action-group"));
+
+var _templateObject, _templateObject2;
+
+var getActionGroupStyles = function getActionGroupStyles(size) {
+  if (size === _constants.SmartLinkSize.XLarge) {
+    // The biggest height of the action button exceeds the max line-height
+    // of the elements causing the action on the block with x-large size to
+    // get cut at the bottom.
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      max-height: 2rem;\n    "])));
+  }
+};
+
+var providerStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  span:first-child {\n    margin-right: 0.375rem;\n  }\n"])));
+/**
+ * This Components is a footer that is used in a Block Card with Flexible UI.
+ * It contains a provider icon if provider is present and an actions list if one is passed.
+ * To be shown as a part of Flexible UI, needs to be wrapped inside of a CustomBlock
+ *
+ * @see CustomBlock
+ * @param props are the data required for the block, such as actions to be displayed.
+ */
+
+var Footer = function Footer(props) {
+  var actions = props.actions,
+      _props$size = props.size,
+      size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
+      _props$testId = props.testId,
+      testId = _props$testId === void 0 ? 'smart-block-card-footer' : _props$testId;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId
+  }, /*#__PURE__*/_react.default.createElement(_elements.Provider, {
+    testId: "".concat(testId, "-provider"),
+    overrideCss: providerStyles
+  }), actions && actions.length > 0 ? /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    testId: "smart-element-group-actions",
+    align: _constants.SmartLinkAlignment.Right,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    overrideCss: getActionGroupStyles(size),
+    width: _constants.SmartLinkWidth.Flexible
+  }, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
+    items: actions,
+    appearance: "default"
+  })) : null);
+};
+
+var _default = Footer;
+exports.default = _default;

package/dist/cjs/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
+
+var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
+
+var _messages = require("../../../../messages");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+
+var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
+
+var _RetryAction = require("../../actions/flexible/RetryAction");
+
+var _blocks = require("../../../FlexibleCard/components/blocks");
+
+var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * This view represents a Block Card with an 'Errored' status.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var FlexibleErroredView = function FlexibleErroredView(_ref) {
+  var cardState = _ref.cardState,
+      onAuthorize = _ref.onAuthorize,
+      onError = _ref.onError,
+      ui = _ref.ui,
+      url = _ref.url,
+      onClick = _ref.onClick,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-errored-view' : _ref$testId;
+  var status = cardState.status;
+  var actions = (0, _react.useMemo)(function () {
+    return onAuthorize ? [(0, _RetryAction.RetryAction)(onAuthorize)] : [];
+  }, [onAuthorize]);
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+    hideRetry: true
+  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
+    label: "errored-warning-icon",
+    size: "small",
+    primaryColor: (0, _tokens.token)('color.icon.warning', _colors.R300),
+    testId: "".concat(testId, "-warning-icon")
+  }), /*#__PURE__*/_react.default.createElement(_text.default, {
+    message: {
+      descriptor: _messages.messages.could_not_load_link
+    }
+  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
+    actions: actions,
+    status: status
+  })));
+};
+
+var _default = FlexibleErroredView;
+exports.default = _default;

package/dist/cjs/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
+
+var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
+
+var _blocks = require("../../../FlexibleCard/components/blocks");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _messages = require("../../../../messages");
+
+var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
+
+var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
+
+var _ForbiddenAction = require("../../actions/flexible/ForbiddenAction");
+
+var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * This view represent a Block Card with the 'Forbidden' status.
+ * It should have a "Try another account" button that will allow a user to connect another account and view the block card.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
+  var cardState = _ref.cardState,
+      onAuthorize = _ref.onAuthorize,
+      onClick = _ref.onClick,
+      onError = _ref.onError,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-forbidden-view' : _ref$testId,
+      ui = _ref.ui,
+      url = _ref.url;
+  var status = cardState.status;
+  var actions = (0, _react.useMemo)(function () {
+    return onAuthorize ? [(0, _ForbiddenAction.ForbiddenAction)(onAuthorize)] : [];
+  }, [onAuthorize]);
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+    hideRetry: true
+  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
+    label: "forbidden-lock-icon",
+    size: "small",
+    primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300),
+    testId: "".concat(testId, "-lock-icon")
+  }), /*#__PURE__*/_react.default.createElement(_text.default, {
+    message: {
+      descriptor: _messages.messages.invalid_permissions_description
+    }
+  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
+    actions: actions,
+    status: status
+  })));
+};
+
+var _default = FlexibleForbiddenView;
+exports.default = _default;

package/dist/cjs/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
+
+var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
+
+var _messages = require("../../../../messages");
+
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+
+var _tokens = require("@atlaskit/tokens");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
+
+var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
+
+var _blocks = require("../../../FlexibleCard/components/blocks");
+
+/**
+ * This view represents a Block Card with a 'Not_Found' status.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
+  var cardState = _ref.cardState,
+      onAuthorize = _ref.onAuthorize,
+      onError = _ref.onError,
+      ui = _ref.ui,
+      url = _ref.url,
+      onClick = _ref.onClick,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId;
+  var status = cardState.status;
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+    hideRetry: true
+  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
+    label: "not-found-warning-icon",
+    size: "small",
+    primaryColor: (0, _tokens.token)('color.icon.warning', _colors.R300),
+    testId: "".concat(testId, "-warning-icon")
+  }), /*#__PURE__*/_react.default.createElement(_text.default, {
+    message: {
+      descriptor: _messages.messages.not_found_description
+    },
+    testId: testId
+  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
+    status: status
+  })));
+};
+
+var _default = FlexibleNotFoundView;
+exports.default = _default;

package/dist/cjs/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
+
+var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
+
+var _messages = require("../../../../messages");
+
+var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
+
+var _AuthorizeAction = require("../../actions/flexible/AuthorizeAction");
+
+var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
+
+var _blocks = require("../../../FlexibleCard/components/blocks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * This view represents a Block card that has an 'Unauthorized' status .
+ * It should have a "Connect" button that will allow a user to connect their account and view the block card.
+ *
+ * @see SmartLinkStatus
+ * @see UnauthorisedViewProps
+ */
+var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
+  var cardState = _ref.cardState,
+      _ref$providerName = _ref.providerName,
+      providerName = _ref$providerName === void 0 ? '' : _ref$providerName,
+      onAuthorize = _ref.onAuthorize,
+      onClick = _ref.onClick,
+      onError = _ref.onError,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-unauthorized-view' : _ref$testId,
+      ui = _ref.ui,
+      url = _ref.url;
+  var status = cardState.status;
+  var actions = (0, _react.useMemo)(function () {
+    return onAuthorize ? [(0, _AuthorizeAction.AuthorizeAction)(onAuthorize)] : [];
+  }, [onAuthorize]);
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+    hideRetry: true
+  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_text.default, {
+    message: {
+      descriptor: _messages.messages.connect_link_account_card_description,
+      values: {
+        context: providerName
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
+    actions: actions,
+    status: status
+  })));
+};
+
+var _default = FlexibleUnauthorisedView;
+exports.default = _default;

package/dist/cjs/view/BlockCard/views/flexible/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/FlexibleCard/components/blocks/index.js

@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CustomBlock", {
+  enumerable: true,
+  get: function get() {
+    return _block.default;
+  }
+});
 Object.defineProperty(exports, "FooterBlock", {
   enumerable: true,
   get: function get() {
@@ -44,4 +50,6 @@ var _previewBlock = _interopRequireDefault(require("./preview-block"));
 
 var _snippetBlock = _interopRequireDefault(require("./snippet-block"));
 
-var _titleBlock = _interopRequireDefault(require("./title-block"));
+var _titleBlock = _interopRequireDefault(require("./title-block"));
+
+var _block = _interopRequireDefault(require("./block"));

package/dist/cjs/view/FlexibleCard/utils.js

@@ -23,6 +23,8 @@ var _utils = require("../../utils");
 
 var _extractors = require("@atlaskit/linking-common/extractors");
 
+var _extractProviderIcon = _interopRequireDefault(require("../../extractors/flexible/icon/extract-provider-icon"));
+
 var getContextByStatus = function getContextByStatus(url, status, details, renderers) {
   switch (status) {
     case _constants.SmartLinkStatus.Pending:
@@ -42,10 +44,12 @@ var getContextByStatus = function getContextByStatus(url, status, details, rende
     case _constants.SmartLinkStatus.Fallback:
     default:
       var linkIcon = (0, _icon.extractErrorIcon)(details, status);
+      var provider = (0, _extractProviderIcon.default)(details === null || details === void 0 ? void 0 : details.data);
       return {
         linkIcon: linkIcon,
         title: url,
-        url: url
+        url: url,
+        provider: provider
       };
   }
 };

package/dist/cjs/view/InlineCard/UnauthorisedView/index.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InlineCardUnauthorizedView = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -76,6 +78,7 @@ var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMessage", function () {
       var _this$props = _this.props,
+          context = _this$props.context,
           onAuthorise = _this$props.onAuthorise,
           url = _this$props.url;
 
@@ -87,7 +90,11 @@ var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
         component: _styled.IconStyledButton,
         onClick: _this.handleConnectAccount,
         testId: "button-connect-account"
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_link_account)));
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {
+        values: {
+          context: context
+        }
+      }))));
     });
     return _this;
   }

package/dist/cjs/view/InlineCard/index.js

@@ -122,6 +122,7 @@ var InlineCard = function InlineCard(_ref) {
       var provider = (0, _extractors.extractProvider)(cardDetails);
       return /*#__PURE__*/_react.default.createElement(_UnauthorisedView.InlineCardUnauthorizedView, {
         icon: provider && provider.icon,
+        context: provider && provider.text,
         url: url,
         isSelected: isSelected,
         onClick: handleFrameClick,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.4.0",
+	"version": "23.4.2",
 	"sideEffects": false
 }

package/dist/es2019/view/BlockCard/actions/flexible/AuthorizeAction.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ActionName } from '../../../../constants';
+import { messages } from '../../../../messages';
+/**
+ * Returns a CustomActionItem with a "Connect" default message
+ *
+ * @see CustomActionItem
+ * @param onAuthorize a function that will be called on the click of the button
+ */
+
+export const AuthorizeAction = onAuthorize => ({
+  name: ActionName.CustomAction,
+  content: /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_card),
+  onClick: onAuthorize
+});

package/dist/es2019/view/BlockCard/actions/flexible/ForbiddenAction.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ActionName } from '../../../../constants';
+import { messages } from '../../../../messages';
+/**
+ * Returns a CustomActionItem with a "Try Another Account" default message
+ *
+ * @see CustomActionItem
+ * @param onAuthorize a function that will be called on the click of the button
+ */
+
+export const ForbiddenAction = onAuthorize => ({
+  name: ActionName.CustomAction,
+  content: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_another_account),
+  onClick: onAuthorize
+});