@atlaskit/smart-card 23.7.0 → 23.7.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 23.7.1
+
+### Patch Changes
+
+- [`33e0b942925`](https://bitbucket.org/atlassian/atlassian-frontend/commits/33e0b942925) - [ux] Flexible Card: Update unauthorised view text messages and connect button
+
 ## 23.7.0
 
 ### Minor Changes

package/dist/cjs/messages.js

@@ -88,6 +88,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Connect {context} to Atlassian to view more details from your work and collaboration from one place.',
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view.'
   },
+  connect_unauthorised_account_description_no_provider: {
+    id: 'fabric.linking.connect_unauthorised_account_description',
+    defaultMessage: 'Connect to Atlassian to view more details from your work and collaboration from one place.',
+    description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view and we do not have the providers name.'
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",

package/dist/cjs/version.json

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

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AuthorizeAction = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -16,15 +18,20 @@ var _constants = require("../../../../constants");
 var _messages = require("../../../../messages");
 
 /**
- * Returns a CustomActionItem with a "Connect" default message
+ * Returns a CustomActionItem with a "Connect to <providerName>" message
  *
  * @see CustomActionItem
  * @param onAuthorize a function that will be called on the click of the button
+ * @param providerName a string which is inserted into the message of the button
  */
-var AuthorizeAction = function AuthorizeAction(onAuthorize) {
+var AuthorizeAction = function AuthorizeAction(onAuthorize, providerName) {
   return {
     name: _constants.ActionName.CustomAction,
-    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_link_account_card),
+    content: providerName ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_unauthorised_account_action, {
+      values: {
+        context: providerName
+      }
+    })) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_link_account_card),
     onClick: onAuthorize
   };
 };

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

@@ -47,7 +47,9 @@ var BlockCardFooter = function BlockCardFooter(props) {
       _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;
+      testId = _props$testId === void 0 ? 'smart-block-card-footer' : _props$testId,
+      _props$actionGroupApp = props.actionGroupAppearance,
+      actionGroupAppearance = _props$actionGroupApp === void 0 ? 'default' : _props$actionGroupApp;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_elements.Provider, {
     testId: "".concat(testId, "-provider"),
     overrideCss: providerStyles
@@ -59,7 +61,7 @@ var BlockCardFooter = function BlockCardFooter(props) {
     width: _constants.SmartLinkWidth.Flexible
   }, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
     items: actions,
-    appearance: "default"
+    appearance: actionGroupAppearance
   })) : null);
 };
 

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

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

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

@@ -9,26 +9,35 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 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");
 
+var _constants = require("../../../../constants");
+
+var _extractors = require("@atlaskit/linking-common/extractors");
+
+var _UnauthorisedViewContent = _interopRequireDefault(require("../../../common/UnauthorisedViewContent"));
+
+var _react2 = require("@emotion/react");
+
+var _token = require("../../../../utils/token");
+
+var _templateObject;
+
 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; }
 
