@atlaskit/smart-card 23.6.5 → 23.6.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 23.6.7
+
+### Patch Changes
+
+- [`9110a0daf0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9110a0daf0e) - [ux] Added support of different forbidden views for Block Card with Flexible UI
+
+## 23.6.6
+
+### Patch Changes
+
+- [`b86cebed4a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b86cebed4a3) - Hover Preview: Update actionable element hover state
+
 ## 23.6.5
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ForbiddenAction = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -19,13 +21,19 @@ var _messages = require("../../../../messages");
  * Returns a CustomActionItem with a "Try Another Account" default message
  *
  * @see CustomActionItem
- * @param onAuthorize a function that will be called on the click of the button
+ * @param onClick a function that will be called on the click of the button
+ * @param content is a message key for a message to be displayed in the action
+ * @param context is a variable for a message in case a message contains a placeholder
  */
-var ForbiddenAction = function ForbiddenAction(onAuthorize) {
+var ForbiddenAction = function ForbiddenAction(onClick, content, context) {
   return {
     name: _constants.ActionName.CustomAction,
-    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_another_account),
-    onClick: onAuthorize
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[content], {
+      values: {
+        context: context
+      }
+    })),
+    onClick: onClick
   };
 };
 

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
@@ -31,6 +33,12 @@ var _ForbiddenAction = require("../../actions/flexible/ForbiddenAction");
 
 var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
 
+var _jsonld = require("../../../../utils/jsonld");
+
+var _extractors = require("@atlaskit/linking-common/extractors");
+
+var _context = require("../../../../extractors/common/context");
+
 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; }
@@ -43,6 +51,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @see FlexibleCardProps
  */
 var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
+  var _details$meta;
+
   var cardState = _ref.cardState,
       onAuthorize = _ref.onAuthorize,
       onClick = _ref.onClick,
@@ -52,9 +62,28 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
       ui = _ref.ui,
       url = _ref.url;
   var status = cardState.status;
+  var details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
+  var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getForbiddenJsonLd)().meta;
+  var provider = (0, _extractors.extractProvider)(details === null || details === void 0 ? void 0 : details.data);
+  var providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
+  var requestAccessContext = (0, _context.extractRequestAccessContext)({
+    jsonLd: cardMetadata,
+    url: url,
+    context: providerName
+  });
+  var descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
   var actions = (0, _react.useMemo)(function () {
-    return onAuthorize ? [(0, _ForbiddenAction.ForbiddenAction)(onAuthorize)] : [];
-  }, [onAuthorize]);
+    var actionFromAccessContext = [];
+    var tryAnotherAccountAction = onAuthorize ? [(0, _ForbiddenAction.ForbiddenAction)(onAuthorize, 'try_another_account')] : [];
+
+    if (requestAccessContext) {
+      var action = requestAccessContext.action,
+          callToActionMessageKey = requestAccessContext.callToActionMessageKey;
+      actionFromAccessContext = action && callToActionMessageKey ? [(0, _ForbiddenAction.ForbiddenAction)(action.promise, callToActionMessageKey, providerName)] : [];
+    }
+
+    return [].concat(tryAnotherAccountAction, (0, _toConsumableArray2.default)(actionFromAccessContext));
+  }, [onAuthorize, requestAccessContext, providerName]);
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,
@@ -73,7 +102,10 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/_react.default.createElement(_text.default, {
     message: {
-      descriptor: _messages.messages.invalid_permissions_description
+      descriptor: _messages.messages[descriptiveMessageKey],
+      values: {
+        context: providerName
+      }
     }
   })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
     actions: actions,

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

@@ -2,14 +2,18 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
@@ -19,8 +23,12 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-
 
 var _templateObject, _templateObject2;
 
+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 styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
-var actionStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n"])));
+var actionStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
 /**
  * A base element that displays a Lozenge.
  * @internal
@@ -38,6 +46,23 @@ var Lozenge = function Lozenge(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
 
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isBold = _useState2[0],
+      setIsBold = _useState2[1];
+
+  var onHover = (0, _react.useCallback)(function (isHover) {
+    if (onClick) {
+      setIsBold(isHover);
+    }
+  }, [onClick]);
+  var onMouseEnter = (0, _react.useCallback)(function () {
+    return onHover(true);
+  }, [onHover]);
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    return onHover(false);
+  }, [onHover]);
+
   if (!text) {
     return null;
   }
@@ -48,9 +73,13 @@ var Lozenge = function Lozenge(_ref) {
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
     "data-testid": testId,
-    onClick: onClick
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    tabIndex: onClick ? 0 : -1
   }, (0, _react2.jsx)(_lozenge.default, {
     appearance: appearance,
+    isBold: isBold,
     testId: "".concat(testId, "-lozenge")
   }, text, onClick && (0, _react2.jsx)(_chevronDown.default, {
     label: "action",

package/dist/es2019/version.json

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

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { ActionName } from '../../../../constants';
@@ -6,11 +7,17 @@ import { messages } from '../../../../messages';
  * Returns a CustomActionItem with a "Try Another Account" default message
  *
  * @see CustomActionItem
- * @param onAuthorize a function that will be called on the click of the button
+ * @param onClick a function that will be called on the click of the button
+ * @param content is a message key for a message to be displayed in the action
+ * @param context is a variable for a message in case a message contains a placeholder
  */
 
