@atlaskit/smart-card 23.4.2 → 23.4.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 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/version.json

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

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/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/es2019/version.json

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

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/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/esm/version.json

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

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/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/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.3",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"