+var contentStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"])), _token.tokens.text);
 /**
  * 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.
@@ -36,10 +45,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
+
 var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
+  var _cardState$details, _extractProvider;
+
   var cardState = _ref.cardState,
-      _ref$providerName = _ref.providerName,
-      providerName = _ref$providerName === void 0 ? '' : _ref$providerName,
       onAuthorize = _ref.onAuthorize,
       onClick = _ref.onClick,
       onError = _ref.onError,
@@ -47,10 +57,11 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
       testId = _ref$testId === void 0 ? 'smart-block-unauthorized-view' : _ref$testId,
       ui = _ref.ui,
       url = _ref.url;
-  var status = cardState.status;
+  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  var providerName = (_extractProvider = (0, _extractors.extractProvider)(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
   var actions = (0, _react.useMemo)(function () {
-    return onAuthorize ? [(0, _AuthorizeAction.AuthorizeAction)(onAuthorize)] : [];
-  }, [onAuthorize]);
+    return onAuthorize ? [(0, _AuthorizeAction.AuthorizeAction)(onAuthorize, providerName)] : [];
+  }, [onAuthorize, providerName]);
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,
@@ -60,18 +71,17 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
     testId: testId,
     ui: ui,
     url: url
-  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, {
     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, {
+  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
+    overrideCss: contentStyles,
+    testId: "".concat(testId, "-content")
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UnauthorisedViewContent.default, {
+    providerName: providerName
+  }))), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
     actions: actions,
-    status: status
+    status: _constants.SmartLinkStatus.Unauthorized,
+    actionGroupAppearance: "primary"
   })));
 };
 

package/dist/cjs/view/common/UnauthorisedViewContent.js

@@ -25,11 +25,11 @@ var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
   var providerName = _ref.providerName,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'unauthorised-view-content' : _ref$testId;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_unauthorised_account_description, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, providerName ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_unauthorised_account_description, {
     values: {
       context: providerName
     }
-  })), ' ', /*#__PURE__*/_react.default.createElement("a", {
+  })) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_unauthorised_account_description_no_provider), ' ', /*#__PURE__*/_react.default.createElement("a", {
     href: _constants.CONTENT_URL_SECURITY_AND_PERMISSIONS,
     target: "_blank",
     "data-testid": "".concat(testId, "-learn-more")

package/dist/es2019/messages.js

@@ -80,6 +80,11 @@ export const messages = defineMessages({
     defaultMessage: 'Connect {context} to Atlassian to view more details from your work and collaboration from one place.',
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view.'
   },
+  connect_unauthorised_account_description_no_provider: {
+    id: 'fabric.linking.connect_unauthorised_account_description',
+    defaultMessage: 'Connect to Atlassian to view more details from your work and collaboration from one place.',
+    description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view and we do not have the providers name.'
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",

package/dist/es2019/version.json

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

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

@@ -1,16 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
 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
+ * Returns a CustomActionItem with a "Connect to <providerName>" message
  *
  * @see CustomActionItem
  * @param onAuthorize a function that will be called on the click of the button
+ * @param providerName a string which is inserted into the message of the button
  */
 
-export const AuthorizeAction = onAuthorize => ({
+export const AuthorizeAction = (onAuthorize, providerName) => ({
   name: ActionName.CustomAction,
-  content: /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_card),
+  content: providerName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
+    values: {
+      context: providerName
+    }
+  })) : /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_card),
   onClick: onAuthorize
 });

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

@@ -34,7 +34,8 @@ const BlockCardFooter = props => {
   const {
     actions,
     size = SmartLinkSize.Medium,
-    testId = 'smart-block-card-footer'
+    testId = 'smart-block-card-footer',
+    actionGroupAppearance = 'default'
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Provider, {
     testId: `${testId}-provider`,
@@ -47,7 +48,7 @@ const BlockCardFooter = props => {
     width: SmartLinkWidth.Flexible
   }, /*#__PURE__*/React.createElement(ActionGroup, {
     items: actions,
-    appearance: "default"
+    appearance: actionGroupAppearance
   })) : null);
 };
 

package/dist/es2019/view/BlockCard/components/flexible/footer/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,12 +1,18 @@
 import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
-import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
-import { messages } from '../../../../messages';
-import Text from '../../../FlexibleCard/components/elements/text';
 import { AuthorizeAction } from '../../actions/flexible/AuthorizeAction';
 import BlockCardFooter from '../../components/flexible/footer';
-import { CustomBlock } from '../../../FlexibleCard/components/blocks';
-
+import { CustomBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
+import { SmartLinkStatus } from '../../../../constants';
+import { extractProvider } from '@atlaskit/linking-common/extractors';
+import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
+import { css } from '@emotion/react';
+import { tokens } from '../../../../utils/token';
+const contentStyles = css`
+  color: ${tokens.text};
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+`;
 /**
  * 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.
@@ -14,9 +20,9 @@ import { CustomBlock } from '../../../FlexibleCard/components/blocks';
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
+
 const FlexibleUnauthorisedView = ({
   cardState,
-  providerName = '',
   onAuthorize,
   onClick,
   onError,
@@ -24,8 +30,11 @@ const FlexibleUnauthorisedView = ({
   ui,
   url
 }) => {
-  const status = cardState.status;
-  const actions = useMemo(() => onAuthorize ? [AuthorizeAction(onAuthorize)] : [], [onAuthorize]);
+  var _cardState$details, _extractProvider;
+
+  const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  const providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
+  const actions = useMemo(() => onAuthorize ? [AuthorizeAction(onAuthorize, providerName)] : [], [onAuthorize, providerName]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -37,16 +46,15 @@ const FlexibleUnauthorisedView = ({
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
     hideRetry: true
-  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Text, {
-    message: {
-      descriptor: messages.connect_link_account_card_description,
-      values: {
-        context: providerName
-      }
-    }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
+  }), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: contentStyles,
+    testId: `${testId}-content`
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+    providerName: providerName
+  }))), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
-    status: status
+    status: SmartLinkStatus.Unauthorized,
+    actionGroupAppearance: "primary"
   })));
 };
 

package/dist/es2019/view/common/UnauthorisedViewContent.js

@@ -11,11 +11,11 @@ import { CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../constants';
 const UnauthorisedViewContent = ({
   providerName,
   testId = 'unauthorised-view-content'
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_description, {
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, providerName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_description, {
   values: {
     context: providerName
   }
-})), ' ', /*#__PURE__*/React.createElement("a", {
+})) : /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_unauthorised_account_description_no_provider), ' ', /*#__PURE__*/React.createElement("a", {
   href: CONTENT_URL_SECURITY_AND_PERMISSIONS,
   target: "_blank",
   "data-testid": `${testId}-learn-more`

package/dist/esm/messages.js

@@ -80,6 +80,11 @@ export var messages = defineMessages({
     defaultMessage: 'Connect {context} to Atlassian to view more details from your work and collaboration from one place.',
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view.'
   },
+  connect_unauthorised_account_description_no_provider: {
+    id: 'fabric.linking.connect_unauthorised_account_description',
+    defaultMessage: 'Connect to Atlassian to view more details from your work and collaboration from one place.',
+    description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view and we do not have the providers name.'
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",

package/dist/esm/version.json

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

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

@@ -1,18 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
 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
+ * Returns a CustomActionItem with a "Connect to <providerName>" message
  *
  * @see CustomActionItem
  * @param onAuthorize a function that will be called on the click of the button
+ * @param providerName a string which is inserted into the message of the button
  */
 
-export var AuthorizeAction = function AuthorizeAction(onAuthorize) {
+export var AuthorizeAction = function AuthorizeAction(onAuthorize, providerName) {
   return {
     name: ActionName.CustomAction,
-    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_card),
+    content: providerName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
+      values: {
+        context: providerName
+      }
+    })) : /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_card),
     onClick: onAuthorize
   };
 };

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