-export const ForbiddenAction = onAuthorize => ({
+export const ForbiddenAction = (onClick, content, context) => ({
   name: ActionName.CustomAction,
-  content: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_another_account),
-  onClick: onAuthorize
+  content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[content], {
+    values: {
+      context
+    }
+  })),
+  onClick: onClick
 });

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

@@ -9,7 +9,9 @@ import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import BlockCardFooter from '../../components/flexible/footer';
 import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
 import Text from '../../../FlexibleCard/components/elements/text';
-
+import { getForbiddenJsonLd } from '../../../../utils/jsonld';
+import { extractProvider } from '@atlaskit/linking-common/extractors';
+import { extractRequestAccessContext } from '../../../../extractors/common/context';
 /**
  * This view represent a Block Card with the 'Forbidden' status.
  * It should have a "Try another account" button that will allow a user to connect another account and view the block card.
@@ -17,6 +19,7 @@ import Text from '../../../FlexibleCard/components/elements/text';
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
+
 const FlexibleForbiddenView = ({
   cardState,
   onAuthorize,
@@ -26,8 +29,33 @@ const FlexibleForbiddenView = ({
   ui,
   url
 }) => {
+  var _details$meta;
+
   const status = cardState.status;
-  const actions = useMemo(() => onAuthorize ? [ForbiddenAction(onAuthorize)] : [], [onAuthorize]);
+  const details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
+  const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
+  const provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
+  const providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
+  const requestAccessContext = extractRequestAccessContext({
+    jsonLd: cardMetadata,
+    url,
+    context: providerName
+  });
+  const descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
+  const actions = useMemo(() => {
+    let actionFromAccessContext = [];
+    const tryAnotherAccountAction = onAuthorize ? [ForbiddenAction(onAuthorize, 'try_another_account')] : [];
+
+    if (requestAccessContext) {
+      const {
+        action,
+        callToActionMessageKey
+      } = requestAccessContext;
+      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, providerName)] : [];
+    }
+
+    return [...tryAnotherAccountAction, ...actionFromAccessContext];
+  }, [onAuthorize, requestAccessContext, providerName]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -46,7 +74,10 @@ const FlexibleForbiddenView = ({
     testId: `${testId}-lock-icon`
   }), /*#__PURE__*/React.createElement(Text, {
     message: {
-      descriptor: messages.invalid_permissions_description
+      descriptor: messages[descriptiveMessageKey],
+      values: {
+        context: providerName
+      }
     }
   })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -19,6 +19,10 @@ const actionStyles = css`
     height: unset;
     margin: -4px 0;
   }
+
+  :hover {
+    cursor: pointer;
+  }
 `;
 /**
  * A base element that displays a Lozenge.
@@ -35,6 +39,15 @@ const Lozenge = ({
   text,
   testId = 'smart-element-lozenge'
 }) => {
+  const [isBold, setIsBold] = useState(false);
+  const onHover = useCallback(isHover => {
+    if (onClick) {
+      setIsBold(isHover);
+    }
+  }, [onClick]);
+  const onMouseEnter = useCallback(() => onHover(true), [onHover]);
+  const onMouseLeave = useCallback(() => onHover(false), [onHover]);
+
   if (!text) {
     return null;
   }
@@ -45,9 +58,13 @@ const Lozenge = ({
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
     "data-testid": testId,
-    onClick: onClick
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    tabIndex: onClick ? 0 : -1
   }, jsx(AtlaskitLozenge, {
     appearance: appearance,
+    isBold: isBold,
     testId: `${testId}-lozenge`
   }, text, onClick && jsx(ChevronDownIcon, {
     label: "action",

package/dist/esm/version.json

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

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { ActionName } from '../../../../constants';
@@ -6,13 +7,19 @@ import { messages } from '../../../../messages';
  * Returns a CustomActionItem with a "Try Another Account" default message
  *
  * @see CustomActionItem
- * @param onAuthorize a function that will be called on the click of the button
+ * @param onClick a function that will be called on the click of the button
+ * @param content is a message key for a message to be displayed in the action
+ * @param context is a variable for a message in case a message contains a placeholder
  */
 
