@atlaskit/smart-card 23.4.2 → 23.4.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 23.4.4
+
+### Patch Changes
+
+- [`655a52b4c06`](https://bitbucket.org/atlassian/atlassian-frontend/commits/655a52b4c06) - [ux] Update Flex-UI unauthorised views to include provider name
+
+## 23.4.3
+
+### Patch Changes
+
+- [`85de18a2d79`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85de18a2d79) - [ux] Enable text wrapping in contents of unresolved views and allow scrolling in when embed size is small.
+
 ## 23.4.2
 
 ### Patch Changes

package/dist/cjs/utils/jsonld.js

@@ -1,19 +1,29 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getUnauthorizedJsonLd = exports.getEmptyJsonLd = void 0;
+exports.getUnauthorizedJsonLd = exports.getForbiddenJsonLd = exports.getEmptyJsonLd = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var emptyData = {
+  '@context': {
+    '@vocab': 'https://www.w3.org/ns/activitystreams#',
+    atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+    schema: 'http://schema.org/'
+  },
+  '@type': 'Object'
+};
 
 var getEmptyJsonLd = function getEmptyJsonLd() {
-  return {
-    '@context': {
-      '@vocab': 'https://www.w3.org/ns/activitystreams#',
-      atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
-      schema: 'http://schema.org/'
-    },
-    '@type': 'Object'
-  };
+  return emptyData;
 };
 
 exports.getEmptyJsonLd = getEmptyJsonLd;
@@ -26,15 +36,22 @@ var getUnauthorizedJsonLd = function getUnauthorizedJsonLd() {
       auth: [],
       definitionId: 'provider-not-found'
     },
-    data: {
-      '@context': {
-        '@vocab': 'https://www.w3.org/ns/activitystreams#',
-        atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
-        schema: 'http://schema.org/'
-      },
-      '@type': 'Object'
-    }
+    data: _objectSpread({}, emptyData)
+  };
+};
+
+exports.getUnauthorizedJsonLd = getUnauthorizedJsonLd;
+
+var getForbiddenJsonLd = function getForbiddenJsonLd() {
+  return {
+    meta: {
+      visibility: 'restricted',
+      access: 'forbidden',
+      auth: [],
+      definitionId: 'provider-not-found'
+    },
+    data: _objectSpread({}, emptyData)
   };
 };
 
-exports.getUnauthorizedJsonLd = getUnauthorizedJsonLd;
+exports.getForbiddenJsonLd = getForbiddenJsonLd;

package/dist/cjs/version.json

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

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

@@ -173,7 +173,7 @@ var BlockCard = function BlockCard(_ref) {
       }
 
       var forbiddenViewProps = (0, _block.extractBlockProps)(data, meta, extractorOpts);
-      var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getUnauthorizedJsonLd)().meta;
+      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 requestAccessContext = (0, _context.extractRequestAccessContext)({
         jsonLd: cardMetadata,
         url: url,

package/dist/cjs/view/EmbedCard/components/ExpandedFrame.js

@@ -28,7 +28,9 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
       maxWidth = _ref.maxWidth,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'expanded-frame' : _ref$testId,
-      inheritDimensions = _ref.inheritDimensions;
+      inheritDimensions = _ref.inheritDimensions,
+      _ref$allowScrollBar = _ref.allowScrollBar,
+      allowScrollBar = _ref$allowScrollBar === void 0 ? false : _ref$allowScrollBar;
 
   var isInteractive = function isInteractive() {
     return !isPlaceholder && (Boolean(href) || Boolean(onClick));
@@ -53,6 +55,8 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
 
   var renderContent = function renderContent() {
     return /*#__PURE__*/_react.default.createElement(_styled.Content, {
+      "data-testid": "embed-content-wrapper",
+      allowScrollBar: allowScrollBar,
       isInteractive: isInteractive()
     }, children);
   };

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -144,7 +144,7 @@ exports.TextWrapper = TextWrapper;
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), borderRadius, cardShadow, (0, _tokens.token)('elevation.surface.raised', 'white'), (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n"])), borderRadius, cardShadow, (0, _tokens.token)('elevation.surface.raised', 'white'), (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {
@@ -152,12 +152,15 @@ var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _t
   } else {
     return '';
   }
+}, function (_ref10) {
+  var allowScrollBar = _ref10.allowScrollBar;
+  return allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;';
 });
 
 exports.Content = Content;
 
