@atlaskit/smart-card 18.0.18 → 18.0.19

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 18.0.19
+
+### Patch Changes
+
+- [`c09b670ffa1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c09b670ffa1) - Flexible UI: Add container clickable option and improve keyboard navigation
+
 ## 18.0.18
 
 ### Patch Changes

package/dist/cjs/utils/token.js

@@ -19,6 +19,7 @@ var tokens = {
   elevation: (0, _tokens.token)('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
   errorMessage: (0, _tokens.token)('color.text.disabled', '#6B778C'),
   errorMessageHover: (0, _tokens.token)('color.text.subtle', '#8993A4'),
+  focus: (0, _tokens.token)('color.border.focused', '#388BFF'),
   snippet: (0, _tokens.token)('color.text', '#172B4D'),
   text: (0, _tokens.token)('color.text.subtlest', '#626F86')
 };

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -29,11 +29,13 @@ var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/more"));
 
 var _action = require("../../actions/action");
 
+var _token = require("../../../../../utils/token");
+
 var _excluded = ["triggerRef"];
 
 var _templateObject;
 
-var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 1rem;\n"])));
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n"])), _token.tokens.focus);
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
  * preferences.

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -39,7 +39,7 @@ var actionStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _tag
 
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), _token.tokens.errorMessage);
+  return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n    :focus {\n      outline: ", " solid 2px;\n    }\n  "])), hasAction ? actionStyles : '', sizeStyles, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), _token.tokens.errorMessage, _token.tokens.focus);
 };
 /**
  * Represents an Errored TitleBlock view.
@@ -74,9 +74,11 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
     direction: _constants.SmartLinkDirection.Horizontal,
     align: _constants.SmartLinkAlignment.Right
   }, (0, _core.jsx)("span", {
+    className: hasAction ? 'has-action' : '',
     css: getMessageStyles(size, hasAction),
     onClick: onClick,
-    "data-testid": "".concat(testId, "-errored-view-message")
+    "data-testid": "".concat(testId, "-errored-view-message"),
+    tabIndex: hasAction ? 0 : -1
   }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
     values: values
   })))), actionGroup);

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/index.js

@@ -43,7 +43,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var getActionStyles = function getActionStyles(showOnHover, isOpen) {
   if (showOnHover && !isOpen) {
-    return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      .actions-button-group {\n        visibility: hidden;\n      }\n\n      &:hover {\n        .actions-button-group {\n          visibility: visible;\n        }\n      }\n    "])));
+    return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      .actions-button-group {\n        opacity: 0;\n      }\n\n      &:hover .actions-button-group,\n      .actions-button-group:focus-within {\n        opacity: 1;\n      }\n    "])));
   }
 };
 

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

@@ -82,7 +82,7 @@ var getGapSize = function getGapSize(size) {
 exports.getGapSize = getGapSize;
 
 var getBaseStyles = function getBaseStyles(direction, size) {
-  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  overflow-y: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
+  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
 };
 
 exports.getBaseStyles = getBaseStyles;

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ exports.getContainerStyles = exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
@@ -19,7 +21,15 @@ var _flexible = require("../../../../utils/flexible");
 
 var _token = require("../../../../utils/token");
 
-var _templateObject, _templateObject2;
+var _flexibleUiContext = require("../../../../state/flexible-ui-context");
+
+var _layeredLink = _interopRequireDefault(require("./layered-link"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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 elevationStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), _token.tokens.elevation);
 
@@ -57,8 +67,10 @@ var getPadding = function getPadding(size) {
   }
 };
 
-var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding) {
-  return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n  ", "\n  ", "\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(_token.tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles);
+var clickableContainerStyles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  // Position any interactive elements at the top of the z-index stack.\n  a,\n  button,\n  .has-action {\n    position: relative;\n    z-index: 1;\n  }\n"])));
+
+var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer) {
+  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow-x: hidden;\n  position: relative;\n  ", "\n  ", "\n  ", "\n  ", "\n  &:hover ~ .actions-button-group {\n    opacity: 1;\n  }\n  a:focus,\n  .has-action:focus {\n    outline-offset: -2px;\n  }\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(_token.tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 
 exports.getContainerStyles = getContainerStyles;
@@ -77,34 +89,65 @@ var renderChildren = function renderChildren(children, containerSize, containerT
     }
   });
 };
+
+var getTitleBlockProps = function getTitleBlockProps(children) {
+  var block = _react.default.Children.toArray(children).find(function (child) {
+    return (0, _flexible.isFlexibleUiTitleBlock)(child);
+  });
+
+  if ( /*#__PURE__*/_react.default.isValidElement(block)) {
+    return block.props;
+  }
+};
+
+var getLayeredLink = function getLayeredLink(testId, context, children) {
+  var _ref = context || {},
+      title = _ref.title,
+      _ref$url = _ref.url,
+      url = _ref$url === void 0 ? '' : _ref$url;
+
+  var _ref2 = getTitleBlockProps(children) || {},
+      target = _ref2.anchorTarget,
+      text = _ref2.text;
+
+  return (0, _core.jsx)(_layeredLink.default, {
+    target: target,
+    testId: testId,
+    text: text || title,
+    url: url
+  });
+};
 /**
  * This represents the container in which all Flexible UI Smart Links are rendered.
  * @see Block
  */
 
 
-var Container = function Container(_ref) {
-  var children = _ref.children,
-      _ref$hideBackground = _ref.hideBackground,
-      hideBackground = _ref$hideBackground === void 0 ? false : _ref$hideBackground,
-      _ref$hideElevation = _ref.hideElevation,
-      hideElevation = _ref$hideElevation === void 0 ? false : _ref$hideElevation,
-      _ref$hidePadding = _ref.hidePadding,
-      hidePadding = _ref$hidePadding === void 0 ? false : _ref$hidePadding,
-      retry = _ref.retry,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
-      status = _ref.status,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-links-container' : _ref$testId,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref$theme,
-      onClick = _ref.onClick;
+var Container = function Container(_ref3) {
+  var children = _ref3.children,
+      _ref3$clickableContai = _ref3.clickableContainer,
+      clickableContainer = _ref3$clickableContai === void 0 ? false : _ref3$clickableContai,
+      _ref3$hideBackground = _ref3.hideBackground,
+      hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
+      _ref3$hideElevation = _ref3.hideElevation,
+      hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
+      _ref3$hidePadding = _ref3.hidePadding,
+      hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
+      onClick = _ref3.onClick,
+      retry = _ref3.retry,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? _constants.SmartLinkSize.Medium : _ref3$size,
+      status = _ref3.status,
+      _ref3$testId = _ref3.testId,
+      testId = _ref3$testId === void 0 ? 'smart-links-container' : _ref3$testId,
+      _ref3$theme = _ref3.theme,
+      theme = _ref3$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref3$theme;
+  var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
   return (0, _core.jsx)("div", {
-    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, renderChildren(children, size, theme, status, retry, onClick));
+  }, clickableContainer ? getLayeredLink(testId, context, children) : null, renderChildren(children, size, theme, status, retry, onClick));
 };
 
 var _default = Container;

package/dist/cjs/view/FlexibleCard/components/container/layered-link/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _templateObject;
+
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // Stretch the invisible link over the whole of the post.\n  // Hide the link\u2019s text.\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow-x: hidden;\n  text-indent: 100%;\n  white-space: nowrap;\n\n  // Needs a heightened specificity to trump other anchor.\n  // Stack it under all other links in the post text.\n  a&.layered-link {\n    position: absolute;\n    z-index: 0;\n  }\n\n  // When hovering over the layered link, any hidden action buttons inside\n  // the Container should become visible.\n  // As actions resides inside blocks and layered link is expected to be\n  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,\n  // its sibling. Using general sibling combinator here to apply styling to\n  // all the siblings of layered link.\n  // The general sibling combinator (~) separates two selectors and matches all\n  // iterations of the second element, that are following the first element\n  // (though not necessarily immediately), and are children of the same parent\n  // element.\n  &:hover ~ * {\n    .actions-button-group {\n      opacity: 1;\n    }\n  }\n"])));
+
+var LayeredLink = function LayeredLink(_ref) {
+  var target = _ref.target,
+      testId = _ref.testId,
+      text = _ref.text,
+      url = _ref.url;
+  return (0, _core.jsx)("a", {
+    className: "layered-link",
+    css: styles,
+    "data-testid": "".concat(testId, "-layered-link"),
+    href: url,
+    target: target,
+    tabIndex: -1 // Hide tab index and let the title link be the link.
+
+  }, text);
+};
+
+var _default = LayeredLink;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/container/layered-link/types.js

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

package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -60,6 +60,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
 
   return (0, _core.jsx)("span", {
     css: [getStyles(size), overrideCss],
+    "data-fit-to-content": true,
     "data-smart-element-avatar-group": true,
     "data-testid": testId
   }, (0, _core.jsx)(_avatarGroup.default, {

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

@@ -42,9 +42,9 @@ var FlexibleCard = function FlexibleCard(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({
     testId: testId
   }, ui, {
+    onClick: onClick,
     retry: retry,
-    status: status,
-    onClick: onClick
+    status: status
   }), children));
 };
 

package/dist/es2019/utils/token.js

@@ -11,6 +11,7 @@ export const tokens = {
   elevation: token('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
   errorMessage: token('color.text.disabled', '#6B778C'),
   errorMessageHover: token('color.text.subtle', '#8993A4'),
+  focus: token('color.border.focused', '#388BFF'),
   snippet: token('color.text', '#172B4D'),
   text: token('color.text.subtlest', '#626F86')
 };

package/dist/es2019/version.json

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

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -9,9 +9,22 @@ import { SmartLinkSize } from '../../../../../constants';
 import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { sizeToSpacing } from '../../actions/action';
+import { tokens } from '../../../../../utils/token';
 const styles = css`
   display: inline-flex;
   line-height: 1rem;
+  > div {
+    align-items: center;
+    button:focus {
+      // AK button removes the default browser outline on focus and apply
+      // box-shadow styling to create the outline appearance.
+      // Due to our container elements (Container/Block/ElementGroup) has
+      // overflow hidden to prevent the metadata element from leaking outside
+      // of its container, the box-shadow doesn't show properly.
+      // Invert the AK box-shadow styling.
+      box-shadow: inset 0 0 0 2px ${tokens.focus};
+    }
+  }
 `;
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -27,6 +27,9 @@ const getMessageStyles = (size, hasAction) => {
     ${sizeStyles}
     ${getTruncateStyles(1, getLinkLineHeight(size))}
     color: ${tokens.errorMessage};
+    :focus {
+      outline: ${tokens.focus} solid 2px;
+    }
   `;
 };
 /**
@@ -63,9 +66,11 @@ const TitleBlockErroredView = ({
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {
+    className: hasAction ? 'has-action' : '',
     css: getMessageStyles(size, hasAction),
     onClick: onClick,
-    "data-testid": `${testId}-errored-view-message`
+    "data-testid": `${testId}-errored-view-message`,
+    tabIndex: hasAction ? 0 : -1
   }, jsx(FormattedMessage, _extends({}, descriptor, {
     values: values
   })))), actionGroup);

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/index.js

@@ -12,13 +12,12 @@ const getActionStyles = (showOnHover, isOpen) => {
   if (showOnHover && !isOpen) {
     return css`
       .actions-button-group {
-        visibility: hidden;
+        opacity: 0;
       }
 
-      &:hover {
-        .actions-button-group {
-          visibility: visible;
-        }
+      &:hover .actions-button-group,
+      .actions-button-group:focus-within {
+        opacity: 1;
       }
     `;
   }

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

@@ -68,7 +68,6 @@ export const getBaseStyles = (direction, size) => css`
   line-height: 1rem;
   min-width: 0;
   overflow: hidden;
-  overflow-y: hidden;
   ${getDirectionStyles(direction)};
   &:empty {
     display: none;

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

@@ -1,9 +1,11 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/core';
 import { SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { isFlexibleUiBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
+import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
+import LayeredLink from './layered-link';
 const elevationStyles = css`
   border: 1px solid transparent;
   border-radius: 1.5px;
@@ -45,15 +47,33 @@ const getPadding = size => {
   }
 };
 
-export const getContainerStyles = (size, hideBackground, hideElevation, hidePadding) => css`
+const clickableContainerStyles = css`
+  // Position any interactive elements at the top of the z-index stack.
+  a,
+  button,
+  .has-action {
+    position: relative;
+    z-index: 1;
+  }
+`;
+export const getContainerStyles = (size, hideBackground, hideElevation, hidePadding, clickableContainer) => css`
   display: flex;
   gap: ${getGap(size)} 0;
   flex-direction: column;
   min-width: 0;
-  overflow: hidden;
+  overflow-x: hidden;
+  position: relative;
   ${hideBackground ? '' : `background-color: ${tokens.background};`}
   ${hidePadding ? '' : `padding: ${getPadding(size)};`}
   ${hideElevation ? '' : elevationStyles}
+  ${clickableContainer ? clickableContainerStyles : ''}
+  &:hover ~ .actions-button-group {
+    opacity: 1;
+  }
+  a:focus,
+  .has-action:focus {
+    outline-offset: -2px;
+  }
 `;
 
 const renderChildren = (children, containerSize, containerTheme, status, retry, onClick) => React.Children.map(children, child => {
@@ -70,6 +90,31 @@ const renderChildren = (children, containerSize, containerTheme, status, retry,
     });
   }
 });
+
+const getTitleBlockProps = children => {
+  const block = React.Children.toArray(children).find(child => isFlexibleUiTitleBlock(child));
+
+  if ( /*#__PURE__*/React.isValidElement(block)) {
+    return block.props;
+  }
+};
+
+const getLayeredLink = (testId, context, children) => {
+  const {
+    title,
+    url = ''
+  } = context || {};
+  const {
+    anchorTarget: target,
+    text
+  } = getTitleBlockProps(children) || {};
+  return jsx(LayeredLink, {
+    target: target,
+    testId: testId,
+    text: text || title,
+    url: url
+  });
+};
 /**
  * This represents the container in which all Flexible UI Smart Links are rendered.
  * @see Block
@@ -78,19 +123,23 @@ const renderChildren = (children, containerSize, containerTheme, status, retry,
 
 const Container = ({
   children,
+  clickableContainer = false,
   hideBackground = false,
   hideElevation = false,
   hidePadding = false,
+  onClick,
   retry,
   size = SmartLinkSize.Medium,
   status,
   testId = 'smart-links-container',
-  theme = SmartLinkTheme.Link,
-  onClick
-}) => jsx("div", {
-  css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
-  "data-smart-link-container": true,
-  "data-testid": testId
-}, renderChildren(children, size, theme, status, retry, onClick));
+  theme = SmartLinkTheme.Link
+}) => {
+  const context = useContext(FlexibleUiContext);
+  return jsx("div", {
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
+    "data-smart-link-container": true,
+    "data-testid": testId
+  }, clickableContainer ? getLayeredLink(testId, context, children) : null, renderChildren(children, size, theme, status, retry, onClick));
+};
 
 export default Container;

package/dist/es2019/view/FlexibleCard/components/container/layered-link/index.js

@@ -0,0 +1,54 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx, css } from '@emotion/core';
+const styles = css`
+  // Stretch the invisible link over the whole of the post.
+  // Hide the link’s text.
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow-x: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+
+  // Needs a heightened specificity to trump other anchor.
+  // Stack it under all other links in the post text.
+  a&.layered-link {
+    position: absolute;
+    z-index: 0;
+  }
+
+  // When hovering over the layered link, any hidden action buttons inside
+  // the Container should become visible.
+  // As actions resides inside blocks and layered link is expected to be
+  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,
+  // its sibling. Using general sibling combinator here to apply styling to
+  // all the siblings of layered link.
+  // The general sibling combinator (~) separates two selectors and matches all
+  // iterations of the second element, that are following the first element
+  // (though not necessarily immediately), and are children of the same parent
+  // element.
+  &:hover ~ * {
+    .actions-button-group {
+      opacity: 1;
+    }
+  }
+`;
+
+const LayeredLink = ({
+  target,
+  testId,
+  text,
+  url
+}) => jsx("a", {
+  className: "layered-link",
+  css: styles,
+  "data-testid": `${testId}-layered-link`,
+  href: url,
+  target: target,
+  tabIndex: -1 // Hide tab index and let the title link be the link.
+
+}, text);
+
+export default LayeredLink;

package/dist/es2019/view/FlexibleCard/components/container/layered-link/types.js

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

package/dist/es2019/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -48,6 +48,7 @@ const AvatarGroup = ({
 
   return jsx("span", {
     css: [getStyles(size), overrideCss],
+    "data-fit-to-content": true,
     "data-smart-element-avatar-group": true,
     "data-testid": testId
   }, jsx(AtlaskitAvatarGroup, {

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

@@ -32,9 +32,9 @@ const FlexibleCard = ({
   }, /*#__PURE__*/React.createElement(Container, _extends({
     testId: testId
   }, ui, {
+    onClick: onClick,
     retry: retry,
-    status: status,
-    onClick: onClick
+    status: status
   }), children));
 };
 

