@atlaskit/smart-card 43.17.5 → 43.17.6

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.17.4"
+  packageVersion: "0.0.0-development"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/EmbedModal/components/link-info/index.compiled.css

@@ -1,12 +1,17 @@
 
+._qtt8glyw{list-style:none}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._11hh1tcg [data-smart-element-icon] svg{min-width:24px}
 ._15iz1tcg span{min-height:24px}
 ._16jlidpf{flex-grow:0}
 ._16jlkb7n{flex-grow:1}
 ._17521tcg svg{height:24px}
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
 ._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19l31tcg img{max-height:24px}
+._19pkidpf{margin-top:0}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bah1h6o{justify-content:center}
 ._1bnm1tcg [data-smart-element-icon] svg{height:24px}
 ._1bsb1tcg{width:24px}
@@ -15,6 +20,7 @@
 ._1h1b1tcg [data-smart-element-icon] span{width:24px}
 ._1mj01tcg [data-smart-element-icon] img{max-width:24px}
 ._1o9zidpf{flex-shrink:0}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
 ._1pr21tcg span{max-height:24px}
 ._1q121tcg [data-smart-element-icon] img{max-height:24px}
 ._1r9c1tcg [data-smart-element-icon] span{max-width:24px}
@@ -27,14 +33,19 @@
 ._1xch1tcg [data-smart-element-icon] svg{max-width:24px}
 ._1xjx1tcg span{height:24px}
 ._1xyl1tcg [data-smart-element-icon] img{width:24px}
+._2hwxze3t{margin-right:var(--ds-space-0,0)}
 ._2lx21bp4{flex-direction:column}
 ._2s1x1tcg [data-smart-element-icon] span{max-height:24px}
+._4cvr1h6o{align-items:center}
 ._4t3i1tcg{height:24px}
 ._4x201tcg svg{max-width:24px}
+._6rthze3t{margin-block-end:var(--ds-space-0,0)}
 ._b8nk1tcg span{max-width:24px}
 ._bna71tcg img{height:24px}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._c71l1tcg{max-height:24px}
 ._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._e2oo1tcg span{width:24px}
 ._erub1tcg svg{min-height:24px}
 ._gire1tcg [data-smart-element-icon] img{height:24px}
@@ -43,16 +54,19 @@
 ._jbhf1tcg [data-smart-element-icon] span{min-width:24px}
 ._mezj1tcg img{width:24px}
 ._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
 ._p12f1tcg{max-width:24px}
 ._prfw1tcg [data-smart-element-icon] svg{width:24px}
 ._q7cv1tcg span{min-width:24px}
 ._qci81tcg img{min-height:24px}
 ._rtys1tcg img{max-width:24px}
 ._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._v5981tcg [data-smart-element-icon] span{min-height:24px}
 ._w8l51tcg svg{width:24px}
 ._x9xj1tcg [data-smart-element-icon] img{min-height:24px}
 ._xwbj1tcg svg{min-width:24px}
 ._yrry1tcg [data-smart-element-icon] span{height:24px}
 ._z15s1tcg [data-smart-element-icon] svg{min-height:24px}
-@media only screen and (max-width:980px){._3kllglyw .smart-link-resize-button{display:none}}
+@media only screen and (max-width:980px){._1dt6glyw{display:none}._3kllglyw .smart-link-resize-button{display:none}}

package/dist/cjs/view/EmbedModal/components/link-info/index.js

@@ -18,6 +18,7 @@ var _fullscreenExit = _interopRequireDefault(require("@atlaskit/icon/core/fullsc
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _modalDialog = require("@atlaskit/modal-dialog");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _messages = require("../../../../messages");
 var _Icon = require("../../../common/Icon");
@@ -33,6 +34,9 @@ var iconSize = '24px';
 var iconCss = null;
 var titleCss = null;
 var actionCss = null;
+var buttonGroupCss = null;
+var listItemCSS = null;
+var resizeButtonCss = null;
 var LinkInfo = function LinkInfo(_ref) {
   var icon = _ref.icon,
     providerName = _ref.providerName,
@@ -137,4 +141,107 @@ var LinkInfo = function LinkInfo(_ref) {
     testId: testId
   }))));
 };
