@atlaskit/smart-card 19.1.6 → 19.1.9

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 19.1.9
+
+### Patch Changes
+
+- [`003ac36263e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/003ac36263e) - Flexible UI: Fix preview block showing white space below image in Safari
+
+## 19.1.8
+
+### Patch Changes
+
+- [`81968c216ce`](https://bitbucket.org/atlassian/atlassian-frontend/commits/81968c216ce) - Flexible UI: Fix clickableContainer not triggering analytics event
+
+## 19.1.7
+
+### Patch Changes
+
+- [`08bdfa654e2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08bdfa654e2) - Flexible UI: Add option to hide link tooltip on TitleBlock.
+
 ## 19.1.6
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -33,7 +33,7 @@ var _actionGroup = _interopRequireDefault(require("../action-group"));
 
 var _elements = require("../../elements");
 
-var _excluded = ["actions", "anchorTarget", "maxLines", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme"];
+var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme"];
 
 var _templateObject, _templateObject2;
 
@@ -83,6 +83,7 @@ var TitleBlock = function TitleBlock(_ref) {
   var _ref$actions = _ref.actions,
       actions = _ref$actions === void 0 ? [] : _ref$actions,
       anchorTarget = _ref.anchorTarget,
+      hideTitleTooltip = _ref.hideTitleTooltip,
       maxLines = _ref.maxLines,
       onClick = _ref.onClick,
       overrideCss = _ref.overrideCss,
@@ -115,6 +116,7 @@ var TitleBlock = function TitleBlock(_ref) {
   } : {};
 
   var title = /*#__PURE__*/_react.default.createElement(_elements.Title, (0, _extends2.default)({
+    hideTooltip: hideTitleTooltip,
     maxLines: maxLines,
     onClick: onClick,
     target: anchorTarget,

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

@@ -109,7 +109,7 @@ var getTitleBlockProps = function getTitleBlockProps(children) {
   }
 };
 
-var getLayeredLink = function getLayeredLink(testId, context, children) {
+var getLayeredLink = function getLayeredLink(testId, context, children, onClick) {
   var _ref = context || {},
       title = _ref.title,
       _ref$url = _ref.url,
@@ -120,6 +120,7 @@ var getLayeredLink = function getLayeredLink(testId, context, children) {
       text = _ref2.text;
 
   return (0, _core.jsx)(_layeredLink.default, {
+    onClick: onClick,
     target: target,
     testId: testId,
     text: text || title,
@@ -160,7 +161,7 @@ var Container = function Container(_ref3) {
     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));
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
 };
 
 var _default = Container;

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

@@ -23,7 +23,8 @@ var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTem
  */
 
 var LayeredLink = function LayeredLink(_ref) {
-  var target = _ref.target,
+  var onClick = _ref.onClick,
+      target = _ref.target,
       testId = _ref.testId,
       text = _ref.text,
       url = _ref.url;
@@ -32,6 +33,7 @@ var LayeredLink = function LayeredLink(_ref) {
     css: styles,
     "data-testid": "".concat(testId, "-layered-link"),
     href: url,
+    onClick: onClick,
     target: target,
     tabIndex: -1 // Hide tab index and let the title link be the link.
 

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

@@ -62,6 +62,14 @@ var getMaxLines = function getMaxLines(maxLines) {
 
   return maxLines;
 };
+
+var withTooltip = function withTooltip(trigger, content, testId) {
+  return (0, _core.jsx)(_tooltip.default, {
+    content: content,
+    testId: "".concat(testId, "-tooltip"),
+    tag: "span"
+  }, trigger);
+};
 /**
  * A base element that represent an anchor.
  * @internal
@@ -71,7 +79,8 @@ var getMaxLines = function getMaxLines(maxLines) {
 
 
 var Link = function Link(_ref) {
-  var _ref$maxLines = _ref.maxLines,
+  var hideTooltip = _ref.hideTooltip,
+      _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
       overrideCss = _ref.overrideCss,
       _ref$size = _ref.size,
@@ -87,20 +96,17 @@ var Link = function Link(_ref) {
   var hasSpace = (0, _react.useMemo)(function () {
     return text ? (0, _utils.hasWhiteSpace)(text) : false;
   }, [text]);
-  return (0, _core.jsx)("span", {
-    css: containerStyles
-  }, (0, _core.jsx)(_tooltip.default, {
-    content: text,
-    testId: "".concat(testId, "-tooltip"),
-    tag: "span"
-  }, (0, _core.jsx)("a", {
+  var anchor = (0, _core.jsx)("a", {
     css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
     "data-smart-element-link": true,
     "data-testid": testId,
     onClick: onClick,
     href: url,
     target: target || '_blank'
-  }, text)));
+  }, text);
+  return (0, _core.jsx)("span", {
+    css: containerStyles
+  }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };
 
 var _default = Link;

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

@@ -27,7 +27,7 @@ var _templateObject;
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n  height: fit-content; // Fix Safari height not respecting aspect-ratio\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
 /**
  * A base element that displays a Media.
  * @internal

package/dist/es2019/version.json

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

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

@@ -58,6 +58,7 @@ const getTitleBlockViewComponent = status => {
 const TitleBlock = ({
   actions = [],
   anchorTarget,
+  hideTitleTooltip,
   maxLines,
   onClick,
   overrideCss,
@@ -82,6 +83,7 @@ const TitleBlock = ({
     text
   } : {};
   const title = /*#__PURE__*/React.createElement(Title, _extends({
+    hideTooltip: hideTitleTooltip,
     maxLines: maxLines,
     onClick: onClick,
     target: anchorTarget,

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

@@ -108,7 +108,7 @@ const getTitleBlockProps = children => {
   }
 };
 
-const getLayeredLink = (testId, context, children) => {
+const getLayeredLink = (testId, context, children, onClick) => {
   const {
     title,
     url = ''
@@ -118,6 +118,7 @@ const getLayeredLink = (testId, context, children) => {
     text
   } = getTitleBlockProps(children) || {};
   return jsx(LayeredLink, {
+    onClick: onClick,
     target: target,
     testId: testId,
     text: text || title,
@@ -152,7 +153,7 @@ const Container = ({
     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));
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
 };
 
 export default Container;

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

@@ -42,6 +42,7 @@ const styles = css`
  */
 
 const LayeredLink = ({
+  onClick,
   target,
   testId,
   text,
@@ -51,6 +52,7 @@ const LayeredLink = ({
   css: styles,
   "data-testid": `${testId}-layered-link`,
   href: url,
+  onClick: onClick,
   target: target,
   tabIndex: -1 // Hide tab index and let the title link be the link.
 

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

@@ -64,6 +64,12 @@ const getMaxLines = maxLines => {
 
   return maxLines;
 };
+
+const withTooltip = (trigger, content, testId) => jsx(Tooltip, {
+  content: content,
+  testId: `${testId}-tooltip`,
+  tag: "span"
+}, trigger);
 /**
  * A base element that represent an anchor.
  * @internal
@@ -73,6 +79,7 @@ const getMaxLines = maxLines => {
 
 
 const Link = ({
+  hideTooltip,
   maxLines = DEFAULT_MAX_LINES,
   overrideCss,
   size = SmartLinkSize.Medium,
@@ -84,20 +91,17 @@ const Link = ({
   target
 }) => {
   const hasSpace = useMemo(() => text ? hasWhiteSpace(text) : false, [text]);
-  return jsx("span", {
-    css: containerStyles
-  }, jsx(Tooltip, {
-    content: text,
-    testId: `${testId}-tooltip`,
-    tag: "span"
-  }, jsx("a", {
+  const anchor = jsx("a", {
     css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
     "data-smart-element-link": true,
     "data-testid": testId,
     onClick: onClick,
     href: url,
     target: target || '_blank'
-  }, text)));
+  }, text);
+  return jsx("span", {
+    css: containerStyles
+  }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };
 
 export default Link;

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

@@ -17,6 +17,7 @@ const styles = css`
   aspect-ratio: 16 / 9;
   display: flex;
   width: 100%;
+  height: fit-content; // Fix Safari height not respecting aspect-ratio
 
   // fallback
   @supports not (aspect-ratio: auto) {

package/dist/esm/version.json

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

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["actions", "anchorTarget", "maxLines", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme"];
+var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme"];
 
 var _templateObject, _templateObject2;
 
@@ -57,6 +57,7 @@ var TitleBlock = function TitleBlock(_ref) {
   var _ref$actions = _ref.actions,
       actions = _ref$actions === void 0 ? [] : _ref$actions,
       anchorTarget = _ref.anchorTarget,
+      hideTitleTooltip = _ref.hideTitleTooltip,
       maxLines = _ref.maxLines,
       onClick = _ref.onClick,
       overrideCss = _ref.overrideCss,
@@ -87,6 +88,7 @@ var TitleBlock = function TitleBlock(_ref) {
     text: text
   } : {};
   var title = /*#__PURE__*/React.createElement(Title, _extends({
+    hideTooltip: hideTitleTooltip,
     maxLines: maxLines,
     onClick: onClick,
     target: anchorTarget,

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

@@ -85,7 +85,7 @@ var getTitleBlockProps = function getTitleBlockProps(children) {
   }
 };
 
-var getLayeredLink = function getLayeredLink(testId, context, children) {
+var getLayeredLink = function getLayeredLink(testId, context, children, onClick) {
   var _ref = context || {},
       title = _ref.title,
       _ref$url = _ref.url,
@@ -96,6 +96,7 @@ var getLayeredLink = function getLayeredLink(testId, context, children) {
       text = _ref2.text;
 
   return jsx(LayeredLink, {
+    onClick: onClick,
     target: target,
     testId: testId,
     text: text || title,
@@ -136,7 +137,7 @@ var Container = function Container(_ref3) {
     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));
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
 };
 
 export default Container;

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

@@ -13,7 +13,8 @@ var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["
  */
 
 var LayeredLink = function LayeredLink(_ref) {
-  var target = _ref.target,
+  var onClick = _ref.onClick,
+      target = _ref.target,
       testId = _ref.testId,
       text = _ref.text,
       url = _ref.url;
@@ -22,6 +23,7 @@ var LayeredLink = function LayeredLink(_ref) {
     css: styles,
     "data-testid": "".concat(testId, "-layered-link"),
     href: url,
+    onClick: onClick,
     target: target,
     tabIndex: -1 // Hide tab index and let the title link be the link.
 

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

@@ -42,6 +42,14 @@ var getMaxLines = function getMaxLines(maxLines) {
 
   return maxLines;
 };
+
+var withTooltip = function withTooltip(trigger, content, testId) {
+  return jsx(Tooltip, {
+    content: content,
+    testId: "".concat(testId, "-tooltip"),
+    tag: "span"
+  }, trigger);
+};
 /**
  * A base element that represent an anchor.
  * @internal
@@ -51,7 +59,8 @@ var getMaxLines = function getMaxLines(maxLines) {
 
 
 var Link = function Link(_ref) {
-  var _ref$maxLines = _ref.maxLines,
+  var hideTooltip = _ref.hideTooltip,
+      _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
       overrideCss = _ref.overrideCss,
       _ref$size = _ref.size,
@@ -67,20 +76,17 @@ var Link = function Link(_ref) {
   var hasSpace = useMemo(function () {
     return text ? hasWhiteSpace(text) : false;
   }, [text]);
-  return jsx("span", {
-    css: containerStyles
-  }, jsx(Tooltip, {
-    content: text,
-    testId: "".concat(testId, "-tooltip"),
-    tag: "span"
-  }, jsx("a", {
+  var anchor = jsx("a", {
     css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
     "data-smart-element-link": true,
     "data-testid": testId,
     onClick: onClick,
     href: url,
     target: target || '_blank'
-  }, text)));
+  }, text);
+  return jsx("span", {
+    css: containerStyles
+  }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };
 
 export default Link;

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

@@ -17,7 +17,7 @@ import ImageIcon from '../../common/image-icon';
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n  height: fit-content; // Fix Safari height not respecting aspect-ratio\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
 /**
  * A base element that displays a Media.
  * @internal

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

@@ -16,6 +16,10 @@ export declare type TitleBlockProps = {
      * Determines the href target behaviour of the Link.
      */
     anchorTarget?: AnchorTarget;
+    /**
+     * [Experiment] Determines whether the linked title should display tooltip on hover.
+     */
+    hideTitleTooltip?: boolean;
     /**
      * Determines the maximum number of lines for the underlying link text to
      * spread over. Default is 2. Maximum is 2.

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

@@ -1,4 +1,10 @@
+/// <reference types="react" />
 export declare type LayeredLinkProps = {
+    /**
+     * Determines the onClick behaviour of the Link. By default used for analytics.
+     * @internal
+     */
+    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     target?: '_blank' | '_self' | '_top' | '_parent';
     testId?: string;
     text?: string;

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

@@ -3,6 +3,10 @@ import { ElementProps } from '../types';
 import { SmartLinkTheme } from '../../../../../constants';
 import { AnchorTarget } from '../../types';
 export declare type LinkProps = ElementProps & {
+    /**
+     * Determines whether the link should display tooltip on hover.
+     */
+    hideTooltip?: boolean;
     /**
      * Determines the behaviour when the Link is clicked. By default is used to
      * propagate analytics.

package/package.json

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