package/dist/esm/utils/token.js

@@ -11,6 +11,7 @@ export var tokens = {
   elevation: token('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
   errorMessage: token('color.text.disabled', '#6B778C'),
   errorMessageHover: token('color.text.subtle', '#8993A4'),
+  focus: token('color.border.focused', '#388BFF'),
   snippet: token('color.text', '#172B4D'),
   text: token('color.text.subtlest', '#626F86')
 };

package/dist/esm/version.json

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

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -14,7 +14,8 @@ import { SmartLinkSize } from '../../../../../constants';
 import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { sizeToSpacing } from '../../actions/action';
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 1rem;\n"])));
+import { tokens } from '../../../../../utils/token';
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n"])), tokens.focus);
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
  * preferences.

package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -19,7 +19,7 @@ var actionStyles = css(_templateObject || (_templateObject = _taggedTemplateLite
 
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = getLinkSizeStyles(size);
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), tokens.errorMessage);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n    :focus {\n      outline: ", " solid 2px;\n    }\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), tokens.errorMessage, tokens.focus);
 };
 /**
  * Represents an Errored TitleBlock view.
@@ -54,9 +54,11 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {
+    className: hasAction ? 'has-action' : '',
     css: getMessageStyles(size, hasAction),
     onClick: onClick,
-    "data-testid": "".concat(testId, "-errored-view-message")
+    "data-testid": "".concat(testId, "-errored-view-message"),
+    tabIndex: hasAction ? 0 : -1
   }, jsx(FormattedMessage, _extends({}, descriptor, {
     values: values
   })))), actionGroup);

package/dist/esm/view/FlexibleCard/components/blocks/title-block/index.js

@@ -17,7 +17,7 @@ import { Title } from '../../elements';
 
 var getActionStyles = function getActionStyles(showOnHover, isOpen) {
   if (showOnHover && !isOpen) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      .actions-button-group {\n        visibility: hidden;\n      }\n\n      &:hover {\n        .actions-button-group {\n          visibility: visible;\n        }\n      }\n    "])));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      .actions-button-group {\n        opacity: 0;\n      }\n\n      &:hover .actions-button-group,\n      .actions-button-group:focus-within {\n        opacity: 1;\n      }\n    "])));
   }
 };
 

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

@@ -50,7 +50,7 @@ export var getGapSize = function getGapSize(size) {
   }
 };
 export var getBaseStyles = function getBaseStyles(direction, size) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  overflow-y: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
 };
 
 var isActionGroup = function isActionGroup(node) {

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

@@ -1,13 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 /** @jsx jsx */
-import React from 'react';
+import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/core';
 import { SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { isFlexibleUiBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
+import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
+import LayeredLink from './layered-link';
 var elevationStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), tokens.elevation);
 
 var getGap = function getGap(size) {
@@ -44,8 +46,9 @@ var getPadding = function getPadding(size) {
   }
 };
 