@@ -33,7 +33,9 @@ var BlockCardFooter = function BlockCardFooter(props) {
       _props$size = props.size,
       size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
       _props$testId = props.testId,
-      testId = _props$testId === void 0 ? 'smart-block-card-footer' : _props$testId;
+      testId = _props$testId === void 0 ? 'smart-block-card-footer' : _props$testId,
+      _props$actionGroupApp = props.actionGroupAppearance,
+      actionGroupAppearance = _props$actionGroupApp === void 0 ? 'default' : _props$actionGroupApp;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Provider, {
     testId: "".concat(testId, "-provider"),
     overrideCss: providerStyles
@@ -45,7 +47,7 @@ var BlockCardFooter = function BlockCardFooter(props) {
     width: SmartLinkWidth.Flexible
   }, /*#__PURE__*/React.createElement(ActionGroup, {
     items: actions,
-    appearance: "default"
+    appearance: actionGroupAppearance
   })) : null);
 };
 

package/dist/esm/view/BlockCard/components/flexible/footer/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,12 +1,18 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
 import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
-import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
-import { messages } from '../../../../messages';
-import Text from '../../../FlexibleCard/components/elements/text';
 import { AuthorizeAction } from '../../actions/flexible/AuthorizeAction';
 import BlockCardFooter from '../../components/flexible/footer';