-var _default = exports.default = LinkInfo;
+var LinkInfoNew = function LinkInfoNew(_ref2) {
+  var focusRef = _ref2.focusRef,
+    icon = _ref2.icon,
+    providerName = _ref2.providerName,
+    onDownloadButtonClick = _ref2.onDownloadButtonClick,
+    onResizeButtonClick = _ref2.onResizeButtonClick,
+    onViewButtonClick = _ref2.onViewButtonClick,
+    size = _ref2.size,
+    testId = _ref2.testId,
+    title = _ref2.title;
+  var _useModal2 = (0, _modalDialog.useModal)(),
+    onClose = _useModal2.onClose;
+  var _useIntl2 = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl2.formatMessage;
+  var downloadButton = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(_linkInfoButton.default, {
+      content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.download),
+      icon: function icon() {
+        return /*#__PURE__*/_react.default.createElement(_download.default, {
+          label: "",
+          spacing: "spacious",
+          color: "currentColor"
+        });
+      },
+      label: _messages.messages.download,
+      onClick: onDownloadButtonClick,
+      testId: "".concat(testId, "-download")
+    });
+  }, [onDownloadButtonClick, testId]);
+  var urlButton = (0, _react.useMemo)(function () {
+    if (onViewButtonClick) {
+      var content = providerName ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal);
+      return /*#__PURE__*/_react.default.createElement(_linkInfoButton.default, {
+        content: content,
+        icon: function icon() {
+          return /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
+            label: "",
+            spacing: "spacious",
+            color: "currentColor"
+          });
+        },
+        label: _messages.messages.viewOriginal,
+        onClick: onViewButtonClick,
+        testId: "".concat(testId, "-url")
+      });
+    }
+  }, [onViewButtonClick, providerName, testId]);
+  var sizeButton = (0, _react.useMemo)(function () {
+    var isFullScreen = size === _constants.MAX_MODAL_SIZE;
+    var message = isFullScreen ? _messages.messages.preview_min_size : _messages.messages.preview_max_size;
+    var _icon2 = isFullScreen ? /*#__PURE__*/_react.default.createElement(_fullscreenExit.default, {
+      label: "",
+      spacing: "spacious",
+      color: "currentColor"
+    }) : /*#__PURE__*/_react.default.createElement(_fullscreenEnter.default, {
+      label: "",
+      spacing: "spacious",
+      color: "currentColor"
+    });
+    return /*#__PURE__*/_react.default.createElement(_linkInfoButton.default, {
+      content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, message),
+      icon: function icon() {
+        return _icon2;
+      },
+      label: message,
+      onClick: onResizeButtonClick,
+      testId: "".concat(testId, "-resize")
+    });
+  }, [onResizeButtonClick, size, testId]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _19bv1ejb _u5f31ejb _ca0q1ejb _n3tdpxbi _1wpz1fhb _4t3i1tcg"])
+  }, icon && /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "".concat(testId, "-icon"),
+    className: (0, _runtime.ax)(["_4t3i1tcg _gire1tcg _yrry1tcg _1bnm1tcg _bna71tcg _1xjx1tcg _17521tcg _1tke1tcg _x9xj1tcg _v5981tcg _z15s1tcg _qci81tcg _15iz1tcg _erub1tcg _c71l1tcg _1q121tcg _2s1x1tcg _1rh41tcg _19l31tcg _1pr21tcg _1u5t1tcg _1bsb1tcg _1xyl1tcg _1h1b1tcg _prfw1tcg _mezj1tcg _e2oo1tcg _w8l51tcg _1ul91tcg _1ekg1tcg _jbhf1tcg _11hh1tcg _1rg21tcg _q7cv1tcg _xwbj1tcg _p12f1tcg _1mj01tcg _1r9c1tcg _1xch1tcg _rtys1tcg _b8nk1tcg _4x201tcg"])
+  }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, icon)), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zidpf _i0dlf1ug _1e0c1txw _2lx21bp4 _1bah1h6o _1wpz1fhb"])
+  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "small",
+    color: "color.text",
+    ref: focusRef,
+    testId: "".concat(testId, "-title")
+  }, title)), /*#__PURE__*/_react.default.createElement("ul", {
+    role: "list",
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _zulp1b66 _qtt8glyw _1e0c1txw _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _1pfhze3t _6rthze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _bozgze3t"])
+  }, onDownloadButtonClick && /*#__PURE__*/_react.default.createElement("li", {
+    className: (0, _runtime.ax)(["_4cvr1h6o _19pkidpf"])
+  }, downloadButton), /*#__PURE__*/_react.default.createElement("li", {
+    className: (0, _runtime.ax)(["_4cvr1h6o _19pkidpf"])
+  }, urlButton), /*#__PURE__*/_react.default.createElement("li", {
+    className: (0, _runtime.ax)(["_4cvr1h6o _19pkidpf", "_1dt6glyw"])
+  }, sizeButton), /*#__PURE__*/_react.default.createElement("li", {
+    className: (0, _runtime.ax)(["_4cvr1h6o _19pkidpf"])
+  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview_close),
+    hideTooltipOnClick: true,
+    tag: "span",
+    testId: "".concat(testId, "-close-tooltip")
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.CloseButton, {
+    onClick: onClose,
+    label: formatMessage(_messages.messages.preview_close),
+    testId: testId
+  })))));
+};
+var _default = exports.default = (0, _platformFeatureFlagsReact.componentWithFG)('platform_navx_sl_a11y_embed_modal', LinkInfoNew, LinkInfo);

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

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tokens = require("@atlaskit/tokens");
 var _constants = require("../../constants");
 var _useInvokeClientAction = _interopRequireDefault(require("../../state/hooks/use-invoke-client-action"));