-export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n  ", "\n  ", "\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles);
+var clickableContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  // Position any interactive elements at the top of the z-index stack.\n  a,\n  button,\n  .has-action {\n    position: relative;\n    z-index: 1;\n  }\n"])));
+export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow-x: hidden;\n  position: relative;\n  ", "\n  ", "\n  ", "\n  ", "\n  &:hover ~ .actions-button-group {\n    opacity: 1;\n  }\n  a:focus,\n  .has-action:focus {\n    outline-offset: -2px;\n  }\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
@@ -62,34 +65,65 @@ var renderChildren = function renderChildren(children, containerSize, containerT
     }
   });
 };
+
+var getTitleBlockProps = function getTitleBlockProps(children) {
+  var block = React.Children.toArray(children).find(function (child) {
+    return isFlexibleUiTitleBlock(child);
+  });
+
+  if ( /*#__PURE__*/React.isValidElement(block)) {
+    return block.props;
+  }
+};
+
+var getLayeredLink = function getLayeredLink(testId, context, children) {
+  var _ref = context || {},
+      title = _ref.title,
+      _ref$url = _ref.url,
+      url = _ref$url === void 0 ? '' : _ref$url;
+
+  var _ref2 = getTitleBlockProps(children) || {},
+      target = _ref2.anchorTarget,
+      text = _ref2.text;
+
+  return jsx(LayeredLink, {
+    target: target,
+    testId: testId,
+    text: text || title,
+    url: url
+  });
+};
 /**
  * This represents the container in which all Flexible UI Smart Links are rendered.
  * @see Block
  */
 
 