-import { CustomBlock } from '../../../FlexibleCard/components/blocks';
-
+import { CustomBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
+import { SmartLinkStatus } from '../../../../constants';
+import { extractProvider } from '@atlaskit/linking-common/extractors';
+import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
+import { css } from '@emotion/react';
+import { tokens } from '../../../../utils/token';
+var contentStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"])), tokens.text);
 /**
  * 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.
@@ -14,10 +20,11 @@ import { CustomBlock } from '../../../FlexibleCard/components/blocks';
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
+
 var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
+  var _cardState$details, _extractProvider;
+
   var cardState = _ref.cardState,
-      _ref$providerName = _ref.providerName,
-      providerName = _ref$providerName === void 0 ? '' : _ref$providerName,
       onAuthorize = _ref.onAuthorize,
       onClick = _ref.onClick,
       onError = _ref.onError,
@@ -25,10 +32,11 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
       testId = _ref$testId === void 0 ? 'smart-block-unauthorized-view' : _ref$testId,
       ui = _ref.ui,
       url = _ref.url;
-  var status = cardState.status;
+  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  var providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
   var actions = useMemo(function () {
-    return onAuthorize ? [AuthorizeAction(onAuthorize)] : [];
-  }, [onAuthorize]);
+    return onAuthorize ? [AuthorizeAction(onAuthorize, providerName)] : [];
+  }, [onAuthorize, providerName]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -40,16 +48,15 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
     hideRetry: true
-  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Text, {
-    message: {
-      descriptor: messages.connect_link_account_card_description,
-      values: {
-        context: providerName
-      }
-    }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
+  }), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: contentStyles,
+    testId: "".concat(testId, "-content")
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+    providerName: providerName
+  }))), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
-    status: status
+    status: SmartLinkStatus.Unauthorized,
+    actionGroupAppearance: "primary"
   })));
 };
 

package/dist/esm/view/common/UnauthorisedViewContent.js

@@ -12,11 +12,11 @@ var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
   var providerName = _ref.providerName,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'unauthorised-view-content' : _ref$testId;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_description, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, providerName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_description, {
     values: {
       context: providerName
     }
-  })), ' ', /*#__PURE__*/React.createElement("a", {
+  })) : /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_unauthorised_account_description_no_provider), ' ', /*#__PURE__*/React.createElement("a", {
     href: CONTENT_URL_SECURITY_AND_PERMISSIONS,
     target: "_blank",
     "data-testid": "".concat(testId, "-learn-more")

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { MessageDescriptor } from 'react-intl-next';
 export declare type RequestAccessMessageKey = 'click_to_join' | 'click_to_join_description' | 'forbidden_description' | 'request_access' | 'request_access_description' | 'request_access_pending' | 'request_access_pending_description' | 'request_denied_description';
-export declare type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'could_not_load_link' | 'download' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'learn_more_about_smart_links_security' | 'loading' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_link_in_a_new_tab' | 'preview' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
+export declare type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'could_not_load_link' | 'download' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'learn_more_about_smart_links_security' | 'loading' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_link_in_a_new_tab' | 'preview' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
 declare type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types/view/BlockCard/actions/flexible/AuthorizeAction.d.ts

@@ -1,8 +1,9 @@
 import { CustomActionItem } from '../../../FlexibleCard/components/blocks/types';
 /**
- * Returns a CustomActionItem with a "Connect" default message
+ * Returns a CustomActionItem with a "Connect to <providerName>" message
  *
  * @see CustomActionItem
  * @param onAuthorize a function that will be called on the click of the button
+ * @param providerName a string which is inserted into the message of the button
  */
-export declare const AuthorizeAction: (onAuthorize: () => void) => CustomActionItem;
+export declare const AuthorizeAction: (onAuthorize: () => void, providerName?: string | undefined) => CustomActionItem;

package/dist/types/view/BlockCard/components/flexible/footer/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FooterBlockProps } from '../../../../FlexibleCard/components/blocks/footer-block/types';
+import { BlockCardFooterProps } from './types';
 /**
  * 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.
@@ -8,5 +8,5 @@ import { FooterBlockProps } from '../../../../FlexibleCard/components/blocks/foo
  * @see CustomBlock
  * @param props are the data required for the block, such as actions to be displayed.
  */
-declare const BlockCardFooter: React.FC<FooterBlockProps>;
+declare const BlockCardFooter: React.FC<BlockCardFooterProps>;
 export default BlockCardFooter;

package/dist/types/view/BlockCard/components/flexible/footer/types.d.ts

@@ -0,0 +1,5 @@
+import { Appearance } from '@atlaskit/button';
+import { FooterBlockProps } from '../../../../FlexibleCard/components/blocks/footer-block/types';
+export declare type BlockCardFooterProps = {
+    actionGroupAppearance?: Appearance;
+} & FooterBlockProps;

package/dist/types/view/BlockCard/views/flexible/FlexibleUnauthorisedView.d.ts

@@ -7,5 +7,5 @@ import { FlexibleBlockCardProps } from './types';
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
-declare const FlexibleUnauthorisedView: ({ cardState, providerName, onAuthorize, onClick, onError, testId, ui, url, }: FlexibleBlockCardProps) => JSX.Element;
+declare const FlexibleUnauthorisedView: ({ cardState, onAuthorize, onClick, onError, testId, ui, url, }: FlexibleBlockCardProps) => JSX.Element;
 export default FlexibleUnauthorisedView;

package/dist/types/view/FlexibleCard/components/blocks/title-block/types.d.ts

@@ -56,7 +56,7 @@ export declare type TitleBlockProps = {
      */
     retry?: RetryOptions;
     /**
-     * This option determins whenever we show any of the links and messages on the right side of the block,
+     * This option determines whenever we show any of the links and messages on the right side of the block,
      * like "connect to preview" or "Can't find link" or "Restricted link, try another account" etc.
      * Default is false.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.7.0",
+  "version": "23.7.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"