-var Image = _styled.default.img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref10) {
-  var size = _ref10.size;
+var Image = _styled.default.img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref11) {
+  var size = _ref11.size;
   return csssize(size);
 }, borderRadius);
 
@@ -185,8 +188,8 @@ var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templat
 
 exports.ResolvedViewIconWrapper = ResolvedViewIconWrapper;
 
-var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), (0, _tokens.token)('color.skeleton', colors.N30), function (_ref11) {
-  var src = _ref11.src;
+var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), (0, _tokens.token)('color.skeleton', colors.N30), function (_ref12) {
+  var src = _ref12.src;
   return src;
 });
 

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

@@ -139,7 +139,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
       }
 
       var forbiddenViewProps = (0, _embed.extractEmbedProps)(data, meta, platform);
-      var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getUnauthorizedJsonLd)().meta;
+      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 requestAccessContext = (0, _context.extractRequestAccessContext)({
         jsonLd: cardMetadata,
         url: url,

package/dist/cjs/view/EmbedCard/views/ForbiddenView.js

@@ -70,7 +70,8 @@ var EmbedCardForbiddenView = function EmbedCardForbiddenView(_ref) {
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/_react.default.createElement(_UnresolvedView.EmbedCardUnresolvedView, {
     image: _constants.LockImage,
     title: "invalid_permissions",

package/dist/cjs/view/EmbedCard/views/NotFoundView.js

@@ -38,7 +38,8 @@ var EmbedCardNotFoundView = function EmbedCardNotFoundView(_ref) {
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/_react.default.createElement(_UnresolvedView.EmbedCardUnresolvedView, {
     image: _constants.NotFoundImage,
     title: "not_found_title",

package/dist/cjs/view/EmbedCard/views/UnauthorisedView.js

@@ -49,7 +49,8 @@ var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/_react.default.createElement(_UnresolvedView.EmbedCardUnresolvedView, {
     image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : _constants.UnauthorisedImage,
     title: "connect_link_account_card_name",

package/dist/cjs/view/EmbedCard/views/UnresolvedView.js

@@ -52,7 +52,7 @@ var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
     css: {
       fontSize: (0, _utils.gs)(2.5),
       marginBottom: (0, _utils.gs)(1.5),
-      width: (0, _utils.gs)(50),
+      maxWidth: (0, _utils.gs)(50),
       textAlign: 'center'
     },
     "data-testid": "".concat(testId, "-unresolved-title")
@@ -65,7 +65,7 @@ var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
       fontSize: (0, _constants.fontSize)(),
       marginBottom: (0, _utils.gs)(2.5),
       textAlign: 'center',
-      width: (0, _utils.gs)(50),
+      maxWidth: (0, _utils.gs)(50),
       lineHeight: (0, _utils.gs)(3)
     },
     "data-testid": "".concat(testId, "-unresolved-description")

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

@@ -85,12 +85,16 @@ var getForbiddenMessageKey = function getForbiddenMessageKey(meta) {
 var getRetryOptions = function getRetryOptions(url, status, details, onAuthorize) {
   var _details$meta, _access$action;
 
+  var data = details && details.data || (0, _jsonld.getEmptyJsonLd)();
+  var provider = (0, _extractors.extractProvider)(data);
+  var context = provider === null || provider === void 0 ? void 0 : provider.text;
+  var values = context ? {
+    context: context
+  } : undefined;
+
   switch (status) {
     case _constants.SmartLinkStatus.Forbidden:
-      var data = details && details.data || (0, _jsonld.getEmptyJsonLd)();
-      var meta = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getUnauthorizedJsonLd)().meta;
-      var provider = (0, _extractors.extractProvider)(data);
-      var context = provider === null || provider === void 0 ? void 0 : provider.text;
+      var meta = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getForbiddenJsonLd)().meta;
       var access = (0, _context.extractRequestAccessContext)({
         jsonLd: meta,
         url: url,
@@ -98,9 +102,6 @@ var getRetryOptions = function getRetryOptions(url, status, details, onAuthorize
       });
       var messageKey = getForbiddenMessageKey(meta);
       var descriptor = _messages.messages[messageKey];
-      var values = context ? {
-        context: context
-      } : undefined;
       var retry = onAuthorize || (access === null || access === void 0 ? void 0 : (_access$action = access.action) === null || _access$action === void 0 ? void 0 : _access$action.promise);
       var onClick = retry ? (0, _utils.handleOnClick)(retry) : undefined;
       return {
@@ -111,8 +112,9 @@ var getRetryOptions = function getRetryOptions(url, status, details, onAuthorize
 
     case _constants.SmartLinkStatus.Unauthorized:
       return {
-        descriptor: _messages.messages.connect_link_account,
-        onClick: onAuthorize ? (0, _utils.handleOnClick)(onAuthorize) : undefined
+        descriptor: _messages.messages.connect_link_account_card_name,
+        onClick: onAuthorize ? (0, _utils.handleOnClick)(onAuthorize) : undefined,
+        values: values
       };
 
     case _constants.SmartLinkStatus.NotFound:

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

@@ -139,7 +139,7 @@ var InlineCard = function InlineCard(_ref) {
       }
 
       var providerForbidden = (0, _extractors.extractProvider)(cardDetails);
-      var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getUnauthorizedJsonLd)().meta;
+      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 requestAccessContext = (0, _context.extractRequestAccessContext)({
         jsonLd: cardMetadata,
         url: url,

package/dist/es2019/utils/jsonld.js

@@ -1,11 +1,12 @@
-export const getEmptyJsonLd = () => ({
+const emptyData = {
   '@context': {
     '@vocab': 'https://www.w3.org/ns/activitystreams#',
     atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
     schema: 'http://schema.org/'
   },
   '@type': 'Object'
-});
+};
+export const getEmptyJsonLd = () => emptyData;
 export const getUnauthorizedJsonLd = () => ({
   meta: {
     visibility: 'restricted',
@@ -13,12 +14,16 @@ export const getUnauthorizedJsonLd = () => ({
     auth: [],
     definitionId: 'provider-not-found'
   },
-  data: {
-    '@context': {
-      '@vocab': 'https://www.w3.org/ns/activitystreams#',
-      atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
-      schema: 'http://schema.org/'
-    },
-    '@type': 'Object'
+  data: { ...emptyData
+  }
+});
+export const getForbiddenJsonLd = () => ({
+  meta: {
+    visibility: 'restricted',
+    access: 'forbidden',
+    auth: [],
+    definitionId: 'provider-not-found'
+  },
+  data: { ...emptyData
   }
 });

package/dist/es2019/version.json

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

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { getExtensionKey } from '../../state/helpers';
 import { extractBlockProps } from '../../extractors/block';
-import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
+import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
 import { extractRequestAccessContext } from '../../extractors/common/context';
 import { CardLinkView } from '../LinkView';
 import { AuthorizeAction } from './actions/AuthorizeAction';
@@ -97,7 +97,7 @@ export const BlockCard = ({
       }
 
       const forbiddenViewProps = extractBlockProps(data, meta, extractorOpts);
-      const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
+      const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
       const requestAccessContext = extractRequestAccessContext({
         jsonLd: cardMetadata,
         url,

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.js

@@ -14,7 +14,8 @@ export const ExpandedFrame = ({
   minWidth,
   maxWidth,
   testId = 'expanded-frame',
-  inheritDimensions
+  inheritDimensions,
+  allowScrollBar = false
 }) => {
   const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
 
@@ -32,6 +33,8 @@ export const ExpandedFrame = ({
   }, text)));
 
   const renderContent = () => /*#__PURE__*/React.createElement(Content, {
+    "data-testid": "embed-content-wrapper",
+    allowScrollBar: allowScrollBar,
     isInteractive: isInteractive()
   }, children);
 

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -196,7 +196,6 @@ export const Content = styled.div`
   z-index: 1;
   width: 100%;
   top: ${gridSize(4)};
-  overflow: hidden;
   height: calc(100% - ${gridSize(4)});
   transition: box-shadow 0.3s;
 
@@ -224,6 +223,10 @@ export const Content = styled.div`
     return '';
   }
 }};
+
+  ${({
+  allowScrollBar
+}) => allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;'}
 `;
 export const Image = styled.img`
   ${({

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { extractEmbedProps } from '../../extractors/embed';
-import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
+import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
 import { extractInlineProps } from '../../extractors/inline';
 import { extractBlockProps } from '../../extractors/block';
 import { getExtensionKey } from '../../state/helpers';
@@ -117,7 +117,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
       }
 
       const forbiddenViewProps = extractEmbedProps(data, meta, platform);
-      const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
+      const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
       const requestAccessContext = extractRequestAccessContext({
         jsonLd: cardMetadata,
         url,

package/dist/es2019/view/EmbedCard/views/ForbiddenView.js

@@ -55,7 +55,8 @@ export const EmbedCardForbiddenView = ({
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
     image: LockImage,
     title: "invalid_permissions",

package/dist/es2019/view/EmbedCard/views/NotFoundView.js

@@ -22,7 +22,8 @@ export const EmbedCardNotFoundView = ({
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
     image: NotFoundImage,
     title: "not_found_title",

package/dist/es2019/view/EmbedCard/views/UnauthorisedView.js

@@ -29,7 +29,8 @@ export const EmbedCardUnauthorisedView = ({
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
     image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : UnauthorisedImage,
     title: "connect_link_account_card_name",

package/dist/es2019/view/EmbedCard/views/UnresolvedView.js

@@ -38,7 +38,7 @@ export const EmbedCardUnresolvedView = ({
     css: {
       fontSize: gridSize(2.5),
       marginBottom: gridSize(1.5),
-      width: gridSize(50),
+      maxWidth: gridSize(50),
       textAlign: 'center'
     },
     "data-testid": `${testId}-unresolved-title`
@@ -51,7 +51,7 @@ export const EmbedCardUnresolvedView = ({
       fontSize: fontSize(),
       marginBottom: gridSize(2.5),
       textAlign: 'center',
-      width: gridSize(50),
+      maxWidth: gridSize(50),
       lineHeight: gridSize(3)
     },
     "data-testid": `${testId}-unresolved-description`

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

@@ -1,5 +1,5 @@
 import { SmartLinkStatus } from '../../constants';
-import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
+import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
 import { extractRequestAccessContext } from '../../extractors/common/context';
 import { messages } from '../../messages';
 import extractFlexibleLinkContext from '../../extractors/flexible';
@@ -65,12 +65,16 @@ const getForbiddenMessageKey = meta => {
 export const getRetryOptions = (url, status, details, onAuthorize) => {
   var _details$meta, _access$action;
 
+  const data = details && details.data || getEmptyJsonLd();
+  const provider = extractProvider(data);
+  const context = provider === null || provider === void 0 ? void 0 : provider.text;
+  const values = context ? {
+    context
+  } : undefined;
+
   switch (status) {
     case SmartLinkStatus.Forbidden:
-      const data = details && details.data || getEmptyJsonLd();
-      const meta = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
-      const provider = extractProvider(data);
-      const context = provider === null || provider === void 0 ? void 0 : provider.text;
+      const meta = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
       const access = extractRequestAccessContext({
         jsonLd: meta,
         url,
@@ -78,9 +82,6 @@ export const getRetryOptions = (url, status, details, onAuthorize) => {
       });
       const messageKey = getForbiddenMessageKey(meta);
       const descriptor = messages[messageKey];
-      const values = context ? {
-        context
-      } : undefined;
       const retry = onAuthorize || (access === null || access === void 0 ? void 0 : (_access$action = access.action) === null || _access$action === void 0 ? void 0 : _access$action.promise);
       const onClick = retry ? handleOnClick(retry) : undefined;
       return {
@@ -91,8 +92,9 @@ export const getRetryOptions = (url, status, details, onAuthorize) => {
 
     case SmartLinkStatus.Unauthorized:
       return {
-        descriptor: messages.connect_link_account,
-        onClick: onAuthorize ? handleOnClick(onAuthorize) : undefined
+        descriptor: messages.connect_link_account_card_name,
+        onClick: onAuthorize ? handleOnClick(onAuthorize) : undefined,
+        values
       };
 
     case SmartLinkStatus.NotFound:

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
+import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
 import { extractInlineProps } from '../../extractors/inline';
 import { extractRequestAccessContext } from '../../extractors/common/context';
 import { CardLinkView } from '../LinkView';
@@ -92,7 +92,7 @@ export const InlineCard = ({
       }
 
       const providerForbidden = extractProvider(cardDetails);
-      const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
+      const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
       const requestAccessContext = extractRequestAccessContext({
         jsonLd: cardMetadata,
         url,

package/dist/esm/utils/jsonld.js

@@ -1,28 +1,39 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var emptyData = {
+  '@context': {
+    '@vocab': 'https://www.w3.org/ns/activitystreams#',
+    atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+    schema: 'http://schema.org/'
+  },
+  '@type': 'Object'
+};
 export var getEmptyJsonLd = function getEmptyJsonLd() {
+  return emptyData;
+};
+export var getUnauthorizedJsonLd = function getUnauthorizedJsonLd() {
   return {
-    '@context': {
-      '@vocab': 'https://www.w3.org/ns/activitystreams#',
-      atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
-      schema: 'http://schema.org/'
+    meta: {
+      visibility: 'restricted',
+      access: 'unauthorized',
+      auth: [],
+      definitionId: 'provider-not-found'
     },
-    '@type': 'Object'
+    data: _objectSpread({}, emptyData)
   };
 };
-export var getUnauthorizedJsonLd = function getUnauthorizedJsonLd() {
+export var getForbiddenJsonLd = function getForbiddenJsonLd() {
   return {
     meta: {
       visibility: 'restricted',
-      access: 'unauthorized',
+      access: 'forbidden',
       auth: [],
       definitionId: 'provider-not-found'
     },
-    data: {
-      '@context': {
-        '@vocab': 'https://www.w3.org/ns/activitystreams#',
-        atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
-        schema: 'http://schema.org/'
-      },
-      '@type': 'Object'
-    }
+    data: _objectSpread({}, emptyData)
   };
 };

package/dist/esm/version.json

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

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { getExtensionKey } from '../../state/helpers';
 import { extractBlockProps } from '../../extractors/block';
-import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
+import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
 import { extractRequestAccessContext } from '../../extractors/common/context';
 import { CardLinkView } from '../LinkView';
 import { AuthorizeAction } from './actions/AuthorizeAction';
@@ -95,7 +95,7 @@ export var BlockCard = function BlockCard(_ref) {
       }
 
       var forbiddenViewProps = extractBlockProps(data, meta, extractorOpts);
-      var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
+      var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
       var requestAccessContext = extractRequestAccessContext({
         jsonLd: cardMetadata,
         url: url,

package/dist/esm/view/EmbedCard/components/ExpandedFrame.js

@@ -16,7 +16,9 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       maxWidth = _ref.maxWidth,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'expanded-frame' : _ref$testId,
-      inheritDimensions = _ref.inheritDimensions;
+      inheritDimensions = _ref.inheritDimensions,
+      _ref$allowScrollBar = _ref.allowScrollBar,
+      allowScrollBar = _ref$allowScrollBar === void 0 ? false : _ref$allowScrollBar;
 
   var isInteractive = function isInteractive() {
     return !isPlaceholder && (Boolean(href) || Boolean(onClick));
@@ -41,6 +43,8 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
 
   var renderContent = function renderContent() {
     return /*#__PURE__*/React.createElement(Content, {
+      "data-testid": "embed-content-wrapper",
+      allowScrollBar: allowScrollBar,
       isInteractive: isInteractive()
     }, children);
   };

package/dist/esm/view/EmbedCard/components/styled.js

@@ -99,7 +99,7 @@ export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _tag
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), borderRadius, cardShadow, token('elevation.surface.raised', 'white'), gridSize(4), gridSize(4), function (_ref9) {
+export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n"])), borderRadius, cardShadow, token('elevation.surface.raised', 'white'), gridSize(4), gridSize(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {
@@ -107,9 +107,12 @@ export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedT
   } else {
     return '';
   }
+}, function (_ref10) {
+  var allowScrollBar = _ref10.allowScrollBar;
+  return allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;';
 });
-export var Image = styled.img(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref10) {
-  var size = _ref10.size;
+export var Image = styled.img(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref11) {
+  var size = _ref11.size;
   return csssize(size);
 }, borderRadius);
 export var maxAvatarCount = 6;
@@ -118,8 +121,8 @@ export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTem
 export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), token('color.text.subtlest', colors.N300), 16 / 12, ellipsis('100%'));
 export var Description = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), token('color.text', colors.N800), 18 / 12, 18 * 3);
 export var ResolvedViewIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n"])));
-export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), token('color.skeleton', colors.N30), function (_ref11) {
-  var src = _ref11.src;
+export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), token('color.skeleton', colors.N30), function (_ref12) {
+  var src = _ref12.src;
   return src;
 });
 export var UsersWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-top: 8px;\n"])));

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { extractEmbedProps } from '../../extractors/embed';
-import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
+import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
 import { extractInlineProps } from '../../extractors/inline';
 import { extractBlockProps } from '../../extractors/block';
 import { getExtensionKey } from '../../state/helpers';
@@ -115,7 +115,7 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       }
 
       var forbiddenViewProps = extractEmbedProps(data, meta, platform);
-      var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
+      var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
       var requestAccessContext = extractRequestAccessContext({
         jsonLd: cardMetadata,
         url: url,

package/dist/esm/view/EmbedCard/views/ForbiddenView.js

@@ -54,7 +54,8 @@ export var EmbedCardForbiddenView = function EmbedCardForbiddenView(_ref) {
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
     image: LockImage,
     title: "invalid_permissions",

package/dist/esm/view/EmbedCard/views/NotFoundView.js

@@ -22,7 +22,8 @@ export var EmbedCardNotFoundView = function EmbedCardNotFoundView(_ref) {
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
     image: NotFoundImage,
     title: "not_found_title",

package/dist/esm/view/EmbedCard/views/UnauthorisedView.js

@@ -29,7 +29,8 @@ export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref)
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
     image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : UnauthorisedImage,
     title: "connect_link_account_card_name",

package/dist/esm/view/EmbedCard/views/UnresolvedView.js

@@ -37,7 +37,7 @@ export var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
     css: {
       fontSize: gridSize(2.5),
       marginBottom: gridSize(1.5),
-      width: gridSize(50),
+      maxWidth: gridSize(50),
       textAlign: 'center'
     },
     "data-testid": "".concat(testId, "-unresolved-title")
@@ -50,7 +50,7 @@ export var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
       fontSize: fontSize(),
       marginBottom: gridSize(2.5),
       textAlign: 'center',
-      width: gridSize(50),
+      maxWidth: gridSize(50),
       lineHeight: gridSize(3)
     },
     "data-testid": "".concat(testId, "-unresolved-description")

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

@@ -1,5 +1,5 @@
 import { SmartLinkStatus } from '../../constants';
-import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
+import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
 import { extractRequestAccessContext } from '../../extractors/common/context';
 import { messages } from '../../messages';
 import extractFlexibleLinkContext from '../../extractors/flexible';
@@ -65,12 +65,16 @@ var getForbiddenMessageKey = function getForbiddenMessageKey(meta) {
 export var getRetryOptions = function getRetryOptions(url, status, details, onAuthorize) {
   var _details$meta, _access$action;
 
+  var data = details && details.data || getEmptyJsonLd();
+  var provider = extractProvider(data);
+  var context = provider === null || provider === void 0 ? void 0 : provider.text;
+  var values = context ? {
+    context: context
+  } : undefined;
+
   switch (status) {
     case SmartLinkStatus.Forbidden:
-      var data = details && details.data || getEmptyJsonLd();
-      var meta = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
-      var provider = extractProvider(data);
-      var context = provider === null || provider === void 0 ? void 0 : provider.text;
+      var meta = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
       var access = extractRequestAccessContext({
         jsonLd: meta,
         url: url,
@@ -78,9 +82,6 @@ export var getRetryOptions = function getRetryOptions(url, status, details, onAu
       });
       var messageKey = getForbiddenMessageKey(meta);
       var descriptor = messages[messageKey];
-      var values = context ? {
-        context: context
-      } : undefined;
       var retry = onAuthorize || (access === null || access === void 0 ? void 0 : (_access$action = access.action) === null || _access$action === void 0 ? void 0 : _access$action.promise);
       var onClick = retry ? handleOnClick(retry) : undefined;
       return {
@@ -91,8 +92,9 @@ export var getRetryOptions = function getRetryOptions(url, status, details, onAu
 
     case SmartLinkStatus.Unauthorized:
       return {
-        descriptor: messages.connect_link_account,
-        onClick: onAuthorize ? handleOnClick(onAuthorize) : undefined
+        descriptor: messages.connect_link_account_card_name,
+        onClick: onAuthorize ? handleOnClick(onAuthorize) : undefined,
+        values: values
       };
 
     case SmartLinkStatus.NotFound:

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
+import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
 import { extractInlineProps } from '../../extractors/inline';
 import { extractRequestAccessContext } from '../../extractors/common/context';
 import { CardLinkView } from '../LinkView';
@@ -89,7 +89,7 @@ export var InlineCard = function InlineCard(_ref) {
       }
 
       var providerForbidden = extractProvider(cardDetails);
-      var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
+      var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
       var requestAccessContext = extractRequestAccessContext({
         jsonLd: cardMetadata,
         url: url,

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

@@ -1,3 +1,4 @@
 import { JsonLd } from 'json-ld-types';
 export declare const getEmptyJsonLd: () => JsonLd.Data.BaseData;
 export declare const getUnauthorizedJsonLd: () => JsonLd.Response;
+export declare const getForbiddenJsonLd: () => JsonLd.Response;

package/dist/types/view/EmbedCard/components/ExpandedFrame.d.ts

@@ -19,5 +19,7 @@ export interface ExpandedFrameProps {
     testId?: string;
     /** If dimensions of the card are to be inherited from the parent */
     inheritDimensions?: boolean;
+    /** To enable scrolling in use cases where the content will not have it's own scrollbar */
+    allowScrollBar?: boolean;
 }
 export declare const ExpandedFrame: FC<ExpandedFrameProps>;

package/dist/types/view/EmbedCard/components/styled.d.ts

@@ -24,6 +24,7 @@ export declare const IconWrapper: import("@emotion/styled-base").StyledComponent
 export declare const TextWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PlaceholderProps, object>;
 export interface ContentProps {
     isInteractive: boolean;
+    allowScrollBar: boolean;
 }
 export declare const Content: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentProps, object>;
 export interface ImageProps {

package/package.json

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