-var Container = function Container(_ref) {
-  var children = _ref.children,
-      _ref$hideBackground = _ref.hideBackground,
-      hideBackground = _ref$hideBackground === void 0 ? false : _ref$hideBackground,
-      _ref$hideElevation = _ref.hideElevation,
-      hideElevation = _ref$hideElevation === void 0 ? false : _ref$hideElevation,
-      _ref$hidePadding = _ref.hidePadding,
-      hidePadding = _ref$hidePadding === void 0 ? false : _ref$hidePadding,
-      retry = _ref.retry,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
-      status = _ref.status,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-links-container' : _ref$testId,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? SmartLinkTheme.Link : _ref$theme,
-      onClick = _ref.onClick;
+var Container = function Container(_ref3) {
+  var children = _ref3.children,
+      _ref3$clickableContai = _ref3.clickableContainer,
+      clickableContainer = _ref3$clickableContai === void 0 ? false : _ref3$clickableContai,
+      _ref3$hideBackground = _ref3.hideBackground,
+      hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
+      _ref3$hideElevation = _ref3.hideElevation,
+      hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
+      _ref3$hidePadding = _ref3.hidePadding,
+      hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
+      onClick = _ref3.onClick,
+      retry = _ref3.retry,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? SmartLinkSize.Medium : _ref3$size,
+      status = _ref3.status,
+      _ref3$testId = _ref3.testId,
+      testId = _ref3$testId === void 0 ? 'smart-links-container' : _ref3$testId,
+      _ref3$theme = _ref3.theme,
+      theme = _ref3$theme === void 0 ? SmartLinkTheme.Link : _ref3$theme;
+  var context = useContext(FlexibleUiContext);
   return jsx("div", {
-    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, renderChildren(children, size, theme, status, retry, onClick));
+  }, clickableContainer ? getLayeredLink(testId, context, children) : null, renderChildren(children, size, theme, status, retry, onClick));
 };
 
 export default Container;