@@ -60,6 +61,9 @@ var EmbedModal = function EmbedModal(_ref) {
     width = _useState4[0],
     setWidth = _useState4[1];
   var openAt = (0, _react.useRef)();
+  var focusRef = (0, _platformFeatureFlags.fg)('platform_navx_sl_a11y_embed_modal') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _react.useRef)(null) : undefined;
   var invoke = (0, _useInvokeClientAction.default)({
     fireEvent: fireEvent
   });
@@ -103,7 +107,9 @@ var EmbedModal = function EmbedModal(_ref) {
   if (previewUrl && isSupportTheming) {
     previewUrl = (0, _utils.getPreviewUrlWithTheme)(previewUrl, themeState);
   }
-  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform_navx_sl_a11y_embed_modal') ? {
+    autoFocus: focusRef
+  } : undefined, {
     height: "100%",
     onClose: handleOnClose,
     onCloseComplete: handleOnCloseComplete,
@@ -112,13 +118,16 @@ var EmbedModal = function EmbedModal(_ref) {
     width: width,
     label: title,
     isBlanketHidden: isBlanketHidden
-  }, /*#__PURE__*/_react.default.createElement(_linkInfo.default, {
+  }), /*#__PURE__*/_react.default.createElement(_linkInfo.default, (0, _extends2.default)({
     icon: linkIcon && {
       icon: /*#__PURE__*/_react.default.createElement(_common.BaseIconElement, (0, _extends2.default)({}, linkIcon, {
         size: _constants.SmartLinkSize.Large
       })),
       isFlexibleUi: true
-    },
+    }
+  }, (0, _platformFeatureFlags.fg)('platform_navx_sl_a11y_embed_modal') ? {
+    focusRef: focusRef
+  } : undefined, {
     providerName: providerName,
     onViewButtonClick: invokeViewAction ? handleOnViewActionClick : undefined,
     onDownloadButtonClick: invokeDownloadAction ? handleOnDownloadActionClick : undefined,
@@ -126,7 +135,7 @@ var EmbedModal = function EmbedModal(_ref) {
     size: width,
     title: title,
     testId: testId
-  }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_embedContent.default, {
+  })), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_embedContent.default, {
     isTrusted: isTrusted,
     name: iframeName,
     src: previewUrl,