-export var ForbiddenAction = function ForbiddenAction(onAuthorize) {
+export var ForbiddenAction = function ForbiddenAction(onClick, content, context) {
   return {
     name: ActionName.CustomAction,
-    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_another_account),
-    onClick: onAuthorize
+    content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[content], {
+      values: {
+        context: context
+      }
+    })),
+    onClick: onClick
   };
 };

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

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
@@ -9,7 +10,9 @@ import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import BlockCardFooter from '../../components/flexible/footer';
 import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
 import Text from '../../../FlexibleCard/components/elements/text';
-
+import { getForbiddenJsonLd } from '../../../../utils/jsonld';
+import { extractProvider } from '@atlaskit/linking-common/extractors';
+import { extractRequestAccessContext } from '../../../../extractors/common/context';
 /**
  * This view represent a Block Card with the 'Forbidden' status.
  * It should have a "Try another account" button that will allow a user to connect another account and view the block card.
@@ -17,7 +20,10 @@ import Text from '../../../FlexibleCard/components/elements/text';
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
+
 var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
+  var _details$meta;
+
   var cardState = _ref.cardState,
       onAuthorize = _ref.onAuthorize,
       onClick = _ref.onClick,
@@ -27,9 +33,28 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
       ui = _ref.ui,
       url = _ref.url;
   var status = cardState.status;
+  var details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
+  var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
+  var provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
+  var providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
+  var requestAccessContext = extractRequestAccessContext({
+    jsonLd: cardMetadata,
+    url: url,
+    context: providerName
+  });
+  var descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
   var actions = useMemo(function () {
-    return onAuthorize ? [ForbiddenAction(onAuthorize)] : [];
-  }, [onAuthorize]);
+    var actionFromAccessContext = [];
+    var tryAnotherAccountAction = onAuthorize ? [ForbiddenAction(onAuthorize, 'try_another_account')] : [];
+
+    if (requestAccessContext) {
+      var action = requestAccessContext.action,
+          callToActionMessageKey = requestAccessContext.callToActionMessageKey;
+      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, providerName)] : [];
+    }
+
+    return [].concat(tryAnotherAccountAction, _toConsumableArray(actionFromAccessContext));
+  }, [onAuthorize, requestAccessContext, providerName]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -48,7 +73,10 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/React.createElement(Text, {
     message: {
-      descriptor: messages.invalid_permissions_description
+      descriptor: messages[descriptiveMessageKey],
+      values: {
+        context: providerName
+      }
     }
   })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,

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

@@ -1,14 +1,15 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject, _templateObject2;
 
 /** @jsx jsx */
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
-var actionStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n"])));
+var actionStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
 /**
  * A base element that displays a Lozenge.
  * @internal
@@ -26,6 +27,23 @@ var Lozenge = function Lozenge(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isBold = _useState2[0],
+      setIsBold = _useState2[1];
+
+  var onHover = useCallback(function (isHover) {
+    if (onClick) {
+      setIsBold(isHover);
+    }
+  }, [onClick]);
+  var onMouseEnter = useCallback(function () {
+    return onHover(true);
+  }, [onHover]);
+  var onMouseLeave = useCallback(function () {
+    return onHover(false);
+  }, [onHover]);
+
   if (!text) {
     return null;
   }
@@ -36,9 +54,13 @@ var Lozenge = function Lozenge(_ref) {
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
     "data-testid": testId,
-    onClick: onClick
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    tabIndex: onClick ? 0 : -1
   }, jsx(AtlaskitLozenge, {
     appearance: appearance,
+    isBold: isBold,
     testId: "".concat(testId, "-lozenge")
   }, text, onClick && jsx(ChevronDownIcon, {
     label: "action",

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

@@ -1,8 +1,11 @@
 import { CustomActionItem } from '../../../FlexibleCard/components/blocks/types';
+import { MessageKey, RequestAccessMessageKey } from '../../../../messages';
 /**
  * Returns a CustomActionItem with a "Try Another Account" default message
  *
  * @see CustomActionItem
- * @param onAuthorize a function that will be called on the click of the button
+ * @param onClick a function that will be called on the click of the button
+ * @param content is a message key for a message to be displayed in the action
+ * @param context is a variable for a message in case a message contains a placeholder
  */
-export declare const ForbiddenAction: (onAuthorize: () => void) => CustomActionItem;
+export declare const ForbiddenAction: (onClick: () => void, content: RequestAccessMessageKey | MessageKey, context?: string | undefined) => CustomActionItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.6.5",
+  "version": "23.6.7",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     "@atlaskit/icon-object": "^6.2.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/linking-common": "^1.15.0",
+    "@atlaskit/linking-common": "^1.16.0",
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/lozenge": "^11.3.0",
     "@atlaskit/media-common": "^2.17.0",