package/dist/esm/view/FlexibleCard/components/container/layered-link/index.js

@@ -0,0 +1,26 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { jsx, css } from '@emotion/core';
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // Stretch the invisible link over the whole of the post.\n  // Hide the link\u2019s text.\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow-x: hidden;\n  text-indent: 100%;\n  white-space: nowrap;\n\n  // Needs a heightened specificity to trump other anchor.\n  // Stack it under all other links in the post text.\n  a&.layered-link {\n    position: absolute;\n    z-index: 0;\n  }\n\n  // When hovering over the layered link, any hidden action buttons inside\n  // the Container should become visible.\n  // As actions resides inside blocks and layered link is expected to be\n  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,\n  // its sibling. Using general sibling combinator here to apply styling to\n  // all the siblings of layered link.\n  // The general sibling combinator (~) separates two selectors and matches all\n  // iterations of the second element, that are following the first element\n  // (though not necessarily immediately), and are children of the same parent\n  // element.\n  &:hover ~ * {\n    .actions-button-group {\n      opacity: 1;\n    }\n  }\n"])));
+
+var LayeredLink = function LayeredLink(_ref) {
+  var target = _ref.target,
+      testId = _ref.testId,
+      text = _ref.text,
+      url = _ref.url;
+  return jsx("a", {
+    className: "layered-link",
+    css: styles,
+    "data-testid": "".concat(testId, "-layered-link"),
+    href: url,
+    target: target,
+    tabIndex: -1 // Hide tab index and let the title link be the link.
+
+  }, text);
+};
+
+export default LayeredLink;

