@atlaskit/smart-card 23.6.7 → 23.7.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [`3cae92db2b6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3cae92db2b6) - [ux] Introduces ChecklistProgress element, adds to Trello Hover Cards
+
 ## 23.6.7
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -133,6 +133,7 @@ exports.ElementName = ElementName;
 (function (ElementName) {
   ElementName["AttachmentCount"] = "AttachmentCount";
   ElementName["AuthorGroup"] = "AuthorGroup";
+  ElementName["ChecklistProgress"] = "ChecklistProgress";
   ElementName["CollaboratorGroup"] = "CollaboratorGroup";
   ElementName["CommentCount"] = "CommentCount";
   ElementName["CreatedBy"] = "CreatedBy";
@@ -225,6 +226,7 @@ exports.IconType = IconType;
   IconType["Error"] = "Default:Error";
   IconType["Forbidden"] = "Default:Forbidden";
   IconType["Attachment"] = "Badge:Attachment";
+  IconType["CheckItem"] = "Badge:Task";
   IconType["Comment"] = "Badge:Comment";
   IconType["View"] = "Badge:View";
   IconType["React"] = "Badge:React";

package/dist/cjs/extractors/flexible/index.js

@@ -48,6 +48,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     viewCount: (0, _utils.extractViewCount)(data),
     reactCount: (0, _utils.extractReactCount)(data),
     voteCount: (0, _utils.extractVoteCount)(data),
+    checklistProgress: (0, _utils.extractChecklistProgress)(data),
     createdBy: (0, _utils.extractCreatedBy)(data),
     createdOn: (0, _extractors.extractDateCreated)(data),
     dueOn: (0, _utils.extractDueOn)(data),

package/dist/cjs/extractors/flexible/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractVoteCount = exports.extractViewCount = exports.extractTargetBranch = exports.extractSubscriberCount = exports.extractSourceBranch = exports.extractReactCount = exports.extractProgrammingLanguage = exports.extractModifiedBy = exports.extractDueOn = exports.extractCreatedBy = exports.extractCommentCount = exports.extractAttachmentCount = void 0;
+exports.extractVoteCount = exports.extractViewCount = exports.extractTargetBranch = exports.extractSubscriberCount = exports.extractSourceBranch = exports.extractReactCount = exports.extractProgrammingLanguage = exports.extractModifiedBy = exports.extractDueOn = exports.extractCreatedBy = exports.extractCommentCount = exports.extractChecklistProgress = exports.extractAttachmentCount = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -99,4 +99,11 @@ var extractTargetBranch = function extractTargetBranch(data) {
   return extractLinkName(data['atlassian:mergeDestination']);
 };
 
-exports.extractTargetBranch = extractTargetBranch;
+exports.extractTargetBranch = extractTargetBranch;
+
+var extractChecklistProgress = function extractChecklistProgress(data) {
+  var checkItemsObj = extractValue(data, 'atlassian:checkItems');
+  return checkItemsObj ? "".concat(checkItemsObj.checkedItems, "/").concat(checkItemsObj.totalItems) : undefined;
+};
+
+exports.extractChecklistProgress = extractChecklistProgress;

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.6.7",
+	"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/FlexibleCard/components/blocks/utils.js

@@ -48,7 +48,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AttachmentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.DueOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LatestCommit, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SourceBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.TargetBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), _ElementDisplaySchema);
+var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AttachmentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ChecklistProgress, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.DueOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LatestCommit, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SourceBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.TargetBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), _ElementDisplaySchema);
 exports.ElementDisplaySchema = ElementDisplaySchema;
 
 var getDirectionStyles = function getDirectionStyles(direction) {

package/dist/cjs/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -210,6 +210,10 @@ var importIconMapper = (_importIconMapper = {}, (0, _defineProperty2.default)(_i
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require('@atlaskit/icon/glyph/attachment'));
   });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.CheckItem, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/task'));
+  });
 }), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Comment, function () {
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require('@atlaskit/icon/glyph/comment'));

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.State = exports.SourceBranch = exports.Snippet = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.LatestCommit = exports.DueOn = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = exports.AttachmentCount = void 0;
+exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.State = exports.SourceBranch = exports.Snippet = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.LatestCommit = exports.DueOn = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.ChecklistProgress = exports.AuthorGroup = exports.AttachmentCount = void 0;
 
 var _utils = require("./utils");
 
@@ -25,12 +25,19 @@ var AttachmentCount = (0, _utils.createElement)(_constants.ElementName.Attachmen
 
 exports.AttachmentCount = AttachmentCount;
 var AuthorGroup = (0, _utils.createElement)(_constants.ElementName.AuthorGroup);
+/**
+ * Creates a Checklist Badge element using the data from ChecklistProgress in the Flexible UI Context.
+ * @see Badge
+ */
+
+exports.AuthorGroup = AuthorGroup;
+var ChecklistProgress = (0, _utils.createElement)(_constants.ElementName.ChecklistProgress);
 /**
  * An AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
  * @see AvatarGroup
  */
 
-exports.AuthorGroup = AuthorGroup;
+exports.ChecklistProgress = ChecklistProgress;
 var CollaboratorGroup = (0, _utils.createElement)(_constants.ElementName.CollaboratorGroup);
 /**
  * Creates a CommentCount Badge element using the data from CommentCount in the Flexible UI Context.

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

@@ -59,6 +59,11 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   }
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.AuthorGroup, {
   component: _avatarGroup.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.ChecklistProgress, {
+  component: _badge.default,
+  props: {
+    icon: _constants.IconType.CheckItem
+  }
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.CollaboratorGroup, {
   component: _avatarGroup.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.CommentCount, {
@@ -149,6 +154,7 @@ var getData = function getData(elementName, contextKey, context) {
       return toAvatarGroupProps(data);
 
     case _constants.ElementName.AttachmentCount:
+    case _constants.ElementName.ChecklistProgress:
     case _constants.ElementName.CommentCount:
     case _constants.ElementName.ViewCount:
     case _constants.ElementName.ReactCount:

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

@@ -65,7 +65,7 @@ var getSimulatedMetadata = function getSimulatedMetadata() {
       return {
         metadata: {
           primary: [_constants.ElementName.AuthorGroup, _constants.ElementName.State, _constants.ElementName.DueOn],
-          secondary: [_constants.ElementName.ReactCount, _constants.ElementName.CommentCount, _constants.ElementName.AttachmentCount],
+          secondary: [_constants.ElementName.ReactCount, _constants.ElementName.CommentCount, _constants.ElementName.AttachmentCount, _constants.ElementName.ChecklistProgress],
           subtitle: []
         }
       };

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/constants.js

@@ -110,6 +110,7 @@ export let ElementName;
 (function (ElementName) {
   ElementName["AttachmentCount"] = "AttachmentCount";
   ElementName["AuthorGroup"] = "AuthorGroup";
+  ElementName["ChecklistProgress"] = "ChecklistProgress";
   ElementName["CollaboratorGroup"] = "CollaboratorGroup";
   ElementName["CommentCount"] = "CommentCount";
   ElementName["CreatedBy"] = "CreatedBy";
@@ -198,6 +199,7 @@ export let IconType;
   IconType["Error"] = "Default:Error";
   IconType["Forbidden"] = "Default:Forbidden";
   IconType["Attachment"] = "Badge:Attachment";
+  IconType["CheckItem"] = "Badge:Task";
   IconType["Comment"] = "Badge:Comment";
   IconType["View"] = "Badge:View";
   IconType["React"] = "Badge:React";

package/dist/es2019/extractors/flexible/index.js

@@ -1,7 +1,7 @@
 import { extractSummary } from '../common/primitives';
 import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
-import { extractAttachmentCount, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn } from './utils';
+import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink } from '@atlaskit/linking-common/extractors';
 import extractPriority from './extract-priority';
@@ -27,6 +27,7 @@ const extractFlexibleUiContext = (response, renderers) => {
     viewCount: extractViewCount(data),
     reactCount: extractReactCount(data),
     voteCount: extractVoteCount(data),
+    checklistProgress: extractChecklistProgress(data),
     createdBy: extractCreatedBy(data),
     createdOn: extractDateCreated(data),
     dueOn: extractDueOn(data),

package/dist/es2019/extractors/flexible/utils.js

@@ -33,4 +33,8 @@ export const extractProgrammingLanguage = data => extractValue(data, 'schema:pro
 export const extractSourceBranch = data => extractLinkName(data['atlassian:mergeSource']);
 export const extractSubscriberCount = data => extractValue(data, 'atlassian:subscriberCount');
 export const extractAttachmentCount = data => extractValue(data, 'atlassian:attachmentCount');
-export const extractTargetBranch = data => extractLinkName(data['atlassian:mergeDestination']);
+export const extractTargetBranch = data => extractLinkName(data['atlassian:mergeDestination']);
+export const extractChecklistProgress = data => {
+  const checkItemsObj = extractValue(data, 'atlassian:checkItems');
+  return checkItemsObj ? `${checkItemsObj.checkedItems}/${checkItemsObj.totalItems}` : undefined;
+};

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.6.7",
+	"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/FlexibleCard/components/blocks/utils.js

@@ -10,6 +10,7 @@ import ElementGroup from './element-group';
 export const ElementDisplaySchema = {
   [ElementName.AttachmentCount]: ['inline'],
   [ElementName.AuthorGroup]: ['inline'],
+  [ElementName.ChecklistProgress]: ['inline'],
   [ElementName.CollaboratorGroup]: ['inline'],
   [ElementName.CommentCount]: ['inline'],
   [ElementName.ViewCount]: ['inline'],

package/dist/es2019/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -146,6 +146,9 @@ const importIconMapper = {
   [IconType.Attachment]: () => import(
   /* webpackChunkName: "glyphAttachment" */
   '@atlaskit/icon/glyph/attachment'),
+  [IconType.CheckItem]: () => import(
+  /* webpackChunkName: "glyphAttachment" */
+  '@atlaskit/icon/glyph/task'),
   [IconType.Comment]: () => import(
   /* webpackChunkName: "glyphComment" */
   '@atlaskit/icon/glyph/comment'),

package/dist/es2019/view/FlexibleCard/components/elements/index.js

@@ -15,6 +15,12 @@ export const AttachmentCount = createElement(ElementName.AttachmentCount);
  */
 
 export const AuthorGroup = createElement(ElementName.AuthorGroup);
+/**
+ * Creates a Checklist Badge element using the data from ChecklistProgress in the Flexible UI Context.
+ * @see Badge
+ */
+
+export const ChecklistProgress = createElement(ElementName.ChecklistProgress);
 /**
  * An AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
  * @see AvatarGroup

package/dist/es2019/view/FlexibleCard/components/elements/utils.js

@@ -25,6 +25,12 @@ const elementMappings = {
   [ElementName.AuthorGroup]: {
     component: AvatarGroup
   },
+  [ElementName.ChecklistProgress]: {
+    component: Badge,
+    props: {
+      icon: IconType.CheckItem
+    }
+  },
   [ElementName.CollaboratorGroup]: {
     component: AvatarGroup
   },
@@ -139,6 +145,7 @@ const getData = (elementName, contextKey, context) => {
       return toAvatarGroupProps(data);
 
     case ElementName.AttachmentCount:
+    case ElementName.ChecklistProgress:
     case ElementName.CommentCount:
     case ElementName.ViewCount:
     case ElementName.ReactCount:

package/dist/es2019/view/HoverCard/utils.js

@@ -44,7 +44,7 @@ export const getSimulatedMetadata = (extensionKey = '', types = []) => {
       return {
         metadata: {
           primary: [ElementName.AuthorGroup, ElementName.State, ElementName.DueOn],
-          secondary: [ElementName.ReactCount, ElementName.CommentCount, ElementName.AttachmentCount],
+          secondary: [ElementName.ReactCount, ElementName.CommentCount, ElementName.AttachmentCount, ElementName.ChecklistProgress],
           subtitle: []
         }
       };

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/constants.js

@@ -110,6 +110,7 @@ export var ElementName;
 (function (ElementName) {
   ElementName["AttachmentCount"] = "AttachmentCount";
   ElementName["AuthorGroup"] = "AuthorGroup";
+  ElementName["ChecklistProgress"] = "ChecklistProgress";
   ElementName["CollaboratorGroup"] = "CollaboratorGroup";
   ElementName["CommentCount"] = "CommentCount";
   ElementName["CreatedBy"] = "CreatedBy";
@@ -198,6 +199,7 @@ export var IconType;
   IconType["Error"] = "Default:Error";
   IconType["Forbidden"] = "Default:Forbidden";
   IconType["Attachment"] = "Badge:Attachment";
+  IconType["CheckItem"] = "Badge:Task";
   IconType["Comment"] = "Badge:Comment";
   IconType["View"] = "Badge:View";
   IconType["React"] = "Badge:React";

package/dist/esm/extractors/flexible/index.js

@@ -1,7 +1,7 @@
 import { extractSummary } from '../common/primitives';
 import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
-import { extractAttachmentCount, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn } from './utils';
+import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink } from '@atlaskit/linking-common/extractors';
 import extractPriority from './extract-priority';
@@ -27,6 +27,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     viewCount: extractViewCount(data),
     reactCount: extractReactCount(data),
     voteCount: extractVoteCount(data),
+    checklistProgress: extractChecklistProgress(data),
     createdBy: extractCreatedBy(data),
     createdOn: extractDateCreated(data),
     dueOn: extractDueOn(data),

package/dist/esm/extractors/flexible/utils.js

@@ -54,4 +54,8 @@ export var extractAttachmentCount = function extractAttachmentCount(data) {
 };
 export var extractTargetBranch = function extractTargetBranch(data) {
   return extractLinkName(data['atlassian:mergeDestination']);
+};
+export var extractChecklistProgress = function extractChecklistProgress(data) {
+  var checkItemsObj = extractValue(data, 'atlassian:checkItems');
+  return checkItemsObj ? "".concat(checkItemsObj.checkedItems, "/").concat(checkItemsObj.totalItems) : undefined;
 };

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.6.7",
+	"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/FlexibleCard/components/blocks/utils.js

@@ -20,7 +20,7 @@ import * as Actions from '../actions';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
 import ElementGroup from './element-group';
-export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AttachmentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ViewCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ReactCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.VoteCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.DueOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LatestCommit, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.SourceBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.TargetBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _ElementDisplaySchema);
+export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AttachmentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ChecklistProgress, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ViewCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ReactCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.VoteCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.DueOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LatestCommit, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.SourceBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.TargetBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _ElementDisplaySchema);
 
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {

package/dist/esm/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -188,6 +188,10 @@ var importIconMapper = (_importIconMapper = {}, _defineProperty(_importIconMappe
   return import(
   /* webpackChunkName: "glyphAttachment" */
   '@atlaskit/icon/glyph/attachment');
+}), _defineProperty(_importIconMapper, IconType.CheckItem, function () {
+  return import(
+  /* webpackChunkName: "glyphAttachment" */
+  '@atlaskit/icon/glyph/task');
 }), _defineProperty(_importIconMapper, IconType.Comment, function () {
   return import(
   /* webpackChunkName: "glyphComment" */

package/dist/esm/view/FlexibleCard/components/elements/index.js

@@ -15,6 +15,12 @@ export var AttachmentCount = createElement(ElementName.AttachmentCount);
  */
 
 export var AuthorGroup = createElement(ElementName.AuthorGroup);
+/**
+ * Creates a Checklist Badge element using the data from ChecklistProgress in the Flexible UI Context.
+ * @see Badge
+ */
+
+export var ChecklistProgress = createElement(ElementName.ChecklistProgress);
 /**
  * An AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
  * @see AvatarGroup

package/dist/esm/view/FlexibleCard/components/elements/utils.js

@@ -27,6 +27,11 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   }
 }), _defineProperty(_elementMappings, ElementName.AuthorGroup, {
   component: AvatarGroup
+}), _defineProperty(_elementMappings, ElementName.ChecklistProgress, {
+  component: Badge,
+  props: {
+    icon: IconType.CheckItem
+  }
 }), _defineProperty(_elementMappings, ElementName.CollaboratorGroup, {
   component: AvatarGroup
 }), _defineProperty(_elementMappings, ElementName.CommentCount, {
@@ -117,6 +122,7 @@ var getData = function getData(elementName, contextKey, context) {
       return toAvatarGroupProps(data);
 
     case ElementName.AttachmentCount:
+    case ElementName.ChecklistProgress:
     case ElementName.CommentCount:
     case ElementName.ViewCount:
     case ElementName.ReactCount:

package/dist/esm/view/HoverCard/utils.js

@@ -53,7 +53,7 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
       return {
         metadata: {
           primary: [ElementName.AuthorGroup, ElementName.State, ElementName.DueOn],
-          secondary: [ElementName.ReactCount, ElementName.CommentCount, ElementName.AttachmentCount],
+          secondary: [ElementName.ReactCount, ElementName.CommentCount, ElementName.AttachmentCount, ElementName.ChecklistProgress],
           subtitle: []
         }
       };

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/constants.d.ts

@@ -83,6 +83,7 @@ export declare enum SmartLinkWidth {
 export declare enum ElementName {
     AttachmentCount = "AttachmentCount",
     AuthorGroup = "AuthorGroup",
+    ChecklistProgress = "ChecklistProgress",
     CollaboratorGroup = "CollaboratorGroup",
     CommentCount = "CommentCount",
     CreatedBy = "CreatedBy",
@@ -165,6 +166,7 @@ export declare enum IconType {
     Error = "Default:Error",
     Forbidden = "Default:Forbidden",
     Attachment = "Badge:Attachment",
+    CheckItem = "Badge:Task",
     Comment = "Badge:Comment",
     View = "Badge:View",
     React = "Badge:React",

package/dist/types/extractors/flexible/utils.d.ts

@@ -11,3 +11,4 @@ export declare const extractSourceBranch: (data: JsonLd.Data.SourceCodePullReque
 export declare const extractSubscriberCount: (data: JsonLd.Data.BaseData) => number | undefined;
 export declare const extractAttachmentCount: (data: JsonLd.Data.BaseData) => number | undefined;
 export declare const extractTargetBranch: (data: JsonLd.Data.SourceCodePullRequest) => string | undefined;
+export declare const extractChecklistProgress: (data: JsonLd.Data.BaseData) => string | undefined;

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/state/flexible-ui-context/types.d.ts

@@ -17,6 +17,11 @@ export declare type FlexibleUiDataContext = {
      * @see AvatarGroup
      */
     authorGroup?: LinkPerson[];
+    /**
+     * A string displaying progress on a checklist
+     * @see ChecklistProgress
+     */
+    checklistProgress?: string;
     /**
      * An array containing a @type {LinkPerson} used to populate the CollaboratorGroup element.
      * @see CollaboratorGroup

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/dist/types/view/FlexibleCard/components/blocks/types.d.ts

@@ -168,7 +168,7 @@ export declare type OnActionMenuOpenChangeOptions = {
 /**
  * A type that contains all the possible combinations of elements with their corresponding props.
  */
-export declare type ElementItemProps = AttachmentCount | AuthorGroup | CollaboratorGroup | CommentCount | CreatedBy | CreatedOn | DueOn | LatestCommit | LinkIcon | ModifiedBy | ModifiedOn | Preview | Priority | ProgrammingLanguage | Provider | ReactCount | Snippet | SourceBranch | State | SubscriberCount | TargetBranch | Title | ViewCount | VoteCount;
+export declare type ElementItemProps = AttachmentCount | AuthorGroup | ChecklistProgress | CollaboratorGroup | CommentCount | CreatedBy | CreatedOn | DueOn | LatestCommit | LinkIcon | ModifiedBy | ModifiedOn | Preview | Priority | ProgrammingLanguage | Provider | ReactCount | Snippet | SourceBranch | State | SubscriberCount | TargetBranch | Title | ViewCount | VoteCount;
 /**
  * Represents the props available for an AttachmentCount element.
  * @see AttachmentCount
@@ -183,6 +183,13 @@ export declare type AttachmentCount = {
 export declare type AuthorGroup = {
     name: ElementName.AuthorGroup;
 };
+/**
+ * Represents the props available for an ChecklistProgress element.
+ * @see ChecklistProgress
+ */
+export declare type ChecklistProgress = {
+    name: ElementName.ChecklistProgress;
+};
 /**
  * Represents the props available for an CollaboratorGroup element.
  * @see CollaboratorGroup

package/dist/types/view/FlexibleCard/components/elements/index.d.ts

@@ -17,6 +17,11 @@ export declare const AttachmentCount: import("react").FC<BadgeProps>;
  * @see AvatarGroup
  */
 export declare const AuthorGroup: import("react").FC<AvatarGroupProps>;
+/**
+ * Creates a Checklist Badge element using the data from ChecklistProgress in the Flexible UI Context.
+ * @see Badge
+ */
+export declare const ChecklistProgress: import("react").FC<BadgeProps>;
 /**
  * An AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
  * @see AvatarGroup

package/package.json

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

package/report.api.md

@@ -315,6 +315,11 @@ export interface CardProps extends WithAnalyticsEventsProps {
 
 export { CardType };
 
+// @public
+type ChecklistProgress = {
+  name: ElementName.ChecklistProgress;
+};
+
 export { Client };
 
 // @public
@@ -407,6 +412,7 @@ export type ElementItem = {
 type ElementItemProps =
   | AttachmentCount
   | AuthorGroup
+  | ChecklistProgress
   | CollaboratorGroup
   | CommentCount
   | CreatedBy
@@ -437,6 +443,8 @@ export enum ElementName {
   // (undocumented)
   AuthorGroup = 'AuthorGroup',
   // (undocumented)
+  ChecklistProgress = 'ChecklistProgress',
+  // (undocumented)
   CollaboratorGroup = 'CollaboratorGroup',
   // (undocumented)
   CommentCount = 'CommentCount',

package/tmp/api-report-tmp.d.ts

@@ -241,6 +241,11 @@ export interface CardProps extends WithAnalyticsEventsProps {
 
 export { CardType }
 
+// @public
+type ChecklistProgress = {
+    name: ElementName.ChecklistProgress;
+};
+
 export { Client }
 
 // @public
@@ -324,7 +329,7 @@ export type ElementItem = {
 } & ElementItemProps;
 
 // @public
-type ElementItemProps = AttachmentCount | AuthorGroup | CollaboratorGroup | CommentCount | CreatedBy | CreatedOn | DueOn | LatestCommit | LinkIcon | ModifiedBy | ModifiedOn | Preview | Priority | ProgrammingLanguage | Provider_2 | ReactCount | Snippet | SourceBranch | State_2 | SubscriberCount | TargetBranch | Title | ViewCount | VoteCount;
+type ElementItemProps = AttachmentCount | AuthorGroup | ChecklistProgress | CollaboratorGroup | CommentCount | CreatedBy | CreatedOn | DueOn | LatestCommit | LinkIcon | ModifiedBy | ModifiedOn | Preview | Priority | ProgrammingLanguage | Provider_2 | ReactCount | Snippet | SourceBranch | State_2 | SubscriberCount | TargetBranch | Title | ViewCount | VoteCount;
 
 // @public
 export enum ElementName {
@@ -333,6 +338,8 @@ export enum ElementName {
     // (undocumented)
     AuthorGroup = "AuthorGroup",
     // (undocumented)
+    ChecklistProgress = "ChecklistProgress",
+    // (undocumented)
     CollaboratorGroup = "CollaboratorGroup",
     // (undocumented)
     CommentCount = "CommentCount",