package/dist/esm/view/FlexibleCard/components/container/layered-link/types.js

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

package/dist/esm/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -48,6 +48,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
 
   return jsx("span", {
     css: [getStyles(size), overrideCss],
+    "data-fit-to-content": true,
     "data-smart-element-avatar-group": true,
     "data-testid": testId
   }, jsx(AtlaskitAvatarGroup, {

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

@@ -29,9 +29,9 @@ var FlexibleCard = function FlexibleCard(_ref) {
   }, /*#__PURE__*/React.createElement(Container, _extends({
     testId: testId
   }, ui, {
+    onClick: onClick,
     retry: retry,
-    status: status,
-    onClick: onClick
+    status: status
   }), children));
 };
 

package/dist/types/utils/token.d.ts

@@ -10,6 +10,7 @@ export declare const tokens: {
     elevation: "var(--ds-shadow-raised)";
     errorMessage: "var(--ds-text-disabled)";
     errorMessageHover: "var(--ds-text-subtle)";
+    focus: "var(--ds-border-focused)";
     snippet: "var(--ds-text)";
     text: "var(--ds-text-subtlest)";
 };

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { SerializedStyles } from '@emotion/core';
 import { SmartLinkSize } from '../../../../constants';
 import { ContainerProps } from './types';
-export declare const getContainerStyles: (size: SmartLinkSize, hideBackground: boolean, hideElevation: boolean, hidePadding: boolean) => SerializedStyles;
+export declare const getContainerStyles: (size: SmartLinkSize, hideBackground: boolean, hideElevation: boolean, hidePadding: boolean, clickableContainer: boolean) => SerializedStyles;
 /**
  * This represents the container in which all Flexible UI Smart Links are rendered.
  * @see Block

package/dist/types/view/FlexibleCard/components/container/layered-link/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { LayeredLinkProps } from './types';
+declare const LayeredLink: React.FC<LayeredLinkProps>;
+export default LayeredLink;

package/dist/types/view/FlexibleCard/components/container/layered-link/types.d.ts

@@ -0,0 +1,6 @@
+export declare type LayeredLinkProps = {
+    target?: '_blank' | '_self' | '_top' | '_parent';
+    testId?: string;
+    text?: string;
+    url: string;
+};

package/dist/types/view/FlexibleCard/components/container/types.d.ts

@@ -2,6 +2,7 @@
 import { SmartLinkSize, SmartLinkStatus, SmartLinkTheme } from '../../../../constants';
 import { RetryOptions } from '../../types';
 export declare type ContainerProps = {
+    clickableContainer?: boolean;
     hideElevation?: boolean;
     hidePadding?: boolean;
     hideBackground?: boolean;

package/dist/types/view/FlexibleCard/types.d.ts

@@ -15,6 +15,7 @@ export declare type FlexibleCardProps = {
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
 };
 export declare type FlexibleUiOptions = {
+    clickableContainer?: boolean;
     hideElevation?: boolean;
     hidePadding?: boolean;
     hideBackground?: boolean;

package/package.json

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